fix lint errors. updates workflows

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": true,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/COMMIT_ERROR_ISSUE_TEMPLATE.md

@@ -1,7 +0,0 @@
----
-title: Build error on commit
-assignees: hobbes7878
-labels: bug
----
-
-A commit caused docs to fail to build: {{ sha }}

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,17 +1,9 @@
 ### What's in this pull request
 
-- [ ] Bug fix
-- [ ] New component/feature
-- [ ] Documentation update
-- [ ] Other
-
-### Description
-
 Tell us what this PR does or link to any related issues that describe the goal here.
 
-### Before submitting, please check that you've
+### Before submitting, please check that you've ...
 
-- [ ] Read our [contributing guide](https://github.com/reuters-graphics/graphics-components/blob/master/CONTRIBUTING.md) at some point
-- [ ] Formatted you code correctly (i.e., prettier cleaned it up)
+- [x] Read our [contributing guide](https://github.com/reuters-graphics/graphics-components/blob/master/CONTRIBUTING.md)
 - [ ] Documented any new components or features
-- [ ] Tagged an editor to review
+- [ ] Tagged an editor to review this PR

.github/docs.yaml

@@ -1,41 +0,0 @@
-name: Build docs site
-permissions:
-  contents: write
-  issues: write
-on:
-  push:
-    branches:
-      - master
-jobs:
-  build-app:
-    name: Build site
-    runs-on: ubuntu-latest
-    env:
-      TESTING: true
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16.7.0'
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install
-      - name: Config git
-        run: |
-          git config user.name github-actions
-          git config user.email github-actions@github.com
-      - name: Build docs
-        run: yarn build:docs
-      - name: Create issue on fail
-        uses: JasonEtco/create-an-issue@v2
-        if: ${{ failure() }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          filename: .github/COMMIT_ERROR_ISSUE_TEMPLATE.md
-      - name: Commit docs
-        if: ${{ success() }}
-        run: |
-          git add .
-          git commit -m "build docs"
-          git push origin

.github/workflows/chromatic.yaml

@@ -1,6 +1,9 @@
 name: Chromatic
 
-on: push
+on:
+  pull_request:
+    branches:
+      - main
 
 jobs:
   chromatic-deployment:
@@ -9,11 +12,11 @@ jobs:
       NODE_OPTIONS: '--max_old_space_size=4096'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Install dependencies
-        run: yarn
+        run: npm ci
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         with:

.github/workflows/lint.yaml

@@ -0,0 +1,34 @@
+name: Lint
+
+on:
+  pull_request:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - id: checkout
+        name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - id: setup-node
+        name: Setup Node.JS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - id: install-deps
+        name: Install dependencies
+        run: npm ci
+
+      - id: lint
+        name: Lint code
+        run: npx eslint ./src/components/

.github/workflows/release.yaml

@@ -2,100 +2,67 @@ name: Release
 
 on:
   push:
-  pull_request:
-  workflow_dispatch:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: write
+  pull-requests: write
 
 jobs:
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@v3
-
-      - id: setup-node
-        name: Setup Node.JS
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'yarn'
-
-      - id: cache
-        name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: yarn-deps-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            yarn-deps-${{ hashFiles('yarn.lock') }}
-
-      - id: install-deps
-        name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - id: lint
-        name: Lint code
-        run: yarn run eslint --fix --ext .ts,.js,.svelte src/components
-
   release:
     name: Release
     runs-on: ubuntu-latest
-    permissions:
-      contents: write
     env:
       NODE_OPTIONS: '--max_old_space_size=4096'
-    # Restricts release to:
-    #   1) pushes of release tags
-    #   2) the default branch
-    #   3) the base repository
-    if: |
-      github.event_name == 'push' && startsWith(github.ref, 'refs/tags') &&
-      endsWith(github.event.base_ref, github.event.repository.default_branch) &&
-      github.repository == 'reuters-graphics/graphics-components'
+    if: github.repository == 'reuters-graphics/graphics-components'
     steps:
       - id: checkout
         name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          ref: ${{ github.event.repository.default_branch }}
 
       - id: setup-node
         name: Setup Node.JS
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org
-          scope: '@reuters-graphics'
+          node-version: 20
+          cache: npm
 
       - id: install-deps
         name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - id: build-docs
-        name: Build docs
-        run: npm run build:docs
+        run: npm ci
 
       - id: build-package
         name: Build package
         run: npm run build:package
 
-      - id: version
-        name: Version
-        run: npm version ${{ github.ref_name }} --no-git-tag-version
-
-      - id: publish
-        name: Publish
-        run: npm publish --access public
+      - id: changesets
+        name: Create Release Pull Request or Publish to npm
+        uses: changesets/action@v1
+        with:
+          version: npm run changeset:version
+          publish: npm run changeset:publish
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - id: commit
-        name: Commit
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      
+      - id: build-docs
+        name: Build docs
+        if: steps.changesets.outputs.published == 'true'
+        run: npm run build:docs
+      
+      - id: commit_and_push
+        name: Commit and push changes
+        if: steps.changesets.outputs.published == 'true'
         run: |
-          git config --global user.name github-actions
-          git config --global user.email github-actions@github.com
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
           git add .
-          git commit -m "published ${{ github.ref_name }}"
+          git commit -m "docs"
           git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

bin/buildPackage/index.js

@@ -38,6 +38,11 @@ const prettifyImport = (filename) => {
   );
 };
 
+const formatFileName = (filename) => {
+  if (filename.endsWith('.d.ts')) return filename;
+  return filename.replace(/\.ts$/, '.js');
+};
+
 /**
  * This is a basic port of sveltekit's own packaging method:
  * https://github.com/sveltejs/kit/tree/master/packages/kit/src/packaging
@@ -79,7 +84,7 @@ const build = async () => {
       await processOther(file);
     }
     if (file === 'index.js') continue; // Always add root index last to exports...
-    pkgExports[`./${prettifyImport(file)}`] = `./dist/${file}`;
+    pkgExports[`./${prettifyImport(file)}`] = `./dist/${formatFileName(file)}`;
   }
   pkgExports['.'] = {
     types: './dist/@types/index.d.ts',

bin/newComponent/template/YourComponent/YourComponent.stories.svelte

@@ -2,7 +2,7 @@
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
   // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import YourComponent from './YourComponent.svelte';
@@ -10,7 +10,7 @@
   import { withComponentDocs } from '$docs/utils/withParams.js';
 
   // 🖼️ You can import images you need in stories directly in code!
-  // @ts-ignore
+  // @ts-ignore img
   import SharkImg from './stories/shark.jpg';
 
   const metaProps = {
@@ -26,8 +26,8 @@
 </script>
 
 <Meta
-  title='Components/YourComponent'
-  component={YourComponent}
+  title="Components/YourComponent"
+  component="{YourComponent}"
   {...metaProps}
 />
 
@@ -40,6 +40,6 @@
   args="{{
     width: 'normal',
     src: SharkImg,
-    altText: 'Duh dum! It\'s a shark!!',
+    altText: "Duh dum! It's a shark!!",
   }}"
-/>
+/>

knip.config.ts

@@ -0,0 +1,21 @@
+import type { KnipConfig } from 'knip';
+
+const config: KnipConfig = {
+  entry: ['src/index.js'],
+  project: [
+    'src/**/*.{mdx,js,jsx,ts,svelte}',
+    'bin/**/*.{js,cjs}',
+    '.storybook/**/*.{js,ts,svelte}',
+  ],
+  ignore: ['**/*.d.ts'],
+  ignoreDependencies: [
+    /@types\/.*/,
+    /@storybook\/.*/,
+    /@fortawesome\/.*/,
+    'normalize.css',
+    '@evilmartians/lefthook',
+    '@mdx-js/mdx',
+  ],
+};
+
+export default config;

package.json

@@ -15,12 +15,14 @@
   "scripts": {
     "start": "storybook dev -p 3000",
     "new": "node ./bin/newComponent/index.cjs",
-    "lint": "npx eslint --fix --ext .ts,.js,.svelte src",
-    "build:package": "node ./bin/buildPackage/index.js",
+    "lint": "npx eslint ./src/components/ --fix",
+    "build:package": "node ./bin/buildPackage/index.js && publint",
     "build:chromatic": "storybook build -o docs",
     "build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
     "build": "npm-run-all build:package build:docs",
-    "postversion": "git push origin && git push origin --tags"
+    "changeset:version": "changeset version",
+    "changeset:publish": "git add --all && changeset publish",
+    "knip": "knip"
   },
   "license": "MIT",
   "types": "./dist/@types/index.d.ts",
