@scottish-government/designsystem-react 0.10.2 → 0.12.0

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/SearchFilters/SearchFilters.Panel.stories.tsx

@@ -0,0 +1,201 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Filters from './SearchFilters';
+import DatePicker from '../DatePicker/DatePicker';
+import Checkbox from '../Checkbox/Checkbox';
+
+const meta = {
+    title: 'Components/Search results/Filters/Filter panel',
+    component: Filters.Panel,
+    decorators: [(Story) => (
+        <div className="ds_accordion ds_accordion--small ds_!_margin-top--0">
+            <Story />
+        </div>
+    )],
+    argTypes: {
+        children: argTypes.children(),
+        isScrollable: {
+            description: 'Puts internal scrollbars around the filter fields',
+            control: 'boolean',
+        },
+        legend: {
+            description: 'Content for the (visually hidden) legend element',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        heading: {
+            description: 'Heading of the filter panel item',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        activeFilterCount: {
+            description: 'Number of active filter fields in this panel',
+            type: {
+                name: 'number'
+            }
+        }
+    }
+} satisfies Meta<typeof Filters.Panel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const CONTENT_TYPES = [
+    {
+        label: 'Advice and guidance',
+        value: 'advice-and-guidance'
+    },
+    {
+        label: 'Agreement',
+        value: 'agreement'
+    },
+    {
+        label: 'Consultation analysis',
+        value: 'consultation-analysis'
+    },
+    {
+        label: 'Consultation paper',
+        value: 'consultation-paper'
+    },
+    {
+        label: 'Corporate report',
+        value: 'corporate-report'
+    },
+    {
+        label: 'Correspondence',
+        value: 'correspondence'
+    },
+    {
+        label: 'FOI/EIR release',
+        value: 'foi-eir-release'
+    },
+    {
+        label: 'Factsheet',
+        value: 'factsheet'
+    },
+    {
+        label: 'Form',
+        value: 'form'
+    },
+    {
+        label: 'Impact assessment',
+        value: 'impact-assessment'
+    },
+    {
+        label: 'Independent report',
+        value: 'independent-report'
+    },
+    {
+        label: 'Map',
+        value: 'map'
+    },
+    {
+        label: 'Minutes',
+        value: 'minutes'
+    },
+    {
+        label: 'Progress report',
+        value: 'progress-report'
+    },
+    {
+        label: 'Regulation/directive/order',
+        value: 'regulation-directive-order'
+    },
+    {
+        label: 'Research and analysis',
+        value: 'research-and-analysis'
+    },
+    {
+        label: 'Speech/statement',
+        value: 'speech-statement'
+    },
+    {
+        label: 'Statistics',
+        value: 'statistics'
+    },
+    {
+        label: 'Strategy/plan',
+        value: 'strategy-plan'
+    },
+    {
+        label: 'Transparency data',
+        value: 'transparency-data'
+    }
+];
+
+const CONTENT_TYPES_WITH_SELECTED = JSON.parse(JSON.stringify(CONTENT_TYPES));
+CONTENT_TYPES_WITH_SELECTED[1].checked = true;
+CONTENT_TYPES_WITH_SELECTED[4].checked = true;
+CONTENT_TYPES_WITH_SELECTED[7].checked = true;
+
+export const Default: Story = {
+    render: (args: any) => (
+        <Filters.Panel
+            heading="Filter by date"
+            legend="Filter by date"
+        >
+            <DatePicker
+                hintText="For example, 21/01/2022"
+                id="date-from"
+                label="Updated after"
+            />
+
+            <DatePicker
+                hintText="For example, 21/01/2022"
+                id="date-to"
+                label="Updated before"
+            />
+        </Filters.Panel>
+    )
+};
+
+export const Scrollable: Story = {
+    render: (args: any) => (
+        <Filters.Panel
+            heading="Content type"
+            isScrollable
+            legend="Select which publication types you would like to see"
+            {...args}
+        >
+            <Filters.CheckboxGroup>
+                {CONTENT_TYPES.map((type) => (
+                    <Checkbox
+                        key={type.value}
+                        label={type.label}
+                        value={type.value}
+                        id={type.value}
+                    />
+                ))}
+            </Filters.CheckboxGroup>
+        </Filters.Panel>
+    )
+};
+
+export const WithActiveFilterCount: Story = {
+    render: (args: any) => (
+        <Filters.Panel
+            activeFilterCount={CONTENT_TYPES_WITH_SELECTED.filter((item: any) => item.checked).length}
+            heading="Content type"
+            isScrollable
+            legend="Select which publication types you would like to see"
+            {...args}
+        >
+            <Filters.CheckboxGroup>
+                {CONTENT_TYPES_WITH_SELECTED.map((type: any) => (
+                    <Checkbox
+                        checked={type.checked || false}
+                        key={type.value}
+                        label={type.label}
+                        value={type.value}
+                        id={type.value}
+                    />
+                ))}
+            </Filters.CheckboxGroup>
+        </Filters.Panel>
+    )
+};

package/src/components/SearchFilters/SearchFilters.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Filters from './SearchFilters';
+import DatePicker from '../DatePicker/DatePicker';
+import Checkbox from '../Checkbox/Checkbox';
+
+
+const meta = {
+    title: 'Components/Search results/Filters',
+    component: Filters,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        title: 'Content type'
+    }
+} satisfies Meta<typeof Filters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const CONTENT_TYPES = [
+    {
+        label: 'Advice and guidance',
+        value: 'advice-and-guidance'
+    },
+    {
+        label: 'Agreement',
+        value: 'agreement'
+    },
+    {
+        label: 'Consultation analysis',
+        value: 'consultation-analysis'
+    },
+    {
+        label: 'Consultation paper',
+        value: 'consultation-paper'
+    },
+    {
+        label: 'Corporate report',
+        value: 'corporate-report'
+    },
+    {
+        label: 'Correspondence',
+        value: 'correspondence'
+    },
+    {
+        label: 'FOI/EIR release',
+        value: 'foi-eir-release'
+    },
+    {
+        label: 'Factsheet',
+        value: 'factsheet'
+    },
+    {
+        label: 'Form',
+        value: 'form'
+    },
+    {
+        label: 'Impact assessment',
+        value: 'impact-assessment'
+    },
+    {
+        label: 'Independent report',
+        value: 'independent-report'
+    },
+    {
+        label: 'Map',
+        value: 'map'
+    },
+    {
+        label: 'Minutes',
+        value: 'minutes'
+    },
+    {
+        label: 'Progress report',
+        value: 'progress-report'
+    },
+    {
+        label: 'Regulation/directive/order',
+        value: 'regulation-directive-order'
+    },
+    {
+        label: 'Research and analysis',
+        value: 'research-and-analysis'
+    },
+    {
+        label: 'Speech/statement',
+        value: 'speech-statement'
+    },
+    {
+        label: 'Statistics',
+        value: 'statistics'
+    },
+    {
+        label: 'Strategy/plan',
+        value: 'strategy-plan'
+    },
+    {
+        label: 'Transparency data',
+        value: 'transparency-data'
+    }
+];
+
+export const Default: Story = {
+    render: (args: any) => (
+        <Filters {...args}>
+            <Filters.Panel legend="Select which publication types you would like to see" heading="Content type">
+                <Filters.CheckboxGroup>
+                    {CONTENT_TYPES.map((type) => (
+                        <Checkbox
+                            key={type.value}
+                            label={type.label}
+                            value={type.value}
+                            id={type.value}
+                        />
+                    ))}
+                </Filters.CheckboxGroup>
+            </Filters.Panel>
+
+            <Filters.Panel heading="Filter by date" legend="Filter by date">
+                <DatePicker
+                    hintText="For example, 21/01/2022"
+                    id="date-from"
+                    label="Updated after"
+                />
+
+                <DatePicker
+                    hintText="For example, 21/01/2022"
+                    id="date-to"
+                    label="Updated before"
+                />
+            </Filters.Panel>
+        </Filters>
+    )
+};