lots

.devcontainer/devcontainer.json

@@ -1,5 +0,0 @@
-{
-  "name": "Node.js",
-  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-20",
-  "postCreateCommand": "npm install"
-}

.prettierignore

@@ -1,3 +1,4 @@
 docs
 dist
-node_modules
+node_modules
+!src/docs/

.storybook/main.ts

@@ -4,14 +4,13 @@ import remarkGfm from 'remark-gfm';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
   addons: [
+    '@storybook/addon-svelte-csf',
     '@storybook/addon-links',
     '@storybook/addon-actions',
     '@storybook/addon-viewport',
     {
       name: '@storybook/addon-docs',
       options: {
-        csfPluginOptions: null,
-        jsxOptions: {},
         mdxPluginOptions: {
           mdxCompileOptions: {
             remarkPlugins: [remarkGfm],
@@ -25,12 +24,12 @@ const config: StorybookConfig = {
     '@storybook/addon-measure',
     '@storybook/addon-outline',
     '@storybook/addon-interactions',
-    '@storybook/addon-svelte-csf',
+    '@chromatic-com/storybook',
   ],
   framework: '@storybook/svelte-vite',
-  core: { disableTelemetry: true },
+  core: {
-  docs: {
+    disableTelemetry: true,
-    autodocs: true,
   },
+  docs: {},
 };
 export default config;

.storybook/preview.ts

@@ -79,3 +79,4 @@ export const parameters = {
 };
 
 export const decorators = [() => Wrapper];
+export const tags = ['autodocs'];

bin/preprocess/index.js

@@ -1,28 +0,0 @@
-import autoprefixer from 'autoprefixer';
-import preprocess from 'svelte-preprocess';
-
-export const scss = {
-  includePaths: ['src/', 'node_modules/bootstrap/scss/'],
-  importer: [
-    (url) => {
-      if (/^\$lib/.test(url)) {
-        return { file: `src/${url.replace('$lib', '')}` };
-      }
-      // Redirect tilde-prefixed imports to node_modules
-      if (/^~/.test(url)) {
-        return { file: `node_modules/${url.replace('~', '')}` };
-      }
-      return null;
-    },
-  ],
-  quietDeps: true,
-};
-
-export const sveltePreprocess = preprocess({
-  preserve: ['ld+json'],
-  typescript: true,
-  scss,
-  postcss: {
-    plugins: [autoprefixer],
-  },
-});

eslint.config.js

@@ -1,12 +1,13 @@
 import { svelte } from '@reuters-graphics/yaks-eslint';
 import reactPlugin from 'eslint-plugin-react';
+import * as mdx from 'eslint-plugin-mdx';
 
 /**
  * @type {import("eslint").Linter.Config[]}
  */
 export default [
   {
-    files: ['src/**/*.{js,ts,svelte,jsx,tsx}', '.storybook/**/*'],
+    files: ['src/**/*.{js,ts,svelte,jsx,tsx,mdx}', '.storybook/**/*'],
   },
   {
     ignores: [
@@ -31,4 +32,18 @@ export default [
       ],
     },
   },
+  {
+    ...mdx.flat,
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: true,
+    }),
+  },
+  {
+    ...mdx.flatCodeBlocks,
+    rules: {
+      ...mdx.flatCodeBlocks.rules,
+      'no-undef': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
 ];

package.json

@@ -38,26 +38,27 @@
   "devDependencies": {
     "@americanexpress/css-to-js": "^1.0.1",
     "@changesets/cli": "^2.27.7",
+    "@chromatic-com/storybook": "^1.7.0",
     "@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",
+    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-docs": "^7.4.2",
+    "@storybook/addon-docs": "^8.2.9",
-    "@storybook/addon-essentials": "^7.4.2",
+    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^7.4.2",
+    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^7.4.2",
+    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-mdx-gfm": "^7.4.2",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
-    "@storybook/addon-svelte-csf": "^4.0.7",
+    "@storybook/addon-svelte-csf": "^4.1.5",
-    "@storybook/blocks": "^7.4.2",
+    "@storybook/blocks": "^8.2.9",
-    "@storybook/builder-vite": "^7.4.2",
+    "@storybook/builder-vite": "^8.2.9",
-    "@storybook/manager-api": "^7.4.2",
+    "@storybook/components": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/svelte": "^7.4.2",
+    "@storybook/svelte": "^8.2.9",
-    "@storybook/svelte-vite": "^7.4.2",
+    "@storybook/svelte-vite": "^8.2.9",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/test": "^8.2.9",
-    "@storybook/theming": "^7.4.2",
+    "@storybook/theming": "^8.2.9",
-    "@sveltejs/vite-plugin-svelte": "^2.4.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@types/eslint": "^9.6.0",
     "@types/google-publisher-tag": "^1.20240219.0",
     "@types/gtag.js": "^0.0.12",
@@ -73,14 +74,15 @@
     "css-color-converter": "^2.0.0",
     "deep-object-diff": "^1.1.9",
     "eslint": "^9.9.0",
+    "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-react": "^7.35.0",
     "fs-extra": "^11.1.1",
     "kleur": "^4.1.5",
     "knip": "^5.27.2",
-    "mermaid": "^10.3.0",
+    "mermaid": "^10.9.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.41",
-    "postcss-load-config": "^4.0.1",
+    "postcss-load-config": "^6.0.1",
     "prettier": "^3.3.3",
     "prompts": "^2.4.2",
     "prop-types": "^15.8.1",
@@ -89,17 +91,17 @@
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.0",
-    "sass": "^1.65.1",
+    "sass": "^1.77.8",
-    "storybook": "^7.4.2",
+    "storybook": "^8.2.9",
-    "svelte": "^4.2.8",
+    "svelte": "^4.2.18",
-    "svelte-loader": "^3.1.9",
+    "svelte-loader": "^3.2.3",
-    "svelte-preprocess": "^5.1.3",
+    "svelte-preprocess": "^6.0.2",
     "svelte2tsx": "^0.6.27",
     "tiny-glob": "^0.2.9",
     "typescript": "^5.5.4",
-    "vite": "^4.4.9"
+    "vite": "^5.4.2"
   },
   "dependencies": {
     "@fortawesome/free-regular-svg-icons": "^5.15.3",

src/actions/cssVariables/cssVariables.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../docs/utils/docsPage.js';
 
 <Meta title="Actions/cssVariables" parameters={{ ...parameters }} />
 

src/actions/resizeObserver/resizeObserver.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../docs/utils/docsPage.js';
 
 <Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
 

src/components/AdSlot/InlineAd.stories.svelte

@@ -1,5 +1,5 @@
-<script>
+<script lang="ts">
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+  import { Template, Story, Meta } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore raw
   import adDocs from './stories/docs/inline.md?raw';
@@ -7,10 +7,9 @@
   import AdScripts from './AdScripts.svelte';
   import InlineAd from './InlineAd.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs } from '../../docs/utils/withParams.js';
 
   const meta = {
-    title: 'Components/InlineAd',
     component: InlineAd,
     ...withComponentDocs(adDocs),
   };

src/components/AdSlot/InlineAd.svelte

@@ -1,7 +1,7 @@
 <!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
-  import { InlineAd } from './@types/ads';
+  import type { InlineAd } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
 
   /** Add an ID to target with SCSS. */

src/components/AdSlot/LeaderboardAd.stories.svelte

@@ -10,7 +10,6 @@
   import { withComponentDocs } from '$docs/utils/withParams.js';
 
   const meta = {
-    title: 'Components/LeaderboardAd',
     component: LeaderboardAd,
     ...withComponentDocs(adDocs),
   };

src/components/AdSlot/LeaderboardAd.svelte

@@ -1,6 +1,6 @@
 <!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
 <script lang="ts">
-  import { LeaderboardAd } from './@types/ads';
+  import type { LeaderboardAd } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
   import { onMount } from 'svelte';
 

src/components/AdSlot/SponsorshipAd.stories.svelte

@@ -10,7 +10,6 @@
   import { withComponentDocs } from '$docs/utils/withParams.js';
 
   const meta = {
-    title: 'Components/SponsorshipAd',
     component: SponsorshipAd,
     ...withComponentDocs(adDocs),
   };

src/components/AdSlot/SponsorshipAd.svelte

@@ -1,7 +1,7 @@
 <!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
-  import { SponsorshipAd } from './@types/ads';
+  import type { SponsorshipAd } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
 
   /** Add an ID to target with SCSS. */

src/components/BeforeAfter/BeforeAfter.svelte

@@ -261,13 +261,11 @@
     }
     .overlay-container {
       position: absolute;
-      :global {
+      :global(:first-child) {
-        &:first-child {
+        margin-top: 0;
-          margin-top: 0;
+      }
-        }
+      :global(:last-child) {
-        &:last-child {
+        margin-bottom: 0;
-          margin-bottom: 0;
-        }
       }
       &.before {
         left: 0;
@@ -336,10 +334,8 @@
   }
 
   aside.before-after-caption {
-    :global {
+    :global(p) {
-      p {
+      @include body-caption;
-        @include body-caption;
-      }
     }
   }
 </style>

src/components/BeforeAfter/stories/docs/ariaDescriptions.md

@@ -32,5 +32,4 @@ Use text elements in your overlays as [ARIA descriptions](https://developer.mozi
       }
     }
   </style>
-</BeforeAfter>
 ```

src/components/Block/Block.stories.svelte

@@ -11,7 +11,10 @@
   import Block from './Block.svelte';
   import Article from '../Article/Article.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '../../docs/utils/withParams.js';
 
   const metaProps = {
     ...withComponentDocs(componentDocs),

src/components/BodyText/BodyText.stories.svelte

@@ -120,51 +120,63 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
       &:before {
         content: 'H2';
         @include heading-tag;
-        font-size: 22px;
+        & {
+          font-size: 22px;
+        }
       }
-    }
+      h3 {
-    h3 {
+        position: relative;
-      position: relative;
+        &:before {
-      &:before {
+          content: 'H3';
-        content: 'H3';
+          @include heading-tag;
-        @include heading-tag;
+          & {
-        font-size: 19px;
+            font-size: 19px;
+          }
+        }
       }
-    }
+      h4 {
-    h4 {
+        position: relative;
-      position: relative;
+        &:before {
-      &:before {
+          content: 'H4';
-        content: 'H4';
+          @include heading-tag;
-        @include heading-tag;
+          & {
-        font-size: 16px;
+            font-size: 16px;
+          }
+        }
       }
-    }
+      h5 {
-    h5 {
+        position: relative;
-      position: relative;
+        &:before {
-      &:before {
+          content: 'H5';
-        content: 'H5';
+          @include heading-tag;
-        @include heading-tag;
+          & {
-        font-size: 15px;
+            font-size: 15px;
+          }
+        }
       }
-    }
+      h6 {
-    h6 {
+        position: relative;
-      position: relative;
+        &:before {
-      &:before {
+          content: 'H6';
-        content: 'H6';
+          @include heading-tag;
-        @include heading-tag;
+          & {
-        font-size: 12px;
+            font-size: 12px;
+          }
+        }
       }
-    }
+      blockquote {
-    blockquote {
+        position: relative;
-      position: relative;
+        &:before {
-      &:before {
+          @include heading-tag;
-        @include heading-tag;
+          & {
-        content: '“';
+            content: '“';
-        font-size: 3rem;
+            font-size: 3rem;
-        line-height: 3rem;
+            line-height: 3rem;
-      }
+          }
-      blockquote:before {
+        }
-        display: none;
+        blockquote:before {
+          display: none;
+        }
       }
     }
   }

src/components/Headline/Headline.svelte

@@ -1,6 +1,6 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
 <script lang="ts">
-  import { HeadlineSize } from '../@types/global';
+  import type { HeadlineSize } from './../@types/global';
 
   /**
    * Headline, parsed as an _inline_ markdown string in an `h1` element.
@@ -52,7 +52,7 @@
   import Byline from '../Byline/Byline.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
 
-  let hedClass;
+  let hedClass: string;
   $: {
     switch (hedSize) {
       case 'biggest':

src/components/HeroHeadline/Hero.svelte

@@ -1,6 +1,6 @@
 <!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
 <script lang="ts">
-  import { HeadlineSize } from '../@types/global';
+  import type { HeadlineSize } from '../@types/global';
 
   /** Set to true for embeddables. */
   export let embedded: boolean = false;

src/components/PhotoCarousel/PhotoCarousel.svelte

@@ -84,6 +84,7 @@
   import Block from '../Block/Block.svelte';
   import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
   import '@splidejs/svelte-splide/css/core';
+  // @ts-ignore no types
   import Fa from 'svelte-fa/src/fa.svelte';
   import {
     faChevronLeft,
@@ -92,7 +93,7 @@
   import { fly } from 'svelte/transition';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 
-  let containerWidth;
+  let containerWidth: number;
 
   let activeImageIndex = 0;
 
@@ -214,78 +215,72 @@
         }
       }
     }
-    :global {
+    :global(.splide) {
-      .splide {
+      max-height: 100%;
-        max-height: 100%;
+    }
-      }
+    :global(li) {
-
+      padding: 0;
-      li {
+    }
-        padding: 0;
+    :global(.splide__arrows) {
-      }
+      width: 275px;
-
+      margin: 0 auto;
-      .splide__arrows {
+      display: flex;
-        width: 275px;
+      justify-content: space-between;
-        margin: 0 auto;
+    }
-        display: flex;
+    :global(.splide__arrows button) {
-        justify-content: space-between;
+      display: flex;
-
+      font-size: 14px;
-        button {
+      height: 30px;
-          &.splide__arrow--prev {
+      width: 30px;
-            padding-right: 7px;
+      justify-content: center;
-          }
+      align-items: center;
-          &.splide__arrow--next {
+      border: 1px solid transparent;
-            padding-left: 7px;
+      border-radius: 50%;
-          }
+      background-color: transparent;
-
+      cursor: pointer;
-          display: flex;
+      @include text-secondary;
-          font-size: 14px;
+      opacity: 0.4;
-          height: 30px;
+    }
-          width: 30px;
+    :global(.splide__arrows button.splide__arrow--prev) {
-          justify-content: center;
+      padding-right: 7px;
-          align-items: center;
+    }
-          border: 1px solid transparent;
+    :global(.splide__arrows button.splide__arrow--next) {
-          border-radius: 50%;
+      padding-left: 7px;
-          background-color: transparent;
+    }
-          cursor: pointer;
+    :global(.splide__arrows button:hover) {
-          @include text-secondary;
+      opacity: 1;
-          opacity: 0.4;
+      border-color: $theme-colour-text-secondary;
-          &:hover {
+      @include text-secondary;
-            opacity: 1;
+    }
-            border-color: $theme-colour-text-secondary;
+    :global(.splide__arrows button:disabled) {
-            @include text-secondary;
+      opacity: 0.4;
-          }
+    }
-          &:disabled {
+    :global(.splide__arrows button:disabled:hover) {
-            opacity: 0.4;
+      border-color: transparent;
-            &:hover {
+    }
-              border-color: transparent;
+    :global(ul.splide__pagination) {
-            }
+      width: 200px;
-          }
+      padding: 0;
-        }
+      text-align: center;
-      }
+      margin: -26px auto 0;
-      ul.splide__pagination {
+      display: flex;
-        width: 200px;
+      flex-wrap: nowrap;
-        padding: 0;
+    }
-        text-align: center;
+    :global(ul.splide__pagination li) {
-        margin: -26px auto 0;
+      flex-grow: 1;
-        display: flex;
+      margin-top: -9px;
-        flex-wrap: nowrap;
+    }
-        li {
+    :global(ul.splide__pagination li button) {
-          flex-grow: 1;
+      width: 100%;
-          margin-top: -9px;
+      height: 7px;
-          button {
+      border-radius: 0;
-            width: 100%;
+      padding: 0;
-            height: 7px;
+      border: 1px solid $theme-colour-background;
-            border-radius: 0;
+      background: $theme-colour-text-secondary;
-            padding: 0;
+      opacity: 0.4;
-            border: 1px solid $theme-colour-background;
+    }
-            background: $theme-colour-text-secondary;
+    :global(ul.splide__pagination li button.is-active) {
-            opacity: 0.4;
+      opacity: 1;
-            &.is-active {
-              opacity: 1;
-            }
-          }
-        }
-      }
     }
   }
 </style>

src/components/PhotoPack/stories/docs/component.md

@@ -34,10 +34,10 @@ The `PhotoPack` component makes simple photo grids with custom layouts at whatev
 `layouts` describe how those images will be laid out in rows at different breakpoints. The default layout (mobile-first) is each photo on its own row, stacked vertically, but you can group photos into `rows` above a `breakpoint` by specifying the number of photos that should go in that row. For example:
 
 ```javascript
-{
+const layouts = [{
   breakpoint: 450,
   rows: [1,2,1],
-}
+}];
 ```
 
 ... tells the component that when the `PhotoPack` container is 450 pixels or wider, it should group the 4 photos in 3 rows, 1 in the first, 2 in the second and 1 in the last.

src/components/Table/stories/docs/metadata.md

@@ -1,9 +1,14 @@
 Set the `title`, `dek`, `notes` and `source` options to add supporting metadata above and below the table.
 
 ```svelte
-<Table data="{yourData}" title="{'Career home run leaders'}" dek="{'In baseball,
+<Table 
+  data="{yourData}"
+  title="{'Career home run leaders'}"
+  dek="{`In baseball,
 a home run (also known as a "dinger" or "tater") occurs when a batter hits the
 ball over the outfield fence. When a home run is hit, the batter and any runners
-on base are able to score.'}" notes="{'Note: As of Opening Day 2023'}"
+on base are able to score.`}" 
-source="{'Source: Baseball Reference'}" />
+  notes="{'Note: As of Opening Day 2023'}"
+  source="{'Source: Baseball Reference'}"
+/>
 ```

src/components/Theme/Theme.stories.svelte

@@ -17,12 +17,12 @@
 
   import Theme, { themes } from './Theme.svelte';
 
-  import Headline from '../Headline/Headline.svelte';
+  import Headline from './../Headline/Headline.svelte';
 
   import {
     withComponentDocs,
     withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
+  } from '../../docs/utils/withParams.js';
 
   const metaProps = {
     ...withComponentDocs(componentDocs),

src/docs/actions/intro.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Actions/Intro" parameters={{ ...parameters }} />
 

src/docs/contributing/component-guidelines.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 <Meta
   title="Contributing/Component guidelines"
@@ -83,13 +83,13 @@ Using some future syntax like [optional chaining](https://developer.mozilla.org/
 So instead of...
 
 ```javascript
-myObject?.myOptionalProp;
+const prop = myObject?.myOptionalProp;
 ```
 
 ...unfortunately, use something old-fashioned like...
 
 ```javascript
-myObject.myOptionalProp ? myObject.myOptionalProp : null;
+const prop = myObject.myOptionalProp ? myObject.myOptionalProp : null;
 ```
 
 If your component docs still aren't working, check if you're using other future-JS sytax, for now.

src/docs/contributing/quickstart.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Contributing/Quickstart" parameters={{ ...parameters }} />
 

src/docs/contributing/story-recipes/basic-story.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../utils/docsPage.js';
 
 <Meta
   title="Contributing/Recipes: Basic story"

src/docs/contributing/story-recipes/story-with-custom-controls.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../utils/docsPage.js';
 
 <Meta
   title="Contributing/Recipes: Story with custom controls"

src/docs/contributing/story-recipes/story-with-custom-docs.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../utils/docsPage.js';
 
 import SourceCodeImg from './source-code.png';
 

src/docs/contributing/story-recipes/story-with-media.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../utils/docsPage.js';
 
 <Meta
   title="Contributing/Recipes: Story with media"

src/docs/contributing/writing-component-stories.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Contributing/Writing stories" parameters={{ ...parameters }} />
 

src/docs/contributing/writing-docs-stories.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Contributing/Writing docs pages" parameters={{ ...parameters }} />
 

src/docs/guides/customising-with-scss.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 import startImg from './imgs/scss-start.png';
 import highlightImg from './imgs/scss-highlight.png';
@@ -19,8 +19,10 @@ import winningImg from './imgs/scss-winning.png';
 
 One of the most powerful ways to customise components isn't props or, even, Svelte.
 
-<p class="sbdocs-p">
+<p className="sbdocs-p">
-  <span class="highlight bold">It's SCSS and your web inspector!</span>
+  <span className="highlight bold">
+    It&rsquo;s SCSS and your web inspector!
+  </span>
 </p>
 
 ## How's that??
@@ -29,13 +31,13 @@ Let's say you wanted to change our `BeforeAfter` component. You want the text ov
 
 <img src={startImg} width="600" />
 
-The first thing you should do is <span class="highlight">check out the elements you want to change in your web inspector</span> and see if CSS can make the change you want.
+The first thing you should do is <span className="highlight">check out the elements you want to change in your web inspector</span> and see if CSS can make the change you want.
 
 <img src={highlightImg} width="300" style={{ margin: '0 0 1rem' }} />
 
 <img src={inspectorImg} width="100%" />
 
-In our case, we want to change the absolute position of those elements. To test that'll actually work, we can <span class="highlight">try it directly in the inspector first!</span>
+In our case, we want to change the absolute position of those elements. To test that'll actually work, we can <span className="highlight">try it directly in the inspector first!</span>
 
 <img src={changeImg} width="500" style={{ margin: '0 0 1rem' }} />
 
@@ -47,7 +49,7 @@ First, let's look at the class of the style rule we changed in the inspector:
 
 `figure.before-after-container.s-khJY-w4TYkp5 .overlay-container.before.s-khJY-w4TYkp5`
 
-One thing we always need to do is <span class="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
+One thing we always need to do is <span className="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
 
 That leaves us with:
 
@@ -55,7 +57,7 @@ That leaves us with:
 
 But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific without those class names we stripped.
 
-The easiest way to make sure your style rule wins out is to <span class="highlight">add an ID either directly to the element or to a parent</span>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
+The easiest way to make sure your style rule wins out is to <span className="highlight">add an ID either directly to the element or to a parent</span>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
 
 ```scss
 figure#my-before-after .overlay-container {
@@ -81,7 +83,7 @@ div#my-before-after figure .overlay-container {
 }
 ```
 
-We can <span class="highlight">confirm the new style rule is winning by looking at its order back in our web inspector!</span>
+We can <span className="highlight">confirm the new style rule is winning by looking at its order back in our web inspector!</span>
 
 <img src={winningImg} width="500" style={{ margin: '0 0 1rem' }} />
 

src/docs/guides/getting-help.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Guides/Getting help" parameters={{ ...parameters }} />
 

src/docs/guides/google-docs.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Guides/Using with Google docs" parameters={{ ...parameters }} />
 
@@ -55,18 +55,19 @@ Now we can tie that data into your blocks loop like this:
 </script>
 
 {#each content.blocks as block}
-  <!-- ... -->
+  {#if block.Type}
-
+    <!-- ... -->
   {:else if block.Type === 'profile-card'}
     <ProfileCard
       name="{block.Name}"
-      img={`${assets}/${block.Image}`}
+      img="{`${assets}/${block.Image}`}"
-      birthday={new Date(block.Birthday)}
+      birthday="{new Date(block.Birthday)}"
       bio="{block.Bio}"
-      isStaff={block.Staff === 'true'}
+      isStaff="{block.Staff === 'true'}"
     />
 
-  <!-- ... -->
+    <!-- ... -->
+  {/if}
 {/each}
 ```
 

src/docs/guides/graphics-kit.mdx

@@ -1,7 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
-
-import quickitImg from './imgs/quickit.png';
 
 <Meta
   title="Guides/Using with the Graphics Kit"
@@ -16,7 +14,7 @@ If you haven't, check out ["Using Reuters Graphics Components" in the Graphics K
 
 ## Quickit
 
-Look <span class="highlight">for <strong>🚀 QUICKIT</strong> stories</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
+Look <span className="highlight">for <strong>🚀 QUICKIT</strong> stories</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
 include easy copy/paste snippets as well as Google Doc block examples that should
 shortcut getting a component working in the Graphics Kit.
 

src/docs/guides/using-docs.mdx

@@ -1,12 +1,11 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 import storiesImg from './imgs/stories.png';
 import introImg from './imgs/intro.png';
 import argsImg from './imgs/argstable.png';
 import frameImg from './imgs/frame.png';
 import copyImg from './imgs/copy-code.png';
-import propImg from './imgs/prop.png';
 import moreStoriesImg from './imgs/more-stories.png';
 
 <Meta title="Guides/Using these docs" parameters={{ ...parameters }} />
@@ -38,7 +37,7 @@ Next is a **frame** that shows how the component looks. Each story will have its
 
 <img src={frameImg} width="650" style={{ margin: '0 0 2rem' }} />
 
-Below the story frame is an **args table**. <span class="highlight bold">This is the most important part of every component's page.</span> The args table documents all the [props](https://learn.svelte.dev/tutorial/declaring-props) and [slots](https://learn.svelte.dev/tutorial/slots) a component has, i.e., all the ways you can customise it.
+Below the story frame is an **args table**. <span className="highlight bold">This is the most important part of every component&rsquo;s page.</span> The args table documents all the [props](https://learn.svelte.dev/tutorial/declaring-props) and [slots](https://learn.svelte.dev/tutorial/slots) a component has, i.e., all the ways you can customise it.
 
 <img src={argsImg} width="100%" style={{ margin: '0 0 2rem', maxWidth: 800 }} />
 

src/docs/intro.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from './utils/docsPage.js';
 
 <Meta title="Intro" parameters={{ ...parameters }} />
 
@@ -9,18 +9,11 @@ import { parameters } from '$docs/utils/docsPage.js';
 
 <p>
   <a href="https://www.npmjs.com/package/@reuters-graphics/graphics-components">
-    <img
+    <img src="https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg" alt="npm version" style={{ display: 'inline-block', margin: '0 5px 0 0' }} />
-      src="https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg"
-      alt="npm version"
-      style={{ display: 'inline-block', margin: '0 5px 0 0' }}
-    />
   </a>
+
   <a href="https://github.com/reuters-graphics/graphics-components">
-    <img
+    <img src="https://badgen.net/badge/icon/GitHub?icon=github&label" alt="GitHub" style={{ display: 'inline-block', margin: '0 5px 0 0' }} />
-      src="https://badgen.net/badge/icon/GitHub?icon=github&label"
-      alt="GitHub"
-      style={{ display: 'inline-block', margin: '0 5px 0 0' }}
-    />
   </a>
 </p>
 

src/docs/layout/intro.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 import WellImg from './article-well.jpg';
 

src/docs/styles/colours/intro.mdx

@@ -1,7 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../utils/docsPage.js';
-import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
-import { extractCssColourVariables } from '../../utils/parseCss';
 
 <Meta title="Styles/Colours/Intro" parameters={{ ...parameters }} />
 

src/docs/styles/colours/primary.mdx

@@ -1,73 +1,29 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../utils/docsPage.js';
 import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
 import { extractCssColourVariables } from '../../utils/parseCss';
-
+import greyScheme from '../../../scss/colours/primary/_grey.scss?raw';
-{/* @ts-ignore */}
+import slateScheme from '../../../scss/colours/primary/_slate.scss?raw';
-import greyScheme from '$lib/scss/colours/primary/\_grey.scss?raw';
+import zincScheme from '../../../scss/colours/primary/_zinc.scss?raw';
-
+import neutralScheme from '../../../scss/colours/primary/_neutral.scss?raw';
-{/* @ts-ignore */}
+import stoneScheme from '../../../scss/colours/primary/_stone.scss?raw';
-import slateScheme from '$lib/scss/colours/primary/\_slate.scss?raw';
+import redScheme from '../../../scss/colours/primary/_red.scss?raw';
-
+import orangeScheme from '../../../scss/colours/primary/_orange.scss?raw';
-{/* @ts-ignore */}
+import amberScheme from '../../../scss/colours/primary/_amber.scss?raw';
-import zincScheme from '$lib/scss/colours/primary/\_zinc.scss?raw';
+import yellowScheme from '../../../scss/colours/primary/_yellow.scss?raw';
-
+import limeScheme from '../../../scss/colours/primary/_lime.scss?raw';
-{/* @ts-ignore */}
+import greenScheme from '../../../scss/colours/primary/_green.scss?raw';
-import neutralScheme from '$lib/scss/colours/primary/\_neutral.scss?raw';
+import emeraldScheme from '../../../scss/colours/primary/_emerald.scss?raw';
-
+import tealScheme from '../../../scss/colours/primary/_teal.scss?raw';
-{/* @ts-ignore */}
+import cyanScheme from '../../../scss/colours/primary/_cyan.scss?raw';
-import stoneScheme from '$lib/scss/colours/primary/\_stone.scss?raw';
+import skyScheme from '../../../scss/colours/primary/_sky.scss?raw';
-
+import blueScheme from '../../../scss/colours/primary/_blue.scss?raw';
-{/* @ts-ignore */}
+import indigoScheme from '../../../scss/colours/primary/_indigo.scss?raw';
-import redScheme from '$lib/scss/colours/primary/\_red.scss?raw';
+import violetScheme from '../../../scss/colours/primary/_violet.scss?raw';
-
+import purpleScheme from '../../../scss/colours/primary/_purple.scss?raw';
-{/* @ts-ignore */}
+import fuchsiaScheme from '../../../scss/colours/primary/_fuchsia.scss?raw';
-import orangeScheme from '$lib/scss/colours/primary/\_orange.scss?raw';
+import pinkScheme from '../../../scss/colours/primary/_pink.scss?raw';
-
+import roseScheme from '../../../scss/colours/primary/_rose.scss?raw';
-{/* @ts-ignore */}
-import amberScheme from '$lib/scss/colours/primary/\_amber.scss?raw';
-
-{/* @ts-ignore */}
-import yellowScheme from '$lib/scss/colours/primary/\_yellow.scss?raw';
-
-{/* @ts-ignore */}
-import limeScheme from '$lib/scss/colours/primary/\_lime.scss?raw';
-
-{/* @ts-ignore */}
-import greenScheme from '$lib/scss/colours/primary/\_green.scss?raw';
-
-{/* @ts-ignore */}
-import emeraldScheme from '$lib/scss/colours/primary/\_emerald.scss?raw';
-
-{/* @ts-ignore */}
-import tealScheme from '$lib/scss/colours/primary/\_teal.scss?raw';
-
-{/* @ts-ignore */}
-import cyanScheme from '$lib/scss/colours/primary/\_cyan.scss?raw';
-
-{/* @ts-ignore */}
-import skyScheme from '$lib/scss/colours/primary/\_sky.scss?raw';
-
-{/* @ts-ignore */}
-import blueScheme from '$lib/scss/colours/primary/\_blue.scss?raw';
-
-{/* @ts-ignore */}
-import indigoScheme from '$lib/scss/colours/primary/\_indigo.scss?raw';
-
-{/* @ts-ignore */}
-import violetScheme from '$lib/scss/colours/primary/\_violet.scss?raw';
-
-{/* @ts-ignore */}
-import purpleScheme from '$lib/scss/colours/primary/\_purple.scss?raw';
-
-{/* @ts-ignore */}
-import fuchsiaScheme from '$lib/scss/colours/primary/\_fuchsia.scss?raw';
-
-{/* @ts-ignore */}
-import pinkScheme from '$lib/scss/colours/primary/\_pink.scss?raw';
-
-{/* @ts-ignore */}
-import roseScheme from '$lib/scss/colours/primary/\_rose.scss?raw';
 
 <Meta title="Styles/Colours/Primary" parameters={{ ...parameters }} />
 

src/docs/styles/colours/thematic.mdx

@@ -1,13 +1,10 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../utils/docsPage.js';
 import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
 import { extractCssColourVariables } from '../../utils/parseCss';
 
-{/* @ts-ignore */}
+import trScheme from '../../../scss/colours/thematic/_tr.scss?raw';
-import trScheme from '$lib/scss/colours/thematic/\_tr.scss?raw';
+import nordScheme from '../../../scss/colours/thematic/_nord.scss?raw';
-
-{/* @ts-ignore */}
-import nordScheme from '$lib/scss/colours/thematic/\_nord.scss?raw';
 
 <Meta title="Styles/Colours/Thematic" parameters={{ ...parameters }} />
 

src/docs/styles/intro.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from './../utils/docsPage.js';
 
 <Meta title="Styles/Intro" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/accessibility/main.mdx

@@ -1,10 +1,9 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
 
-{/* @ts-ignore */}
+import visibilityStyles from '../../../../scss/tokens/accessibility/_visibility.scss?inline';
-import visibilityStyles from '$lib/scss/tokens/accessibility/\_visibility.scss?inline';
 
 <Meta title="Styles/Tokens/Accessibility" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/backgrounds/main.mdx

@@ -1,10 +1,9 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
 
-{/* @ts-ignore */}
+import backgroundColor from '../../../../scss/tokens/backgrounds/_background-color.scss?inline';
-import backgroundColor from '$lib/scss/tokens/backgrounds/\_background-color.scss?inline';
 
 <Meta title="Styles/Tokens/Backgrounds" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/borders/main.mdx

@@ -1,19 +1,11 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
-
+import borderColor from '../../../../scss/tokens/borders/_border-color.scss?raw';
-{/* @ts-ignore */}
+import borderRadius from '../../../../scss/tokens/borders/_border-radius.scss?raw';
-import borderColor from '$lib/scss/tokens/borders/\_border-color.scss?raw';
+import borderStyle from '../../../../scss/tokens/borders/_border-style.scss?raw';
-
+import borderWidth from '../../../../scss/tokens/borders/_border-width.scss?raw';
-{/* @ts-ignore */}
-import borderRadius from '$lib/scss/tokens/borders/\_border-radius.scss?raw';
-
-{/* @ts-ignore */}
-import borderStyle from '$lib/scss/tokens/borders/\_border-style.scss?raw';
-
-{/* @ts-ignore */}
-import borderWidth from '$lib/scss/tokens/borders/\_border-width.scss?raw';
 
 <Meta title="Styles/Tokens/Borders" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/flexbox/main.mdx

@@ -1,40 +1,18 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
-
+import alignContent from '../../../../scss/tokens/layout/flex/_align-content.scss?raw';
-{/* @ts-ignore */}
+import alignItems from '../../../../scss/tokens/layout/flex/_align-items.scss?raw';
-import alignContent from '$lib/scss/tokens/layout/flex/\_align-content.scss?raw';
+import alignSelf from '../../../../scss/tokens/layout/flex/_align-self.scss?raw';
-
+import flexDirection from '../../../../scss/tokens/layout/flex/_flex-direction.scss?raw';
-{/* @ts-ignore */}
+import flexGrow from '../../../../scss/tokens/layout/flex/_flex-grow.scss?raw';
-import alignItems from '$lib/scss/tokens/layout/flex/\_align-items.scss?raw';
+import flexShrink from '../../../../scss/tokens/layout/flex/_flex-shrink.scss?raw';
-
+import flexWrap from '../../../../scss/tokens/layout/flex/_flex-wrap.scss?raw';
-{/* @ts-ignore */}
+import flex from '../../../../scss/tokens/layout/flex/_flex.scss?raw';
-import alignSelf from '$lib/scss/tokens/layout/flex/\_align-self.scss?raw';
+import justifyContent from '../../../../scss/tokens/layout/flex/_justify-content.scss?raw';
-
+import justifyItems from '../../../../scss/tokens/layout/flex/_justify-items.scss?raw';
-{/* @ts-ignore */}
+import justifySelf from '../../../../scss/tokens/layout/flex/_justify-self.scss?raw';
-import flexDirection from '$lib/scss/tokens/layout/flex/\_flex-direction.scss?raw';
-
-{/* @ts-ignore */}
-import flexGrow from '$lib/scss/tokens/layout/flex/\_flex-grow.scss?raw';
-
-{/* @ts-ignore */}
-import flexShrink from '$lib/scss/tokens/layout/flex/\_flex-shrink.scss?raw';
-
-{/* @ts-ignore */}
-import flexWrap from '$lib/scss/tokens/layout/flex/\_flex-wrap.scss?raw';
-
-{/* @ts-ignore */}
-import flex from '$lib/scss/tokens/layout/flex/\_flex.scss?raw';
-
-{/* @ts-ignore */}
-import justifyContent from '$lib/scss/tokens/layout/flex/\_justify-content.scss?raw';
-
-{/* @ts-ignore */}
-import justifyItems from '$lib/scss/tokens/layout/flex/\_justify-items.scss?raw';
-
-{/* @ts-ignore */}
-import justifySelf from '$lib/scss/tokens/layout/flex/\_justify-self.scss?raw';
 
 <Meta title="Styles/Tokens/Flexbox" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/interactivity/_main.mdx

@@ -1,13 +1,10 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
 
-{/* @ts-ignore */}
+import cursor from '../../../../scss/tokens/interactivity/_cursor.scss?raw';
-import cursor from '$lib/scss/tokens/interactivity/\_cursor.scss?raw';
+import pointerEvents from '../../../../scss/tokens/interactivity/_pointer-events.scss?raw';
-
-{/* @ts-ignore */}
-import pointerEvents from '$lib/scss/tokens/interactivity/\_pointer-events.scss?raw';
 
 <Meta title="Styles/Tokens/Interactivity" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/intro.mdx

@@ -1,12 +1,11 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../utils/docsPage.js';
 import Mermaid from '../../docs-components/Mermaid/Mermaid.jsx';
 import CopyTable from '../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../utils/parseCss';
 import './styles.scss';
 
-{/* @ts-ignore */}
+import color from '../../../scss/tokens/text/_color.scss?inline';
-import color from '$lib/scss/tokens/text/\_color.scss?inline';
 
 <Meta title="Styles/Tokens/Intro" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/layout/main.mdx

@@ -1,28 +1,14 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
-
+import boxSizing from '../../../../scss/tokens/layout/_box-sizing.scss?raw';
-{/* @ts-ignore */}
+import display from '../../../../scss/tokens/layout/_display.scss?raw';
-import boxSizing from '$lib/scss/tokens/layout/\_box-sizing.scss?raw';
+import floats from '../../../../scss/tokens/layout/_floats.scss?raw';
-
+import objectFit from '../../../../scss/tokens/layout/_object-fit.scss?raw';
-{/* @ts-ignore */}
+import objectPosition from '../../../../scss/tokens/layout/_object-position.scss?raw';
-import display from '$lib/scss/tokens/layout/\_display.scss?raw';
+import overflow from '../../../../scss/tokens/layout/_overflow.scss?raw';
-
+import position from '../../../../scss/tokens/layout/_position.scss?raw';
-{/* @ts-ignore */}
-import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
-
-{/* @ts-ignore */}
-import objectFit from '$lib/scss/tokens/layout/\_object-fit.scss?raw';
-
-{/* @ts-ignore */}
-import objectPosition from '$lib/scss/tokens/layout/\_object-position.scss?raw';
-
-{/* @ts-ignore */}
-import overflow from '$lib/scss/tokens/layout/\_overflow.scss?raw';
-
-{/* @ts-ignore */}
-import position from '$lib/scss/tokens/layout/\_position.scss?raw';
 
 <Meta title="Styles/Tokens/Layout" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/sizing/main.mdx

@@ -1,25 +1,13 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
-
+import height from '../../../../scss/tokens/sizing/_height.scss?inline';
-{/* @ts-ignore */}
+import maxHeight from '../../../../scss/tokens/sizing/_max-height.scss?inline';
-import height from '$lib/scss/tokens/sizing/\_height.scss?inline';
+import maxWidth from '../../../../scss/tokens/sizing/_max-width.scss?inline';
-
+import minHeight from '../../../../scss/tokens/sizing/_min-height.scss?inline';
-{/* @ts-ignore */}
+import minWidth from '../../../../scss/tokens/sizing/_min-width.scss?inline';
-import maxHeight from '$lib/scss/tokens/sizing/\_max-height.scss?inline';
+import width from '../../../../scss/tokens/sizing/_width.scss?inline';
-
-{/* @ts-ignore */}
-import maxWidth from '$lib/scss/tokens/sizing/\_max-width.scss?inline';
-
-{/* @ts-ignore */}
-import minHeight from '$lib/scss/tokens/sizing/\_min-height.scss?inline';
-
-{/* @ts-ignore */}
-import minWidth from '$lib/scss/tokens/sizing/\_min-width.scss?inline';
-
-{/* @ts-ignore */}
-import width from '$lib/scss/tokens/sizing/\_width.scss?inline';
 
 <Meta title="Styles/Tokens/Sizing" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/spacers/main.mdx

@@ -1,19 +1,11 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
-
+import margin from '../../../../scss/tokens/spacers/_margin.scss?inline';
-{/* @ts-ignore */}
+import padding from '../../../../scss/tokens/spacers/_padding.scss?inline';
-import margin from '$lib/scss/tokens/spacers/\_margin.scss?inline';
+import fluidMargin from '../../../../scss/tokens/spacers/_fluid-margin.scss?inline';
-
+import fluidPadding from '../../../../scss/tokens/spacers/_fluid-padding.scss?inline';
-{/* @ts-ignore */}
-import padding from '$lib/scss/tokens/spacers/\_padding.scss?inline';
-
-{/* @ts-ignore */}
-import fluidMargin from '$lib/scss/tokens/spacers/\_fluid-margin.scss?inline';
-
-{/* @ts-ignore */}
-import fluidPadding from '$lib/scss/tokens/spacers/\_fluid-padding.scss?inline';
 
 <Meta title="Styles/Tokens/Spacers" parameters={{ ...parameters }} />
 

src/docs/styles/tokens/typography/main.mdx

@@ -1,52 +1,22 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
-
+import role from '../../../../scss/tokens/text/_text-role.scss?inline';
-{/* @ts-ignore */}
+import color from '../../../../scss/tokens/text/_color.scss?inline';
-import role from '$lib/scss/tokens/text/\_text-role.scss?inline';
+import fontFamily from '../../../../scss/tokens/text/_font-family.scss?inline';
-
+import fontSize from '../../../../scss/tokens/text/_font-size.scss?inline';
-{/* @ts-ignore */}
+import fontStyle from '../../../../scss/tokens/text/_font-style.scss?inline';
-import color from '$lib/scss/tokens/text/\_color.scss?inline';
+import fontWeight from '../../../../scss/tokens/text/_font-weight.scss?inline';
-
+import letterSpacing from '../../../../scss/tokens/text/_letter-spacing.scss?inline';
-{/* @ts-ignore */}
+import lineHeight from '../../../../scss/tokens/text/_line-height.scss?inline';
-import fontFamily from '$lib/scss/tokens/text/\_font-family.scss?inline';
+import textAlign from '../../../../scss/tokens/text/_text-align.scss?inline';
-
+import textDecoration from '../../../../scss/tokens/text/_text-decoration.scss?inline';
-{/* @ts-ignore */}
+import textStroke from '../../../../scss/tokens/text/_text-stroke.scss?inline';
-import fontSize from '$lib/scss/tokens/text/\_font-size.scss?inline';
+import textTransform from '../../../../scss/tokens/text/_text-transform.scss?inline';
-
+import verticalAlign from '../../../../scss/tokens/text/_vertical-align.scss?inline';
-{/* @ts-ignore */}
+import whiteSpace from '../../../../scss/tokens/text/_white-space.scss?inline';
-import fontStyle from '$lib/scss/tokens/text/\_font-style.scss?inline';
+import wordBreak from '../../../../scss/tokens/text/_word-break.scss?inline';
-
-{/* @ts-ignore */}
-import fontWeight from '$lib/scss/tokens/text/\_font-weight.scss?inline';
-
-{/* @ts-ignore */}
-import letterSpacing from '$lib/scss/tokens/text/\_letter-spacing.scss?inline';
-
-{/* @ts-ignore */}
-import lineHeight from '$lib/scss/tokens/text/\_line-height.scss?inline';
-
-{/* @ts-ignore */}
-import textAlign from '$lib/scss/tokens/text/\_text-align.scss?inline';
-
-{/* @ts-ignore */}
-import textDecoration from '$lib/scss/tokens/text/\_text-decoration.scss?inline';
-
-{/* @ts-ignore */}
-import textStroke from '$lib/scss/tokens/text/\_text-stroke.scss?inline';
-
-{/* @ts-ignore */}
-import textTransform from '$lib/scss/tokens/text/\_text-transform.scss?inline';
-
-{/* @ts-ignore */}
-import verticalAlign from '$lib/scss/tokens/text/\_vertical-align.scss?inline';
-
-{/* @ts-ignore */}
-import whiteSpace from '$lib/scss/tokens/text/\_white-space.scss?inline';
-
-{/* @ts-ignore */}
-import wordBreak from '$lib/scss/tokens/text/\_word-break.scss?inline';
 
 import './styles.scss';
 

src/docs/styles/tokens/variables/main.mdx

@@ -1,11 +1,10 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../../../utils/docsPage.js';
 import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { scssVariablesToTableArray } from '../../../utils/parseCss';
 
-{/* @ts-ignore */}
+import theme from '../../../../scss/tokens/variables/_theme.scss?raw';
-import theme from '$lib/scss/tokens/variables/\_theme.scss?raw';
+import block from '../../../../scss/tokens/variables/_block.scss?raw';
-import block from '$lib/scss/tokens/variables/\_block.scss?raw';
 
 <Meta title="Styles/Tokens/SCSS Variables" parameters={{ ...parameters }} />
 
@@ -21,6 +20,7 @@ These are SCSS mirrors of some of the default CSS variables used in the `Theme`.
   body={scssVariablesToTableArray(theme)}
   copyable={[true, false]}
 />
+
 <CopyTable
   title="Block"
   header={['Variable', 'Properties']}

src/docs/theme-builder/theme-builder.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
 

src/docs/theming/css-variables.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
-import { parameters } from '$docs/utils/docsPage.js';
+import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Theming/CSS variables" parameters={{ ...parameters }} />
 

svelte.config.js

@@ -1,14 +1,5 @@
-import autoprefixer from 'autoprefixer';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import preprocess from 'svelte-preprocess';
 
-const config = {
+export default {
-  preprocess: preprocess({
+  preprocess: [vitePreprocess()],
-    preserve: ['ld+json'],
-    scss: { quietDeps: true },
-    postcss: {
-      plugins: [autoprefixer],
-    },
-  }),
 };
-
-export default config;

tsconfig.json

@@ -22,9 +22,10 @@
       "$docs/*": ["src/docs/*"]
     },
     "sourceMap": true,
-    "strict": false,
+    "strict": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "verbatimModuleSyntax": true
   },
   "include": [
     "src/**/*.js",

vite.config.ts

@@ -1,21 +1,17 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type UserConfig } from 'vite';
-import { scss } from './bin/preprocess/index.js';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import path from 'path';
 
-/** @type {import('vite').UserConfig} */
+const config: UserConfig = defineConfig({
-const config = defineConfig({
   base: 'https://reuters-graphics.github.io/graphics-components/',
-  css: {
-    preprocessorOptions: { scss },
-  },
   resolve: {
     alias: {
-      '@reuters-graphics/graphics-components': './src',
+      '@reuters-graphics/graphics-components': path.resolve('./src'),
-      $lib: './src',
+      $lib: path.resolve('./src'),
-      $docs: './src/docs',
+      $docs: path.resolve('./src/docs'),
     },
   },
-  plugins: [svelte({})],
+  plugins: [svelte()],
 });
 
 export default config;