@@ -32,7 +34,9 @@
   },
   "devDependencies": {
     "@americanexpress/css-to-js": "^1.0.1",
+    "@changesets/cli": "^2.27.7",
     "@evilmartians/lefthook": "^1.7.14",
+    "@mdx-js/mdx": "^3.0.1",
     "@reuters-graphics/yaks-eslint": "^0.0.6",
     "@reuters-graphics/yaks-prettier": "^0.0.4",
     "@storybook/addon-actions": "^7.4.2",
@@ -56,9 +60,9 @@
     "@types/gtag.js": "^0.0.12",
     "@types/lodash-es": "^4.17.12",
     "@types/mdx": "^2.0.5",
+    "@types/node": "^22.4.2",
     "@types/proper-url-join": "^2.1.1",
     "@types/react-syntax-highlighter": "^15.5.7",
-    "auto": "^11.0.0",
     "autoprefixer": "^10.4.14",
     "change-case": "^4.1.2",
     "chromatic": "^7.1.0",
@@ -69,6 +73,7 @@
     "eslint-plugin-react": "^7.35.0",
     "fs-extra": "^11.1.1",
     "kleur": "^4.1.5",
+    "knip": "^5.27.2",
     "mermaid": "^10.3.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
@@ -76,6 +81,7 @@
     "prettier": "^3.3.3",
     "prompts": "^2.4.2",
     "prop-types": "^15.8.1",
+    "publint": "^0.2.10",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
@@ -93,32 +99,27 @@
     "vite": "^4.4.9"
   },
   "dependencies": {
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@splidejs/svelte-splide": "^0.2.9",
     "@sveltejs/svelte-scroller": "^2.0.7",
-    "classnames": "^2.3.1",
     "dayjs": "^1.11.3",
     "journalize": "^2.6.0",
     "lodash-es": "^4.17.21",
     "marked": "^4.0.8",
-    "normalize.css": "^8.0.1",
     "proper-url-join": "^2.1.1",
     "pym.js": "^1.3.2",
     "slugify": "^1.6.6",
-    "standard": "^17.1.0",
     "svelte-fa": "^2.4.0",
     "svelte-intersection-observer": "^0.10.0",
-    "svelte-search": "^2.0.1",
-    "ua-parser-js": "^0.7.27"
+    "svelte-search": "^2.0.1"
   },
   "exports": {
     "./package.json": "./package.json",
     "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
     "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
-    "./components/@types/global.ts": "./dist/components/@types/global.ts",
-    "./components/AdSlot/@types/ads.ts": "./dist/components/AdSlot/@types/ads.ts",
+    "./components/@types/global.ts": "./dist/components/@types/global.js",
+    "./components/AdSlot/@types/ads.ts": "./dist/components/AdSlot/@types/ads.js",
     "./components/AdSlot/AdScripts.svelte": "./dist/components/AdSlot/AdScripts.svelte",
     "./components/AdSlot/AdSlot.svelte": "./dist/components/AdSlot/AdSlot.svelte",
     "./components/AdSlot/InlineAd.svelte": "./dist/components/AdSlot/InlineAd.svelte",
@@ -126,15 +127,15 @@
     "./components/AdSlot/OneTrust.svelte": "./dist/components/AdSlot/OneTrust.svelte",
     "./components/AdSlot/ResponsiveAd.svelte": "./dist/components/AdSlot/ResponsiveAd.svelte",
     "./components/AdSlot/SponsorshipAd.svelte": "./dist/components/AdSlot/SponsorshipAd.svelte",
-    "./components/AdSlot/adScripts/bootstrap.ts": "./dist/components/AdSlot/adScripts/bootstrap.ts",
-    "./components/AdSlot/adScripts/getParameterByName.ts": "./dist/components/AdSlot/adScripts/getParameterByName.ts",
-    "./components/AdSlot/adScripts/ias.ts": "./dist/components/AdSlot/adScripts/ias.ts",
-    "./components/AdSlot/adScripts/loadScript.ts": "./dist/components/AdSlot/adScripts/loadScript.ts",
-    "./components/AdSlot/utils.ts": "./dist/components/AdSlot/utils.ts",
+    "./components/AdSlot/adScripts/bootstrap.ts": "./dist/components/AdSlot/adScripts/bootstrap.js",
+    "./components/AdSlot/adScripts/getParameterByName.ts": "./dist/components/AdSlot/adScripts/getParameterByName.js",
+    "./components/AdSlot/adScripts/ias.ts": "./dist/components/AdSlot/adScripts/ias.js",
+    "./components/AdSlot/adScripts/loadScript.ts": "./dist/components/AdSlot/adScripts/loadScript.js",
+    "./components/AdSlot/utils.ts": "./dist/components/AdSlot/utils.js",
     "./components/Analytics/Analytics.svelte": "./dist/components/Analytics/Analytics.svelte",
-    "./components/Analytics/providers/chartbeat.ts": "./dist/components/Analytics/providers/chartbeat.ts",
-    "./components/Analytics/providers/ga.ts": "./dist/components/Analytics/providers/ga.ts",
-    "./components/Analytics/providers/index.ts": "./dist/components/Analytics/providers/index.ts",
+    "./components/Analytics/providers/chartbeat.ts": "./dist/components/Analytics/providers/chartbeat.js",
+    "./components/Analytics/providers/ga.ts": "./dist/components/Analytics/providers/ga.js",
+    "./components/Analytics/providers/index.ts": "./dist/components/Analytics/providers/index.js",
     "./components/Article/Article.svelte": "./dist/components/Article/Article.svelte",
     "./components/BeforeAfter/BeforeAfter.svelte": "./dist/components/BeforeAfter/BeforeAfter.svelte",
     "./components/Block/Block.svelte": "./dist/components/Block/Block.svelte",
@@ -144,7 +145,7 @@
     "./components/DocumentCloud/DocumentCloud.svelte": "./dist/components/DocumentCloud/DocumentCloud.svelte",
     "./components/EmbedPreviewerLink/EmbedPreviewerLink.svelte": "./dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte",
     "./components/EndNotes/EndNotes.svelte": "./dist/components/EndNotes/EndNotes.svelte",
-    "./components/EndNotes/docProps.ts": "./dist/components/EndNotes/docProps.ts",
+    "./components/EndNotes/docProps.ts": "./dist/components/EndNotes/docProps.js",
     "./components/FeaturePhoto/FeaturePhoto.svelte": "./dist/components/FeaturePhoto/FeaturePhoto.svelte",
     "./components/Framer/Framer.svelte": "./dist/components/Framer/Framer.svelte",
     "./components/Framer/Resizer/index.svelte": "./dist/components/Framer/Resizer/index.svelte",
@@ -159,11 +160,11 @@
     "./components/HeroHeadline/Hero.svelte": "./dist/components/HeroHeadline/Hero.svelte",
     "./components/InfoBox/InfoBox.svelte": "./dist/components/InfoBox/InfoBox.svelte",
     "./components/Markdown/Markdown.svelte": "./dist/components/Markdown/Markdown.svelte",
-    "./components/Markdown/stores.ts": "./dist/components/Markdown/stores.ts",
+    "./components/Markdown/stores.ts": "./dist/components/Markdown/stores.js",
     "./components/PaddingReset/PaddingReset.svelte": "./dist/components/PaddingReset/PaddingReset.svelte",
     "./components/PhotoCarousel/PhotoCarousel.svelte": "./dist/components/PhotoCarousel/PhotoCarousel.svelte",
     "./components/PhotoPack/PhotoPack.svelte": "./dist/components/PhotoPack/PhotoPack.svelte",
-    "./components/PhotoPack/docProps.ts": "./dist/components/PhotoPack/docProps.ts",
+    "./components/PhotoPack/docProps.ts": "./dist/components/PhotoPack/docProps.js",
     "./components/PymChild/PymChild.svelte": "./dist/components/PymChild/PymChild.svelte",
     "./components/PymChild/stores": "./dist/components/PymChild/stores.js",
     "./components/ReferralBlock/ReferralBlock.svelte": "./dist/components/ReferralBlock/ReferralBlock.svelte",
@@ -176,7 +177,7 @@
     "./components/Scroller/Embedded/index.svelte": "./dist/components/Scroller/Embedded/index.svelte",
     "./components/Scroller/Foreground.svelte": "./dist/components/Scroller/Foreground.svelte",
     "./components/Scroller/Scroller.svelte": "./dist/components/Scroller/Scroller.svelte",
-    "./components/Scroller/docProps.ts": "./dist/components/Scroller/docProps.ts",
+    "./components/Scroller/docProps.ts": "./dist/components/Scroller/docProps.js",
     "./components/SearchInput/MagnifyingGlass.svelte": "./dist/components/SearchInput/MagnifyingGlass.svelte",
     "./components/SearchInput/SearchInput.svelte": "./dist/components/SearchInput/SearchInput.svelte",
     "./components/SearchInput/X.svelte": "./dist/components/SearchInput/X.svelte",
@@ -226,7 +227,7 @@
     "./components/Table/SortArrow.svelte": "./dist/components/Table/SortArrow.svelte",
     "./components/Table/Table.svelte": "./dist/components/Table/Table.svelte",
     "./components/Table/utils": "./dist/components/Table/utils.js",
-    "./components/Theme/@types/component.ts": "./dist/components/Theme/@types/component.ts",
+    "./components/Theme/@types/component.ts": "./dist/components/Theme/@types/component.js",
     "./components/Theme/Theme.svelte": "./dist/components/Theme/Theme.svelte",
     "./components/Theme/themes/common": "./dist/components/Theme/themes/common.js",
     "./components/Theme/themes/dark": "./dist/components/Theme/themes/dark.js",

src/components/AdSlot/InlineAd.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import adDocs from './stories/docs/inline.md?raw';
 
   import AdScripts from './AdScripts.svelte';
@@ -18,7 +18,7 @@
 
 <Meta title="Components/InlineAd" {...meta} />
 
-<Template let:args>
+<Template>
   <div>
     <AdScripts />
     <InlineAd />

src/components/Analytics/providers/chartbeat.ts

@@ -29,7 +29,9 @@ export default (authors: { name: string }[]) => {
 
   try {
     attachScript();
-  } catch (e) { console.warn(`Error initialising Chartbeat Analytics: ${e}`); }
+  } catch (e) {
+    console.warn(`Error initialising Chartbeat Analytics: ${e}`);
+  }
 };
 
 export const registerPageview = () => {

src/components/Analytics/providers/ga.ts

@@ -21,7 +21,8 @@ export default () => {
     if (!window.gtag) {
       attachScript();
       /** @type {Gtag.Gtag} */
-      window.gtag = function() {
+      window.gtag = function () {
+        // eslint-disable-next-line prefer-rest-params
         window.dataLayer.push(arguments);
       };
       window.gtag('js', new Date());
@@ -31,7 +32,9 @@ export default () => {
       });
       registerPageview();
     }
-  } catch (e) { console.warn(`Error initialising Google Analytics: ${e}`); }
+  } catch (e) {
+    console.warn(`Error initialising Google Analytics: ${e}`);
+  }
 };
 
 export const registerPageview = () => {

src/components/DatawrapperChart/DatawrapperChart.stories.svelte

@@ -1,9 +1,9 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import withChatterDocs from './stories/docs/withChatter.md?raw';
 
   import DatawrapperChart from './DatawrapperChart.svelte';

src/components/DatawrapperChart/DatawrapperChart.svelte

@@ -56,7 +56,6 @@
   let frameElement;
 
   $: frameFiller = (e) => {
-    /* eslint-disable */
     if (void 0 !== e.data['datawrapper-height']) {
       const t = [frameElement];
       for (const a in e.data['datawrapper-height']) {
@@ -67,7 +66,6 @@
         }
       }
     }
-    /* eslint-enable */
   };
 
   onMount(() => {
@@ -82,13 +80,7 @@
   });
 </script>
 
