@scottish-government/designsystem-react 0.10.2 → 0.11.1

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';
+import Checkbox from '../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';
+import Checkbox from '../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>
+    )
+};

package/src/components/SearchFilters/SearchFilters.test.tsx

@@ -0,0 +1,161 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Filters from './SearchFilters';
+import Checkbox from '../Checkbox';
+
+test('search filters boilerplate renders correctly', () => {
+    render(
+        <Filters data-testid="searchfilters"/>
+    );
+
+    const filters = screen.getByTestId('searchfilters');
+
+    expect(filters).toHaveClass('ds_search-filters');
+    expect(filters.tagName).toEqual('DIV');
+
+    const details = filters.querySelector('.ds_details');
+    expect(details).toBeInTheDocument();
+    expect(details).toHaveClass('ds_no-margin')
+    expect(details?.tagName).toEqual('DIV');
+    expect(details).toHaveAttribute('data-module', 'ds-details');
+    expect(details?.parentElement).toEqual(filters);
+
+    const detailsToggle = filters.querySelector('.ds_details__toggle');
+    expect(detailsToggle).toBeInTheDocument();
+    expect(detailsToggle).toHaveClass('visually-hidden');
+    expect(detailsToggle?.tagName).toEqual('INPUT');
+    expect(detailsToggle).toHaveAttribute('type', 'checkbox');
+    expect(detailsToggle).toHaveAttribute('id', 'filters-toggle');
+    expect(detailsToggle?.parentElement).toEqual(details);
+
+    const detailsSummary = filters.querySelector('.ds_details__summary');
+    expect(detailsSummary).toBeInTheDocument();
+    expect(detailsSummary?.tagName).toEqual('LABEL');
+    expect(detailsSummary).toHaveAttribute('for', 'filters-toggle');
+    expect(detailsSummary).toHaveTextContent('Search filters');
+    expect(detailsSummary?.parentElement).toEqual(details);
+    expect(detailsSummary?.previousElementSibling).toEqual(detailsToggle);
+
+    const skipLinks = filters.querySelector('.ds_skip-links');
+
+    const detailsText = filters.querySelector('.ds_details__text');
+    expect(detailsText).toBeInTheDocument();
+    expect(detailsText?.tagName).toEqual('DIV');
+    expect(detailsText?.parentElement).toEqual(details);
+    expect(detailsText?.previousElementSibling).toEqual(skipLinks);
+
+    const form = filters.querySelector('#filters');
+    expect(form).toBeInTheDocument();
+    expect(form?.tagName).toEqual('FORM');
+
+    const formTitle = within(form).getByRole('heading');
+    expect(formTitle).toBeInTheDocument();
+    expect(formTitle.tagName).toEqual('H2');
+    expect(formTitle).toHaveTextContent('Filter by');
+
+    const accordion = form?.querySelector('.ds_accordion');;
+    expect(accordion).toBeInTheDocument();
+    expect(accordion).toHaveClass('js-initialised', 'ds_accordion--small', 'ds_!_margin-top--0');
+    expect(accordion?.parentElement).toEqual(form);
+    expect(accordion?.tagName).toEqual('DIV');
+    expect(accordion?.previousElementSibling).toEqual(formTitle);
+
+    const applyButton = within(filters).getByRole('button');
+    expect(applyButton).toBeInTheDocument();
+    expect(applyButton).toHaveClass('ds_button', 'ds_button--max', 'ds_button--small', 'ds_no-margin');
+    expect(applyButton).toHaveTextContent('Apply filter');
+    expect(applyButton?.tagName).toEqual('BUTTON');
+    expect(applyButton?.parentElement).toEqual(form);
+    expect(applyButton?.previousElementSibling).toEqual(accordion);
+});
+
+test('search filter panel boilerplate renders correctly', () => {
+    render(
+        <Filters.Panel data-testid="searchfilter" />
+    );
+
+    const filterPanel = screen.getByTestId('searchfilter');
+    expect(filterPanel).toHaveClass('ds_accordion-item');
+    expect(filterPanel.tagName).toEqual('DIV');
+
+    const filterPanelBody = filterPanel.querySelector('.ds_accordion-item__body');
+    expect(filterPanelBody).toBeInTheDocument();
+    expect(filterPanelBody?.parentElement).toEqual(filterPanel);
+
+    const fieldset = filterPanelBody?.querySelector('fieldset');
+    expect(fieldset).toBeInTheDocument();
+    expect(fieldset?.tagName).toEqual('FIELDSET');
+    expect(fieldset?.parentElement).toEqual(filterPanelBody);
+
+    const legend = fieldset?.querySelector('legend');
+    expect(legend).toBeInTheDocument();
+    expect(legend).toHaveClass('visually-hidden');
+    expect(legend?.tagName).toEqual('LEGEND');
+    expect(legend?.parentElement).toEqual(fieldset);
+});
+
+test('search filter panel with scrollable content', () => {
+    render(
+        <Filters.Panel isScrollable data-testid="searchfilter"/>
+    );
+
+    const filterPanel = screen.getByTestId('searchfilter');
+    const filterPanelBody = filterPanel.querySelector('.ds_accordion-item__body');
+    const fieldset = filterPanelBody?.querySelector('fieldset');
+    const scrollableDiv = fieldset?.querySelector('.ds_search-filters__scrollable');
+
+    expect(scrollableDiv).toBeInTheDocument();
+    expect(scrollableDiv?.parentElement).toEqual(fieldset);
+});
+
+test('search filter panel with an active filter count', () => {
+    render(
+        <Filters.Panel activeFilterCount={3} heading="Content type" data-testid="searchfilter"/>
+    );
+
+    const filterPanel = screen.getByTestId('searchfilter');
+
+    const accordionTitle = filterPanel.querySelector('.ds_accordion-item__title');
+    expect(accordionTitle).toBeInTheDocument();
+    expect(accordionTitle).toHaveTextContent('Content type');
+    expect(accordionTitle).toHaveTextContent('(3 selected)');
+
+    const filterCountDiv = accordionTitle?.querySelector('.ds_search-filters__filter-count');
+    expect(filterCountDiv).toBeInTheDocument();
+    expect(filterCountDiv).toHaveTextContent('(3 selected)');
+    expect(filterCountDiv?.parentElement).toEqual(accordionTitle);
+});
+
+test('search filter checkbox group renders correctly', () => {
+    render(
+        <Filters.CheckboxGroup data-testid="searchfiltercheckboxgroup">
+            <Checkbox label="Pension Credit" id="pensioncredit" />
+        </Filters.CheckboxGroup>
+    );
+
+    const checkboxGroup = screen.getByTestId('searchfiltercheckboxgroup');
+    expect(checkboxGroup).toHaveClass('ds_search-filters__checkboxes');
+
+    const checkbox = within(checkboxGroup).getByRole('checkbox');
+    const checkboxWrapper = checkbox.parentElement;
+    expect(checkboxWrapper).toBeInTheDocument();
+    expect(checkboxWrapper).toHaveClass('ds_checkbox', 'ds_checkbox--small');
+});
+
+test('passing additional props', () => {
+    render(
+        <Filters data-test="foo" data-testid="searchfilters"/>
+    );
+
+    const searchFilters = screen.getByTestId('searchfilters');
+    expect(searchFilters?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <Filters className="foo" data-testid="searchfilters"/>
+    );
+
+    const searchFilters = screen.getByTestId('searchfilters');
+    expect(searchFilters).toHaveClass('foo');
+});

