@scottish-government/designsystem-react 0.10.2 → 0.11.1

package/src/components/PageHeader/PageHeader.tsx

@@ -3,6 +3,7 @@ const PageHeader = ({
     className,
     label,
     title,
+    titleId,
     ...props
 }: SGDS.Component.PageHeader) => {
     return (
@@ -14,7 +15,7 @@ const PageHeader = ({
             {...props}
         >
             {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}
-            <h1 className="ds_page-header__title">{title}</h1>
+            <h1 id={titleId} className="ds_page-header__title">{title}</h1>
 
             {children}
         </header>

package/src/components/PageHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './PageHeader';

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

@@ -6,6 +6,15 @@ import Metadata from './PageMetadata';
 const meta = {
     title: 'Components/PageMetadata/PageMetadata.Item',
     component: Metadata.Item,
+    decorators: [
+        Story => (
+            <Metadata>
+                <dl className="ds_page-metadata__list">
+                    <Story />
+                </dl>
+            </Metadata>
+        )
+    ],
     argTypes: {
         children: argTypes.children(),
         name: {

package/src/components/PageMetadata/index.ts

@@ -0,0 +1 @@
+export { default } from './PageMetadata';

package/src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export { default } from './Pagination';

package/src/components/PhaseBanner/index.ts

@@ -0,0 +1 @@
+export { default } from './PhaseBanner';

package/src/components/Question/Question.stories.tsx

@@ -2,9 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Question from './Question';
-import TextInput from '../TextInput/TextInput';
-import Checkbox from '../Checkbox/Checkbox';
-import CheckboxGroup from '../Checkbox/CheckboxGroup';
+import TextInput from '../TextInput';
+import Checkbox, { CheckboxGroup } from '../Checkbox';
 
 const meta = {
     title: 'Components/Question',

package/src/components/Question/Question.tsx

@@ -1,5 +1,5 @@
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
-import HintText from '../../common/HintText';
+import ErrorMessage from '../ErrorMessage';
+import HintText from '../../common/HintText'
 import WrapperTag from '../../common/WrapperTag';
 
 const Question = function ({

package/src/components/Question/index.ts

@@ -0,0 +1 @@
+export { default } from './Question';

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

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
-import RadioButton from '../RadioButton/RadioButton';
-import RadioGroup from './RadioGroup';
+import RadioButton, { RadioGroup } from '../RadioButton';
 
 const meta = {
     title: 'Components/Radio/Radio group',

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

@@ -1,7 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import RadioButton from './RadioButton';
-import RadioGroup from './RadioGroup';
+import RadioButton, { RadioGroup } from '../RadioButton';
 
 test('radio group renders correctly', () => {
     render(

package/src/components/RadioButton/RadioGroup.tsx

@@ -6,7 +6,7 @@ const RadioGroup = ({
     className,
     isInline,
     isSmall,
-    name,
+    name = '',
     ...props
 }: SGDS.Component.RadioButton.Group) => {
     return (
@@ -19,7 +19,7 @@ const RadioGroup = ({
             ].join(' ')}
             {...props}
         >
-            <CheckboxRadioContext value={{ isSmall: !!isSmall, name }}>
+            <CheckboxRadioContext value={{ isSmall: !!isSmall, name}}>
                 {children}
             </CheckboxRadioContext>
         </div>

package/src/components/RadioButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioButton';
+export { default as RadioGroup } from './RadioGroup';

package/src/components/SearchFacets/SearchFacets.Group.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Facets from './SearchFacets';
+import { join } from 'path';
+
+const meta = {
+    title: 'Components/Search results/Facets/Group',
+    component: Facets.Group,
+    decorators: [
+        (Story) => (
+            <div className="ds_facets">
+                <Story />
+            </div>
+        )
+    ],
+    argTypes: {
+        children: argTypes.children(),
+        joinContent: {
+            description: 'Content to display between the facet items when there are multiple items in the group',
+            type: 'string'
+        },
+        title: {
+            description: 'Title of the facet group',
+            type: {
+                name: 'string',
+                required: true
+            }
+        }
+    },
+    args: {
+        title: 'Content type'
+    }
+} satisfies Meta<typeof Facets.Group>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args: any) => (
+        <Facets.Group {...args}>
+            <Facets.Item title="Advice and guidance" />
+            <Facets.Item title="Factsheet"/>
+            <Facets.Item title="Statistics" />
+        </Facets.Group>
+    )
+};
+
+export const CustomJoinContent: Story = {
+    render: (args: any) => (
+        <Facets.Group joinContent="and" title="Updated between">
+            <Facets.Item accessibleName="Updated after 01/10/2025" title="01/10/2025" />
+            <Facets.Item accessibleName="Updated before 31/10/2025" title="31/10/2025"/>
+        </Facets.Group>
+    )
+};

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import Facets from './SearchFacets';
+
+const meta = {
+    title: 'Components/Search results/Facets/Item',
+    component: Facets.Item,
+    decorators: [
+        (Story) => (
+            <div className="ds_facets">
+                <Story />
+            </div>
+        )
+    ],
+    argTypes: {
+        accessibleName: {
+            description: 'Accessible name for the facet button. If not provided, the title will be used. This content becomes part of the facet button\'s aria-label attribute.',
+            type: 'string'
+        },
+        joinContent: {
+            description: 'Content to display before the facet button when there are multiple facets in a group. This should be provided to the parent Group instead.',
+            type: 'string'
+        },
+        onClick: {
+            description: 'Callback for when the facet button is clicked',
+            control: false
+        },
+        title: {
+            description: 'Text content of the facet button.',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+    },
+    args: {
+        title: 'Advice and guidance'
+    }
+} satisfies Meta<typeof Facets.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const CustomAccessibleText: Story = {
+    args: {
+        accessibleName: 'Updated before 31st October 2025',
+        title: '31/10/2025'
+    }
+}

package/src/components/SearchFacets/SearchFacets.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Facets from './SearchFacets';
+
+const meta = {
+    title: 'Components/Search results/Facets',
+    component: Facets,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        title: 'Application incomplete'
+    }
+} satisfies Meta<typeof Facets>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args: any) => (
+        <Facets {...args}>
+            <Facets.Group title="Content type">
+                <Facets.Item title="Advice and guidance" />
+                <Facets.Item title="Factsheet"/>
+                <Facets.Item title="Statistics" />
+            </Facets.Group>
+            <Facets.Group title="Topic">
+                <Facets.Item title="Children and families"/>
+                <Facets.Item title="Education"/>
+            </Facets.Group>
+            <Facets.Group title="Updated between" joinContent="and">
+                <Facets.Item accessibleName="Updated after 20/11/2023" title="20/11/2023"/>
+                <Facets.Item accessibleName="Updated before 02/04/2024" title="02/04/2024"/>
+            </Facets.Group>
+        </Facets>
+    )
+};

package/src/components/SearchFacets/SearchFacets.test.tsx

@@ -0,0 +1,214 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Facets from './SearchFacets';
+
+test('search facets boilerplate renders correctly', () => {
+    render(
+        <Facets data-testid="searchfacets"/>
+    );
+
+    const facets = screen.getByTestId('searchfacets');
+
+    expect(facets).toBeInTheDocument();
+    expect(facets).toHaveClass('ds_facets');
+    expect(facets.tagName).toEqual('DIV');
+
+    const status = facets.querySelector('p');
+    expect(status).toBeInTheDocument();
+    expect(status).toHaveClass('visually-hidden');
+    expect(status?.textContent).toEqual('There are 0 search filters applied');
+    expect(status?.parentElement).toEqual(facets);
+
+    const list = facets.querySelector('dl');
+    expect(list).toBeInTheDocument();
+    expect(list).toHaveClass('ds_facets__list');
+    expect(list?.parentElement).toEqual(facets);
+    expect(list?.previousElementSibling).toEqual(status);
+
+    // clear button is not present if there are no facets
+    const clearButton = within(facets).queryByRole('button', { name: /clear all filters/i });
+    expect(clearButton).not.toBeInTheDocument();
+});
+
+test('search facets count with one facet', () => {
+    render(
+        <Facets data-testid="searchfacets">
+            <Facets.Item title="Facet 1" />
+        </Facets>
+    );
+
+    const facets = screen.getByTestId('searchfacets');
+    const status = within(facets).getByText('There is 1 search filter applied');
+    expect(status).toBeInTheDocument();
+
+    const clearButton = within(facets).getByRole('button', { name: /clear all filters/i });
+    expect(clearButton).toBeInTheDocument();
+});
+
+test('search facets count with multiple facets', () => {
+    render(
+        <Facets data-testid="searchfacets">
+            <Facets.Item title="Facet 1" />
+            <Facets.Item title="Facet 2" />
+        </Facets>
+    );
+
+    const facets = screen.getByTestId('searchfacets');
+    const facetItems = facets.querySelectorAll('.ds_facet');
+    const status = within(facets).getByText(`There are ${facetItems.length} search filters applied`);
+    expect(status).toBeInTheDocument();
+
+    const clearButton = within(facets).getByRole('button', { name: /clear all filters/i });
+    expect(clearButton).toBeInTheDocument();
+});
+
+test('search filters count with facet groups', () => {
+    render(
+        <Facets data-testid="searchfacets">
+            <Facets.Group title="Group 1">
+                <Facets.Item title="Facet 1" />
+                <Facets.Item title="Facet 2" />
+            </Facets.Group>
+            <Facets.Group title="Group 2">
+                <Facets.Item title="Facet 3" />
+            </Facets.Group>
+        </Facets>
+    );
+
+    const facets = screen.getByTestId('searchfacets');
+    const facetItems = facets.querySelectorAll('.ds_facet');
+    const status = within(facets).getByText(`There are ${facetItems.length} search filters applied`);
+    expect(status).toBeInTheDocument();
+
+    const clearButton = within(facets).getByRole('button', { name: /clear all filters/i });
+    expect(clearButton).toBeInTheDocument();
+});
+
+test('search facet renders correctly', () => {
+    const FACET_TITLE = 'Facet 1';
+
+    render(
+        <Facets.Item title={FACET_TITLE} data-testid="searchfacet" />
+    );
+
+    const facetWrapper = screen.getByTestId('searchfacet');
+    expect(facetWrapper).toBeInTheDocument();
+    expect(facetWrapper).toHaveClass('ds_facet-wrapper');
+    expect(facetWrapper.tagName).toEqual('DD');
+
+    const facetButton = within(facetWrapper).getByRole('button');
+    expect(facetButton).toHaveClass('ds_facet__button');
+    expect(facetButton).toHaveAttribute('aria-label', `Remove '${FACET_TITLE}' filter`);
+
+    const facet = facetButton.parentElement;
+    expect(facet).toHaveClass('ds_facet');
+    expect(facet?.textContent).toEqual(FACET_TITLE);
+
+    const facetIcon = within(facetButton).getByRole('img', { hidden: true });
+    expect(facetIcon).toHaveClass('ds_facet__button-icon');
+    expect(facetIcon).toHaveAttribute('aria-hidden', 'true');
+});
+
+test('search facet with accessible name', () => {
+    const FACET_TITLE = 'Facet 1';
+    const ACCESSIBLE_NAME = 'Custom facet name';
+
+    render(
+        <Facets.Item title={FACET_TITLE} accessibleName={ACCESSIBLE_NAME} data-testid="searchfacet" />
+    );
+
+    const facetWrapper = screen.getByTestId('searchfacet');
+    const facetButton = within(facetWrapper).getByRole('button');
+    expect(facetButton).toHaveAttribute('aria-label', `Remove '${ACCESSIBLE_NAME}' filter`);
+
+    const facet = facetButton.parentElement;
+    expect(facet).toHaveClass('ds_facet');
+    expect(facet?.textContent).toEqual(FACET_TITLE);
+});
+
+test('facet button onClick works', async () => {
+    const FACET_TITLE = 'Facet 1';
+    const handleClick = vi.fn();
+
+    render(
+        <Facets.Item title={FACET_TITLE} onClick={handleClick} data-testid="searchfacet" />
+    );
+
+    const facetWrapper = screen.getByTestId('searchfacet');
+    const facetButton = within(facetWrapper).getByRole('button');
+
+    await facetButton.click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+});
+
+test('facet group renders correctly', () => {
+    const GROUP_TITLE = 'Group 1';
+
+    render(
+        <Facets.Group title={GROUP_TITLE} data-testid="searchfacetgroup">
+            <Facets.Item title="Facet 1" />
+            <Facets.Item title="Facet 2" />
+        </Facets.Group>
+    );
+
+    const facetGroup = screen.getByTestId('searchfacetgroup');
+    expect(facetGroup).toBeInTheDocument();
+    expect(facetGroup).toHaveClass('ds_facet-group');
+    expect(facetGroup.tagName).toEqual('DIV');
+
+    const groupTitle = within(facetGroup).getByText(`${GROUP_TITLE}:`);
+    expect(groupTitle).toBeInTheDocument();
+    expect(groupTitle).toHaveClass('ds_facet__group-title');
+
+    const facetWrappers = facetGroup.querySelectorAll('.ds_facet-wrapper');
+    expect(facetWrappers.length).toEqual(2);
+
+    const firstFacet = facetWrappers[0];
+    expect(firstFacet?.textContent).toContain('Facet 1');
+    expect(firstFacet?.textContent).not.toContain('or');
+
+    const secondFacet = facetWrappers[1];
+    expect(secondFacet?.textContent).toContain('Facet 2');
+    expect(secondFacet?.textContent).toContain('or');
+});
+
+test('facet group with custom join content', () => {
+    const GROUP_TITLE = 'Group 1';
+    const JOIN_CONTENT = 'and';
+
+    render(
+        <Facets.Group title={GROUP_TITLE} joinContent={JOIN_CONTENT} data-testid="searchfacetgroup">
+            <Facets.Item title="Facet 1" />
+            <Facets.Item title="Facet 2" />
+        </Facets.Group>
+    );
+
+    const facetGroup = screen.getByTestId('searchfacetgroup');
+    const facetWrappers = facetGroup.querySelectorAll('.ds_facet-wrapper');
+
+    const firstFacet = facetWrappers[0];
+    expect(firstFacet?.textContent).toContain('Facet 1');
+    expect(firstFacet?.textContent).not.toContain(JOIN_CONTENT);
+
+    const secondFacet = facetWrappers[1];
+    expect(secondFacet?.textContent).toContain('Facet 2');
+    expect(secondFacet?.textContent).toContain(JOIN_CONTENT);
+});
+
+test('passing additional props', () => {
+    render(
+        <Facets data-test="foo" data-testid="searchfacets"/>
+    );
+
+    const searchFacets = screen.getByTestId('searchfacets');
+    expect(searchFacets?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <Facets className="foo" data-testid="searchfacets"/>
+    );
+
+    const searchFacets = screen.getByTestId('searchfacets');
+    expect(searchFacets).toHaveClass('foo');
+});

package/src/components/SearchFacets/SearchFacets.tsx

@@ -0,0 +1,99 @@
+import React, { Children } from 'react';
+import Icon from "../../common/Icon";
+import { Cancel } from '../../../src/images/icons';
+
+const FacetsItem = ({
+    accessibleName,
+    joinContent,
+    onClick,
+    title,
+    ...props
+}: SGDS.Component.SearchFacets.Item) => {
+    accessibleName = accessibleName ? accessibleName : title;
+
+    return (
+        <dd className="ds_facet-wrapper" {...props}>
+            {joinContent &&
+                <span aria-hidden="true">{joinContent}</span>
+            }
+            <span className="ds_facet">
+                {title}
+                <button type="button" onClick={onClick} aria-label={`Remove '${accessibleName}' filter`} className="ds_facet__button">
+                    <Icon className="ds_facet__button-icon" aria-hidden="true" role="img" icon="Cancel"/>
+                </button>
+            </span>
+        </dd>
+    );
+}
+
+const FacetsGroup = ({
+    children,
+    joinContent = 'or',
+    title,
+    ...props
+}: SGDS.Component.SearchFacets.Group) => {
+    return (
+        <div className="ds_facet-group" {...props}>
+            <dt className="ds_facet__group-title">
+                {title.trim()}:
+            </dt>
+            {
+                Children.map(children, (child, index) => {
+                    const thisChild = child as React.ReactElement<SGDS.Component.SearchFacets.Item>
+                    return React.cloneElement(thisChild, { joinContent: index > 0 ? joinContent : undefined, key: 'facet' + index });
+                })
+            }
+        </div>
+    )
+}
+
+const Facets = ({
+    children,
+    className,
+    ...props
+}: SGDS.Component.SearchFacets) => {
+    let facetCount = 0;
+
+    function processChild(item: any) {
+        if (item.type.displayName === 'Facets.Item') {
+            facetCount = facetCount + 1;
+
+        } else if (item.type.displayName === 'Facets.Group') {
+            Children.forEach(item.props.children, child => {
+                processChild(child);
+            });
+        }
+    }
+
+    Children.forEach(children, child => {
+        processChild(child);
+    });
+
+    return (
+        <div className={[
+                "ds_facets",
+                className
+            ].join(' ')}
+            {...props}
+        >
+            <p className="visually-hidden">There {facetCount === 1 ? 'is' : 'are'} {facetCount} search {facetCount === 1 ? 'filter' : 'filters'} applied</p>
+            <dl className="ds_facets__list">
+                {children}
+            </dl>
+            {facetCount > 0 &&
+                <button className="ds_button  ds_button--secondary  ds_button--has-icon  ds_facets__clear-button" type="button">
+                    Clear all filters
+                    <Cancel className="ds_facet__button-icon"/>
+                </button>
+            }
+        </div>
+    );
+}
+
+Facets.displayName = 'Facets';
+FacetsItem.displayName = 'Facets.Item';
+FacetsGroup.displayName = 'Facets.Group';
+Facets.Item = FacetsItem;
+Facets.Group = FacetsGroup;
+
+export default Facets;

package/src/components/SearchFacets/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchFacets';