@scottish-government/designsystem-react 0.10.1 → 0.10.2

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ContentsNav from './ContentsNav';
+
+const meta = {
+    title: 'Components/ContentsNav/ContentsNav.Item',
+    component: ContentsNav.Item,
+    argTypes: {
+        isCurrent: argTypes.isCurrent(),
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            Apply for Blue Badge
+        </>,
+        href: '#foo'
+    }
+} satisfies Meta<typeof ContentsNav.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const Current: Story = {
+    args: {
+        isCurrent: true
+    }
+};
+
+export const NoLink: Story = {
+    args: {
+        href: undefined
+    }
+};
+
+export const NoLinkCurrent: Story = {
+    args: {
+        href: undefined,
+        isCurrent: true
+    }
+};

package/src/components/ContentsNav/ContentsNav.stories.tsx

@@ -4,12 +4,11 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import ContentsNav from './ContentsNav';
 
 const meta = {
-    title: 'Components/Contents nav',
+    title: 'Components/ContentsNav',
     component: ContentsNav,
     argTypes: {
         ariaLabel: argTypes.ariaLabel({description: 'Text to use for the content nav\'s aria-label property'}),
         children: argTypes.children(),
-        linkComponent: argTypes.linkComponent(),
         title: {
             description: 'Title of the contents nav',
             type: 'string'

package/src/components/CookieBanner/CookieBanner.Buttons.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import CookieBanner from './CookieBanner';
+import Button from '../Button/Button';
+
+const meta = {
+    title: 'Components/CookieBanner/CookieBanner.Buttons',
+    component: CookieBanner.Buttons,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: [
+            <Button className="js-accept-all-cookies" small buttonStyle="secondary">Accept all cookies</Button>,
+            <Button className="js-accept-essential-cookies" small buttonStyle="secondary">Use essential cookies only</Button>,
+            <a href="/cookies/">Set cookie preferences</a>
+        ]
+    }
+} satisfies Meta<typeof CookieBanner.Buttons>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/CookieBanner/CookieBanner.stories.tsx

@@ -5,7 +5,7 @@ import CookieBanner from './CookieBanner';
 import Button from '../Button/Button';
 
 const meta = {
-    title: 'Components/Cookie banner',
+    title: 'Components/CookieBanner',
     component: CookieBanner,
     argTypes: {
         children: argTypes.children()
@@ -16,7 +16,7 @@ const meta = {
                 experience.</p>,
             <p key="bar">Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
                 To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>,
-            <CookieBanner.Buttons key="baz">
+            <CookieBanner.Buttons>
                 <Button className="js-accept-all-cookies" small buttonStyle="secondary">Accept all cookies</Button>
                 <Button className="js-accept-essential-cookies" small buttonStyle="secondary">Use essential cookies only</Button>
                 <a href="/cookies/">Set cookie preferences</a>

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import DatePicker from './DatePicker';
 
 const meta = {
-    title: 'Components/Date picker',
+    title: 'Components/DatePicker',
     component: DatePicker,
     argTypes: {
         dateSelectCallback: {},

package/src/components/ErrorMessage/ErrorMessage.stories.tsx

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

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ErrorSummary from './ErrorSummary';
+
+const meta = {
+    title: 'Components/ErrorSummary/ErrorSummary.Item',
+    component: ErrorSummary.Item,
+    argTypes: {
+        fragmentId: {
+            description: 'ID of the question or field to link to',
+            type: 'string'
+        },
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        fragmentId: 'did-resolve',
+        children: 'Did this resolve your issue?'
+    }
+} satisfies Meta<typeof ErrorSummary.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/ErrorSummary/ErrorSummary.stories.tsx

@@ -4,10 +4,9 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import ErrorSummary from './ErrorSummary';
 
 const meta = {
-    title: 'Components/Error summary',
+    title: 'Components/ErrorSummary',
     component: ErrorSummary,
     argTypes: {
-        linkComponent: argTypes.linkComponent(),
         title: {
             description: 'The title of the error summary',
             type: 'string'

package/src/components/FileDownload/FileDownload.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import FileDownload from './FileDownload';
 
 const meta = {
-    title: 'Components/File download',
+    title: 'Components/FileDownload',
     component: FileDownload,
     argTypes: {
         cover: {

package/src/components/HideThisPage/HideThisPage.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import HideThisPage from './HideThisPage';
 
 const meta = {
-    title: 'Components/Hide this page',
+    title: 'Components/HideThisPage',
     component: HideThisPage,
     argTypes: {
         escapeUrl: {

package/src/components/InsetText/InsetText.stories.tsx

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

package/src/components/NotificationBanner/NotificationBanner.stories.tsx

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

package/src/components/NotificationPanel/NotificationPanel.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import NotificationPanel from './NotificationPanel';
 
 const meta = {
-    title: 'Components/Notification panel',
+    title: 'Components/NotificationPanel',
     component: NotificationPanel,
     argTypes: {
         ariaLive: argTypes.ariaLive(),

package/src/components/PageHeader/PageHeader.stories.tsx

@@ -5,7 +5,7 @@ import PageHeader from './PageHeader';
 import Metadata from '../PageMetadata/PageMetadata';
 
 const meta = {
-    title: 'Components/Page header',
+    title: 'Components/PageHeader',
     component: PageHeader,
     argTypes: {
         children: argTypes.children(),

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Metadata from './PageMetadata';
+
+const meta = {
+    title: 'Components/PageMetadata/PageMetadata.Item',
+    component: Metadata.Item,
+    argTypes: {
+        children: argTypes.children(),
+        name: {
+            description: 'The name or key of the metadata item',
+            type: {
+                name: 'string',
+                required: true
+            }
+        }
+    },
+    args: {
+        name: 'Last updated',
+        children: '21/04/2020'
+
+    }
+} satisfies Meta<typeof Metadata.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/PageMetadata/PageMetadata.stories.tsx

@@ -4,19 +4,24 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import Metadata from './PageMetadata';
 
 const meta = {
-    title: 'Components/Page metadata',
+    title: 'Components/PageMetadata',
     component: Metadata,
     argTypes: {
         children: argTypes.children(),
-         isInline: {
+        isInline: {
             control: 'boolean',
             description: 'Makes the page metadata use the truncated ‘inline’ display'
         },
     },
     args: {
-        children: <Metadata.Item name="Last updated">
-            21/04/2020
-        </Metadata.Item>
+        children: <>
+            <Metadata.Item name="Content type">
+                Publication
+            </Metadata.Item>
+            <Metadata.Item name="Last updated">
+                21/04/2020
+            </Metadata.Item>
+        </>
     }
 } satisfies Meta<typeof Metadata>;
 

package/src/components/PhaseBanner/PhaseBanner.stories.tsx

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

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import RadioButton from './RadioButton';
 
 const meta = {
-    title: 'Components/Radio button',
+    title: 'Components/Radio/Radio button',
     component: RadioButton,
     argTypes: {
         checked: {

package/src/components/RadioButton/RadioGroup.stories.tsx

@@ -5,7 +5,7 @@ import RadioButton from '../RadioButton/RadioButton';
 import RadioGroup from './RadioGroup';
 
 const meta = {
-    title: 'Components/Radio group',
+    title: 'Components/Radio/Radio group',
     component: RadioGroup,
     argTypes: {
         isInline: {

package/src/components/SequentialNavigation/SequentialNavigation.Next.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SequentialNavigation from './SequentialNavigation';
+
+const meta = {
+    title: 'Components/SequentialNavigation/SequentialNavigation.Next',
+    component: SequentialNavigation.Next,
+    argTypes: {
+        href: argTypes.href(),
+        linkComponent: argTypes.linkComponent(),
+        textLabel: {
+            description: 'String to use for the label that precedes the link text',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        href: '#previous',
+        children: 'Apply for or renew a Blue Badge'
+    }
+} satisfies Meta<typeof SequentialNavigation.Next>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const CustomLabel: Story = {
+    args: {
+        textLabel: 'Next page'
+    }
+}

package/src/components/SequentialNavigation/SequentialNavigation.Previous.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SequentialNavigation from './SequentialNavigation';
+
+const meta = {
+    title: 'Components/SequentialNavigation/SequentialNavigation.Previous',
+    component: SequentialNavigation.Previous,
+    argTypes: {
+        href: argTypes.href(),
+        linkComponent: argTypes.linkComponent(),
+        textLabel: {
+            description: 'String to use for the label that precedes the link text',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        href: '#previous',
+        children: 'Apply for or renew a Blue Badge'
+    }
+} satisfies Meta<typeof SequentialNavigation.Previous>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const CustomLabel: Story = {
+    args: {
+        textLabel: 'Previous page'
+    }
+}

package/src/components/SequentialNavigation/SequentialNavigation.stories.tsx

@@ -4,11 +4,10 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import SequentialNavigation from './SequentialNavigation';
 
 const meta = {
-    title: 'Components/Sequential navigation',
+    title: 'Components/SequentialNavigation',
     component: SequentialNavigation,
     argTypes: {
         ariaLabel: argTypes.ariaLabel({ description: 'Text to use for an aria-label attribute on the nav element' }),
-        linkComponent: argTypes.linkComponent(),
         children: argTypes.children()
     },
     args: {

package/src/components/SequentialNavigation/SequentialNavigation.test.tsx

@@ -72,6 +72,21 @@ test('sequential nav links with custom element', () => {
     expect(link?.textContent).toEqual(PREVIOUS_LINK_OBJECT.title);
 });
 
+test('custom text label on link', () => {
+    const TEXT_LABEL = 'foo';
+
+    render(
+        <SequentialNavigation>
+            <SequentialNavigation.Previous textLabel={TEXT_LABEL} href={PREVIOUS_LINK_OBJECT.href}>
+                {PREVIOUS_LINK_OBJECT.title}
+            </SequentialNavigation.Previous>
+        </SequentialNavigation>
+    );
+
+    const prevLink = screen.getAllByRole('link')[0];
+    expect(prevLink.querySelector('span')?.dataset.label).toEqual(TEXT_LABEL);
+});
+
 test('passing additional props', () => {
     render(
         <SequentialNavigation data-test="foo" />

package/src/components/SequentialNavigation/SequentialNavigation.tsx

@@ -5,6 +5,7 @@ const SeqNavLink = ({
     linkComponent,
     textLabel
 }: SGDS.Component.SequentialNavigation.Link) => {
+    console.log(textLabel)
     const LINK_CLASSES = [
         'ds_sequential-nav__button',
         isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'

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

@@ -0,0 +1,36 @@
+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,
+    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,46 @@
+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,
+    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/SiteFooter/SiteFooter.License.stories.tsx

@@ -0,0 +1,39 @@
+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,
+    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,25 @@
+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,
+    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 = {
+
+};