Bump the tools group across 1 directory with 6 updates

.storybook/main.ts

@@ -4,19 +4,16 @@ import { type InlineConfig, mergeConfig } from 'vite';
 import tsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
-  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
+  addons: ['@storybook/addon-docs'],
+  features: {
+    actions: false,
+    interactions: false,
   },
+  framework: '@storybook/react-vite',
 
   staticDirs: ['../node_modules/nhsuk-frontend/dist/nhsuk'],
   stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
 
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-  },
-
   viteFinal(config) {
     return mergeConfig(config, {
       build: {

.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import { Description, Stories, Subtitle, Title } from '@storybook/addon-docs/blocks';
 import { type Preview } from '@storybook/react-vite';
 
 import { Col, Container, Row } from '#components/layout/index.js';
@@ -31,6 +32,14 @@ const preview: Preview = {
     },
     docs: {
       codePanel: true,
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Stories />
+        </>
+      ),
     },
     width: 'two-thirds',
     layout: 'fullscreen',

.yarnrc.yml

@@ -5,7 +5,6 @@ npmRegistryServer: "https://registry.yarnpkg.com"
 packageExtensions:
   "@storybook/addon-docs@*":
     peerDependencies:
-      "@types/react": "*"
       "@types/react-dom": "*"
   "@storybook/react-vite@*":
     peerDependencies:

package.json

@@ -74,9 +74,9 @@
     "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-docs": "^10.2.14",
-    "@storybook/addon-links": "^10.2.14",
-    "@storybook/react-vite": "^10.2.14",
+    "@storybook/addon-docs": "^10.4.5",
+    "@storybook/addon-links": "^10.4.5",
+    "@storybook/react-vite": "^10.4.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -111,12 +111,12 @@
     "react-dom": "^19.2.6",
     "rollup": "^4.60.3",
     "rollup-preserve-directives": "^1.1.3",
-    "sass-embedded": "^1.97.2",
-    "storybook": "^10.2.14",
+    "sass-embedded": "^1.100.0",
+    "storybook": "^10.4.5",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.4",
-    "vite": "^7.3.2",
+    "vite": "^8.0.16",
     "vite-tsconfig-paths": "^6.1.1"
   },
   "peerDependencies": {

stories/Content Presentation/Details.stories.tsx

@@ -1,21 +1,23 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { Details } from '#components/content-presentation/details/index.js';
 
-/**
- * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/contents-list" target="_blank">here</a>.
- *
- * ## Implementation notes
- *
- * The `Details` component has three subcomponents:
- *
- * - `Details.Summary`
- * - `Details.Text`
- * - `Details.ExpanderGroup`
- */
 const meta: Meta<typeof Details> = {
   title: 'Content Presentation/Details',
   component: Details,
+  parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the details component and when to use it, visit the [design system in
+          the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system/components/details) for guidance,
+          examples and options.
+        </Markdown>
+      ),
+    },
+  },
 };
 
 export default meta;

stories/Content Presentation/DoAndDontList.stories.tsx

@@ -1,23 +1,23 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { DoAndDontList } from '#components/content-presentation/do-and-dont-list/index.js';
 
-/**
- * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/do-dont-list" target="_blank" rel="noopener noreferrer">here</a>.
- *
- * ## Implementation notes
- *
- * The `DoAndDontList` component has one subcomponent: `DoAndDontList.Item`.
- *
- * As long as a `listType` is supplied to the `DoAndDontList` component, all subcomponents will render as desired. If you require a `DoAndDontList.Item` to be different, a `listItemType` prop can be supplied to force the type.
- *
- * The `DoAndDontList.Item` component can also accept a `prefixText` prop, which can be used to override the default prefix text.
- *
- * See the <b><a href="#custom-prefix-text" >custom prefix text</a></b> story for an example.
- */
 const meta: Meta<typeof DoAndDontList> = {
   title: "Content Presentation/Do and Don't list",
   component: DoAndDontList,
+  parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the do and don&apos;t list component and when to use it, visit the
+          [design system in the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system/components/do-and-dont-lists) for
+          guidance, examples and options.
+        </Markdown>
+      ),
+    },
+  },
 };
 
 export default meta;
@@ -58,24 +58,6 @@ export const Dont: Story = {
   ),
 };
 
-/**
- * By default DoAndDontList's of type "dont" will have Items prefixed with `do not`
- *
- * This is the recommended usage, <b><a href="https://service-manual.nhs.uk/design-system/components/do-and-dont-lists#research">as stated in the Service Manual</a></b>
- *
- * However, if you need to override this, you can supply a `prefixText` prop to the `DoAndDontList.Item` component.
- *
- * This is optional and of type `ReactNode`, so you can supply a string, a JSX element, or `undefined` or `null`
- *
- * See the table below and click the `Show code` button on the story for examples of each.
- *
- * | Value     | Outcome                                     |
- * |-----------|---------------------------------------------|
- * | undefined | The default `do not` text will be displayed |
- * | null      | There will be no prefix                     |
- * | string    | The string will be displayed                |
- * | JSX       | The JSX will be rendered, such as `<span>`  |
- */
 export const CustomPrefixText: Story = {
   name: "Do and Don't list with custom prefix",
   args: {

stories/Content Presentation/Hero.stories.tsx

@@ -1,3 +1,4 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { Hero } from '#components/content-presentation/hero/index.js';
@@ -6,6 +7,15 @@ const meta: Meta<typeof Hero> = {
   title: 'Content Presentation/Hero',
   component: Hero,
   parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          The hero component was used by the NHS website and is not currently documented by the
+          [design system in the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system).
+        </Markdown>
+      ),
+    },
     layout: 'fullscreen',
     width: false,
   },

