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

package/src/components/CategoryList/CategoryList.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import CategoryList from './CategoryList';
+import CategoryItem from '../CategoryItem/CategoryItem';
+
+const meta = {
+    title: 'Components/Category list',
+    component: CategoryList,
+    argTypes: {
+        children: argTypes.children(),
+        isGrid: {
+            description: 'Show the category items in a grid',
+            type: 'boolean'
+        },
+        isOrdered: {
+            description: 'Use an ordered list for the category items in the list',
+            type: 'boolean'
+        }
+    },
+    args: {
+    }
+} satisfies Meta<typeof CategoryList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <CategoryList {...args}>
+            <CategoryItem title="Public transport, bus passes and discounts" href="#foo">Find information about local travel by road, rail and water and National Entitlement Cards.</CategoryItem>
+            <CategoryItem title="Parking and Blue Badges" href="#bar">Find out about getting a disabled parking space and information on Blue Badges.</CategoryItem>
+            <CategoryItem title="Apply to reduce your driving disqualification period" href="#baz">How to apply to court to reduce your driving ban. Includes who can apply and how much it costs.</CategoryItem>
+            <CategoryItem title="Road safety: parking tickets, fines and bans" href="#qux">Find out about the drink-drive limit, how to stay safe on the roads and what to do if you receive parking tickets.</CategoryItem>
+        </CategoryList>
+    )
+};
+
+export const Grid: Story = {
+    args: {
+        isGrid: true
+    },
+    render: (args) => (
+        <CategoryList {...args}>
+            <CategoryItem title="Public transport, bus passes and discounts" href="#foo">Find information about local travel by road, rail and water and National Entitlement Cards.</CategoryItem>
+            <CategoryItem title="Parking and Blue Badges" href="#bar">Find out about getting a disabled parking space and information on Blue Badges.</CategoryItem>
+            <CategoryItem title="Apply to reduce your driving disqualification period" href="#baz">How to apply to court to reduce your driving ban. Includes who can apply and how much it costs.</CategoryItem>
+            <CategoryItem title="Road safety: parking tickets, fines and bans" href="#qux">Find out about the drink-drive limit, how to stay safe on the roads and what to do if you receive parking tickets.</CategoryItem>
+        </CategoryList>
+    )
+};
+
+export const OrderedList: Story = {
+    args: {
+        isOrdered: true
+    },
+    render: (args) => (
+        <CategoryList {...args}>
+            <CategoryItem title="Public transport, bus passes and discounts" href="#foo">Find information about local travel by road, rail and water and National Entitlement Cards.</CategoryItem>
+            <CategoryItem title="Parking and Blue Badges" href="#bar">Find out about getting a disabled parking space and information on Blue Badges.</CategoryItem>
+            <CategoryItem title="Apply to reduce your driving disqualification period" href="#baz">How to apply to court to reduce your driving ban. Includes who can apply and how much it costs.</CategoryItem>
+            <CategoryItem title="Road safety: parking tickets, fines and bans" href="#qux">Find out about the drink-drive limit, how to stay safe on the roads and what to do if you receive parking tickets.</CategoryItem>
+        </CategoryList>
+    )
+};

package/src/components/CategoryList/CategoryList.test.tsx

@@ -0,0 +1,59 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import CategoryList from './CategoryList';
+import CategoryItem from '../CategoryItem/CategoryItem';
+
+test('category list renders correctly', () => {
+    render(
+        <CategoryList>
+            <CategoryItem data-testid="category-item" title="Public transport, bus passes and discounts" href="#foo">Find information about local travel by road, rail and water and National Entitlement Cards.</CategoryItem>
+            <CategoryItem title="Parking and Blue Badges" href="#bar">Find out about getting a disabled parking space and information on Blue Badges.</CategoryItem>
+            <CategoryItem title="Apply to reduce your driving disqualification period" href="#baz">How to apply to court to reduce your driving ban. Includes who can apply and how much it costs.</CategoryItem>
+            <CategoryItem title="Road safety: parking tickets, fines and bans" href="#qux">Find out about the drink-drive limit, how to stay safe on the roads and what to do if you receive parking tickets.</CategoryItem>
+        </CategoryList>
+    );
+
+    const categoryList = screen.getByRole('list');
+    expect(categoryList).toHaveClass('ds_category-list');
+    expect(categoryList).not.toHaveClass('ds_category-list--grid');
+    expect(categoryList.tagName).toEqual('UL');
+
+    const child = within(categoryList).getByTestId('category-item');
+    expect(child.tagName).toEqual('LI');
+});
+
+test('ordered category list', () => {
+    render(
+        <CategoryList isOrdered data-test="foo" />
+    );
+
+    const categoryList = screen.getByRole('list');
+    expect(categoryList.tagName).toEqual('OL');
+});
+
+test('grid category list', () => {
+    render(
+        <CategoryList isGrid data-test="foo" />
+    );
+
+    const categoryList = screen.getByRole('list');
+    expect(categoryList).toHaveClass('ds_category-list--grid');
+});
+
+test('passing additional props', () => {
+    render(
+        <CategoryList data-test="foo" />
+    );
+
+    const categoryList = screen.getByRole('list');
+    expect(categoryList.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <CategoryList className="foo" />
+    );
+
+    const categoryList = screen.getByRole('list');
+    expect(categoryList).toHaveClass('foo');
+});

