@scottish-government/designsystem-react 0.8.0 → 0.10.0-beta.0

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteFooter from './SiteFooter';
+
+const meta = {
+    title: 'Components/Site footer',
+    component: SiteFooter,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <SiteFooter.Links>
+                <SiteFooter.Link href="#">
+                Privacy
+                </SiteFooter.Link>
+                <SiteFooter.Link href="#">
+                Cookies
+                </SiteFooter.Link>
+                <SiteFooter.Link href="#">
+                Accessibility
+                </SiteFooter.Link>
+            </SiteFooter.Links>
+            <SiteFooter.License>
+                <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>
+            </SiteFooter.License>
+            <SiteFooter.Org
+                href="https://www.gov.scot/"
+                title="The Scottish Government"
+            >
+                <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>
+            </SiteFooter.Org>
+        </>
+    }
+} satisfies Meta<typeof SiteFooter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteHeader from './SiteHeader';
+import SiteSearch from '../SiteSearch/SiteSearch';
+import SiteNavigation from '../SiteNavigation/SiteNavigation';
+import PhaseBanner from '../PhaseBanner/PhaseBanner';
+
+const meta = {
+    title: 'Components/Site header',
+    component: SiteHeader,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: [
+            <SiteHeader.Brand
+                homeUrl="/"
+                siteTitle="Design System React"
+            >
+                <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>
+            </SiteHeader.Brand>,
+            <SiteHeader.Navigation>
+                <SiteNavigation>
+                <SiteNavigation.Item href="#about">
+                    About
+                </SiteNavigation.Item>
+                <SiteNavigation.Item href="#get-started">
+                    Get started
+                </SiteNavigation.Item>
+                <SiteNavigation.Item href="#styles">
+                    Styles
+                </SiteNavigation.Item>
+                <SiteNavigation.Item
+                    isCurrent
+                    href="#components"
+                >
+                    Components
+                </SiteNavigation.Item>
+                <SiteNavigation.Item href="#patterns">
+                    Patterns
+                </SiteNavigation.Item>
+                <SiteNavigation.Item href="#guidance">
+                    Guidance
+                </SiteNavigation.Item>
+                </SiteNavigation>
+            </SiteHeader.Navigation>,
+            <SiteHeader.Search>
+                <SiteSearch id="site-header-search" />
+            </SiteHeader.Search>,
+            <SiteHeader.Phase>
+                <PhaseBanner phaseName="Beta">
+                This is a new service. Your{' '}
+                <a href="#feedback">
+                    feedback
+                </a>
+                {' '}will help us to improve it.
+                </PhaseBanner>
+            </SiteHeader.Phase>
+        ]
+    }
+} satisfies Meta<typeof SiteHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const BrandOnly: Story = {
+    args: {
+        children: <SiteHeader.Brand
+                homeUrl="/"
+                siteTitle="Design System React"
+            >
+                <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>
+            </SiteHeader.Brand>
+    }
+};

package/src/components/SiteHeader/SiteHeader.tsx