package/src/components/SearchFilters/SearchFilters.tsx

@@ -0,0 +1,89 @@
+import Accordion from "../Accordion";
+import Button from "../Button";
+import SkipLinks from "../SkipLinks";
+import ConditionalWrapper from "../../common/ConditionalWrapper";
+import { CheckboxGroup } from "../Checkbox";
+
+export const FilterPanel = ({
+    activeFilterCount = 0,
+    children,
+    isScrollable = false,
+    legend,
+    heading = 'Filter',
+    ...props
+}: SGDS.Component.SearchFilters.Panel) => {
+    const headingWithCount = <>
+        {heading}
+        {activeFilterCount > 0 && <div className="ds_search-filters__filter-count">({activeFilterCount} selected)</div>}
+    </>;
+
+    return (
+        <Accordion.Item heading={headingWithCount} {...props}>
+            <fieldset>
+                <legend className="visually-hidden">{legend}</legend>
+
+                <ConditionalWrapper
+                    condition={isScrollable}
+                    wrapper={(children: React.JSX.Element) => <div className="ds_search-filters__scrollable">{children}</div>}
+                >
+                    {children}
+                </ConditionalWrapper>
+            </fieldset>
+        </Accordion.Item>
+    );
+};
+
+const FilterCheckboxGroup = ({
+    children,
+    ...props
+}: any) => {
+    return (
+        <CheckboxGroup
+            className="ds_search-filters__checkboxes"
+            isSmall
+            {...props}
+        >
+            {children}
+        </CheckboxGroup>
+    );
+};
+
+const Filters = ({
+    children,
+    searchResultsContainerId = 'search-results',
+    ...props
+}: SGDS.Component.SearchFilters) => {
+    return (
+        <div className="ds_search-filters" {...props}>
+            <div className="ds_details  ds_no-margin" data-module="ds-details">
+                <input id="filters-toggle" type="checkbox" className="ds_details__toggle  visually-hidden"/>
+                <label htmlFor="filters-toggle" className="ds_details__summary">
+                    Search filters
+                </label>
+
+                <SkipLinks isStatic>
+                    <SkipLinks.Link fragmentId={searchResultsContainerId}>Skip to results</SkipLinks.Link>
+                </SkipLinks>
+
+                <div className="ds_details__text">
+                    <form id="filters">
+                        <h2 className="ds_search-filters__title  ds_h4">Filter by</h2>
+
+                        <Accordion className="ds_!_margin-top--0" isSmall hideOpenAll>
+                            {children}
+                        </Accordion>
+
+                        <Button isSmall width="max" className="ds_no-margin">Apply filter</Button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+Filters.Panel = FilterPanel;
+Filters.CheckboxGroup = FilterCheckboxGroup;
+FilterCheckboxGroup.displayName = 'Filters.CheckboxGroup';
+FilterPanel.displayName = 'Filters.Panel';
+
+export default Filters;

package/src/components/SearchFilters/index.ts

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