@scottish-government/designsystem-react 0.10.0 → 0.10.2

package/src/components/SiteFooter/SiteFooter.Org.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteFooter from './SiteFooter';
+
+const meta = {
+    title: 'Components/SiteFooter/SiteFooter.Org',
+    component: SiteFooter.Org,
+    argTypes: {
+        href: argTypes.href(),
+        title: {
+            description: 'Title for the parent org link',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <svg xmlns="http://www.w3.org/2000/svg" width="300" height="55" viewBox="0 0 157.4 29.9">
+                <defs>
+                    <path id="a" d="M0 0h157.4v29.9H0z"/>
+                </defs>
+                <path fill="#333e48" d="M154.6 20.3a4 4 0 0 0 2.8-.9l-.7-2.3c-.2.3-.7.5-1.3.5-.8 0-1.3-.7-1.3-1.6V9h2.8V6.4h-2.8V2.7h-3v3.7h-2.3V9h2.3v7.9c0 2.2 1.2 3.4 3.5 3.4m-13.9-2.6c-2.5 0-3.9-2.1-3.9-4.5s1.4-4.5 3.9-4.5 3.9 2.1 3.9 4.5-1.4 4.5-3.9 4.5m0 2.6c4.3 0 7-3.3 7-7.2 0-3.9-2.6-7.1-7-7.1-4.3 0-7 3.2-7 7.1 0 4 2.6 7.2 7 7.2m-13.6 0c2.7 0 4.3-1.2 5.2-2.4l-1.9-1.8a3.6 3.6 0 0 1-3.1 1.6c-2.5 0-4.1-1.9-4.1-4.5s1.7-4.5 4.1-4.5c1.3 0 2.4.5 3.1 1.6l1.9-1.8a6 6 0 0 0-5.2-2.4c-4.1 0-7 3-7 7.1s2.9 7.1 7 7.1m-14.6 0c3.7 0 5.7-1.8 5.7-4.3 0-5.4-8.2-3.6-8.2-6 0-1 1-1.7 2.5-1.7 1.7 0 3.2.7 4 1.6l1.2-2.1a7.7 7.7 0 0 0-5.3-1.9c-3.4 0-5.4 1.9-5.4 4.1 0 5.2 8.2 3.3 8.2 6 0 1.1-.9 1.8-2.7 1.8-1.7 0-3.6-.9-4.6-1.9l-1.4 2.1a8.2 8.2 0 0 0 6 2.3m-10.3 0a2 2 0 0 0 2-2c0-1-.9-1.9-2-1.9s-2 .9-2 1.9c0 1.1.9 2 2 2m-7.5-.3 5.5-13.6H97l-4 10.2-4-10.2h-3L91.5 20h3.2zm-16.3-2.3c-2.5 0-3.9-2.1-3.9-4.5s1.4-4.5 3.9-4.5 3.9 2.1 3.9 4.5-1.4 4.5-3.9 4.5m0 2.6c4.3 0 7-3.3 7-7.2 0-3.9-2.6-7.1-7-7.1s-7 3.2-7 7.1c0 4 2.7 7.2 7 7.2m-16.3-2.9c-2.4 0-3.9-1.7-3.9-4.3 0-2.6 1.5-4.4 3.9-4.4 1.4 0 2.8.8 3.5 1.8v5.1c-.7 1-2.2 1.8-3.5 1.8m-.6 8.1c3.3 0 7-1.3 7-6.2V6.4h-3v1.9a5.2 5.2 0 0 0-4.4-2.2c-3.5 0-6 2.6-6 7 0 4.5 2.6 7 6 7 1.8 0 3.3-.9 4.4-2.3v1.5c0 2.9-2.1 3.8-4 3.8-1.8 0-3.2-.5-4.3-1.7l-1.4 2.1c1.7 1.5 3.4 2 5.7 2"/>
+                <path fill="#fff" d="M1.1 0h48.5v29.9H1.1z"/>
+                <path fill="#0065bd" d="m7.9 1.4 17.3 10.2L42.6 1.4zm0 27.1 17.3-10.1 17.4 10.1zm-5.4-24v20.9L19.7 15zm45.7 0v20.9L30.9 15z"/>
+            </svg>
+        </>,
+        href: 'https://www.gov.scot/',
+        title: 'The Scottish Government'
+    }
+} satisfies Meta<typeof SiteFooter.Org>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/SiteFooter/SiteFooter.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import SiteFooter from './SiteFooter';
 
 const meta = {
-    title: 'Components/Site footer',
+    title: 'Components/SiteFooter',
     component: SiteFooter,
     argTypes: {
         children: argTypes.children()

package/src/components/SiteHeader/SiteHeader.Brand.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteHeader from './SiteHeader';
+
+const meta = {
+    title: 'Components/SiteHeader/SiteHeader.Brand',
+    component: SiteHeader.Brand,
+    argTypes: {
+        homeUrl: {
+            description: 'URL of the home page, used by the logo link',
+            type: 'string'
+        },
+        siteTitle: {
+            description: 'Text to use in the site title',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        children:
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.7 30.7">
+                <title>The Scottish Government</title>
+                <path fill="#fff" d="M0 0h46.8v28.9H0z"/>
+                <path fill="#0065bd" d="m6.5 1.3 16.8 9.9 16.8-9.9zm0 26.2 16.8-9.8 16.8 9.8zM1.3 4.3v20.3L18 14.5zm44.2 0v20.3L28.8 14.5z"/>
+                <path fill="#858b91" d="M202.7 26.1c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25c-.4.6-1.3 1.1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-15.3 0v-1.1c.6.8 1.6 1.3 2.6 1.3 2.1 0 3.6-1.6 3.6-4.2s-1.5-4.2-3.6-4.2c-1 0-1.9.5-2.6 1.3v-4.2h-1.8v11.2h1.8zm0-2.4v-3.2c.4-.6 1.3-1.1 2.1-1.1 1.4 0 2.3 1.1 2.3 2.7s-.9 2.7-2.3 2.7c-.9 0-1.7-.5-2.1-1.1m-4.5 2.6c.8 0 1.3-.2 1.7-.5l-.4-1.3c-.1.2-.5.3-.8.3-.5 0-.8-.4-.8-1v-8.8h-1.8v9.3c0 1.3.8 2 2.1 2m-6.6-4.1h-4l2-5.3 2 5.3zm3.6 3.9-4.4-11.2h-2.4l-4.4 11.2h2.2l.8-2.2h5.1l.8 2.2h2.3zm-11.9-4.8h-4v1.5h4v-1.5zm-5.7 4.8v-5.7c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.8 1.3v-4.2h-1.8v11.2h1.8v-5.7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.6v5.1h1.7zm-17.5-1.3c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25c-.4.6-1.3 1.1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-9.5 0v-5.7c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1.1h-1.8v8.1h1.8v-5.7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5h1.8zm-16.5.2c2.2 0 3.4-1.1 3.4-2.5 0-3.2-4.9-2.1-4.9-3.6 0-.6.6-1 1.5-1 1 0 1.9.4 2.4 1l.7-1.2a4.8 4.8 0 0 0-3.1-1.1c-2 0-3.2 1.1-3.2 2.4 0 3.1 4.9 2 4.9 3.6 0 .6-.6 1.1-1.6 1.1a4 4 0 0 1-2.7-1.1l-.8 1.3c.7.7 2 1.1 3.4 1.1m-8.8-1.5c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25c-.4.6-1.3 1.1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-10 .2c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1v-4.2h1.6v-1.5H111v-2.2h-1.8v2.2H108v1.5h1.3v4.7c0 1.3.7 2 2.1 2m-4.8 0c.8 0 1.3-.2 1.7-.5l-.4-1.3c-.1.2-.5.3-.8.3-.5 0-.8-.4-.8-1v-8.8h-1.8v9.3c0 1.3.7 2 2.1 2m-8-1.5c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25a3 3 0 0 1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-9.6 0v-5.7c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.8 1.3v-4.2h-1.8v11.2h1.8v-5.7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.6v5.1h1.7zm-13.1-1.5c-1.4 0-2.3-1-2.3-2.6s.9-2.6 2.3-2.6c.8 0 1.7.5 2.1 1.1v3a3 3 0 0 1-2.1 1.1m-.4 4.8c2 0 4.1-.8 4.1-3.7v-7.7h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.5-3.6 4.1 0 2.7 1.5 4.1 3.6 4.1a3 3 0 0 0 2.6-1.4V27c0 1.7-1.2 2.3-2.4 2.3-1.1 0-1.9-.3-2.6-1l-.8 1.3c1.1.8 2.2 1.1 3.5 1.1m-9.2-4.6c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25c-.4.6-1.3 1.1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-9.5-8.1h-1.8v8.1h1.8v-8.1zm-.9-1c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1 0 .7.5 1.1 1.1 1.1M57 21.5h-2.7V18H57c1.1 0 1.9.7 1.9 1.8 0 1-.8 1.7-1.9 1.7m4 5.9L58.2 23c1.4-.2 2.7-1.3 2.7-3.3 0-2.1-1.5-3.5-3.7-3.5h-4.9v11.2h2v-4.2h2l2.5 4.2H61z"/>
+                <path fill="#333e48" d="M205.1 12.8c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6h-1.6V2.3H203v2.2h-1.3V6h1.3v4.7c0 1.4.7 2.1 2.1 2.1m-4.7-.2V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1h-1.8v8.1h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5.1h1.8zm-10.5-4.7h-4.5c.1-1 .8-2.1 2.3-2.1 1.5 0 2.1 1.2 2.2 2.1m-2.2 4.9c1.3 0 2.5-.4 3.3-1.2l-.8-1.2c-.6.6-1.5.9-2.3.9-1.5 0-2.4-1-2.6-2.2h6.2v-.4c0-2.5-1.5-4.4-4-4.4a4 4 0 0 0-4.1 4.2c.1 2.6 1.9 4.3 4.3 4.3m-5.9-.2V6.8c0-1.6-.9-2.4-2.3-2.4-1.2 0-2.3.8-2.7 1.5-.3-.9-1-1.5-2.2-1.5-1.2 0-2.3.8-2.6 1.3V4.6h-1.8v8.1h1.8V7c.4-.5 1.1-1.1 1.9-1.1 1 0 1.3.6 1.3 1.5v5.3h1.8V7c.4-.5 1.1-1.1 1.9-1.1 1 0 1.3.6 1.3 1.5v5.3h1.6zm-13.9 0V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1h-1.8v8.1h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5.1h1.8zm-11.1 0V7.1c.4-.6 1.3-1.1 2.1-1.1h.5V4.4c-1 0-2 .6-2.6 1.4V4.6H155v8.1h1.8zm-5.1-4.7h-4.5c.1-1 .8-2.1 2.3-2.1 1.5 0 2.1 1.2 2.2 2.1m-2.2 4.9c1.3 0 2.5-.4 3.3-1.2l-.8-1.2c-.6.6-1.5.9-2.3.9-1.5 0-2.4-1-2.6-2.2h6.2v-.4c0-2.5-1.5-4.4-4-4.4a4 4 0 0 0-4.1 4.2c.1 2.6 1.9 4.3 4.3 4.3m-7.8-.2 3.3-8.1h-1.9l-2.4 6.1-2.4-6.1h-1.9l3.3 8.1h2zm-9.7-1.3c-1.5 0-2.3-1.3-2.3-2.7 0-1.4.8-2.7 2.3-2.7 1.5 0 2.3 1.3 2.3 2.7 0 1.4-.8 2.7-2.3 2.7m0 1.5c2.6 0 4.1-1.9 4.1-4.2 0-2.3-1.6-4.2-4.1-4.2s-4.1 1.9-4.1 4.2a4 4 0 0 0 4.1 4.2m-10.7 0c3.5 0 5.6-2.4 5.6-6.2h-6.1v1.7h4a3.2 3.2 0 0 1-3.3 2.7c-2.2 0-3.8-1.7-3.8-4 0-2.4 1.6-4 3.8-4 1.2 0 2.3.7 2.9 1.5l1.6-.9a5.2 5.2 0 0 0-4.5-2.3 5.7 5.7 0 0 0-5.9 5.8c0 3.5 2.7 5.7 5.7 5.7m-11.5-.2V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.8 1.3V1.5h-1.8v11.2h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.6v5.1h1.7zm-12.2.2c2.2 0 3.4-1.1 3.4-2.5 0-3.2-4.9-2.1-4.9-3.6 0-.6.6-1 1.5-1 1 0 1.9.4 2.4 1l.7-1.2a4.8 4.8 0 0 0-3.1-1.1c-2 0-3.2 1.1-3.2 2.4 0 3.1 4.9 2 4.9 3.6 0 .6-.6 1.1-1.6 1.1a4 4 0 0 1-2.7-1.1l-.8 1.3c.8.7 2 1.1 3.4 1.1m-5-8.2h-1.8v8.1h1.8V4.6zm-.9-1c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1 0 .6.5 1.1 1.1 1.1M88 12.8c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6h-1.6V2.3h-1.8v2.2h-1.3V6h1.3v4.7c.1 1.4.8 2.1 2.2 2.1m-5.6 0c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6H82V2.3h-1.8v2.2h-1.3V6h1.3v4.7c.1 1.4.8 2.1 2.2 2.1m-8.3-1.5c-1.5 0-2.3-1.3-2.3-2.7 0-1.4.8-2.7 2.3-2.7 1.5 0 2.3 1.3 2.3 2.7 0 1.4-.8 2.7-2.3 2.7m0 1.5c2.6 0 4.1-1.9 4.1-4.2 0-2.3-1.6-4.2-4.1-4.2-2.6 0-4.1 1.9-4.1 4.2a4 4 0 0 0 4.1 4.2m-8.1 0c1.6 0 2.5-.7 3.1-1.4L68 10.3c-.5.6-1.1 1-1.9 1-1.5 0-2.4-1.1-2.4-2.7s1-2.7 2.4-2.7c.8 0 1.4.3 1.9.9l1.2-1.1c-.6-.7-1.6-1.3-3.2-1.3a4.1 4.1 0 0 0-4.2 4.2c.1 2.4 1.8 4.2 4.2 4.2m-9.7 0c3 0 4.3-1.6 4.3-3.5 0-4.1-6.5-2.9-6.5-4.9.1-.8.8-1.4 1.9-1.4 1.2 0 2.4.4 3.2 1.3l1.1-1.5c-1-1-2.4-1.6-4.2-1.6-2.5 0-4.1 1.4-4.1 3.3 0 4.1 6.5 2.6 6.5 5 0 .8-.6 1.5-2.2 1.5s-2.8-.7-3.5-1.6l-1.1 1.5a6 6 0 0 0 4.6 1.9"/>
+            </svg>
+        ,
+        homeUrl: '/'
+    }
+} satisfies Meta<typeof SiteHeader.Brand>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const WithSiteTitle: Story = {
+    args: {
+        siteTitle: 'Design System React'
+    }
+};

package/src/components/SiteHeader/SiteHeader.stories.tsx

@@ -7,7 +7,7 @@ import SiteNavigation from '../SiteNavigation/SiteNavigation';
 import PhaseBanner from '../PhaseBanner/PhaseBanner';
 
 const meta = {
-    title: 'Components/Site header',
+    title: 'Components/SiteHeader',
     component: SiteHeader,
     argTypes: {
         children: argTypes.children()

package/src/components/SiteNavigation/SiteNavigation.Item.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteNavigation from './SiteNavigation';
+
+const meta = {
+    title: 'Components/SiteNavigation/SiteNavigation.Item',
+    component: SiteNavigation.Item,
+    argTypes: {
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        children: 'About',
+        href: '#about'
+    }
+} satisfies Meta<typeof SiteNavigation.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const CurrentItem: Story = {
+    args: {
+        isCurrent: true
+    }
+};

package/src/components/SiteNavigation/SiteNavigation.stories.tsx

@@ -4,10 +4,9 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import SiteNavigation from './SiteNavigation';
 
 const meta = {
-    title: 'Components/Site navigation',
+    title: 'Components/SiteNavigation',
     component: SiteNavigation,
     argTypes: {
-        linkComponent: argTypes.linkComponent(),
         children: argTypes.children()
     },
     args: {

package/src/components/SkipLinks/SkipLinks.Item.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SkipLinks from './SkipLinks';
+
+const meta = {
+    title: 'Components/SkipLinks/SkipLinks.Link',
+    component: SkipLinks.Link,
+    argTypes: {
+        fragmentId: {
+            description: 'ID of the destination element',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        children: 'Skip to main content',
+        fragmentId: 'my-main-content'
+    }
+} satisfies Meta<typeof SkipLinks.Link>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/SkipLinks/SkipLinks.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import SkipLinks from './SkipLinks';
 
 const meta = {
-    title: 'Components/Skip links',
+    title: 'Components/SkipLinks',
     component: SkipLinks,
     argTypes: {
         mainContentId: {

package/src/components/SummaryCard/SummaryCard.Action.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SummaryCard from './SummaryCard';
+
+const meta = {
+    title: 'Components/SummaryCard/SummaryCard.Action',
+    component: SummaryCard.Action,
+    argTypes: {
+        href: argTypes.href(),
+        onClick: argTypes.onClick(),
+        children: argTypes.children()
+    },
+    args: {
+        children: 'Change',
+        href: '#foo'
+    }
+} satisfies Meta<typeof SummaryCard.Action>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const ActionIsHtmlButton: Story = {
+    args: {
+        children: 'Change',
+        href: undefined
+    }
+};

package/src/components/SummaryCard/SummaryCard.stories.tsx

@@ -5,7 +5,7 @@ import SummaryCard from './SummaryCard';
 import SummaryList from '../SummaryList/SummaryList';
 
 const meta = {
-    title: 'Components/Summary card',
+    title: 'Components/SummaryCard',
     component: SummaryCard,
     argTypes: {
         headingLevel: argTypes.headingLevel(),

package/src/components/SummaryList/SummaryList.Action.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SummaryList from './SummaryList';
+
+const meta = {
+    title: 'Components/SummaryList/SummaryList.Action',
+    component: SummaryList.Action,
+    argTypes: {
+        href: argTypes.href(),
+        onClick: argTypes.onClick(),
+        children: argTypes.children()
+    },
+    args: {
+        children: 'Change',
+        href: '#foo'
+    }
+} satisfies Meta<typeof SummaryList.Action>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const ActionIsHtmlButton: Story = {
+    args: {
+        children: 'Change',
+        href: undefined
+    }
+};

package/src/components/SummaryList/SummaryList.Item.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SummaryList from './SummaryList';
+
+const meta = {
+    title: 'Components/SummaryList/SummaryList.Item',
+    component: SummaryList.Item,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: [
+            <SummaryList.Value name="Email">
+                email@gov.scot
+            </SummaryList.Value>,
+            <SummaryList.Value name="Telephone">
+                0123 456 7890
+            </SummaryList.Value>,
+            <SummaryList.Action href="foo">
+                Change
+            </SummaryList.Action>,
+            <SummaryList.Action onclick={function w(){}}>
+                Delete
+            </SummaryList.Action>
+        ]
+    }
+} satisfies Meta<typeof SummaryList.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/SummaryList/SummaryList.Value.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SummaryList from './SummaryList';
+
+const meta = {
+    title: 'Components/SummaryList/SummaryList.Value',
+    component: SummaryList.Value,
+    argTypes: {
+        name: {
+            description: 'Title of the summary list item',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        children: 'Jane Smith',
+        name: 'Name'
+    }
+} satisfies Meta<typeof SummaryList.Value>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/SummaryList/SummaryList.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import SummaryList from './SummaryList';
 
 const meta = {
-    title: 'Components/Summary list',
+    title: 'Components/SummaryList',
     component: SummaryList,
     argTypes: {
         isBorderless: argTypes.noBorder(),

package/src/components/Tabs/Tabs.Item.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Tabs from './Tabs';
+
+const meta = {
+    title: 'Components/Tabs/Tabs.Item',
+    component: Tabs.Item,
+    argTypes: {
+        tabLabel: {
+            description: '',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        baseId: 'my-tabs',
+        children: [
+            <h3>Search for training courses and funding</h3>,
+            <p>A wide range of training courses for your employees are available.</p>,
+            <p>Opportunities include distance learning, short courses and vocational training.</p>,
+            <p><a href="#">Visit My World of Work to search for training courses</a>.</p>,
+            <p>You can also <a href="#">search for training courses, and funding towards training</a>.</p>
+        ],
+        tabLabel: 'Courses and funding'
+    }
+} satisfies Meta<typeof Tabs.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/Tag/Tag.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Tag from './Tag';
 
@@ -6,12 +7,7 @@ const meta = {
     title: 'Components/Tag',
     component: Tag,
     argTypes: {
-        colour: {
-            control: { type: 'select' },
-            description: 'The tag colour to use',
-            options: ['', 'blue', 'green', 'grey', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow'],
-            type: 'string'
-        },
+        colour: argTypes.tagColour(),
     },
 } satisfies Meta<typeof Tag>;
 

package/src/components/TaskList/TaskList.Group.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import TaskList from './TaskList';
+
+const meta = {
+    title: 'Components/TaskList/TaskList.Group',
+    component: TaskList.Group,
+    argTypes: {
+        headingId: {
+            description: 'ID of the task list\'s heading element',
+            type: 'string'
+        },
+        linkComponent: argTypes.linkComponent(),
+        title: {
+            description: 'The title of the task list',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        children: argTypes.children()
+    },
+    args: {
+        title: 'Tell us about your daily living and mobility circumstances'
+    }
+} satisfies Meta<typeof TaskList.Group>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <TaskList.Group {...args}>
+            <TaskList.Item
+            href="#preparing-food"
+            id="task-preparing-food"
+            statusText="In progress"
+            tagColour="grey"
+            title="Preparing food"
+            >
+            Questions about your ability to prepare a simple meal safely and any help you need to do this.
+            </TaskList.Item>
+            <TaskList.Item
+            href="#taking-nutrition"
+            id="task-taking-nutrition"
+            statusText="Not started"
+            tagColour="grey"
+            title="Taking nutrition"
+            >
+            Questions about your ability to eat and drink and any help you need to do this.
+            </TaskList.Item>
+            <TaskList.Item
+            href="#managing-therapy"
+            id="task-managing-therapy"
+            statusText="Not started"
+            tagColour="grey"
+            title="Managing therapy or monitoring a health condition"
+            >
+            Questions about any help you need to monitor changes in your health condition, take medication or do therapy at home.
+            </TaskList.Item>
+        </TaskList.Group>
+    )
+};
+
+export const WithIntroduction: Story = {
+    args: {
+        intro: 'This information will be used to check what additional benefits you may be able to apply for.'
+    },
+    render: (args) => (
+        <TaskList.Group {...args}>
+            <TaskList.Item
+            href="#preparing-food"
+            id="task-preparing-food"
+            statusText="In progress"
+            tagColour="grey"
+            title="Preparing food"
+            >
+            Questions about your ability to prepare a simple meal safely and any help you need to do this.
+            </TaskList.Item>
+            <TaskList.Item
+            href="#taking-nutrition"
+            id="task-taking-nutrition"
+            statusText="Not started"
+            tagColour="grey"
+            title="Taking nutrition"
+            >
+            Questions about your ability to eat and drink and any help you need to do this.
+            </TaskList.Item>
+            <TaskList.Item
+            href="#managing-therapy"
+            id="task-managing-therapy"
+            statusText="Not started"
+            tagColour="grey"
+            title="Managing therapy or monitoring a health condition"
+            >
+            Questions about any help you need to monitor changes in your health condition, take medication or do therapy at home.
+            </TaskList.Item>
+        </TaskList.Group>
+    )
+};

package/src/components/TaskList/TaskList.Item.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import TaskList from './TaskList';
+
+const meta = {
+    title: 'Components/TaskList/TaskList.Item',
+    component: TaskList.Item,
+    argTypes: {
+        href: argTypes.href(),
+        id: {
+            description: 'The value of the task\'s id attribute',
+            type: 'string'
+        },
+        isComplete: {
+            control: 'boolean',
+            description: 'Whether the task is complete'
+        },
+        statusText: {
+            description: 'The text to use for the task\'s status tag',
+            type: 'string'
+        },
+        tagColour: argTypes.tagColour(),
+        title: {
+            description: 'The title of the task item',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        children: argTypes.children()
+    },
+    args: {
+        title: 'Medications'
+    }
+} satisfies Meta<typeof TaskList.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const WithTextDescription: Story = {
+    args: {
+        children: 'Tell us about any medication you need.'
+    }
+};
+
+export const WithStatusTag: Story = {
+    args: {
+        children: 'Tell us about any medication you need.',
+        statusText: 'Cannot start yet'
+    }
+};
+
+export const WithLink: Story = {
+    args: {
+        children: 'Tell us about any medication you need.',
+        href: '#medication'
+    }
+};
+
+export const Complete: Story = {
+    args: {
+        children: 'Tell us about any medication you need.',
+        isComplete: true
+    }
+};

package/src/components/TaskList/TaskList.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import TaskList from './TaskList';
 
 const meta = {
-    title: 'Components/Task list',
+    title: 'Components/TaskList',
     component: TaskList,
     argTypes: {
         headingId: {

package/src/components/TaskList/TaskList.test.tsx

@@ -219,10 +219,29 @@ test('task with custom link element', () => {
 });
 
 test('completed task has green tag', () => {
+    const STATUS_TEXT = 'MY STATUS TEXT';
+
+    render(
+        <TaskList.Item
+            id={TASK_ITEM.id}
+            statusText={STATUS_TEXT}
+            title={TASK_ITEM.title}
+            isComplete
+        >
+            {TASK_SUMMARY_CONTENT}
+        </TaskList.Item>
+    );
+
+    const tag = document.querySelector('.ds_tag');
+
+    expect(tag).toHaveClass('ds_tag--green');
+    expect(tag?.textContent).toEqual(STATUS_TEXT);
+});
+
+test('completed task has default text if no statusText set', () => {
     render(
         <TaskList.Item
             id={TASK_ITEM.id}
-            statusText={TASK_ITEM.statusText}
             title={TASK_ITEM.title}
             isComplete
         >
@@ -233,6 +252,7 @@ test('completed task has green tag', () => {
     const tag = document.querySelector('.ds_tag');
 
     expect(tag).toHaveClass('ds_tag--green');
+    expect(tag?.textContent).toEqual('Completed');
 });
 
 test('specific tag colour', () => {

package/src/components/TaskList/TaskList.tsx

@@ -18,6 +18,7 @@ const TaskItem = ({
 }: SGDS.Component.TaskList.Item) => {
     if (isComplete) {
         tagColour = 'green';
+        statusText = statusText || 'Completed'
     }
 
     const LINK_CLASS = 'ds_task-list__task-link';