chore: update storybook

Author: CyrilAdelekan

.storybook/main.ts

@@ -6,10 +6,12 @@ import type { StorybookConfig } from "@storybook/react-webpack5";
 import type { Indexer } from "storybook/internal/types";
 import { loadCsf } from "storybook/internal/csf-tools";
 import { serverRequire } from "storybook/internal/common";
-import sass from "sass";
+import * as sass from "sass";
 import { compile } from "./compile.ts";
 import { vite, webpack, STORIES_REGEX } from "./unplugin.ts";
 
+const __filename = fileURLToPath(import.meta.url);
+
 const require = createRequire(import.meta.url);
 const __dirname = dirname(fileURLToPath(import.meta.url));
 

package-lock.json

@@ -68,14 +68,13 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-a11y": "^10.2.19",
-    "@storybook/addon-links": "^10.2.19",
+    "@storybook/addon-a11y": "^10.3.0",
+    "@storybook/addon-links": "^10.3.0",
     "@storybook/addon-styling-webpack": "^3.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
-    "@storybook/csf": "^0.1.13",
-    "@storybook/react-vite": "^10.2.19",
-    "@storybook/react-webpack5": "^10.2.19",
-    "@storybook/test-runner": "^0.24.2",
+    "@storybook/react-vite": "^10.3.0",
+    "@storybook/react-webpack5": "^10.3.0",
+    "@storybook/test-runner": "^0.24.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/govuk-frontend": "^5.11.0",
@@ -91,7 +90,7 @@
     "deep-iterator": "^1.1.0",
     "eslint": "^9.37.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^10.2.19",
+    "eslint-plugin-storybook": "^10.3.0",
     "globals": "^17.4.0",
     "govuk-frontend": "^6.1.0",
     "html-react-parser": "^5.2.17",
@@ -119,7 +118,7 @@
     "sass": "^1.98.0",
     "sass-loader": "^16.0.7",
     "standard-version": "^9.5.0",
-    "storybook": "^10.2.19",
+    "storybook": "^10.3.0",
     "style-loader": "^4.0.0",
     "stylelint": "^17.4.0",
     "stylelint-config-recess-order": "^7.6.1",
@@ -132,7 +131,7 @@
     "typescript-eslint": "^8.57.1",
     "unplugin": "^3.0.0",
     "webpack": "^5.105.4",
-    "@storybook/addon-docs": "^10.2.19"
+    "@storybook/addon-docs": "^10.3.0"
   },
   "peerDependencies": {
     "govuk-frontend": ">=5.14.0",
@@ -172,4 +171,4 @@
   "dependencies": {
     "ts-dedent": "^2.2.0"
   }
-}
+}

package.json

