@scottish-government/designsystem-react 0.10.2 → 0.12.0

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/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/Accordion";
+import Button from "../Button/Button";
+import SkipLinks from "../SkipLinks/SkipLinks";
+import ConditionalWrapper from "../../common/ConditionalWrapper";
+import CheckboxGroup from "../Checkbox/CheckboxGroup";
+
+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/SearchResult/SearchResult.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SearchResult from './SearchResult';
+
+//@ts-ignore
+import coo from '../../../static/images/highland-cow.jpg';
+
+const meta = {
+    title: 'Components/Search results/Result',
+    component: SearchResult,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        title: 'Application incomplete'
+    }
+} satisfies Meta<typeof SearchResult>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <SearchResult href="#foo" title="Greenhouse gas statistics 1990-2022" {...args}>
+            <SearchResult.Content>
+                Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
+            </SearchResult.Content>
+        </SearchResult>
+    )
+};
+
+export const Metadata: Story = {
+    render: (args) => (
+        <SearchResult href="#foo" title="Greenhouse gas statistics 1990-2022" {...args}>
+            <SearchResult.Content>
+                Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
+            </SearchResult.Content>
+            <SearchResult.Meta>
+                <SearchResult.MetaItem name="Publication type">
+                    Statistics
+                </SearchResult.MetaItem>
+                <SearchResult.MetaItem name="Date">
+                    18 June 2024
+                </SearchResult.MetaItem>
+            </SearchResult.Meta>
+        </SearchResult>
+    )
+};
+
+export const Context: Story = {
+    render: (args) => (
+        <SearchResult href="#foo" title="Greenhouse gas statistics 1990-2022" {...args}>
+            <SearchResult.Content>
+                Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
+            </SearchResult.Content>
+            <SearchResult.Context title="Part of">
+                <SearchResult.ContextItem><a href="#">Environment statistics</a></SearchResult.ContextItem>
+                <SearchResult.ContextItem><a href="#">Energy statistics</a></SearchResult.ContextItem>
+            </SearchResult.Context>
+        </SearchResult>
+    )
+};
+
+export const Media: Story = {
+    render: (args) => (
+        <SearchResult href="#foo" title="Application incomplete" {...args}>
+            <SearchResult.Content>
+                <SearchResult.Media>
+                    <img src={coo} alt="" />
+                </SearchResult.Media>
+                Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
+            </SearchResult.Content>
+        </SearchResult>
+    )
+};
+
+export const Promoted: Story = {
+    render: (args) => (
+        <SearchResult isPromoted href="#foo" title="Greenhouse gas statistics 1990-2022" {...args}>
+            <SearchResult.Content>
+                Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
+            </SearchResult.Content>
+        </SearchResult>
+    )
+};
+
+export const KitchenSink: Story = {
+    render: (args) => (
+        <SearchResult isPromoted href="#foo" title="Application incomplete" {...args}>
+            <SearchResult.Content>
+                <SearchResult.Media>
+                    <img src={coo} alt="" />
+                </SearchResult.Media>
+                Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.
+            </SearchResult.Content>
+            <SearchResult.Meta>
+                <SearchResult.MetaItem name="Publication type">
+                    Statistics
+                </SearchResult.MetaItem>
+                <SearchResult.MetaItem name="Date">
+                    18 June 2024
+                </SearchResult.MetaItem>
+            </SearchResult.Meta>
+            <SearchResult.Context title="Part of">
+                <SearchResult.ContextItem><a href="#">Environment statistics</a></SearchResult.ContextItem>
+                <SearchResult.ContextItem><a href="#">Energy statistics</a></SearchResult.ContextItem>
+            </SearchResult.Context>
+        </SearchResult>
+    )
+};

package/src/components/SearchResult/SearchResult.test.tsx