@@ -56,11 +56,6 @@ const Search = ({
 
 const SiteHeader = ({
     children,
-    logo = {},
-    navigationItems,
-    phaseBanner,
-    siteSearch,
-    siteTitle,
     ...props
 }: SGDS.Component.SiteHeader) => {
     const mobileMenuRef = useRef(null);
@@ -108,8 +103,8 @@ const SiteHeader = ({
                             <div className="ds_site-header__controls">
                                 <label aria-controls="mobile-navigation" className="ds_site-header__control  js-toggle-menu" htmlFor="menu">
                                     <span className="ds_site-header__control-text">Menu</span>
-                                    <Icon fill className="ds_site-header__control-icon" icon="Menu" aria-hidden="true" />
-                                    <Icon fill className="ds_site-header__control-icon  ds_site-header__control-icon--active-icon" icon="Close" aria-hidden="true" />
+                                    <Icon isFilled className="ds_site-header__control-icon" icon="Menu" aria-hidden="true" />
+                                    <Icon isFilled className="ds_site-header__control-icon  ds_site-header__control-icon--active-icon" icon="Close" aria-hidden="true" />
                                 </label>
                             </div>
 

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteNavigation from './SiteNavigation';
+
+const meta = {
+    title: 'Components/Site navigation',
+    component: SiteNavigation,
+    argTypes: {
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <SiteNavigation.Item href="#about">
+                About
+            </SiteNavigation.Item>
+            <SiteNavigation.Item href="#get-started">
+                Get started
+            </SiteNavigation.Item>
+            <SiteNavigation.Item href="#styles">
+                Styles
+            </SiteNavigation.Item>
+            <SiteNavigation.Item
+                isCurrent
+                href="#components"
+            >
+                Components
+            </SiteNavigation.Item>
+            <SiteNavigation.Item href="#patterns">
+                Patterns
+            </SiteNavigation.Item>
+            <SiteNavigation.Item href="#guidance">
+                Guidance
+            </SiteNavigation.Item>
+        </>
+    }
+} satisfies Meta<typeof SiteNavigation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/SiteNavigation/SiteNavigation.test.tsx

@@ -64,7 +64,7 @@ test('site navigation link with custom element', () => {
 
 test('highlights current item', () => {
     render(
-        <SiteNavigation.Item href={LINK_HREF} current>{LINK_TEXT}</SiteNavigation.Item>
+        <SiteNavigation.Item href={LINK_HREF} isCurrent>{LINK_TEXT}</SiteNavigation.Item>
     );
 
     const link = screen.getByRole('link');

package/src/components/SiteNavigation/SiteNavigation.tsx

@@ -1,13 +1,13 @@
 const Item = ({
     children,
-    current = false,
+    isCurrent = false,
     href,
     linkComponent
 }: SGDS.Component.SiteNavigation.Item) => {
     const classNames = ['ds_site-navigation__link'];
     let ariaCurrent: React.AriaAttributes["aria-current"];
 
-    if (current) {
+    if (isCurrent) {
         classNames.push('ds_current');
         ariaCurrent = 'page';
     }

package/src/components/SiteSearch/SiteSearch.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SiteSearch from './SiteSearch';
+
+type AutocompleteResponseObject = {
+    key: string,
+    displayText: string,
+    weight: string,
+    type: string,
+    category: string
+}
+
+const suggestionMappingFunction = function (request: XMLHttpRequest) {
+    const responseObj = JSON.parse(request.response).map((item: string) => ({
+        key: '',
+        displayText: item,
+        weight: '',
+        type: '',
+        category: ''
+    }));
+    const siteSearchElement = document.getElementById('site-search') as HTMLInputElement;
+    const filteredResults = responseObj.filter((item: AutocompleteResponseObject) => (item.displayText.toLowerCase().indexOf(siteSearchElement.value.toLowerCase()) > -1));
+    return filteredResults.slice(0,6);
+}
+
+const meta = {
+    title: 'Components/Site search',
+    component: SiteSearch,
+    argTypes: {
+        action: {
+            description: 'The value of the search form\'s action atttribute',
+            type: 'string'
+        },
+        autocompleteEndpoint: {
+            description: 'The endpoint used by the autocomplete',
+            type: 'string'
+        },
+        autocompleteSuggestionMappingFunction: {
+            control: false,
+            description: 'A JavaScript function that maps the results from the endpoint into the expected format',
+            type: 'function'
+        },
+        id: argTypes.id(),
+        method: {
+            description: 'The form method to use',
+            options: ['GET', 'POST'],
+            control: { type: 'radio' },
+            type: 'string'
+        },
+        minLength: {
+            description: 'The number of characters that need to be entered before requests are sent to the autocomplete endpoint',
+            type: 'number'
+        },
+        name: {
+            description: '',
+            type: 'string'
+        },
+        placeholder: {
+            description: '',
+            type: 'string'
+        }
+    },
+    args: {
+        id: 'site-search'
+    }
+} satisfies Meta<typeof SiteSearch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const Autocomplete: Story = {
+    args: {
+        autocompleteEndpoint: 'static/data/autocomplete-dummy-data.json?',
+        autocompleteSuggestionMappingFunction: suggestionMappingFunction
+    }
+}

package/src/components/SiteSearch/SiteSearch.tsx

@@ -81,7 +81,7 @@ const SiteSearch = function ({
                         type="search"
                     />
 
-                    <Button type="submit" icon="Search" iconOnly>Search</Button>
+                    <Button type="submit" icon="Search" isIconOnly>Search</Button>
 
                     {hasAutocomplete && (
                         <div id="autocomplete-suggestions" className="ds_autocomplete__suggestions">

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SkipLinks from './SkipLinks';
+
+const meta = {
+    title: 'Components/Skip links',
+    component: SkipLinks,
+    argTypes: {
+        mainContentId: {
+            description: 'The id attribute of the ‘main content’ element to link to',
+            type: 'string'
+        },
+        mainLinkText: {
+            description: 'The text to use for the ‘main content’ link',
+            type: 'string'
+        },
+        isStatic: {
+            control: 'boolean',
+            description: 'Use the ‘static’ display variant'
+        },
+        children: argTypes.children()
+    },
+    args: {
+
+    }
+} satisfies Meta<typeof SkipLinks>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const MultipleLinks: Story = {
+    args: {
+        children: <>
+            <SkipLinks.Link fragmentId="my-main-content">
+                Skip to main content
+            </SkipLinks.Link>
+            <SkipLinks.Link fragmentId="other-important-content">
+                Other important content
+            </SkipLinks.Link>
+        </>
+    }
+};
+
+export const Static: Story = {
+    args: {
+        isStatic: true,
+        children:
+            <SkipLinks.Link fragmentId="search-results">
+                Skip to search results
+            </SkipLinks.Link>
+    }
+};

package/src/components/SkipLinks/SkipLinks.tsx

@@ -34,7 +34,7 @@ const SkipLinks = ({
 };
 
 SkipLinks.displayName = 'SkipLinks';
-Link.displayName = 'SkipLink';
+Link.displayName = 'SkipLinks.Link';
 SkipLinks.Link = Link;
 
 export default SkipLinks;

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SummaryCard from './SummaryCard';
+import SummaryList from '../SummaryList/SummaryList';
+
+const meta = {
+    title: 'Components/Summary card',
+    component: SummaryCard,
+    argTypes: {
+        headingLevel: argTypes.headingLevel(),
+        children: argTypes.children()
+    },
+    args: {
+        children: [
+            <SummaryCard.Action key="foo" href="#foo">
+                Change
+            </SummaryCard.Action>,
+            <SummaryCard.Action key="bar" onclick={() => alert('click')}>
+                Delete
+            </SummaryCard.Action>,
+            <SummaryList key="baz">
+                <SummaryList.Item title="Phone number">
+                    <SummaryList.Value>
+                        0123 456 7890
+                    </SummaryList.Value>
+                </SummaryList.Item>
+                <SummaryList.Item title="Address">
+                    <SummaryList.Value>
+                        Victoria Quay<br />
+                        Edinburgh<br />
+                        EH6 6QQ
+                    </SummaryList.Value>
+                </SummaryList.Item>
+            </SummaryList>
+        ],
+        title: 'Joe Bloggs'
+    }
+} satisfies Meta<typeof SummaryCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SummaryList from './SummaryList';
+
+const meta = {
+    title: 'Components/Summary list',
+    component: SummaryList,
+    argTypes: {
+        isBorderless: argTypes.noBorder(),
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <SummaryList.Item title="Name">
+                <SummaryList.Value>
+                    Jane Smith
+                </SummaryList.Value>
+                <SummaryList.Action href="#foo">
+                    Change
+                </SummaryList.Action>
+                <SummaryList.Action onclick={function w(){}}>
+                    Delete
+                </SummaryList.Action>
+            </SummaryList.Item>
+            <SummaryList.Item title="Date of birth">
+                <SummaryList.Value>
+                    13 April 2001
+                </SummaryList.Value>
+                <SummaryList.Action href="#bar">
+                    Change
+                </SummaryList.Action>
+            </SummaryList.Item>
+            <SummaryList.Item title="Address">
+                <SummaryList.Value>
+                    Scottish Government<br />
+                    St Andrew's House<br />
+                    Regent Road<br />
+                    Edinburgh<br />
+                    EH1 3DG
+                </SummaryList.Value>
+                <SummaryList.Action href="#baz">
+                    Change
+                </SummaryList.Action>
+            </SummaryList.Item>
+            <SummaryList.Item title="Contact details">
+                <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>
+            </SummaryList.Item>
+        </>
+    }
+} satisfies Meta<typeof SummaryList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const NoBorder: Story = {
+    args: {
+        isBorderless: true
+    }
+};

package/src/components/SummaryList/SummaryList.test.tsx

@@ -33,7 +33,7 @@ test('summary list renders correctly', () => {
 
 test('summary list without border', () => {
     render(
-        <SummaryList noBorder/>
+        <SummaryList isBorderless/>
     );
 
     const summaryList = screen.getAllByRole('list')[0];

package/src/components/SummaryList/SummaryList.tsx

@@ -73,14 +73,14 @@ const Value = ({
 const SummaryList = ({
     children,
     className,
-    noBorder,
+    isBorderless,
     ...props
 }: SGDS.Component.SummaryList) => {
     return (
         <ol
             className={[
                 'ds_summary-list',
-                noBorder && 'ds_summary-list--no-border',
+                isBorderless && 'ds_summary-list--no-border',
                 className
             ].join(' ')}
             {...props}
@@ -98,6 +98,6 @@ SummaryList.Value = Value;
 SummaryList.displayName = 'SummaryList';
 SummaryList.Action.displayName = 'SummaryList.Action';
 Item.displayName = 'SummaryList.Item';
-Value.displayName = 'SumaryList.Value';
+Value.displayName = 'SummaryList.Value';
 
 export default SummaryList;