@@ -15,12 +15,9 @@ let configured = false;
 const meta: Meta<typeof Accordion> = {
   title: "GOVUK Design System/Accordion",
   component: Accordion,
-  decorators: [
-    (Story, { parameters }) => {
+  decorators: [(Story, { parameters }) => {
       React.useEffect(() => {
-        const isDocsMode = window.location.search.includes(
-          "path=/docs/govuk-design-system-accordion--docs",
-        );
+        const isDocsMode = window.location.search.includes("path=/docs/govuk-design-system-accordion--docs");
         if (isDocsMode && !configured && parameters.initializeConfigurations) {
           ConfigureOverallAccordion();
           configured = true;
@@ -29,8 +26,7 @@ const meta: Meta<typeof Accordion> = {
         }
       }, []);
       return <Story />;
-    },
-  ],
+    }],
   tags: ["autodocs"],
 };
 
@@ -39,8 +35,7 @@ type Story = StoryObj<typeof Accordion>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> =
-  extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -49,27 +44,15 @@ export const Default: Story = {
 
 export const WithAdditionalDescriptions: Story = {
   name: "with additional descriptions",
-  args: {
-    ...examplesFromFixtures.find(
-      (f) => f.name === "with additional descriptions",
-    )?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with additional descriptions")?.options },
 };
 
 export const WithLongContentAndDescription: Story = {
   name: "with long content and description",
-  args: {
-    ...examplesFromFixtures.find(
-      (f) => f.name === "with long content and description",
-    )?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with long content and description")?.options },
 };
 
 export const WithAllSectionsAlreadyOpen: Story = {
   name: "with all sections already open",
-  args: {
-    ...examplesFromFixtures.find(
-      (f) => f.name === "with all sections already open",
-    )?.options,
-  },
-};
+  args: { ...examplesFromFixtures.find((f) => f.name === "with all sections already open")?.options },
+};

src/components/Accordion/Accordion.stories.tsx

@@ -12,11 +12,9 @@ import { ComponentFixture } from "../../dynamics";
 const meta: Meta<typeof BackLink> = {
   title: "GOVUK Design System/Back link",
   component: BackLink,
-  decorators: [
-    (Story) => {
+  decorators: [(Story) => {
       return <Story />;
-    },
-  ],
+    }],
   tags: ["autodocs"],
 };
 
@@ -25,8 +23,7 @@ type Story = StoryObj<typeof BackLink>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> =
-  extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -36,4 +33,4 @@ export const Default: Story = {
 export const Inverse: Story = {
   name: "inverse",
   args: { ...examplesFromFixtures.find((f) => f.name === "inverse")?.options },
-};
+};

src/components/BackLink/BackLink.stories.tsx

@@ -12,11 +12,9 @@ import { ComponentFixture } from "../../dynamics";
 const meta: Meta<typeof Breadcrumbs> = {
   title: "GOVUK Design System/Breadcrumbs",
   component: Breadcrumbs,
-  decorators: [
-    (Story) => {
+  decorators: [(Story) => {
       return <Story />;
-    },
-  ],
+    }],
   tags: ["autodocs"],
 };
 
@@ -25,8 +23,7 @@ type Story = StoryObj<typeof Breadcrumbs>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> =
-  extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -35,37 +32,25 @@ export const Default: Story = {
 
 export const WithOneLevel: Story = {
   name: "with one level",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with one level")?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with one level")?.options },
 };
 
 export const WithoutTheHomeSection: Story = {
   name: "without the home section",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "without the home section")
-      ?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "without the home section")?.options },
 };
 
 export const WithLastBreadcrumbAsCurrentPage: Story = {
   name: "with last breadcrumb as current page",
-  args: {
-    ...examplesFromFixtures.find(
-      (f) => f.name === "with last breadcrumb as current page",
-    )?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with last breadcrumb as current page")?.options },
 };
 
 export const WithCollapseOnMobile: Story = {
   name: "with collapse on mobile",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with collapse on mobile")
-      ?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with collapse on mobile")?.options },
 };
 
 export const Inverse: Story = {
   name: "inverse",
   args: { ...examplesFromFixtures.find((f) => f.name === "inverse")?.options },
-};
+};

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -15,12 +15,9 @@ let configured = false;
 const meta: Meta<typeof Button> = {
   title: "GOVUK Design System/Button",
   component: Button,
-  decorators: [
-    (Story, { parameters }) => {
+  decorators: [(Story, { parameters }) => {
       React.useEffect(() => {
-        const isDocsMode = window.location.search.includes(
-          "path=/docs/govuk-design-system-button--docs",
-        );
+        const isDocsMode = window.location.search.includes("path=/docs/govuk-design-system-button--docs");
         if (isDocsMode && !configured && parameters.initializeConfigurations) {
           ConfigureOverallButton();
           configured = true;
@@ -29,8 +26,7 @@ const meta: Meta<typeof Button> = {
         }
       }, []);
       return <Story />;
-    },
-  ],
+    }],
   tags: ["autodocs"],
 };
 
@@ -39,8 +35,7 @@ type Story = StoryObj<typeof Button>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> =
-  extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -64,9 +59,7 @@ export const Start: Story = {
 
 export const Secondary: Story = {
   name: "secondary",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "secondary")?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "secondary")?.options },
 };
 
 export const Warning: Story = {
@@ -77,4 +70,4 @@ export const Warning: Story = {
 export const Inverse: Story = {
   name: "inverse",
   args: { ...examplesFromFixtures.find((f) => f.name === "inverse")?.options },
-};
+};

src/components/Button/Button.stories.tsx

@@ -15,12 +15,9 @@ let configured = false;
 const meta: Meta<typeof CharacterCount> = {
   title: "GOVUK Design System/Character count",
   component: CharacterCount,
-  decorators: [
-    (Story, { parameters }) => {
+  decorators: [(Story, { parameters }) => {
       React.useEffect(() => {
-        const isDocsMode = window.location.search.includes(
-          "path=/docs/govuk-design-system-character-count--docs",
-        );
+        const isDocsMode = window.location.search.includes("path=/docs/govuk-design-system-character-count--docs");
         if (isDocsMode && !configured && parameters.initializeConfigurations) {
           ConfigureOverallCharacterCount();
           configured = true;
@@ -29,8 +26,7 @@ const meta: Meta<typeof CharacterCount> = {
         }
       }, []);
       return <Story />;
-    },
-  ],
+    }],
   tags: ["autodocs"],
 };
 
@@ -39,8 +35,7 @@ type Story = StoryObj<typeof CharacterCount>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> =
-  extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -49,61 +44,40 @@ export const Default: Story = {
 
 export const WithHint: Story = {
   name: "with hint",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with hint")?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with hint")?.options },
 };
 
 export const WithHintAndError: Story = {
   name: "with hint and error",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with hint and error")
-      ?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with hint and error")?.options },
 };
 
 export const WithDefaultValue: Story = {
   name: "with default value",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with default value")
-      ?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with default value")?.options },
 };
 
 export const WithDefaultValueExceedingLimit: Story = {
   name: "with default value exceeding limit",
-  args: {
-    ...examplesFromFixtures.find(
-      (f) => f.name === "with default value exceeding limit",
-    )?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with default value exceeding limit")?.options },
 };
 
 export const WithCustomRows: Story = {
   name: "with custom rows",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with custom rows")?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with custom rows")?.options },
 };
 
 export const WithLabelAsPageHeading: Story = {
   name: "with label as page heading",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with label as page heading")
-      ?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with label as page heading")?.options },
 };
 
 export const WithWordCount: Story = {
   name: "with word count",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with word count")?.options,
-  },
+  args: { ...examplesFromFixtures.find((f) => f.name === "with word count")?.options },
 };
 
 export const WithThreshold: Story = {
   name: "with threshold",
-  args: {
-    ...examplesFromFixtures.find((f) => f.name === "with threshold")?.options,
-  },
-};
+  args: { ...examplesFromFixtures.find((f) => f.name === "with threshold")?.options },
+};