@@ -0,0 +1,215 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import SearchResult from './SearchResult';
+
+const RESULT_TITLE = 'My title';
+const RESULT_HREF = '#foo';
+const RESULT_CONTENT = 'My content';
+const META_KEY = 'My meta key';
+const META_VALUE = 'My meta value';
+const CONTEXT_VALUE = 'My context value';
+
+test('search result renders correctly', () => {
+    render(
+        <SearchResult href={RESULT_HREF} title={RESULT_TITLE} data-testid="searchresult">
+            <SearchResult.Content>
+                {RESULT_CONTENT}
+            </SearchResult.Content>
+            <SearchResult.Meta>
+                <SearchResult.MetaItem name={META_KEY}>
+                    {META_VALUE}
+                </SearchResult.MetaItem>
+            </SearchResult.Meta>
+            <SearchResult.Context>
+                <SearchResult.ContextItem>{CONTEXT_VALUE}</SearchResult.ContextItem>
+            </SearchResult.Context>
+        </SearchResult>
+    );
+
+    const searchResult = screen.getByTestId('searchresult');
+    expect(searchResult).toHaveClass('ds_search-result');
+    expect(searchResult).not.toHaveClass('ds_search-result--promoted');
+
+    const title = screen.getByRole('heading');
+    expect(title).toHaveClass('ds_search-result__title');
+    expect(title).toHaveTextContent(RESULT_TITLE);
+    expect(title?.parentElement).toEqual(searchResult);
+
+    const link = within(title).getByRole('link');
+    expect(link).toHaveClass('ds_search-result__link');
+    expect(link).toHaveAttribute('href', RESULT_HREF);
+    expect(link.tagName).toBe('A');
+
+    const content = screen.getByText(RESULT_CONTENT);
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveClass('ds_search-result__summary');
+    expect(content?.previousElementSibling).toEqual(title);
+
+    const meta = searchResult.querySelector('.ds_metadata');
+    expect(meta).toBeInTheDocument();
+    expect(meta).toHaveClass('ds_metadata--inline', 'ds_search-result__metadata');
+    expect(meta?.previousElementSibling).toEqual(content);
+    expect(meta?.tagName).toBe('DL');
+
+    const metaItem = meta.querySelector('.ds_metadata__item');
+    expect(metaItem).toBeInTheDocument();
+    expect(metaItem).toHaveClass('ds_metadata__item');
+    expect(metaItem?.parentElement).toEqual(meta);
+
+    const metaTerm = meta.querySelector('dt');
+    expect(metaTerm).toBeInTheDocument();
+    expect(metaTerm).toHaveClass('ds_metadata__key');
+    expect(metaTerm?.textContent).toBe(META_KEY);
+    expect(metaTerm?.parentElement).toEqual(metaItem);
+
+    const metaDesc = meta.querySelector('dd');
+    expect(metaDesc).toBeInTheDocument();
+    expect(metaDesc).toHaveClass('ds_metadata__value');
+    expect(metaDesc?.textContent.trim()).toBe(META_VALUE);
+    expect(metaDesc?.parentElement).toEqual(metaItem);
+    expect(metaDesc?.previousElementSibling).toEqual(metaTerm);
+
+    const context = searchResult.querySelector('.ds_search-result__context');
+    expect(context).toBeInTheDocument();
+    expect(context).toHaveClass('ds_search-result__context');
+    expect(context?.tagName).toBe('DL');
+    expect(context?.previousElementSibling).toEqual(meta);
+
+    const contextTitle = context?.querySelector('dt');
+    expect(contextTitle).toBeInTheDocument();
+    expect(contextTitle).toHaveClass('ds_search-result__context-key');
+    expect(contextTitle?.textContent).toBe('Part of:');
+    expect(contextTitle?.parentElement).toEqual(context);
+
+    const contextValue = context?.querySelector('dd');
+    expect(contextValue).toBeInTheDocument();
+    expect(contextValue).toHaveClass('ds_search-result__context-value');
+    expect(contextValue?.textContent).toBe(CONTEXT_VALUE);
+    expect(contextValue?.previousElementSibling).toEqual(contextTitle);
+    expect(contextValue?.parentElement).toEqual(context);
+});
+
+test('promoted search result renders correctly', () => {
+    render(
+        <SearchResult isPromoted href="#foo" title={RESULT_TITLE} data-testid="searchresult">
+            <SearchResult.Content>
+                {RESULT_CONTENT}
+            </SearchResult.Content>
+        </SearchResult>
+    );
+
+    const searchResult = screen.getByTestId('searchresult');
+    expect(searchResult).toHaveClass('ds_search-result', 'ds_search-result--promoted');
+
+    const promotedContent = searchResult.querySelector('.ds_search-result--promoted-content');
+    expect(promotedContent).toBeInTheDocument();
+    expect(promotedContent?.parentElement).toEqual(searchResult);
+    expect(promotedContent?.tagName).toBe('DIV');
+
+    const promotedTitle = promotedContent?.querySelector('.ds_search-result--promoted-title');
+    expect(promotedTitle).toBeInTheDocument();
+    expect(promotedTitle?.textContent).toBe('Recommended');
+    expect(promotedTitle?.parentElement).toEqual(promotedContent);
+
+    const title = screen.getByRole('heading');
+    expect(title).toHaveClass('ds_search-result__title');
+    expect(title).toHaveTextContent(RESULT_TITLE);
+    expect(title?.parentElement).toEqual(promotedContent);
+
+    const content = screen.getByText(RESULT_CONTENT);
+    expect(content).toBeInTheDocument();
+    expect(content?.previousElementSibling).toEqual(title);
+    expect(content?.parentElement).toEqual(promotedContent);
+});
+
+test('search result with media renders correctly', () => {
+    const IMAGE = <img alt=""/>;
+
+    render(
+        <SearchResult href={RESULT_HREF} title={RESULT_TITLE} data-testid="searchresult">
+            <SearchResult.Content>
+                <SearchResult.Media>
+                    {IMAGE}
+                </SearchResult.Media>
+                {RESULT_CONTENT}
+            </SearchResult.Content>
+        </SearchResult>
+    );
+
+    const searchResult = screen.getByTestId('searchresult');
+    const title = screen.getByRole('heading');
+
+    const summary = searchResult.querySelector('.ds_search-result__has-media');
+    expect(summary).toBeInTheDocument();
+    expect(summary?.tagName).toBe('DIV');
+    expect(summary?.parentElement).toEqual(searchResult);
+    expect(summary?.previousElementSibling).toEqual(title);
+
+    const mediaWrapper = summary?.querySelector('.ds_search-result__media-wrapper');
+    expect(mediaWrapper).toBeInTheDocument();
+    expect(mediaWrapper?.parentElement).toEqual(summary);
+
+    const mediaLink = mediaWrapper?.querySelector('.ds_search-result__media-link');
+    expect(mediaLink).toBeInTheDocument();
+    expect(mediaLink).toHaveAttribute('aria-hidden', 'true');
+    expect(mediaLink).toHaveAttribute('href', RESULT_HREF);
+    expect(mediaLink).toHaveAttribute('tabindex', '-1');
+    expect(mediaLink?.parentElement).toEqual(mediaWrapper);
+    expect(mediaLink?.tagName).toBe('A');
+
+    const media = summary?.querySelector('.ds_search-result__media');
+    expect(media).toBeInTheDocument();
+    expect(media).toHaveClass('ds_aspect-box', 'ds_aspect-box--square');
+    expect(media?.parentElement).toEqual(mediaLink);
+    expect(media?.tagName).toBe('DIV');
+
+    const img = media?.querySelector('img');
+    expect(img).toBeInTheDocument();
+    expect(img?.parentElement).toEqual(media);
+
+    const content = screen.getByText(RESULT_CONTENT);
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveClass('ds_search-result__summary');
+    expect(content?.parentElement).toEqual(summary);
+    expect(content?.previousElementSibling).toEqual(mediaWrapper);
+});
+
+test('linkComponent is used for title link', () => {
+    render(
+        <SearchResult href={RESULT_HREF} title={RESULT_TITLE} data-testid="searchresult" linkComponent={
+            ({ className, ...props }) => (
+                <span role="link" className={className} {...props}/>
+            )}>
+            <SearchResult.Content>
+                {RESULT_CONTENT}
+            </SearchResult.Content>
+        </SearchResult>
+    );
+
+    const title = screen.getByRole('heading');
+
+    const link = within(title).getByRole('link');
+    expect(link).toHaveClass('ds_search-result__link');
+    expect(link).toHaveAttribute('href', RESULT_HREF);
+    expect(link.tagName).toBe('SPAN');
+    expect(link?.parentElement).toEqual(title);
+    expect(link?.previousElementSibling).toBeNull();
+});
+
+test('passing additional props', () => {
+    render(
+        <SearchResult data-test="foo" data-testid="searchresult"/>
+    );
+
+    const searchResult = screen.getByTestId('searchresult');
+    expect(searchResult?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <SearchResult className="foo" data-testid="searchresult"/>
+    );
+
+    const searchResult = screen.getByTestId('searchresult');
+    expect(searchResult).toHaveClass('foo');
+});