-<GraphicBlock
-  width="{width}"
-  textWidth="{textWidth}"
-  title="{title}"
-  description="{description}"
-  notes="{notes}"
->
+<GraphicBlock {width} {textWidth} {title} {description} {notes}>
   {#if $$slots.title}
     <!-- Custom headline and chatter slot -->
     <slot name="title" />
@@ -99,12 +91,13 @@
       bind:this="{frameElement}"
       title="{frameTitle}"
       aria-label="{ariaLabel}"
-      id="{id}"
-      src="{src}"
-      scrolling="{scrolling}"
+      {id}
+      {src}
+      {scrolling}
       frameborder="0"
       data-chromatic="ignore"
-      style="width: 0; min-width: 100% !important; border: none;"></iframe>
+      style="width: 0; min-width: 100% !important; border: none;"
+    ></iframe>
   </div>
 
   {#if $$slots.notes}

src/components/DocumentCloud/DocumentCloud.stories.svelte

@@ -1,8 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import DocumentCloud from './DocumentCloud.svelte';

src/components/DocumentCloud/DocumentCloud.svelte

@@ -30,7 +30,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block width="{width}" id="{id}" class="photo fmy-6 {cls}">
+<Block {width} {id} class="photo fmy-6 {cls}">
   <iframe
     class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"

src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';

src/components/EndNotes/EndNotes.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import EndNotes from './EndNotes.svelte';

src/components/EndNotes/docProps.ts

@@ -1,6 +1,6 @@
 interface EndNote {
-  Title: String;
-  Text: String;
+  Title: string;
+  Text: string;
 }
 
 type EndNotes = EndNote[];

src/components/FeaturePhoto/FeaturePhoto.stories.svelte

@@ -1,16 +1,16 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import quickitDocs from './stories/docs/quickit.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
 
   import FeaturePhoto from './FeaturePhoto.svelte';
 
-  // @ts-ignore
+  // @ts-ignore jpg
   import sharkSrc from './stories/shark.jpg';
 
   import {

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -90,14 +90,14 @@
   });
 </script>
 
-<Block width="{width}" class="photo fmy-6 {cls}" id="{id}">
+<Block {width} class="photo fmy-6 {cls}" {id}>
   <figure
     bind:this="{container}"
     aria-label="media"
     class="w-full flex flex-col relative"
   >
     {#if !lazy || (intersectable && intersecting)}
-      <img class="w-full my-0" src="{src}" alt="{altText}" />
+      <img class="w-full my-0" {src} alt="{altText}" />
     {:else}
       <div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
     {/if}

src/components/Framer/Framer.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import Framer from './Framer.svelte';

src/components/Framer/Framer.svelte

@@ -27,21 +27,18 @@
 
   $: embedTitles = getUniqNames(embeds);
 
-  // @ts-ignore
-  let pymParent; // eslint-disable-line no-unused-vars
-
   const reframe = (embed) => {
     // Bit of hack for handling adding query strings dynamically to embeds.
     // cf. also the value prop on the Typeahead component...
     const activeEmbed =
-      embeds.indexOf(embed) > -1
-        ? embed
-        : embeds[activeEmbedIndex] || embeds[0];
-    pymParent = new pym.Parent(
+      embeds.indexOf(embed) > -1 ?
+        embed
+      : embeds[activeEmbedIndex] || embeds[0];
+    new pym.Parent(
       'frame-parent',
-      /^http/.test(activeEmbed)
-        ? activeEmbed
-        : urljoin(window.location.origin, activeEmbed, { trailingSlash: true })
+      /^http/.test(activeEmbed) ? activeEmbed : (
+        urljoin(window.location.origin, activeEmbed, { trailingSlash: true })
+      )
     );
   };
 
@@ -107,11 +104,7 @@
   </a>
 </div>
 
-<Resizer
-  breakpoints="{breakpoints}"
-  minFrameWidth="{minFrameWidth}"
-  maxFrameWidth="{maxFrameWidth}"
-/>
+<Resizer {breakpoints} {minFrameWidth} {maxFrameWidth} />
 
 <style lang="scss">
   header {

src/components/Framer/Resizer/index.svelte

@@ -220,7 +220,9 @@
     border-radius: 4px;
     border: 1px solid grey;
     top: calc(50% - 10px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    box-shadow:
+      0 10px 20px rgba(0, 0, 0, 0.19),
+      0 6px 6px rgba(0, 0, 0, 0.23);
     &:active,
     &:focus {
       outline: none;

src/components/Framer/Typeahead/fuzzy.js

@@ -102,7 +102,7 @@ fuzzy.filter = function (pattern, arr, opts) {
   opts = opts || {};
   return (
     arr
-      .reduce(function (prev, element, idx, arr) {
+      .reduce(function (prev, element, idx, _arr) {
         let str = element;
         if (opts.extract) {
           str = opts.extract(element);

src/components/Framer/Typeahead/index.svelte

@@ -15,10 +15,10 @@
   export let extract = (item) => item;
 
   /** @type {(item: TItem) => boolean} */
-  export let disable = (item) => false;
+  export let disable = (_item) => false;
 
   /** @type {(item: TItem) => boolean} */
-  export let filter = (item) => false;
+  export let filter = (_item) => false;
 
   /** Set to `false` to prevent the first result from being selected */
   export let autoselect = true;
@@ -59,14 +59,14 @@
 
   $: options = { pre: '<mark>', post: '</mark>', extract };
   $: results =
-    value !== ''
-      ? fuzzy
-          .filter(value, data, options)
-          .filter(({ score }) => score > 0)
-          .slice(0, limit)
-          .filter((result) => !filter(result.original))
-          .map((result) => ({ ...result, disabled: disable(result.original) }))
-      : data.map((d) => ({ string: extract(d), original: d }));
+    value !== '' ?
+      fuzzy
+        .filter(value, data, options)
+        .filter(({ score }) => score > 0)
+        .slice(0, limit)
+        .filter((result) => !filter(result.original))
+        .map((result) => ({ ...result, disabled: disable(result.original) }))
+    : data.map((d) => ({ string: extract(d), original: d }));
 
   $: resultsId = results.map((result) => extract(result.original)).join('');
   $: showResults = !hideDropdown && results.length > 0 && isFocused;
@@ -132,9 +132,9 @@
   /** @type {(direction: -1 | 1) => void} */
   function change(direction) {
     let index =
-      direction === 1 && selectedIndex === results.length - 1
-        ? 0
-        : selectedIndex + direction;
+      direction === 1 && selectedIndex === results.length - 1 ?
+        0
+      : selectedIndex + direction;
     if (index < 0) index = results.length - 1;
 
     let disabled = results[index].disabled;
@@ -177,19 +177,19 @@
   id="{id}-typeahead"
 >
   <Search
-    id="{id}"
+    {id}
     removeFormAriaAttributes="{true}"
     {...$$restProps}
     bind:ref="{searchRef}"
     aria-autocomplete="list"
     aria-controls="{id}-listbox"
     aria-labelledby="{id}-label"
-    aria-activedescendant="{selectedIndex >= 0 &&
-    !hideDropdown &&
-    results.length > 0
-      ? `${id}-result-${selectedIndex}`
-      : null}"
-    bind:value="{value}"
+    aria-activedescendant="{(
+      selectedIndex >= 0 && !hideDropdown && results.length > 0
+    ) ?
+      `${id}-result-${selectedIndex}`
+    : null}"
+    bind:value
     on:type
     on:input
     on:change
@@ -259,7 +259,7 @@
             selectedIndex = index;
           }}"
         >
-          <slot result="{result}" index="{index}" value="{value}">
+          <slot {result} {index} {value}>
             {@html result.string}
           </slot>
         </li>

src/components/GraphicBlock/GraphicBlock.stories.svelte

@@ -1,15 +1,15 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import quickitDocs from './stories/docs/quickit.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import customTextDocs from './stories/docs/customText.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import ariaDocs from './stories/docs/aria.md?raw';
 
   import GraphicBlock from './GraphicBlock.svelte';
@@ -18,7 +18,7 @@
 
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  // @ts-ignore
+  // @ts-ignore img
   import PlaceholderImg from './stories/placeholder.png';
 
   const metaProps = {

src/components/GraphicBlock/GraphicBlock.svelte

@@ -73,14 +73,7 @@
   import Markdown from '../Markdown/Markdown.svelte';
 </script>
 
-<Block
-  id="{id}"
-  snap="{snap}"
-  role="{role}"
-  width="{width}"
-  ariaLabel="{ariaLabel}"
-  class="graphic fmy-6 {cls}"
->
+<Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
   {#if $$slots.title}
     <PaddingReset containerIsFluid="{width === 'fluid'}">
       <TextBlock width="{textWidth}">

src/components/GraphicBlock/TextBlock.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if width}
-  <Block width="{width}" class="notes fmy-0">
+  <Block {width} class="notes fmy-0">
     <slot />
   </Block>
 {:else}

src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte

@@ -2,11 +2,11 @@
   // svelte-ignore unused-export-let
   export let basePath = './';
   // For demo purposes only, hard-wiring img paths from Vite
-  // @ts-ignore
+  // @ts-ignore img
   import chartXs from '../imgs/ai-chart-xs.png';
-  // @ts-ignore
+  // @ts-ignore img
   import chartSm from '../imgs/ai-chart-sm.png';
-  // @ts-ignore
+  // @ts-ignore img
   import chartMd from '../imgs/ai-chart-md.png';
   let width = null;
 </script>
@@ -414,6 +414,7 @@
     </div>
   {/if}
 </div>
+
 <!-- End ai2html - 2021-09-29 12:37 -->
 
 <!-- ai file: _ai-chart.ai -->
@@ -445,8 +446,16 @@
     overflow: hidden;
   }
   #g-_ai-chart-xs p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 14px;
     height: auto;
@@ -495,8 +504,16 @@
     overflow: hidden;
   }
   #g-_ai-chart-sm p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 17px;
     height: auto;
@@ -552,8 +569,16 @@
     overflow: hidden;
   }
   #g-_ai-chart-md p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 17px;
     height: auto;

src/components/Headline/Headline.stories.svelte

@@ -1,20 +1,20 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import withBylineDocs from './stories/docs/withByline.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import withDekDocs from './stories/docs/withDek.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import customHedDocs from './stories/docs/customHed.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import withCrownImgDocs from './stories/docs/withCrownImage.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';
 
-  // @ts-ignore
+  // @ts-ignore img
   import crownImgSrc from './stories/crown.png';
   import Map from './stories/graphic.svelte';
 

src/components/Headline/Headline.svelte

@@ -74,7 +74,7 @@
 </script>
 
 <div class="headline-wrapper" style="display:contents;">
-  <Block width="{width}" class="headline text-center fmt-7 fmb-6 {cls}">
+  <Block {width} class="headline text-center fmt-7 fmb-6 {cls}">
     <header class="relative">
       {#if $$slots.crown}
         <div class="crown-container">
@@ -115,9 +115,9 @@
       {:else if authors.length > 0 || publishTime}
         <Byline
           class="fmy-4"
-          authors="{authors}"
-          publishTime="{publishTime}"
-          updateTime="{updateTime}"
+          {authors}
+          {publishTime}
+          {updateTime}
           align="center"
         />
       {/if}

src/components/Headline/stories/graphic.svelte

@@ -1,13 +1,13 @@
 <script>
-  // @ts-ignore
+  // @ts-ignore img
   import chartXs from './graphic-xs.png';
-  // @ts-ignore
+  // @ts-ignore img
   import chartSm from './graphic-sm.png';
-  // @ts-ignore
+  // @ts-ignore img
   import chartMd from './graphic-md.png';
-  // @ts-ignore
+  // @ts-ignore img
   import chartLg from './graphic-lg.png';
-  // @ts-ignore
+  // @ts-ignore img
   import chartXl from './graphic-xl.png';
 
   // export let assetsPath = './';
@@ -681,8 +681,16 @@
     overflow: hidden;
   }
   #g-graphic-xs p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 300;
     line-height: 16px;
     opacity: 1;
@@ -735,8 +743,16 @@
     overflow: hidden;
   }
   #g-graphic-sm p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 200;
     line-height: 16px;
     height: auto;
@@ -782,8 +798,16 @@
     overflow: hidden;
   }
   #g-graphic-md p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 300;
     line-height: 16px;
     opacity: 1;
@@ -836,8 +860,16 @@
     overflow: hidden;
   }
   #g-graphic-lg p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 200;
     line-height: 18px;
     height: auto;
@@ -885,8 +917,16 @@
     overflow: hidden;
   }
   #g-graphic-xl p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 200;
     line-height: 18px;
     height: auto;

src/components/HeroHeadline/Hero.stories.svelte

@@ -1,24 +1,24 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import videoDocs from './stories/docs/backgroundVideo.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import customHedDocs from './stories/docs/customHed.md?raw';
 
-  // @ts-ignore
+  // @ts-ignore img
   import polarImgSrc from './stories/polar.jpg';
-  // @ts-ignore
+  // @ts-ignore img
   import eurovisImgSrc from './stories/eurovis.jpeg';
 
   import Block from '../Block/Block.svelte';

src/components/HeroHeadline/Hero.svelte

@@ -88,7 +88,7 @@
 </script>
 
 <div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
-  <div class="hero-wrapper fmb-6" class:embedded="{embedded}">
+  <div class="hero-wrapper fmb-6" class:embedded>
     <!-- Background media hero-->
     {#if $$slots.background || img}
       <Block width="fluid" class="hero-headline background-hero fmt-0">
@@ -96,10 +96,10 @@
           <Headline
             class="{cls} !text-{hedAlign}"
             width="{hedWidth}"
-            section="{section}"
-            hedSize="{hedSize}"
-            hed="{hed}"
-            dek="{dek}"
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
           >
             <!-- Headline named slot -->
             <div slot="hed">
@@ -110,10 +110,10 @@
           <Headline
             class="{cls} !text-{hedAlign}"
             width="{hedWidth}"
-            section="{section}"
-            hedSize="{hedSize}"
-            hed="{hed}"
-            dek="{dek}"
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
           />
         {/if}
 
@@ -123,12 +123,12 @@
             <slot name="background" />
           {:else}
             <GraphicBlock
-              width="{width}"
+              {width}
               role="img"
               class="my-0"
               textWidth="normal"
-              notes="{notes}"
-              ariaDescription="{ariaDescription}"
+              {notes}
+              {ariaDescription}
             >
               <div
                 class="background-image"
@@ -148,10 +148,10 @@
             <Headline
               class="{cls} !text-{hedAlign}"
               width="{hedWidth}"
-              section="{section}"
-              hedSize="{hedSize}"
-              hed="{hed}"
-              dek="{dek}"
+              {section}
+              {hedSize}
+              {hed}
+              {dek}
             >
               <!-- Headline named slot -->
               <div slot="hed">
@@ -162,10 +162,10 @@
             <Headline
               class="{cls} !text-{hedAlign}"
               width="{hedWidth}"
-              section="{section}"
-              hedSize="{hedSize}"
-              hed="{hed}"
-              dek="{dek}"
+              {section}
+              {hedSize}
+              {hed}
+              {dek}
             />
           {/if}
         </PaddingReset>
@@ -182,12 +182,7 @@
       <!-- Custom byline/dateline -->
       <slot name="byline" />
     {:else if authors.length > 0 || publishTime}
-      <Byline
-        authors="{authors}"
-        publishTime="{publishTime}"
-        updateTime="{updateTime}"
-        align="left"
-      />
+      <Byline {authors} {publishTime} {updateTime} align="left" />
     {/if}
   </div>
 </div>

src/components/HeroHeadline/stories/graphics/crash.svelte

@@ -2,17 +2,17 @@
   // export let assetsPath = './';
   let width = null;
 
-  // @ts-ignore
+  // @ts-ignore img
   import chartXs from './CRASH_1-xs.jpeg';
-  // @ts-ignore
+  // @ts-ignore img
   import chartSm from './CRASH_1-sm.jpeg';
-  // @ts-ignore
+  // @ts-ignore img
   import chartMd from './CRASH_1-md.jpeg';
-  // @ts-ignore
+  // @ts-ignore img
   import chartLg from './CRASH_1-lg.jpeg';
-  // @ts-ignore
+  // @ts-ignore img
   import chartXl from './CRASH_1-xl.jpeg';
-  // @ts-ignore
+  // @ts-ignore img
   import chartXxl from './CRASH_1-xl_copy.jpeg';
 </script>
 
@@ -402,8 +402,16 @@
     overflow: hidden;
   }
   #g-CRASH_1-xs p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 14px;
     height: auto;
@@ -435,8 +443,16 @@
     overflow: hidden;
   }
   #g-CRASH_1-sm p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 16px;
     height: auto;
@@ -468,8 +484,16 @@
     overflow: hidden;
   }
   #g-CRASH_1-md p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 13px;
     height: auto;
@@ -501,8 +525,16 @@
     overflow: hidden;
   }
   #g-CRASH_1-lg p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 17px;
     height: auto;