package/src/components/CategoryList/CategoryList.tsx

@@ -0,0 +1,33 @@
+import React, { Children } from 'react';
+import WrapperTag from "../../common/WrapperTag";
+
+const CategoryList = ({
+    children,
+    className,
+    isGrid,
+    isOrdered,
+    ...props
+}: SGDS.Component.CategoryList) => {
+    function processChild(child: React.ReactNode) {
+        const thisChild = child as React.ReactElement<SGDS.Component.CategoryItem>
+        return React.cloneElement(thisChild, {tagName: 'li'})
+    }
+
+    return (
+        <WrapperTag
+            tagName={isOrdered ? 'ol' : 'ul'}
+            className={[
+                'ds_category-list',
+                isGrid && 'ds_category-list--grid',
+                className
+            ].join(' ')}
+            {...props}
+        >
+            {Children.map(children, child => processChild(child))}
+        </WrapperTag>
+    );
+};
+
+CategoryList.displayName = 'CategoryList';
+
+export default CategoryList;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Checkbox from './Checkbox';
+
+const meta = {
+    title: 'Components/Checkbox',
+    component: Checkbox,
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'The checkbox is checked on load'
+        },
+        hintText: argTypes.hintText,
+        exclusive: {
+            control: 'boolean',
+            description: 'Whether the checkbox is exclusive (e.g. a \'none\' option)'
+        },
+        id: argTypes.id(),
+        label: argTypes.label(),
+        name: {
+            type: 'string'
+        },
+        onBlur: argTypes.onBlur(),
+        onChange: argTypes.onChange(),
+        small: argTypes.isSmall()
+    },
+    args: {
+        label: 'Benefits and grants',
+        id: 'benefits-and-grants'
+    }
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const CheckedByDefault: Story = {
+    args: {
+        checked: true,
+        id: 'checked'
+    }
+};
+
+export const SmallCheckbox: Story = {
+    args: {
+        isSmall: true,
+        id: 'small'
+    }
+};
+
+export const HintText: Story = {
+    args: {
+        hintText: 'Information on benefits, funds and grants, including Child Benefit and tax credits.',
+        id: 'hinttext'
+    }
+};
+
+export const CustomNameAttribute: Story = {
+    args: {
+        name: 'myName',
+        id: 'nameattribute'
+    }
+};
+
+export const Blur: Story = {
+    args: {
+        onBlur: () => {console.log('checkbox blur')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('checkbox'));
+        await userEvent.tab();
+    }
+}
+
+export const Change: Story = {
+    args: {
+        onChange: () => {console.log('checkbox change')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('checkbox'));
+    }
+}

package/src/components/Checkbox/Checkbox.test.tsx

