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

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"

package/src/components/Details/Details.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Details from './Details';
+
+const meta = {
+    title: 'Components/Details',
+    component: Details,
+    argTypes: {
+        children: argTypes.children(),
+        summary: {
+            description: 'Text to use for the details component\'s ‘summary’ element',
+            type: {
+                name: 'string',
+                required: true
+            }
+        }
+    },
+    args: {
+        summary: 'I cannot sign in'
+    }
+} satisfies Meta<typeof Details>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: <>
+            <p>Contact the design system team if you cannot sign in.</p>,
+            <p>Email <a href="mailto:designsystem@gov.scot">designsystem@gov.scot</a>.</p>,
+            <p>Or phone 0000 123 4567<br/>
+                Monday to Friday, 9am to 5pm</p>
+        </>
+    }
+};

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ErrorMessage from './ErrorMessage';
+
+const meta = {
+    title: 'Components/Error message',
+    component: ErrorMessage,
+    argTypes: {
+        children: argTypes.children()
+    }
+} satisfies Meta<typeof ErrorMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: { children: <>This field is required</> }
+};

package/src/components/ErrorMessage/ErrorMessage.test.tsx

@@ -8,7 +8,7 @@ const ERROR_ID = 'errormessage';
 test('error message renders correctly', () => {
 
     render(
-        <ErrorMessage text={ERROR_TEXT} id={ERROR_ID}/>
+        <ErrorMessage id={ERROR_ID}>{ERROR_TEXT}</ErrorMessage>
     );
 
     const errorMessageElement = screen.getByRole('paragraph');
@@ -18,21 +18,9 @@ test('error message renders correctly', () => {
     expect(errorMessageElement.textContent).toEqual(ERROR_TEXT);
 });
 
-test('error message with HTML content', () => {
-    const ERROR_ID = 'errormessage';
-
-    render(
-        <ErrorMessage id={ERROR_ID}>hello <a href="#foo">world</a></ErrorMessage>
-    );
-
-    const errorMessageElement = screen.getByRole('paragraph');
-
-    expect(errorMessageElement.innerHTML).toEqual('hello <a href="#foo">world</a>');
-});
-
 test('passing additional props', () => {
     render(
-        <ErrorMessage data-test="foo" text={ERROR_TEXT} id={ERROR_ID}/>
+        <ErrorMessage data-test="foo" id={ERROR_ID}>{ERROR_TEXT}</ErrorMessage>
     )
 
     const errorMessageElement = screen.getByRole('paragraph');
@@ -41,7 +29,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <ErrorMessage className="foo" text={ERROR_TEXT} id={ERROR_ID}/>
+        <ErrorMessage className="foo" id={ERROR_ID}>{ERROR_TEXT}</ErrorMessage>
     )
 
     const errorMessageElement = screen.getByRole('paragraph');

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -2,7 +2,6 @@ const ErrorMessage = ({
     children,
     className,
     id,
-    text,
     ...props
 }: SGDS.Component.ErrorMessage) => {
     return (
@@ -11,11 +10,10 @@ const ErrorMessage = ({
                 'ds_question__error-message',
                 className
             ].join(' ')}
-            dangerouslySetInnerHTML={text ? { __html: text } : undefined}
             id={id}
             {...props}
         >
-            {!text ? children : null}
+            {children}
         </p>
     );
 };

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ErrorSummary from './ErrorSummary';
+
+const meta = {
+    title: 'Components/Error summary',
+    component: ErrorSummary,
+    argTypes: {
+        linkComponent: argTypes.linkComponent(),
+        title: {
+            description: 'The title of the error summary',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <ErrorSummary.Item fragmentId="did-resolve">
+                Did this resolve your issue?
+            </ErrorSummary.Item>
+            <ErrorSummary.Item fragmentId="what-topics">
+                What topics are you interested in?
+            </ErrorSummary.Item>
+            <ErrorSummary.Item fragmentId="more-detail">
+                Please provide more detail
+            </ErrorSummary.Item>
+        </>,
+        title: 'There is a problem'
+    }
+} satisfies Meta<typeof ErrorSummary>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import FileDownload from './FileDownload';
+
+const meta = {
+    title: 'Components/File download',
+    component: FileDownload,
+    argTypes: {
+        cover: {
+            description: 'URL of a custom cover image',
+            type: 'string'
+        },
+        fileSize: {
+            description: 'Description of the file size',
+            type: 'string'
+        },
+        fileType: {
+            description: 'A description of the file type',
+            type: 'string'
+        },
+        fileUrl: {
+            description: 'The URL of the file to download',
+            type: 'string'
+        },
+        icon: {
+            options: ['Audio','Csv','Excel','File','Generic','Geodata','Ical','Ico','Image','Odf','Odg','Odp','Ods','Odt','Pdf','Ppt','Rtf','Text','Video','Word','Xml','Zip'],
+            control: { type: 'select' },
+            type: 'string'
+        },
+        isHighlighted: {
+            control: 'boolean',
+            description: 'Add a highlight to the file download'
+        },
+        title: {
+            description: 'The document title, used in the link text',
+            type: {
+                name: 'string',
+                required: true
+            }
+        }
+    },
+    args: {
+        fileUrl: '#',
+        title: 'My file',
+        icon: 'Pdf',
+        fileSize: '1.2MB',
+        fileType: '6 page PDF'
+    }
+} satisfies Meta<typeof FileDownload>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const Highlighted: Story = {
+    args: {
+        isHighlighted: true
+    }
+};
+
+export const CoverImage: Story = {
+    args: {
+        cover: 'static/images/highland-cow.jpg'
+    }
+};
+
+export const NoMetadata: Story = {
+    args: {
+        fileSize: undefined,
+        fileType: undefined
+    }
+};

package/src/components/FileDownload/FileDownload.test.tsx

@@ -45,7 +45,7 @@ test('inset text renders correctly', () => {
 
 test('highlighted file download', () => {
     render(
-        <FileDownload highlighted fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
+        <FileDownload isHighlighted fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const fileDownload = screen.getByTestId('file-download');

package/src/components/FileDownload/FileDownload.tsx

@@ -4,8 +4,8 @@ import FileIcon from '../../common/FileIcon';
 const FileDownload = ({
     className,
     cover,
-    highlighted,
     icon = 'Generic',
+    isHighlighted,
     fileSize,
     fileType,
     fileUrl,
@@ -18,7 +18,7 @@ const FileDownload = ({
     return (
         <div className={[
             'ds_file-download',
-            highlighted && 'ds_file-download--highlighted',
+            isHighlighted && 'ds_file-download--highlighted',
             className
         ].join(' ')}
             {...props}

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import HideThisPage from './HideThisPage';
+
+const meta = {
+    title: 'Components/Hide this page',
+    component: HideThisPage,
+    argTypes: {
+        escapeUrl: {
+            description: 'The URL to take the user to',
+            type: 'string'
+        }
+    }
+} satisfies Meta<typeof HideThisPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import InsetText from './InsetText';
+
+const meta = {
+    title: 'Components/Inset text',
+    component: InsetText,
+    argTypes: {
+        children: argTypes.children()
+    }
+} satisfies Meta<typeof InsetText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: <p>You may be able to <a href="#inset">apply for free school meals</a> at the same time as you apply for the clothing grant.</p>
+    }
+};

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import NotificationBanner from './NotificationBanner';
+
+const meta = {
+    title: 'Components/Notification banner',
+    component: NotificationBanner,
+    argTypes: {
+        children: argTypes.children(),
+        hasColourIcon: {
+            control: 'boolean',
+            description: 'Makes the icon display in the alternative colour scheme'
+        },
+        hasIcon: {
+            description: 'Shows the ‘high priority’ icon on the notification banner',
+            control: 'boolean'
+        },
+        hasInverseIcon: {
+            control: 'boolean',
+            description: 'Makes the icon be inverted against a circle background'
+         },
+        isDismissable: {
+            control: 'boolean',
+            description: 'Shows a ‘close’ button on the notification banner'
+         },
+        title: {
+            description: 'A hidden title for the notification banner, useful for screen reader users',
+            type: 'string'
+        }
+    },
+    args: {
+        children: <p>We need to tell you about <a href="#notification">something</a></p>,
+        title: 'Information'
+    }
+} satisfies Meta<typeof NotificationBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const Dismissable: Story = {
+    args: {
+        isDismissable: true
+    }
+};
+
+export const WithIcon: Story = {
+    args: {
+        hasColourIcon: true,
+        hasInverseIcon: true,
+        hasIcon: true
+    }
+};

package/src/components/NotificationBanner/NotificationBanner.test.tsx

@@ -29,7 +29,7 @@ test('notification banner renders correctly', () => {
  */
 test('notification banner with icon', () => {
     render(
-        <NotificationBanner icon>
+        <NotificationBanner hasIcon>
             {BANNER_TEXT}
         </NotificationBanner>
     );

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -6,10 +6,10 @@ import DSNotificationBanner from '@scottish-government/design-system/src/compone
 const NotificationBanner = ({
     children,
     className,
-    close,
     hasColourIcon,
+    hasIcon,
     hasInverseIcon,
-    icon,
+    isDismissable,
     title,
     ...props
 }: SGDS.Common.AbstractNotificationBanner) => {
@@ -27,8 +27,8 @@ const NotificationBanner = ({
                 'ds_reversed',
                 className
             ].join(' ')}
-            close={close}
-            icon={icon ? "PriorityHigh" : undefined}
+            isDismissable={isDismissable}
+            icon={hasIcon ? "PriorityHigh" : undefined}
             hasColourIcon={hasColourIcon}
             hasInverseIcon={hasInverseIcon}
             ref={ref}

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import NotificationPanel from './NotificationPanel';
+
+const meta = {
+    title: 'Components/Notification panel',
+    component: NotificationPanel,
+    argTypes: {
+        ariaLive: argTypes.ariaLive(),
+        headingLevel: argTypes.headingLevel(),
+        title: {
+            description: 'Title of the notification panel',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        children: argTypes.children()
+    },
+    args: {
+        children: <p>Your Saltire Scholarship Application form has been successfully submitted.</p>,
+        title: 'Thank you'
+    }
+} satisfies Meta<typeof NotificationPanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import PageHeader from './PageHeader';
+import Metadata from '../PageMetadata/PageMetadata';
+
+const meta = {
+    title: 'Components/Page header',
+    component: PageHeader,
+    argTypes: {
+        children: argTypes.children(),
+        label: {
+            description: 'Text to use for a label shown above the H1 element',
+            type: 'string'
+        },
+        title: {
+            description: 'Text to use for the H1 element',
+            type: {
+                name: 'string',
+                required: true
+            }
+        }
+    },
+    args: {
+        label: 'Publication - Research and analysis',
+        title: 'Cancer prehabilitation in Scotland: 2025 survey findings report'
+    }
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const WithMetadata: Story = {
+    args: {
+        children: <>
+            <Metadata>
+                <Metadata.Item name="Published">
+                    3 September 2025
+                </Metadata.Item>
+                <Metadata.Item name="From">
+                    <a href="#two">
+                        Director-General Health and Social Care
+                    </a>
+                </Metadata.Item>
+                <Metadata.Item name="Directorate">
+                    <a href="#one">
+                        Population Health Directorate
+                    </a>
+                </Metadata.Item>
+                <Metadata.Item name="ISBN">
+                    9781806431007
+                </Metadata.Item>
+            </Metadata>
+        </>
+    }
+};

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Metadata from './PageMetadata';
+
+const meta = {
+    title: 'Components/Page metadata',
+    component: Metadata,
+    argTypes: {
+        children: argTypes.children(),
+         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>
+    }
+} satisfies Meta<typeof Metadata>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const WithLinks: Story = {
+    args: {
+        children: <>
+            <Metadata.Item name="Part of">
+            <a href="#two">
+                Equality and rights
+            </a>
+            ,{' '}
+            <a href="#three">
+                Law and order
+            </a>
+            </Metadata.Item>
+        </>
+    }
+}
+
+export const Inline: Story = {
+    args: {
+        children: <>
+            <Metadata.Item name="Content type">
+                Publication
+            </Metadata.Item>
+            <Metadata.Item name="Last updated">
+                21/04/2020
+            </Metadata.Item>
+        </>,
+        isInline: true
+    }
+}

package/src/components/PageMetadata/PageMetadata.test.tsx

@@ -24,12 +24,12 @@ test('metadata renders correctly', () => {
     expect(metadataItemKey).toHaveClass('ds_metadata__key');
     expect(metadataItemKey.textContent).toEqual(NAME);
     expect(metadataItemValue).toHaveClass('ds_metadata__value');
-    expect(metadataItemValue.textContent).toEqual(VALUE);
+    expect(metadataItemValue.textContent.trim()).toEqual(VALUE);
 });
 
 test('inline metadata', () => {
     render(
-        <Metadata inline>
+        <Metadata isInline>
             <Metadata.Item name={NAME}>
                 {VALUE}
             </Metadata.Item>

package/src/components/PageMetadata/PageMetadata.tsx

@@ -11,9 +11,9 @@ const MetadataItem= ({
         ].join(' ')}
             {...props}
         >
-            <dt className="ds_metadata__key">{name}</dt>{' '}
+            <dt className="ds_metadata__key">{name}</dt>
             <dd className="ds_metadata__value">
-                {children}
+                {children}{' '}
             </dd>
         </div>
     );
@@ -22,14 +22,14 @@ const MetadataItem= ({
 const Metadata = ({
     children,
     className,
-    inline,
+    isInline,
     ...props
 }: SGDS.Component.Metadata) => {
     return (
         <dl
             className={[
                 'ds_metadata',
-                inline && 'ds_metadata--inline',
+                isInline && 'ds_metadata--inline',
                 className
             ].join(' ')}
             {...props}

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Pagination from './Pagination';
+
+const meta = {
+    title: 'Components/Pagination',
+    component: Pagination,
+    argTypes: {
+        ariaLabel: argTypes.ariaLabel(),
+        onClick: argTypes.onClick(),
+        linkComponent: argTypes.linkComponent({
+            description: 'Function that returns an element, to customise the output. Used on all links in the pagination.'
+        }),
+        padding: {
+            description: 'Number of other pages to show on either side of the current page',
+            type: 'number'
+        },
+        page: {
+            description: 'Current page number',
+            type: {
+                name: 'number',
+                required: true
+            }
+        },
+        pattern: {
+            description: 'Pattern to use for the pagination links',
+            type: 'string'
+        },
+        totalPages: {
+            description: 'Total number of pages',
+            type: {
+                name: 'number',
+                required: true
+            }
+        }
+    },
+    args: {
+        ariaLabel: 'Pages',
+        page: 1,
+        padding: 1,
+        pattern: '/search?page=$1',
+        totalPages: 21
+    }
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const MiddlePage: Story = {
+    args: {page: 10}
+}
+
+export const MorePadding: Story = {
+    args: {page: 10, padding: 3}
+}
+
+export const Click: Story = {
+    args: {
+        onClick: (event) => { event.preventDefault(); console.log('pagination click'); }
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getAllByRole('link')[0]);
+    }
+}