@scottish-government/designsystem-react 0.10.1 → 0.11.0

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SideNavigation from './SideNavigation';
+
+const meta = {
+    title: 'Components/SideNavigation/SideNavigation.Item',
+    component: SideNavigation.Item,
+    decorators: [
+        Story => (
+            <nav className="ds_side-navigation">
+                <ul className="ds_side-navigation__list">
+                    <Story />
+                </ul>
+            </nav>
+        )
+    ],
+    argTypes: {
+        href: argTypes.href(),
+        isCurrent: argTypes.isCurrent(),
+        linkComponent: argTypes.linkComponent(),
+        title: {
+            description: 'Text of the navigation item',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        href: '#bananas',
+        title: 'Bananas'
+    }
+} satisfies Meta<typeof SideNavigation.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const CurrentItem: Story = {
+    args: {
+        isCurrent: true
+    }
+};

package/src/components/SideNavigation/SideNavigation.List.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SideNavigation from './SideNavigation';
+
+const meta = {
+    title: 'Components/SideNavigation/SideNavigation.List',
+    component: SideNavigation.List,
+    decorators: [
+        Story => (
+            <nav className="ds_side-navigation">
+                <Story />
+            </nav>
+        )
+    ],
+    argTypes: {
+        isRoot: {
+            description: 'Indicates that this is the root list in a nested structure. Required for mobile navigation.',
+            control: 'boolean'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <SideNavigation.Item
+                isCurrent
+                href="#apples"
+                title="Apples"
+            >
+            </SideNavigation.Item>
+            <SideNavigation.Item
+                href="#bananas"
+                title="Bananas"
+            />
+            <SideNavigation.Item
+                href="#cherries"
+                title="Cherries"
+            />
+            <SideNavigation.Item
+                href="#dates"
+                title="Dates"
+            />
+        </>,
+        isRoot: true
+    }
+} satisfies Meta<typeof SideNavigation.List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/SideNavigation/SideNavigation.stories.tsx

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

package/src/components/SideNavigation/SideNavigation.tsx

@@ -43,6 +43,7 @@ const SideNavigationItem = function ({
 };
 
 const SideNavigation = function ({
+    ariaLabel = 'Sections',
     children,
     className,
     ...props
@@ -57,7 +58,7 @@ const SideNavigation = function ({
 
     return (
         <nav
-            aria-label="Sections"
+            aria-label={ariaLabel}
             className={[
                 'ds_side-navigation',
                 className

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteFooter from './SiteFooter';
+
+const meta = {
+    title: 'Components/SiteFooter/SiteFooter.License',
+    component: SiteFooter.License,
+    decorators: [
+        Story => (
+            <nav className="ds_site-footer" style={{borderTop: 0}}>
+                <Story />
+            </nav>
+        )
+    ],
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <svg focusable="false" version="1.1" width="41" height="17" id="ogl-logo" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                viewBox="0 0 852.16 345.09">
+                <title>ogl</title>
+                <polygon className="fill" points="743.3 251.79 743.3 0.2 653.9 57.2 653.9 341.2 852.16 341.2 852.16 251.79 743.3 251.79"></polygon>
+                <path className="fill" d="M599.62,312.56a83.12,83.12,0,1,1,15.26-107.08l75.36-48a172.35,172.35,0,0,0-295.59,7.84A172.61,172.61,0,0,0,244.49,77.59C149.35,77.59,72,155,72,250.14s77.4,172.54,172.54,172.54A172.6,172.6,0,0,0,394.65,335a172.29,172.29,0,0,0,263.9,44.78l34.25,39.07h5.33V264H557ZM244.49,333.28a83.14,83.14,0,1,1,83.14-83.14A83.24,83.24,0,0,1,244.49,333.28Z" transform="translate(-71.95 -77.59)"/>
+            </svg>
+            <p>
+            All content is available under the{' '}
+            <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">
+                Open Government Licence v3.0
+            </a>
+            , except for graphic assets and where otherwise stated
+            </p>
+            <p>
+            © Crown Copyright
+            </p>
+        </>
+    }
+} satisfies Meta<typeof SiteFooter.License>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteFooter from './SiteFooter';
+
+const meta = {
+    title: 'Components/SiteFooter/SiteFooter.Link',
+    component: SiteFooter.Link,
+    decorators: [
+        Story => (
+            <div className="ds_site-footer__site-items" style={{ borderBottom: 0 }}>
+                <ul>
+                    <Story />
+                </ul>
+            </div>
+        )
+    ],
+    argTypes: {
+        href: argTypes.href(),
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        children: 'Cookies',
+        href: '#cookies'
+    }
+} satisfies Meta<typeof SiteFooter.Link>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteFooter from './SiteFooter';
+
+const meta = {
+    title: 'Components/SiteFooter/SiteFooter.Links',
+    component: SiteFooter.Links,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <SiteFooter.Link href="#">
+                Privacy
+            </SiteFooter.Link>
+            <SiteFooter.Link href="#">
+                Cookies
+            </SiteFooter.Link>
+            <SiteFooter.Link href="#">
+                Accessibility
+            </SiteFooter.Link>
+        </>
+    }
+} satisfies Meta<typeof SiteFooter.Links>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,45 @@
+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,
+    decorators: [
+        Story => (
+            <div className="ds_site-footer__content" style={{borderTop: 0}}>
+                <Story />
+            </div>
+        )
+    ],
+    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,40 @@
+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,
+    decorators: [
+        Story => (
+            <nav className="ds_site-navigation">
+                <ul className="ds_site-navigation__list">
+                    <Story />
+                </ul>
+            </nav>
+        )
+    ],
+    argTypes: {
+        href: argTypes.href({type: {name: 'string', required: true}}),
+        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,37 @@
+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,
+    decorators: [
+        Story => (
+            <ul className="ds_skip-links">
+                <Story />
+            </ul>
+        )
+    ],
+    argTypes: {
+        fragmentId: {
+            description: 'ID of the destination element',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        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,39 @@
+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,
+    decorators: [
+        Story => (
+            <div className="ds_summary-card__header">
+                <Story />
+            </div>
+        )
+    ],
+    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,10 +5,17 @@ import SummaryCard from './SummaryCard';
 import SummaryList from '../SummaryList/SummaryList';
 
 const meta = {
-    title: 'Components/Summary card',
+    title: 'Components/SummaryCard',
     component: SummaryCard,
     argTypes: {
         headingLevel: argTypes.headingLevel(),
+        title: {
+            description: 'The title of the summary card',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
         children: argTypes.children()
     },
     args: {

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,50 @@
+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,
+    decorators: [
+        Story => (
+            <ul>
+                <Story />
+            </ul>
+        )
+    ],
+    argTypes: {
+        Title: {
+            description: 'Title of the summary list item.',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        children: argTypes.children()
+    },
+    args: {
+        title: 'Contact details',
+        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,30 @@
+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: 'Name of the summary value',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        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(),