@@ -34,7 +34,7 @@ test('checked checkbox', () => {
 
 test('exclusive checkbox', () => {
     render(
-        <Checkbox exclusive label="Pension Credit" id="pensioncredit" />
+        <Checkbox isExclusive label="Pension Credit" id="pensioncredit" />
     );
 
     const checkbox = screen.getByRole('checkbox');
@@ -88,7 +88,7 @@ test('checkbox with hint text', () => {
 
 test('small checkbox', () => {
     render(
-        <Checkbox small label="Pension Credit" id="pensioncredit" />
+        <Checkbox isSmall label="Pension Credit" id="pensioncredit" />
     );
 
     const checkbox = screen.getByRole('checkbox');

package/src/components/Checkbox/Checkbox.tsx

@@ -7,15 +7,15 @@ const Checkbox = ({
     checked,
     hintText,
     id,
-    exclusive,
+    isSmall,
+    isExclusive,
     label,
     name,
     onBlur,
-    onChange,
-    small
+    onChange
 }: SGDS.Component.Checkbox) => {
     const hintTextId = `hint-text-${id}`;
-    const behaviour = exclusive && 'exclusive';
+    const behaviour = isExclusive && 'exclusive';
 
     function handleBlur(event: React.FocusEvent) {
         if (typeof onBlur === 'function') {
@@ -29,15 +29,15 @@ const Checkbox = ({
         }
     }
 
-    small = small || useContext(CheckboxRadioContext).small;
+    isSmall = isSmall || useContext(CheckboxRadioContext).isSmall;
 
     return (
         <>
-            {exclusive && <p className="ds_checkbox-separator">or</p>}
+            {isExclusive && <p className="ds_checkbox-separator">or</p>}
             <div
                 className={[
                     'ds_checkbox',
-                    small && 'ds_checkbox--small'
+                    isSmall && 'ds_checkbox--small'
                 ].join(' ')}>
 
                 <input

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import CheckboxGroup from './CheckboxGroup';
+import Checkbox from './Checkbox';
+
+const meta = {
+    component: CheckboxGroup,
+    title: 'Components/CheckboxGroup',
+    argTypes: {
+        children: argTypes.children(),
+        isSmall: argTypes.isSmall()
+    },
+    args: {
+        children: <>
+            <Checkbox
+                checked
+                id="universal-credit"
+                label="Universal Credit"
+            />
+            <Checkbox
+                id="pension-credit"
+                label="Pension Credit"
+            />
+            <Checkbox
+                id="jsa"
+                label="Income-based Job Seeker's Allowance"
+            />
+        </>
+    }
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const SmallCheckboxes: Story = {
+    args: {
+        isSmall: true
+    }
+};
+
+export const ExclusiveCheckbox: Story = {
+    args: {
+        children: <>
+            <Checkbox
+                checked
+                id="universal-creditx"
+                label="Universal Credit"
+            />
+            <Checkbox
+                id="pension-creditx"
+                label="Pension Credit"
+            />
+            <Checkbox
+                id="jsax"
+                label="Income-based Job Seeker's Allowance"
+            />
+            <Checkbox
+                isExclusive
+                id="nonex"
+                label="No, I do not receive any of these benefits"
+            />
+        </>
+    }
+}

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -7,7 +7,7 @@ import DSCheckboxes from '@scottish-government/design-system/src/forms/checkbox/
 export const CheckboxGroup = ({
     children,
     className,
-    small = false,
+    isSmall,
     ...props
 }: SGDS.Component.Checkbox.Group) => {
     const ref = useRef(null);
@@ -29,7 +29,7 @@ export const CheckboxGroup = ({
             ref={ref}
             {...props}
         >
-            <CheckboxRadioContext value={{small, name: ''}}>
+            <CheckboxRadioContext value={{isSmall: !!isSmall, name: ''}}>
                 {children}
             </CheckboxRadioContext>
         </div>

package/src/components/ConfirmationMessage/ConfirmationMessage.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ConfirmationMessage from './ConfirmationMessage';
+
+const meta = {
+    title: 'Components/Confirmation Message',
+    component: ConfirmationMessage,
+    argTypes: {
+        headingLevel: argTypes.headingLevel(),
+        ariaLive: argTypes.ariaLive(),
+        children: argTypes.children()
+    },
+    args: {
+        ariaLive: 'polite',
+        children: (<p>You have added the landlord <strong>John Smith</strong> to the application.</p>),
+        headingLevel: 'h3',
+        title: 'Landlord added successfully',
+    }
+} satisfies Meta<typeof ConfirmationMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const NoChildren: Story = {
+    args: {
+        children: undefined
+    }
+};
+
+export const DifferentHeadingLevel: Story = {
+    args: {
+        headingLevel: 'h2'
+    }
+};

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ContentsNav from './ContentsNav';
+
+const meta = {
+    title: 'Components/Contents nav',
+    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'
+        }
+    },
+    args: {
+        children: <>
+            <ContentsNav.Item current>
+                Apply for Blue Badge
+            </ContentsNav.Item>
+            <ContentsNav.Item href="#2">
+                Eligibility
+            </ContentsNav.Item>
+            <ContentsNav.Item href="#3">
+                Using your Blue Badge
+            </ContentsNav.Item>
+            <ContentsNav.Item href="#4">
+                Report a lost, stolen or misuesd Blue Badge
+            </ContentsNav.Item>
+            <ContentsNav.Item href="#5">
+                Changing or handing back a Blue Badge
+            </ContentsNav.Item>
+        </>
+    }
+} satisfies Meta<typeof ContentsNav>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};

package/src/components/ContentsNav/ContentsNav.test.tsx

@@ -72,7 +72,7 @@ test('contents nav item without href', () => {
 
 test('current contents nav item with href', () => {
     render(
-        <ContentsNav.Item current href={ITEM_HREF}>{ITEM_TITLE}</ContentsNav.Item>
+        <ContentsNav.Item isCurrent href={ITEM_HREF}>{ITEM_TITLE}</ContentsNav.Item>
     );
 
     const listItem = screen.getByRole('listitem');
@@ -84,7 +84,7 @@ test('current contents nav item with href', () => {
 
 test('current contents nav item without href', () => {
     render(
-        <ContentsNav.Item current>{ITEM_TITLE}</ContentsNav.Item>
+        <ContentsNav.Item isCurrent>{ITEM_TITLE}</ContentsNav.Item>
     );
 
     const listItem = screen.getByRole('listitem');

package/src/components/ContentsNav/ContentsNav.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 const ContentsNavItem = ({
     children,
-    current,
+    isCurrent,
     href,
     linkComponent
 }: SGDS.Component.ContentsNav.ContentsNavItem) => {
     const classNames = ['ds_contents-nav__link'];
     let ariaCurrent: React.AriaAttributes["aria-current"];
 
-    if (current) {
+    if (isCurrent) {
         classNames.push('ds_current');
         ariaCurrent = 'page';
     }

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

@@ -0,0 +1,33 @@
+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/Cookie banner',
+    component: CookieBanner,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: [
+            <p key="foo">We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
+                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">
+                <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>
+            </CookieBanner.Buttons>
+        ]
+    }
+} satisfies Meta<typeof CookieBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import DatePicker from './DatePicker';
+
+const meta = {
+    title: 'Components/Date picker',
+    component: DatePicker,
+    argTypes: {
+        dateSelectCallback: {},
+        disabledDates: {
+            control: { type: 'text' },
+            description: 'Space-separated list of dates to disable in the date picker'
+        },
+        hasError: argTypes.hasError(),
+        errorMessage: argTypes.errorMessage(),
+        hintText: argTypes.hintText(),
+        id: argTypes.id(),
+        label: argTypes.label(),
+        maxDate: {
+            control: { type: 'text' },
+            description: 'Latest selectable date in the date picker'
+        },
+        minDate: {
+            control: { type: 'text' },
+            description: 'Earliest selectable date in the date picker'
+        },
+        multiple: {
+            control: 'boolean',
+            description: 'Whether to display the day, month and year as separate fields'
+        },
+        name: {
+            control: { type: 'text' }
+        },
+        onBlur: argTypes.onBlur(),
+        onChange: argTypes.onChange(),
+        value: {
+            control: { type: 'text' }
+        },
+        width: argTypes.inputWidth()
+    },
+    args: {
+        label: 'Date of birth',
+        id: 'date-of-birth'
+    }
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const InitialValue: Story = {
+    args: {
+        value: '01/12/2020'
+    }
+};
+
+export const HintText: Story = {
+    args: {
+        hintText: 'Use \'dd/mm/yyyy\' format.'
+    }
+};
+
+export const Error: Story = {
+    args: {
+        hasError: true,
+        errorMessage: 'Please enter a valid date.'
+    }
+};
+
+export const Multiple: Story = {
+    args: {
+        multiple: true
+    }
+};
+
+export const MultipleInitialValue: Story = {
+    args: {
+        multiple: true,
+        value: '01/12/2020'
+    }
+};
+
+export const DateRestrictions: Story = {
+    args: {
+        disabledDates: '12/07/2025 13/07/2025 19/07/2025 20/07/2025',
+        maxDate: '25/07/2025',
+        minDate: '07/07/2025'
+    }
+};
+
+export const Blur: Story = {
+    args: {
+        onBlur: () => {console.log('date picker blur')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('textbox'));
+        await userEvent.tab();
+    }
+}
+
+export const Change: Story = {
+    args: {
+        onChange: () => {console.log('date picker change')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('textbox'));
+        await userEvent.type(canvas.getByRole('textbox'),'01/12/2020');
+        await userEvent.tab();
+    }
+}

package/src/components/DatePicker/DatePicker.tsx

@@ -64,7 +64,7 @@ const DatePicker = ({
             {(multiple ? (
                 <fieldset className="ds_datepicker__input-wrapper">
                     <legend>{label}</legend>
-                    {errorMessage && <ErrorMessage text={errorMessage}/>}
+                    {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
                     <div>
                         <TextInput
                             className="js-datepicker-date"