stories/Content Presentation/Images.stories.tsx

@@ -1,10 +1,23 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { Images } from '#components/content-presentation/images/index.js';
 
 const meta: Meta<typeof Images> = {
   title: 'Content Presentation/Images',
   component: Images,
+  parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the images component and when to use it, visit the [design system in
+          the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system/components/images) for guidance,
+          examples and options.
+        </Markdown>
+      ),
+    },
+  },
 };
 
 export default meta;

stories/Content Presentation/InsetText.stories.tsx

@@ -1,10 +1,23 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { InsetText } from '#components/content-presentation/inset-text/index.js';
 
 const meta: Meta<typeof InsetText> = {
   title: 'Content Presentation/Inset text',
   component: InsetText,
+  parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the inset text component and when to use it, visit the [design system
+          in the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system/components/inset-text) for guidance,
+          examples and options.
+        </Markdown>
+      ),
+    },
+  },
   render: (args) => (
     <InsetText {...args}>
       <p>

stories/Content Presentation/NotificationBanner.stories.tsx

@@ -1,22 +1,24 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { NotificationBannerLink } from '#components/content-presentation/notification-banner/components/index.js';
 import { NotificationBanner } from '#components/content-presentation/notification-banner/index.js';
 
-/**
- * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/notification-banner" target="_blank">here</a>.
- *
- * ## Implementation notes
- *
- * The `NotificationBanner` component has three subcomponents:
- *
- * - `NotificationBanner.Title`
- * - `NotificationBanner.Heading`
- * - `NotificationBanner.Link`
- */
 const meta: Meta<typeof NotificationBanner> = {
   title: 'Content Presentation/Notification banner',
   component: NotificationBanner,
+  parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the notification banner component and when to use it, visit the
+          [design system in the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system/components/notification-banners) for
+          guidance, examples and options.
+        </Markdown>
+      ),
+    },
+  },
 };
 
 export default meta;

stories/Content Presentation/Panel.stories.tsx

@@ -1,3 +1,4 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { Panel } from '#components/content-presentation/panel/index.js';
@@ -6,6 +7,18 @@ import { Button } from '#components/form-elements/button/index.js';
 const meta: Meta<typeof Panel> = {
   title: 'Content Presentation/Panel',
   component: Panel,
+  parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the panel component and when to use it, visit the [design system in
+          the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system/components/panel) for guidance,
+          examples and options.
+        </Markdown>
+      ),
+    },
+  },
 };
 
 export default meta;

stories/Content Presentation/SummaryList.stories.tsx

@@ -1,3 +1,4 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { SummaryList } from '#components/content-presentation/summary-list/index.js';
@@ -7,6 +8,18 @@ import { BodyText } from '#components/typography/BodyText.js';
 const meta: Meta<typeof SummaryList> = {
   title: 'Content Presentation/Summary list',
   component: SummaryList,
+  parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the summary list component and when to use it, visit the [design
+          system in the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system/components/summary-list) for guidance,
+          examples and options.
+        </Markdown>
+      ),
+    },
+  },
   argTypes: {
     noBorder: {
       type: 'boolean',

stories/Content Presentation/Table.stories.tsx

@@ -1,3 +1,4 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { Table } from '#components/content-presentation/table/index.js';
@@ -6,6 +7,18 @@ import { Card } from '#components/navigation/card/index.js';
 const meta: Meta<typeof Table> = {
   title: 'Content Presentation/Table',
   component: Table,
+  parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the table component and when to use it, visit the [design system in
+          the NHS digital service
+          manual](https://service-manual.nhs.uk/design-system/components/table) for guidance,
+          examples and options.
+        </Markdown>
+      ),
+    },
+  },
 };
 
 export default meta;

stories/Content Presentation/Tabs.stories.tsx

@@ -1,19 +1,21 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { Tabs } from '#components/content-presentation/tabs/index.js';
 
-/**
- * The tabs component lets users navigate between related sections of content, displaying 1 section at a time.
- *
- * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/components/tabs" target="_blank" rel="noopener noreferrer">here</a>.
- *
- * Further information about this component can be found in the <a href='https://service-manual.nhs.uk/design-system/components/tabs'>NHS digital service manual.</a>
- */
-
 const meta: Meta<typeof Tabs> = {
   title: 'Content Presentation/Tabs',
   component: Tabs,
   parameters: {
+    docs: {
+      subtitle: (
+        <Markdown>
+          To learn more about the tabs component and when to use it, visit the [design system in the
+          NHS digital service manual](https://service-manual.nhs.uk/design-system/components/tabs)
+          for guidance, examples and options.
+        </Markdown>
+      ),
+    },
     width: 'full',
   },
 };