@@ -538,8 +570,16 @@
     overflow: hidden;
   }
   #g-CRASH_1-xl p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 17px;
     height: auto;
@@ -576,8 +616,16 @@
     overflow: hidden;
   }
   #g-CRASH_1-xl_copy p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 18px;
     height: auto;

src/components/HeroHeadline/stories/graphics/quakemap.svelte

@@ -1,15 +1,15 @@
 <script>
   let width = null;
 
-  // @ts-ignore
+  // @ts-ignore raw
   import chartXs from './quake-map-top-xs.jpeg';
-  // @ts-ignore
+  // @ts-ignore raw
   import chartSm from './quake-map-top-sm.jpeg';
-  // @ts-ignore
+  // @ts-ignore raw
   import chartMd from '././quake-map-top-md.jpeg';
-  // @ts-ignore
+  // @ts-ignore raw
   import chartLg from '././quake-map-top-lg.jpeg';
-  // @ts-ignore
+  // @ts-ignore raw
   import chartXl from '././quake-map-top-xl.jpeg';
 </script>
 
@@ -475,8 +475,16 @@
     overflow: hidden;
   }
   #g-quake-map-top-xs p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 300;
     line-height: 14px;
     height: auto;
@@ -540,8 +548,16 @@
     overflow: hidden;
   }
   #g-quake-map-top-sm p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 300;
     line-height: 7px;
     height: auto;
@@ -604,8 +620,16 @@
     overflow: hidden;
   }
   #g-quake-map-top-md p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 300;
     line-height: 11px;
     height: auto;
@@ -677,8 +701,16 @@
     overflow: hidden;
   }
   #g-quake-map-top-lg p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 300;
     line-height: 12px;
     height: auto;
@@ -750,8 +782,16 @@
     overflow: hidden;
   }
   #g-quake-map-top-xl p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 300;
     line-height: 12px;
     height: auto;

src/components/InfoBox/InfoBox.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import InfoBox from './InfoBox.svelte';

src/components/InfoBox/InfoBox.svelte

@@ -48,8 +48,8 @@
 
 <aside class="infobox {theme}">
   <Block
-    width="{width}"
-    id="{id}"
+    {width}
+    {id}
     class="{cls} fmy-6 fpx-6 fpy-5 border border-solid rounded"
   >
     {#if $$slots.header}

src/components/Markdown/Markdown.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import Markdown from './Markdown.svelte';

src/components/PaddingReset/PaddingReset.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import PaddingReset from './PaddingReset.svelte';
@@ -30,7 +30,6 @@
   args="{{
     containerIsFluid: true,
   }}"
-  let:args
 />
 
 <style lang="scss">

src/components/PhotoCarousel/PhotoCarousel.stories.svelte

@@ -1,10 +1,9 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import customDocs from './stories/docs/withCustom.md?raw';
 
   import PhotoCarousel from './PhotoCarousel.svelte';

src/components/PhotoCarousel/PhotoCarousel.svelte

@@ -96,8 +96,9 @@
 
   let activeImageIndex = 0;
 
-  $: carouselHeight = containerWidth
-    ? Math.min(containerWidth * heightRatio, maxHeight)
+  $: carouselHeight =
+    containerWidth ?
+      Math.min(containerWidth * heightRatio, maxHeight)
     : maxHeight;
 
   const handleActiveChange = (e) => {
@@ -105,7 +106,7 @@
   };
 </script>
 
-<Block width="{width}" id="{id}" class="photo-carousel fmy-6 {cls}">
+<Block {width} {id} class="photo-carousel fmy-6 {cls}">
   <div class="carousel-container" bind:clientWidth="{containerWidth}">
     <Splide
       hasTrack="{false}"
@@ -120,7 +121,7 @@
     >
       <div class="image-container">
         <SplideTrack>
-          {#each photos as photo, i}
+          {#each photos as photo}
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
@@ -201,7 +202,10 @@
           bottom: 0;
           left: 0;
           color: white;
-          text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333,
+          text-shadow:
+            -1px -1px 0 #333,
+            1px -1px 0 #333,
+            -1px 1px 0 #333,
             1px 1px 0 #333;
           &.contain-fit {
             left: 50%;

src/components/PhotoPack/PhotoPack.stories.svelte

@@ -1,11 +1,11 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import quickitDocs from './stories/docs/quickit.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
 
   import PhotoPack from './PhotoPack.svelte';

src/components/PhotoPack/PhotoPack.svelte

@@ -89,7 +89,7 @@
   $: rows = groupRows(images, layout);
 </script>
 
-<Block width="{width}" id="{id}" class="photopack fmy-6 {cls}">
+<Block {width} {id} class="photopack fmy-6 {cls}">
   <div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
     {#each rows as row, ri}
       <div

src/components/PhotoPack/docProps.ts

@@ -33,24 +33,26 @@ export const getPhotoPackPropsFromDoc = (
     width: docBlock.Width,
     textWidth: docBlock.textWidth,
     gap:
-      docBlock.Gap && isNaN(docBlock.Gap as any) ?
-        null :
-        parseInt(docBlock.Gap),
+      docBlock.Gap && isNaN(docBlock.Gap as unknown as number) ?
+        null
+      : parseInt(docBlock.Gap),
     images: docBlock.Images.map((img) => ({
-      src: /^https?:\/\/|^\/\//i.test(img.Src) ?
-        img.Src :
-        urlJoin(assetsPath, img.Src),
+      src:
+        /^https?:\/\/|^\/\//i.test(img.Src) ?
+          img.Src
+        : urlJoin(assetsPath, img.Src),
       altText: img.AltText,
       caption: img.Caption,
       maxHeight:
-        img.MaxHeight && isNaN(img.MaxHeight as any) ?
-          null :
-          parseFloat(img.MaxHeight),
+        img.MaxHeight && isNaN(img.MaxHeight as unknown as number) ?
+          null
+        : parseFloat(img.MaxHeight),
     })),
     layouts: docBlock.Layouts.map((layout) => ({
-      breakpoint: isNaN(layout.Breakpoint as any) ?
-        null :
-        parseFloat(layout.Breakpoint),
+      breakpoint:
+        isNaN(layout.Breakpoint as unknown as number) ? null : (
+          parseFloat(layout.Breakpoint)
+        ),
       rows: layout.Rows.split(',').map((r) => parseInt(r.trim())),
     })),
   };

src/components/PymChild/PymChild.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import PymChild from './PymChild.svelte';

src/components/ReferralBlock/ReferralBlock.stories.svelte

@@ -1,9 +1,9 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import collectionDocs from './stories/docs/collection.md?raw';
 
   import ReferralBlock from './ReferralBlock.svelte';

src/components/ReferralBlock/ReferralBlock.svelte

@@ -46,7 +46,6 @@
   export { cls as class };
 
   import Block from '../Block/Block.svelte';
-  // import { referrals } from './stores.js';
 
   import { onMount } from 'svelte';
   import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
@@ -80,7 +79,7 @@
         .filter((a) => !a?.content?.third_party)
         .slice(0, number);
       referrals = articles;
-    } catch (e) {
+    } catch {
       console.warn('Unable to fetch referral links.');
     }
   });
@@ -89,7 +88,7 @@
 </script>
 
 {#if referrals.length === number}
-  <Block width="{width}" id="{id}" class="referrals-block {cls}">
+  <Block {width} {id} class="referrals-block {cls}">
     {#if heading}
       <div
         class="heading h4 font-bold"
@@ -102,7 +101,7 @@
       class="referral-container inline-flex flex-wrap w-full justify-between"
       class:stacked="{clientWidth && clientWidth < 750}"
       class:xs="{clientWidth && clientWidth < 450}"
-      bind:clientWidth="{clientWidth}"
+      bind:clientWidth
     >
       {#each referrals as referral}
         <div class="referral">

src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte

@@ -1,8 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';

src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte

@@ -18,33 +18,42 @@
 >
   <path
     d="M30.72,16.3a1.57,1.57,0,1,1-1.56-1.57A1.56,1.56,0,0,1,30.72,16.3Zm-4.8-2.74a.94.94,0,1,0,.94.94A.94.94,0,0,0,25.92,13.56Zm-1.11-3.28a1.2,1.2,0,1,0,0,2.39,1.2,1.2,0,0,0,0-2.39ZM22.87,7.79A1.11,1.11,0,1,0,24,8.9,1.11,1.11,0,0,0,22.87,7.79ZM20.43,6.31a.95.95,0,1,0,.94.94A.94.94,0,0,0,20.43,6.31ZM17.85,5.7a.8.8,0,0,0,0,1.6.8.8,0,0,0,0-1.6Zm-2.53.11a.61.61,0,0,0-.61.62.61.61,0,0,0,.61.61.61.61,0,0,0,.62-.61A.62.62,0,0,0,15.32,5.81Zm-2.2.54a.53.53,0,1,0,.53.52A.52.52,0,0,0,13.12,6.35Zm-1.88.83a.46.46,0,0,0,0,.92.46.46,0,1,0,0-.92ZM9.58,8.27a.53.53,0,1,0,.53.53A.53.53,0,0,0,9.58,8.27ZM8,9.8a.61.61,0,1,0,.61.61A.61.61,0,0,0,8,9.8Zm-1.31,2a.73.73,0,1,0,.73.73A.73.73,0,0,0,6.7,11.84Zm-.76,2.63a.77.77,0,1,0,.77.77A.77.77,0,0,0,5.94,14.47Zm0,2.68a.94.94,0,1,0,.94.94A.94.94,0,0,0,6,17.15ZM7.1,19.92a1.2,1.2,0,0,0,0,2.39,1.2,1.2,0,1,0,0-2.39Zm2,2.66a1.11,1.11,0,1,0,1.11,1.1A1.1,1.1,0,0,0,9.05,22.58Zm2.36,1.77a.94.94,0,1,0,.94.93A.94.94,0,0,0,11.41,24.35Zm2.65.95a.8.8,0,0,0,0,1.59.8.8,0,1,0,0-1.59Zm2.53.25a.61.61,0,1,0,.61.61A.61.61,0,0,0,16.59,25.55Zm2.2-.36a.53.53,0,0,0,0,1.06.53.53,0,0,0,0-1.06Zm1.88-.7a.46.46,0,0,0-.45.46.45.45,0,0,0,.45.45.46.46,0,0,0,.46-.45A.47.47,0,0,0,20.67,24.49Zm1.66-1.23a.53.53,0,0,0-.53.53.53.53,0,1,0,1.06,0A.53.53,0,0,0,22.33,23.26Zm1.57-1.69a.61.61,0,0,0,0,1.22.61.61,0,1,0,0-1.22Zm1.31-2.28a.73.73,0,0,0-.72.73.72.72,0,0,0,.72.72.73.73,0,0,0,.73-.72A.73.73,0,0,0,25.21,19.29ZM26,16.58a.77.77,0,1,0,.77.77A.76.76,0,0,0,26,16.58Zm-3-.88a.73.73,0,1,0,0,1.45.73.73,0,1,0,0-1.45Zm-2.82-.65a.41.41,0,1,0,.41.41A.41.41,0,0,0,20.15,15.05Zm-.78-2a.57.57,0,0,0-.57.57.57.57,0,1,0,.57-.57Zm-1.86-1.64a.77.77,0,0,0,0,1.54.77.77,0,1,0,0-1.54ZM15,11.16a.87.87,0,1,0,.87.87A.88.88,0,0,0,15,11.16Zm-2.13,1.21a.83.83,0,1,0,.83.83A.83.83,0,0,0,12.87,12.37Zm-1.09,2.28a.57.57,0,0,0-.56.56.56.56,0,1,0,1.12,0A.57.57,0,0,0,11.78,14.65Zm0,2.14a.41.41,0,1,0,.41.41A.41.41,0,0,0,11.82,16.79Zm.74,1.63A.58.58,0,0,0,12,19a.57.57,0,0,0,1.14,0A.58.58,0,0,0,12.56,18.42Zm1.86,1.27a.77.77,0,0,0-.77.77.78.78,0,1,0,.77-.77Zm2.51.06a.88.88,0,1,0,.87.87A.87.87,0,0,0,16.93,19.75Zm2.14-1.13a.83.83,0,0,0-.83.83.84.84,0,0,0,.83.84.85.85,0,0,0,.84-.84A.84.84,0,0,0,19.07,18.62Zm1.09-1.73a.56.56,0,1,0,.56.56A.56.56,0,0,0,20.16,16.89Zm2.44-4.12a.94.94,0,1,0,.94.94A.94.94,0,0,0,22.6,12.77ZM21,10.14a1.12,1.12,0,1,0,1.12,1.12A1.12,1.12,0,0,0,21,10.14ZM18.62,8.67a1,1,0,1,0,1,1A1,1,0,0,0,18.62,8.67ZM16,8.38a.88.88,0,1,0,.88.88A.87.87,0,0,0,16,8.38Zm-2.66.85a.66.66,0,1,0,.66.66A.66.66,0,0,0,13.3,9.23Zm-2.24,1.56a.61.61,0,1,0,.61.61A.61.61,0,0,0,11.06,10.79ZM9.54,13a.61.61,0,0,0-.61.61.62.62,0,0,0,.61.61.61.61,0,0,0,.61-.61A.61.61,0,0,0,9.54,13ZM8.9,15.46a.72.72,0,0,0-.72.72.73.73,0,0,0,.72.73.73.73,0,0,0,.73-.73A.73.73,0,0,0,8.9,15.46ZM9.28,18a.94.94,0,1,0,.93.94A.94.94,0,0,0,9.28,18Zm1.58,2.27A1.12,1.12,0,1,0,12,21.34,1.12,1.12,0,0,0,10.86,20.22Zm2.41,1.7a1,1,0,1,0,1,1A1,1,0,0,0,13.27,21.92Zm2.65.53a.89.89,0,1,0,.89.89A.89.89,0,0,0,15.92,22.45Zm2.66-.39a.66.66,0,1,0,0,1.31.66.66,0,1,0,0-1.31Zm2.24-1.45a.6.6,0,0,0-.6.61.61.61,0,1,0,.6-.61Zm1.52-2.25a.61.61,0,0,0-.61.61A.61.61,0,0,0,23,19,.61.61,0,0,0,22.34,18.36Zm6.2-7.6a1.36,1.36,0,1,0,1.35,1.36A1.35,1.35,0,0,0,28.54,10.76Zm-1.72-3.1A1.15,1.15,0,1,0,28,8.81,1.15,1.15,0,0,0,26.82,7.66ZM24.27,5.22a1,1,0,1,0,1,1A1,1,0,0,0,24.27,5.22ZM21.41,3.75a.8.8,0,1,0,.8.8A.8.8,0,0,0,21.41,3.75ZM18.6,3a.69.69,0,1,0,.69.69A.69.69,0,0,0,18.6,3ZM16,2.79a.6.6,0,1,0,.6.6A.6.6,0,0,0,16,2.79ZM13.32,3a.69.69,0,1,0,.69.69A.69.69,0,0,0,13.32,3Zm-2.82.76a.8.8,0,1,0,.81.8A.8.8,0,0,0,10.5,3.75ZM7.64,5.22a1,1,0,1,0,1,1A1,1,0,0,0,7.64,5.22ZM5.09,7.66A1.15,1.15,0,1,0,6.24,8.81,1.15,1.15,0,0,0,5.09,7.66ZM3.37,10.77a1.35,1.35,0,1,0,1.36,1.35A1.35,1.35,0,0,0,3.37,10.77Zm-.62,4A1.57,1.57,0,1,0,4.32,16.3,1.56,1.56,0,0,0,2.75,14.73Zm.63,4.39a1.35,1.35,0,1,0,1.35,1.35A1.35,1.35,0,0,0,3.38,19.12Zm1.71,3.51a1.15,1.15,0,0,0,0,2.3,1.15,1.15,0,0,0,0-2.3Zm2.55,2.76a1,1,0,1,0,1,1A1,1,0,0,0,7.64,25.39Zm2.86,1.84a.81.81,0,1,0,.81.81A.8.8,0,0,0,10.5,27.23Zm2.82,1a.7.7,0,1,0,.69.7A.69.69,0,0,0,13.32,28.21ZM16,28.6a.6.6,0,0,0-.6.6.59.59,0,0,0,.6.59.58.58,0,0,0,.59-.59A.59.59,0,0,0,16,28.6Zm2.64-.39a.7.7,0,1,0,.69.7A.7.7,0,0,0,18.6,28.21Zm2.81-1a.81.81,0,1,0,.81.8A.81.81,0,0,0,21.41,27.24Zm2.86-1.86a1,1,0,1,0,1,1A1,1,0,0,0,24.27,25.38Zm2.55-2.75A1.15,1.15,0,1,0,28,23.78,1.15,1.15,0,0,0,26.82,22.63Zm1.72-3.51a1.36,1.36,0,1,0,1.35,1.35A1.35,1.35,0,0,0,28.54,19.12Z"
-    fill="{logoColour}"></path>
+    fill="{logoColour}"
+  ></path>
   <path
     d="M49,23H46.68c-.21,0-.29-.2-.38-.38L43.58,18h-.42c-.49,0-2-.05-2.46-.08v4.67a.37.37,0,0,1-.36.38H38.45a.39.39,0,0,1-.38-.38V10.23c0-.38.23-.51.61-.56a38.87,38.87,0,0,1,4.48-.25c2.91,0,5.6,1,5.6,4.27v.18a3.64,3.64,0,0,1-2.55,3.7l3,5.06a.23.23,0,0,1,0,.15A.21.21,0,0,1,49,23Zm-2.84-9.32c0-1.41-1.1-2-3-2-.4,0-2.12,0-2.46.08v4.1c.3,0,2.13.06,2.46.06,1.94,0,3-.38,3-2Zm8.11,5.59c0,1.58.06,1.63,1.49,1.63h4.79a.38.38,0,0,1,.37.38v1.2c0,.27-.09.37-.37.4a25.07,25.07,0,0,1-4.09.26c-3.14,0-4.8,0-4.8-3.87v-6c0-3.9,1.66-3.88,4.8-3.88a26.35,26.35,0,0,1,4.09.26c.28,0,.37.14.37.4v1.21a.38.38,0,0,1-.37.38H55.75c-1.43,0-1.49,0-1.49,1.63V15h6.05a.38.38,0,0,1,.38.38v1.36a.38.38,0,0,1-.38.38H54.26ZM69.4,23.15c-3,0-5.66-1.32-5.66-5.35V9.93a.36.36,0,0,1,.38-.36H66a.36.36,0,0,1,.38.36V17.8c0,2.16,1,3.18,3,3.18s3-1,3-3.18V9.93a.36.36,0,0,1,.38-.36h1.87a.36.36,0,0,1,.38.36V17.8C75.07,21.83,72.45,23.15,69.4,23.15ZM87.51,11.76H83.74V22.63a.4.4,0,0,1-.39.38H81.48a.39.39,0,0,1-.38-.38V11.76H77.33a.35.35,0,0,1-.38-.33V9.93a.36.36,0,0,1,.38-.36H87.51a.36.36,0,0,1,.37.36v1.5A.34.34,0,0,1,87.51,11.76ZM113.19,23h-2.31c-.21,0-.28-.2-.37-.38L107.78,18h-.42c-.49,0-2-.05-2.46-.08v4.67a.37.37,0,0,1-.35.38h-1.89a.39.39,0,0,1-.38-.38V10.23c0-.38.22-.51.6-.56a38.87,38.87,0,0,1,4.48-.25c2.92,0,5.6,1,5.6,4.27v.18a3.64,3.64,0,0,1-2.55,3.7l3,5.06a.23.23,0,0,1,0,.15A.22.22,0,0,1,113.19,23Zm-2.83-9.32c0-1.41-1.11-2-3-2-.39,0-2.12,0-2.46.08v4.1c.31,0,2.14.06,2.46.06,2,0,3-.38,3-2Zm10,9.48a20.58,20.58,0,0,1-4.28-.5.41.41,0,0,1-.35-.38V20.93a.36.36,0,0,1,.35-.36h0a35.51,35.51,0,0,0,4.28.34c1.68,0,2.19-.6,2.19-1.7,0-1.42-3.38-2.2-5-2.88A3.39,3.39,0,0,1,115.38,13c0-2.08,1.67-3.59,5.19-3.59a18.93,18.93,0,0,1,4.09.49.38.38,0,0,1,.34.36v1.4a.32.32,0,0,1-.32.34h0a41.56,41.56,0,0,0-4.19-.34c-1.4,0-2.45.49-2.45,1.34,0,.62.71,1.19,1.55,1.53l3.2,1.26c1.59.65,2.62,1.59,2.62,3.4S124.19,23.17,120.41,23.17Zm-28-3.89c0,1.58.06,1.63,1.49,1.63h4.79a.38.38,0,0,1,.38.38v1.2c0,.27-.1.37-.38.4a25.07,25.07,0,0,1-4.09.26c-3.14,0-4.8,0-4.8-3.87v-6c0-3.9,1.66-3.88,4.8-3.88a26.35,26.35,0,0,1,4.09.26c.28,0,.38.14.38.4v1.21a.38.38,0,0,1-.38.38H93.93c-1.43,0-1.49,0-1.49,1.63V15h6a.38.38,0,0,1,.38.38v1.36a.38.38,0,0,1-.38.38h-6Z"
-    fill="{primaryTextColour}"></path>
+    fill="{primaryTextColour}"
+  ></path>
   <g>
     <path
       d="M139.13,9.65a9.7,9.7,0,0,1,3.77.64l-.17.92a10.21,10.21,0,0,0-3.52-.6c-3.43,0-5.51,2.16-5.51,5.7s2,5.7,5.41,5.7a12.38,12.38,0,0,0,2.66-.31V17.14h1.06v5.28a13.27,13.27,0,0,1-3.74.52c-4.18,0-6.49-2.78-6.49-6.63S135,9.65,139.13,9.65Z"
-      fill="{secondaryTextColour}"></path>
+      fill="{secondaryTextColour}"
+    ></path>
     <path
       d="M151.69,17l3.75,5.67h-1.25l-3.67-5.59h-3.66v5.59h-1.1V9.88h5.06c2.68,0,4,1.58,4,3.6A3.57,3.57,0,0,1,151.69,17Zm-1-6.25h-3.85v5.43h3.85a2.66,2.66,0,0,0,3-2.74C153.67,11.81,152.63,10.79,150.71,10.79Z"
-      fill="{secondaryTextColour}"></path>
+      fill="{secondaryTextColour}"
+    ></path>
     <path
       d="M161.74,9.88h1.2l4.81,12.83h-1.09l-1.35-3.66h-6L158,22.71h-1.1Zm-2.06,8.22H165l-2.64-7.33Z"
-      fill="{secondaryTextColour}"></path>
+      fill="{secondaryTextColour}"
+    ></path>
     <path
       d="M169.84,9.88h4.83a3.59,3.59,0,0,1,3.93,3.7,3.63,3.63,0,0,1-3.93,3.7h-3.74v5.43h-1.09Zm4.73,6.47a2.62,2.62,0,0,0,2.91-2.77,2.65,2.65,0,0,0-2.93-2.79h-3.62v5.56Z"
-      fill="{secondaryTextColour}"></path>
+      fill="{secondaryTextColour}"
+    ></path>
     <path
       d="M180.89,9.88H182v5.76h7.28V9.88h1.12V22.71h-1.12V16.62H182v6.09h-1.1Z"
-      fill="{secondaryTextColour}"></path>
+      fill="{secondaryTextColour}"
+    ></path>
     <path d="M193.76,9.88h1.1V22.71h-1.1Z" fill="{secondaryTextColour}"></path>
     <path
       d="M203.91,9.65a9.26,9.26,0,0,1,3.35.6l-.17.9a9.38,9.38,0,0,0-3-.54c-3.37,0-5.41,2.18-5.41,5.68s2,5.68,5.41,5.68a9.38,9.38,0,0,0,3-.54l.17.91a9.26,9.26,0,0,1-3.35.6c-4,0-6.35-2.68-6.35-6.65S199.92,9.65,203.91,9.65Z"
-      fill="{secondaryTextColour}"></path>
+      fill="{secondaryTextColour}"
+    ></path>
     <path
       d="M213.43,22.94A12.07,12.07,0,0,1,209,22l.27-.9a10.81,10.81,0,0,0,4.16.94c2,0,3.35-.81,3.35-2.46s-1.22-2.31-3.68-2.95c-3-.77-4.14-1.91-4.14-3.62,0-2.27,1.68-3.35,4.51-3.35a9.32,9.32,0,0,1,3.94.83l-.21.9a9.43,9.43,0,0,0-3.73-.82c-2.16,0-3.41.61-3.41,2.38,0,1.56,1.11,2.1,3.44,2.78,2.62.75,4.38,1.5,4.38,3.77S216.16,22.94,213.43,22.94Z"
-      fill="{secondaryTextColour}"></path>
+      fill="{secondaryTextColour}"
+    ></path>
   </g>
 </svg>
 

src/components/ReutersLogo/ReutersLogo.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import ReutersLogo from './ReutersLogo.svelte';

src/components/SEO/SEO.stories.svelte

@@ -1,9 +1,9 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import quickitDocs from './stories/docs/quickit.md?raw';
 
   import SEO from './SEO.svelte';

src/components/Scroller/Embedded/index.svelte

@@ -15,19 +15,11 @@
 {#each steps as step, index}
   <!-- Background first -->
   {#if embeddedLayout === 'bf'}
-    <Background
-      step="{step}"
-      index="{index}"
-      backgroundWidth="{backgroundWidth}"
-    />
-    <Foreground step="{step}" index="{index}" />
+    <Background {step} {index} {backgroundWidth} />
+    <Foreground {step} {index} />
     <!-- Foreground first, default -->
   {:else}
-    <Foreground step="{step}" index="{index}" />
-    <Background
-      step="{step}"
-      index="{index}"
-      backgroundWidth="{backgroundWidth}"
-    />
+    <Foreground {step} {index} />
+    <Background {step} {index} {backgroundWidth} />
   {/if}
 {/each}

src/components/Scroller/Scroller.stories.svelte

@@ -1,13 +1,13 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import interactiveDocs from './stories/docs/interactive.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import quickitDocs from './stories/docs/quickit.md?raw';
 
   import Scroller from './Scroller.svelte';

src/components/Scroller/Scroller.svelte

@@ -94,7 +94,7 @@
   let cls: string = '';
   export { cls as class };
 
-  // @ts-ignore
+  // @ts-ignore no types
   import SvelteScroller from '@sveltejs/svelte-scroller';
   import Background from './Background.svelte';
   import Foreground from './Foreground.svelte';
@@ -108,15 +108,15 @@
 </script>
 
 {#if !embedded}
-  <Block width="fluid" class="scroller-container fmy-6 {cls}" id="{id}">
+  <Block width="fluid" class="scroller-container fmy-6 {cls}" {id}>
     <SvelteScroller
-      bind:index="{index}"
-      bind:offset="{offset}"
-      bind:progress="{progress}"
-      threshold="{threshold}"
-      top="{top}"
-      bottom="{bottom}"
-      parallax="{parallax}"
+      bind:index
+      bind:offset
+      bind:progress
+      {threshold}
+      {top}
+      {bottom}
+      {parallax}
       query="div.step-foreground-container"
     >
       <div
@@ -132,28 +132,19 @@
             class="background-container step-{index +
               1} my-0 min-h-screen flex justify-center items-center relative"
           >
-            <Background
-              index="{index}"
-              steps="{steps}"
-              preload="{preload}"
-              stackBackground="{stackBackground}"
-            />
+            <Background {index} {steps} {preload} {stackBackground} />
           </Block>
         </div>
       </div>
 
       <div slot="foreground" class="foreground {foregroundPosition} w-full">
-        <Foreground steps="{steps}" />
+        <Foreground {steps} />
       </div>
     </SvelteScroller>
   </Block>
 {:else}
-  <Block width="widest" class="scroller-container embedded" id="{id}">
-    <Embedded
-      steps="{steps}"
-      embeddedLayout="{embeddedLayout}"
-      backgroundWidth="{backgroundWidth}"
-    />
+  <Block width="widest" class="scroller-container embedded" {id}>
+    <Embedded {steps} {embeddedLayout} {backgroundWidth} />
   </Block>
 {/if}
 

src/components/Scroller/docProps.ts

@@ -14,19 +14,24 @@ interface Block {
   StackBackground?: string;
   EmbeddedLayout?: string;
   ID?: string;
-  Steps: BlockStep[],
+  Steps: BlockStep[];
 }
 
 interface AiCharts {
-  [key: string]: ComponentType,
+  [key: string]: ComponentType;
 }
 
-export const getScrollerPropsFromDoc = (docBlock: Block, aiCharts: AiCharts, assetsPath: string = '') => {
+export const getScrollerPropsFromDoc = (
+  docBlock: Block,
+  aiCharts: AiCharts,
+  assetsPath: string = ''
+) => {
   return {
     id: docBlock.ID,
     backgroundWidth: docBlock.Width,
     foregroundPosition: docBlock.ForegroundPosition,
-    stackBackground: docBlock.StackBackground === 'true' || !docBlock.StackBackground,
+    stackBackground:
+      docBlock.StackBackground === 'true' || !docBlock.StackBackground,
     embeddedLayout: docBlock.EmbeddedLayout,
     preload: docBlock.Preload ? parseInt(docBlock.Preload) || 1 : 1,
     steps: docBlock.Steps.map((step) => ({

src/components/Scroller/stories/components/ai2svelte/ai-scroller-1.svelte

@@ -1,14 +1,14 @@
 <script>
   // Hard-coding for demo purposes only...
-  // @ts-ignore
+  // @ts-ignore img
   import stepXl from './images/step-1-xl.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepLg from './images/step-1-lg.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepMd from './images/step-1-md.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepSm from './images/step-1-sm.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepXs from './images/step-1-xs.png';
   let width;
 </script>
@@ -77,6 +77,7 @@
     </div>
   {/if}
 </div>
+
 <!-- End ai2html - 2021-09-30 14:21 -->
 
 <!-- ai file: step-1.ai -->

src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte

@@ -1,14 +1,14 @@
 <script>
   // Hard-coding for demo purposes only...
-  // @ts-ignore
+  // @ts-ignore img
   import stepXl from './images/step-2-xl.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepLg from './images/step-2-lg.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepMd from './images/step-2-md.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepSm from './images/step-2-sm.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepXs from './images/step-2-xs.png';
   let width = null;
 </script>
@@ -145,8 +145,16 @@
     overflow: hidden;
   }
   #g-step-2-xl p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;
@@ -170,8 +178,16 @@
     overflow: hidden;
   }
   #g-step-2-lg p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;
@@ -195,8 +211,16 @@
     overflow: hidden;
   }
   #g-step-2-md p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;
@@ -220,8 +244,16 @@
     overflow: hidden;
   }
   #g-step-2-sm p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;
@@ -245,8 +277,16 @@
     overflow: hidden;
   }
   #g-step-2-xs p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;

src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte

@@ -1,14 +1,14 @@
 <script>
   // Hard-coding for demo purposes only...
-  // @ts-ignore
+  // @ts-ignore img
   import stepXl from './images/step-3-xl.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepLg from './images/step-3-lg.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepMd from './images/step-3-md.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepSm from './images/step-3-sm.png';
-  // @ts-ignore
+  // @ts-ignore img
   import stepXs from './images/step-3-xs.png';
   let width = null;
 </script>
@@ -145,8 +145,16 @@
     overflow: hidden;
   }
   #g-step-3-xl p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;
@@ -170,8 +178,16 @@
     overflow: hidden;
   }
   #g-step-3-lg p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;
@@ -195,8 +211,16 @@
     overflow: hidden;
   }
   #g-step-3-md p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;
@@ -220,8 +244,16 @@
     overflow: hidden;
   }
   #g-step-3-sm p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;
@@ -245,8 +277,16 @@
     overflow: hidden;
   }
   #g-step-3-xs p {
-    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
     font-weight: 400;
     line-height: 20px;
     height: auto;

src/components/SearchInput/SearchInput.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import SearchInput from './SearchInput.svelte';

src/components/SearchInput/SearchInput.svelte

@@ -26,7 +26,7 @@
   }
 </script>
 
-<div class="search relative inline-flex items-center" class:active="{active}">
+<div class="search relative inline-flex items-center" class:active>
   <div class="search--icon absolute">
     <MagnifyingGlass />
   </div>
@@ -36,7 +36,7 @@
     type="text"
     placeholder="{searchPlaceholder}"
     on:input="{input}"
-    bind:value="{value}"
+    bind:value
   />
   <div
     class="search--x absolute"

src/components/SimpleTimeline/SimpleTimeline.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import SimpleTimeline from './SimpleTimeline.svelte';

src/components/SimpleTimeline/SimpleTimeline.svelte

@@ -42,7 +42,7 @@
   import Markdown from '../Markdown/Markdown.svelte';
 </script>
 
-<Block width="normal" id="{id}" class="simple-timeline-container fmy-6 {cls}">
+<Block width="normal" {id} class="simple-timeline-container fmy-6 {cls}">
   <div class="timeline pl-2 pr-3.5" style="--symbol-colour:{symbolColour};">
     {#each dates as date}
       <div class="date relative pt-0.5 pl-5 pb-4">
@@ -53,7 +53,8 @@
             r="5"
             stroke="{symbolColour}"
             stroke-width="2"
-            fill="transparent"></circle>
+            fill="transparent"
+          ></circle>
         </svg>
         <div
           class="timeline-date font-note text-xs uppercase font-black tracking-wide fmb-0"

src/components/SiteFooter/Referrals/IntersectionObserver.svelte

@@ -41,5 +41,5 @@
 </script>
 
 <div bind:this="{container}">
-  <slot intersecting="{intersecting}" />
+  <slot {intersecting} />
 </div>

src/components/SiteFooter/Referrals/index.svelte

@@ -12,7 +12,7 @@
         <a href="https://graphics.reuters.com/">More from Reuters Graphics</a>
       </h2>
       {#if typeof window !== 'undefined'}
-        <Referrals referrals="{referrals}" />
+        <Referrals {referrals} />
       {/if}
     </section>
   {/if}

src/components/SiteFooter/SiteFooter.stories.svelte

@@ -1,13 +1,13 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import darkThemeDocs from './stories/docs/darkTheme.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import customReferralsDocs from './stories/docs/customReferrals.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import removeReferralsDocs from './stories/docs/removeReferrals.md?raw';
 
   import SiteFooter from './SiteFooter.svelte';

src/components/SiteFooter/SiteFooter.svelte

@@ -60,7 +60,7 @@
 >
   <div>
     {#if includeReferrals}
-      <Referrals referrals="{referrals}" />
+      <Referrals {referrals} />
     {/if}
     <QuickLinks links="{data[0]}" />
     <CompanyLinks links="{data[0]}" />

src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte

@@ -7,12 +7,12 @@
   export let headingText;
 
   $: splitCount =
-    section.children && section.children.length > 7
-      ? Math.ceil(section.children.length / 2)
-      : 0;
+    section.children && section.children.length > 7 ?
+      Math.ceil(section.children.length / 2)
+    : 0;
 </script>
 
-<NavDropdown headingText="{headingText}">
+<NavDropdown {headingText}>
   <a href="{normalizeUrl(section.url)}">
     <span class="heading">
       Browse {section.name}

src/components/SiteHeader/NavBar/NavDropdown/index.svelte

@@ -64,7 +64,7 @@
               {#each stories as story}
                 <li class="story-item">
                   <StoryCard
-                    story="{story}"
+                    {story}
                     withSection="{$activeSection === 'more'}"
                   />
                 </li>

src/components/SiteHeader/NavBar/index.svelte

@@ -70,7 +70,7 @@
             </div>
             {#if $activeSection === section.id}
               <SectionDropdown
-                section="{section}"
+                {section}
                 headingText="{`Latest in ${section.name}`}"
               />
             {/if}

src/components/SiteHeader/SiteHeader.stories.svelte

@@ -1,9 +1,9 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import darkThemeDocs from './stories/docs/darkTheme.md?raw';
 
   import SiteHeader from './SiteHeader.svelte';

src/components/SiteHeader/SiteHeader.svelte

@@ -63,7 +63,7 @@
               </a>
             </div>
           </div>
-          <NavBar sections="{sections}" />
+          <NavBar {sections} />
           <!-- Space takes the place of the MyViewMenu, NavSearchBar & Account components... -->
           <div class="spacer-container">
             <div class="spacer"></div>
@@ -93,7 +93,7 @@
 </header>
 
 <MobileMenu
-  isMobileMenuOpen="{isMobileMenuOpen}"
+  {isMobileMenuOpen}
   releaseMobileMenu="{() => {
     isMobileMenuOpen = false;
   }}"

src/components/SiteHeader/svgs/Close.svelte

@@ -6,7 +6,8 @@
   xmlns="http://www.w3.org/2000/svg"
   ><path
     d="M.322.313a1.056 1.056 0 0 1 1.5 0l5.679 5.53L13.18.313a1.056 1.056 0 0 1 1.5 0 .993.993 0 0 1-.001 1.461l-5.88 5.725 5.88 5.727c.397.388.426.956.085 1.369l-.086.092a1.056 1.056 0 0 1-1.5 0l-5.679-5.53-5.679 5.53a1.056 1.056 0 0 1-1.5 0 .993.993 0 0 1 .001-1.461L6.2 7.5.322 1.774C-.076 1.386-.105.818.236.405L.322.313Z"
-    fill-rule="evenodd"></path></svg
+    fill-rule="evenodd"
+  ></path></svg
 >
 
 <style lang="scss">

src/components/SiteHeadline/SiteHeadline.stories.svelte

@@ -1,7 +1,7 @@
 <script context="module">
   import SiteHeadline from './SiteHeadline.svelte';
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   export const meta = {
@@ -20,7 +20,7 @@
 <script>
   import { Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import quickitDocs from './stories/docs/quickit.md?raw';
 
   import { withStoryDocs } from '$lib/docs/utils/withParams.js';

src/components/SiteHeadline/SiteHeadline.svelte

@@ -70,7 +70,7 @@
   }
 </script>
 
-<Block id="{id}" class="headline-container fmt-7 fmb-6 {cls}" width="normal">
+<Block {id} class="headline-container fmt-7 fmb-6 {cls}" width="normal">
   <header class="headline">
     <div class="title">
       {#if section}
@@ -92,10 +92,6 @@
         </h1>
       {/if}
     </div>
-    <Byline
-      authors="{authors}"
-      publishTime="{publishTime}"
-      updateTime="{updateTime}"
-    />
+    <Byline {authors} {publishTime} {updateTime} />
   </header>
 </Block>

src/components/Spinner/Spinner.stories.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import Spinner from './Spinner.svelte';

src/components/Table/Table.stories.svelte

@@ -1,33 +1,31 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import metadataDocs from './stories/docs/metadata.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import truncateDocs from './stories/docs/truncate.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import paginateDocs from './stories/docs/paginate.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import searchDocs from './stories/docs/search.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import filterDocs from './stories/docs/filter.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import bothDocs from './stories/docs/both.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import sortDocs from './stories/docs/sort.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import formatDocs from './stories/docs/format.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import styleDocs from './stories/docs/style.md?raw';
 
   import Table from './Table.svelte';
 
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
-  // @ts-ignore
   import pressFreedom from './stories/pressFreedom.json';
   import homeRuns from './stories/homeRuns.json';
   import richestWomen from './stories/richestWomen.json';

src/components/Table/Table.svelte

@@ -149,16 +149,15 @@
   let filterValue = '';
   $: filteredData = filterArray(data, searchText, filterField, filterValue);
   $: sortedData = sortArray(filteredData, sortField, sortDirection);
-  $: currentPageData = truncated
-    ? showAll
-      ? sortedData
+  $: currentPageData =
+    truncated ?
+      showAll ? sortedData
       : sortedData.slice(0, truncateLength + 1)
-    : paginated
-    ? paginateArray(sortedData, pageSize, pageNumber)
+    : paginated ? paginateArray(sortedData, pageSize, pageNumber)
     : sortedData;
 
   //* * Handle show all, search, filter, sort and pagination events */
-  function toggleTruncate(event) {
+  function toggleTruncate(_event) {
     showAll = !showAll;
   }
 
@@ -204,6 +203,7 @@
 
   /** Boot it up. */
   onMount(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data.forEach((d: any) => {
       // Compose the string we will allow users to search
       d.searchStr = includedFields
@@ -214,7 +214,7 @@
   });
 </script>
 
-<Block width="{width}" id="{id}" class="fmy-6 {cls}">
+<Block {width} {id} class="fmy-6 {cls}">
   <article class="table-wrapper">
     {#if title || dek || searchable || filterList}
       <header class="table--header w-full">
@@ -238,7 +238,7 @@
             {#if searchable}
               <div class="table--header--search">
                 <SearchInput
-                  bind:searchPlaceholder="{searchPlaceholder}"
+                  bind:searchPlaceholder
                   on:search="{handleSearchInput}"
                 />
               </div>
@@ -250,7 +250,7 @@
     <section class="table w-full">
       <table
         class="w-full"
-        class:paginated="{paginated}"
+        class:paginated
         class:truncated="{truncated &&
           !showAll &&
           data.length > truncateLength}"
@@ -275,7 +275,7 @@
                 {#if sortable && sortableFields.includes(field)}
                   <div class="table--thead--sortarrow fml-1 avoid-clicks">
                     <SortArrow
-                      bind:sortDirection="{sortDirection}"
+                      bind:sortDirection
                       active="{sortField === field}"
                     />
                   </div>
@@ -344,8 +344,8 @@
     {/if}
     {#if paginated}
       <Pagination
-        bind:pageNumber="{pageNumber}"
-        bind:pageSize="{pageSize}"
+        bind:pageNumber
+        bind:pageSize
         bind:pageLength="{currentPageData.length}"
         bind:n="{sortedData.length}"
       />{/if}

src/components/Theme/@types/component.ts

@@ -6,25 +6,25 @@ interface Colour {
   'brand-logo': string;
   'brand-rules': string;
   'brand-shadow': string;
-};
+}
 
 interface FontFamily {
-  'serif': string,
-  'sans-serif': string,
-  'monospace': string,
-  hed: string,
-  subhed: string,
-  body: string,
-  note: string,
+  serif: string;
+  'sans-serif': string;
+  monospace: string;
+  hed: string;
+  subhed: string;
+  body: string;
+  note: string;
 }
 
 interface FontSize {
-  'xxs': string;
-  'xs': string;
-  'sm': string;
-  'base': string;
-  'lg': string;
-  'xl': string;
+  xxs: string;
+  xs: string;
+  sm: string;
+  base: string;
+  lg: string;
+  xl: string;
   '2xl': string;
   '3xl': string;
   '4xl': string;
@@ -45,7 +45,7 @@ interface CustomFont {
 export interface Theme {
   colour: Colour;
   font: Font;
-};
+}
 
 export interface CustomTheme {
   colour?: Partial<Colour>;

src/components/Theme/Theme.stories.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import customiseDocs from './stories/docs/customise.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import customiseFontDocs from './stories/docs/customise-font.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import patternDocs from './stories/docs/pattern.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import inheritanceDocs from './stories/docs/inheritance.md?raw';
 
   import ThemedPage from './stories/ThemedPage.svelte';

src/components/Theme/utils/flatten.js

@@ -21,9 +21,8 @@ export default function flatten(target) {
       const isbuffer = isBuffer(value);
       const isObject = type === '[object Object]' || type === '[object Array]';
 
-      const newKey = prev
-        ? prev + delimiter + transformKey(key)
-        : transformKey(key);
+      const newKey =
+        prev ? prev + delimiter + transformKey(key) : transformKey(key);
 
       if (!isArray && !isbuffer && isObject && Object.keys(value).length) {
         return step(value, newKey, currentDepth + 1);

src/components/ToolsHeader/ToolsHeader.stories.svelte

@@ -1,8 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // Don't lose the "?raw" in markdown imports!
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
   import ToolsHeader from './ToolsHeader.svelte';

src/components/ToolsHeader/ToolsHeader.svelte

@@ -40,10 +40,10 @@
 </script>
 
 <header
-  id="{id}"
+  {id}
   class="{cls}"
-  class:sticky="{sticky}"
-  style:background="{background}"
+  class:sticky
+  style:background
   style:border-bottom="{borderBottom}"
 >
   <div class="logo-container">

src/components/Video/Controls.svelte

@@ -30,17 +30,19 @@
   on:click="{forwardBtnClick}"
   style="
     opacity: {controlsOpacity};
-    top: {controlsPosition === 'top left' || controlsPosition === 'top right'
-    ? `${10}px`
-    : controlsPosition === 'center'
-    ? `${(heightVideoContainer - controlsBorderOffset) / 2}px`
-    : `${heightVideoContainer - controlsBorderOffset}px`};
+    top: {controlsPosition === 'top left' || controlsPosition === 'top right' ?
+    `${10}px`
+  : controlsPosition === 'center' ?
+    `${(heightVideoContainer - controlsBorderOffset) / 2}px`
+  : `${heightVideoContainer - controlsBorderOffset}px`};
 
-    left: {controlsPosition === 'top left' || controlsPosition === 'bottom left'
-    ? `${10}px`
-    : controlsPosition === 'center'
-    ? `${(widthVideoContainer - controlsBorderOffset) / 2}px`
-    : `${widthVideoContainer - controlsBorderOffset}px`};
+    left: {(
+    controlsPosition === 'top left' || controlsPosition === 'bottom left'
+  ) ?
+    `${10}px`
+  : controlsPosition === 'center' ?
+    `${(widthVideoContainer - controlsBorderOffset) / 2}px`
+  : `${widthVideoContainer - controlsBorderOffset}px`};
     "
 >
   {#if resetCondition}

src/components/Video/Video.stories.svelte

@@ -1,18 +1,18 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import playAndLoopDocs from './stories/docs/playAndLoop.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import controlsDocs from './stories/docs/controls.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   // import withSoundDocs from './stories/docs/withSound.md?raw';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import SilentVideo from './stories/videos/silent-video.mp4';
-  // @ts-ignore
+  // @ts-ignore raw
   import SoundVideo from './stories/videos/sound-video.mp4';
 
   import Video from './Video.svelte';

src/components/Video/Video.svelte

@@ -169,11 +169,11 @@
 />
 
 <GraphicBlock
-  textWidth="{textWidth}"
-  title="{title}"
-  description="{description}"
-  notes="{notes}"
-  width="{width}"
+  {textWidth}
+  {title}
+  {description}
+  {notes}
+  {width}
   class="video {cls}"
 >
   <div
@@ -199,8 +199,8 @@
       {#if playVideoWhenInView}
         <!-- Video element with Intersection Observer -->
         <IntersectionObserver
-          element="{element}"
-          bind:intersecting="{intersecting}"
+          {element}
+          bind:intersecting
           threshold="{playVideoThreshold}"
           once="{false}"
         >
@@ -215,24 +215,28 @@
               {#if showControls}
                 <Controls
                   on:pausePlayEvent="{pausePlayEvent}"
-                  paused="{paused}"
-                  clickedOnPauseBtn="{clickedOnPauseBtn}"
-                  controlsOpacity="{hoverToSeeControls
-                    ? interactiveControlsOpacity
-                    : controlsOpacity}"
-                  controlsPosition="{controlsPosition}"
-                  widthVideoContainer="{widthVideoContainer}"
-                  heightVideoContainer="{heightVideoContainer}"
-                  controlsBorderOffset="{controlsBorderOffset}"
-                  resetCondition="{resetCondition}"
-                  separateReplayIcon="{separateReplayIcon}"
-                  controlsColour="{controlsColour}"
+                  {paused}
+                  {clickedOnPauseBtn}
+                  controlsOpacity="{hoverToSeeControls ?
+                    interactiveControlsOpacity
+                  : controlsOpacity}"
+                  {controlsPosition}
+                  {widthVideoContainer}
+                  {heightVideoContainer}
+                  {controlsBorderOffset}
+                  {resetCondition}
+                  {separateReplayIcon}
+                  {controlsColour}
                 />
               {:else}
                 <button
                   class="border-0 m-0 p-0 bg-transparent absolute"
                   on:click="{() => {
-                    paused === true ? (paused = false) : (paused = true);
+                    if (paused === true) {
+                      paused = false;
+                    } else {
+                      paused = true;
+                    }
                   }}"
                   style="top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
                 ></button>
@@ -240,8 +244,8 @@
             {/if}
             <video
               bind:this="{videoElement}"
-              src="{src}"
-              poster="{poster}"
+              {src}
+              {poster}
               class="pointer-events-none relative"
               width="100%"
               muted="{muteVideo}"
@@ -249,8 +253,8 @@
               preload="{preloadVideo}"
               loop="{loopVideo}"
               bind:currentTime="{time}"
-              bind:duration="{duration}"
-              bind:paused="{paused}"
+              bind:duration
+              bind:paused
               bind:clientWidth="{widthVideo}"
               bind:clientHeight="{heightVideo}"
             >
@@ -270,22 +274,26 @@
             {#if showControls}
               <Controls
                 on:pausePlayEvent="{pausePlayEvent}"
-                paused="{paused}"
-                clickedOnPauseBtn="{clickedOnPauseBtn}"
-                controlsOpacity="{controlsOpacity}"
-                controlsPosition="{controlsPosition}"
-                widthVideoContainer="{widthVideoContainer}"
-                heightVideoContainer="{heightVideoContainer}"
-                controlsBorderOffset="{controlsBorderOffset}"
-                resetCondition="{resetCondition}"
-                separateReplayIcon="{separateReplayIcon}"
-                controlsColour="{controlsColour}"
+                {paused}
+                {clickedOnPauseBtn}
+                {controlsOpacity}
+                {controlsPosition}
+                {widthVideoContainer}
+                {heightVideoContainer}
+                {controlsBorderOffset}
+                {resetCondition}
+                {separateReplayIcon}
+                {controlsColour}
               />
             {:else}
               <button
                 class="border-0 m-0 p-0 bg-transparent absolute"
                 on:click="{() => {
-                  paused === true ? (paused = false) : (paused = true);
+                  if (paused === true) {
+                    paused = false;
+                  } else {
+                    paused = true;
+                  }
                 }}"
                 style="top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
               ></button>
@@ -293,8 +301,8 @@
           {/if}
           <video
             bind:this="{videoElement}"
-            src="{src}"
-            poster="{poster}"
+            {src}
+            {poster}
             class="pointer-events-none relative"
             width="100%"
             muted="{muteVideo}"
@@ -302,8 +310,8 @@
             preload="{preloadVideo}"
             loop="{loopVideo}"
             bind:currentTime="{time}"
-            bind:duration="{duration}"
-            bind:paused="{paused}"
+            bind:duration
+            bind:paused
             autoplay
             bind:clientWidth="{widthVideo}"
             bind:clientHeight="{heightVideo}"

src/components/Visible/Visible.stories.svelte

@@ -1,9 +1,9 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  // @ts-ignore
+  // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
+  // @ts-ignore raw
   import defaultSnippet from './stories/snippets/default.svelte?raw';
 
   import Visible from './Visible.svelte';

src/components/Visible/Visible.svelte

@@ -57,5 +57,5 @@
 
 <div bind:this="{container}">
   <!-- An element or component -->
-  <slot visible="{visible}" />
+  <slot {visible} />
 </div>

src/scss/reset/_normalize.scss

@@ -198,6 +198,7 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
+  appearance: button;
   -webkit-appearance: button;
 }