@scottish-government/designsystem-react 0.10.2 → 0.12.0

package/src/components/SearchResult/SearchResult.tsx

@@ -0,0 +1,137 @@
+import { Children, createContext, useContext } from 'react';
+import ConditionalWrapper from '../../common/ConditionalWrapper';
+import AspectBox from '../AspectBox/AspectBox';
+import Metadata from '../PageMetadata/PageMetadata';
+
+const SearchResultLinkHrefContext = createContext('');
+
+const SearchResultContent = ({
+    children
+}: SGDS.Component.SearchResult.Content) => {
+    const otherChildren: any[] = [];
+    let imageChild: React.ReactNode = null;
+
+    // assign to slots
+    Children.forEach(children, (child: React.ReactNode) => {
+        const thisChild = child as React.ReactElement<any>;
+        if (thisChild && thisChild.type === SearchResultMedia) {
+            imageChild = thisChild;
+        } else {
+            otherChildren.push(thisChild);
+        }
+    });
+
+    return (
+        imageChild ?
+            (<div className="ds_search-result__has-media">
+                {imageChild}
+                <div className="ds_search-result__summary">{otherChildren}</div>
+            </div>)
+        :
+            (<div className="ds_search-result__summary">
+                {otherChildren}
+            </div>)
+    )
+};
+
+const SearchResultContext = ({
+    children,
+    title = 'Part of'
+}: SGDS.Component.SearchResult.Context) => {
+    return (
+        <dl className="ds_search-result__context">
+            <dt className="ds_search-result__context-key">{title}:</dt>
+            {children}
+        </dl>
+    )
+};
+
+const SearchResultContextItem = ({
+    children
+}: SGDS.Component.SearchResult.ContextItem) => {
+    return (
+        <dd className="ds_search-result__context-value">
+            {children}
+        </dd>
+    )
+};
+
+const SearchResultMedia = ({
+    children
+}: SGDS.Component.SearchResult.Media) => {
+    return (
+        <div className="ds_search-result__media-wrapper">
+            <a className="ds_search-result__media-link" href={useContext(SearchResultLinkHrefContext)} tabIndex={-1} aria-hidden="true">
+                <AspectBox className="ds_search-result__media" ratio="1:1">
+                    {children}
+                </AspectBox>
+            </a>
+        </div>
+    )
+};
+
+const SearchResultMeta = ({
+    children
+}: SGDS.Component.SearchResult.Meta) => {
+    return (
+        <Metadata className="ds_search-result__metadata" isInline>
+            {children}
+        </Metadata>
+    )
+};
+
+const SearchResult = ({
+    children,
+    href,
+    isPromoted,
+    linkComponent,
+    promotedTitle = 'Recommended',
+    title,
+    ...props
+}: SGDS.Component.SearchResult) => {
+    const LINK_CLASS = 'ds_search-result__link';
+
+    return (
+        <div className={[
+            'ds_search-result',
+            isPromoted ? 'ds_search-result--promoted' : ''
+        ].join(' ')}
+            {...props}
+        >
+            <ConditionalWrapper
+                condition={!!isPromoted}
+                wrapper={(children: React.JSX.Element) => <div className="ds_search-result--promoted-content">
+                    <header className="ds_search-result--promoted-title">{promotedTitle}</header>
+                    {children}
+                </div>}
+            >
+                <SearchResultLinkHrefContext value={href}>
+                    <h3 className="ds_search-result__title">
+                        {linkComponent ?
+                            linkComponent({ className: LINK_CLASS, children: title, href }) :
+                            <a className={LINK_CLASS} href={href}>{title}</a>
+                        }
+                    </h3>
+
+                    {children}
+                </SearchResultLinkHrefContext>
+            </ConditionalWrapper>
+        </div>
+    );
+};
+
+SearchResult.Content = SearchResultContent;
+SearchResult.Context = SearchResultContext;
+SearchResult.ContextItem = SearchResultContextItem;
+SearchResult.Media = SearchResultMedia;
+SearchResult.Meta = SearchResultMeta;
+SearchResult.MetaItem = Metadata.Item;
+
+SearchResultContent.displayName = 'SearchResult.Content';
+SearchResultContext.displayName = 'SearchResult.Context';
+SearchResultContextItem.displayName = 'SearchResult.ContextItem';
+SearchResultMedia.displayName = 'SearchResult.Media';
+SearchResultMeta.displayName = 'SearchResult.Meta';
+SearchResult.MetaItem.displayName = 'SearchResult.MetaItem';
+
+export default SearchResult;

package/src/components/SearchSort/SearchSort.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SearchSort from './SearchSort';
+
+const meta = {
+    title: 'Components/Search results/Sort',
+    component: SearchSort,
+    argTypes: {
+        children: argTypes.children(),
+        id: argTypes.id(),
+        label: argTypes.label({ defaultValue: 'Sort by' }),
+        onApply: argTypes.onClick({ description: 'Callback function to be called when the Apply sort button is clicked' }),
+    },
+    args: {
+        id: 'sort-by',
+        label: 'Sort by'
+    }
+} satisfies Meta<typeof SearchSort>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <SearchSort {...args}>
+            <SearchSort.Option value="relevance">Most relevant</SearchSort.Option>
+            <SearchSort.Option value="date">Updated (newest)</SearchSort.Option>
+            <SearchSort.Option value="adate">Updated (oldest)</SearchSort.Option>
+        </SearchSort>
+    )
+};

package/src/components/SearchSort/SearchSort.test.tsx

@@ -0,0 +1,129 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import SearchSort from './SearchSort';
+
+const SELECT_ID = 'sort-by';
+const LABEL_TEXT = 'Sort by';
+
+test('renders correctly', () => {
+    render(
+        <SearchSort data-testid="search-sort">
+        </SearchSort>
+    );
+
+    const searchSort = screen.getByTestId('search-sort');
+    const select = screen.getByRole('combobox');
+    const selectWrapper = select.parentElement;
+    const label = selectWrapper?.previousElementSibling;
+    const selectArrow = select.nextElementSibling;
+    const button = within(searchSort).getByRole('button');
+
+    expect(select).toHaveClass('ds_select');
+    expect(select.id).toEqual(SELECT_ID);
+    expect(select).toHaveAttribute('name', SELECT_ID);
+
+    expect(selectWrapper).toHaveClass('ds_select-wrapper');
+    expect(selectWrapper?.tagName).toEqual('DIV');
+
+    expect(label).toHaveClass('ds_label');
+    expect(label).toHaveAttribute('for', SELECT_ID);
+    expect(label).toHaveTextContent(LABEL_TEXT);
+
+    expect(selectArrow).toHaveClass('ds_select-arrow');
+    expect(selectArrow).toHaveAttribute('aria-hidden');
+    expect(selectArrow?.textContent).toEqual('');
+
+    expect(searchSort).toBeInTheDocument();
+    expect(searchSort).toHaveClass('ds_sort-options');
+    expect(searchSort.tagName).toEqual('DIV');
+
+    expect(button).toHaveClass('ds_button', 'ds_button--small', 'ds_button--secondary');
+    expect(button).toHaveTextContent('Apply sort');
+    expect(button).toHaveAttribute('type', 'submit');
+    expect(button.previousElementSibling).toEqual(selectWrapper);
+});
+
+test('custom id and label', () => {
+    const CUSTOM_ID = 'custom-sort-by';
+    const CUSTOM_LABEL = 'Custom sort by';
+
+    render(
+        <SearchSort id={CUSTOM_ID} label={CUSTOM_LABEL} data-testid="search-sort">
+        </SearchSort>
+    );
+
+    const select = screen.getByRole('combobox');
+    const selectWrapper = select.parentElement;
+    const label = selectWrapper?.previousElementSibling;
+
+    expect(select.id).toEqual(CUSTOM_ID);
+    expect(select).toHaveAttribute('name', CUSTOM_ID);
+    expect(label).toHaveAttribute('for', CUSTOM_ID);
+    expect(label).toHaveTextContent(CUSTOM_LABEL);
+});
+
+test('event handler onApply', async () => {
+    const onApply = vi.fn();
+    render(
+        <SearchSort onApply={onApply} data-testid="search-sort">
+        </SearchSort>
+    );
+
+    const button = within(screen.getByTestId('search-sort')).getByRole('button');
+    await button.click();
+    expect(onApply).toHaveBeenCalled();
+});
+
+test('passing additional props', () => {
+    render(
+        <SearchSort data-test="foo" data-testid="search-sort">
+        </SearchSort>
+    );
+
+    const searchSort = screen.getByTestId('search-sort');
+    expect(searchSort.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <SearchSort className="foo" data-testid="search-sort">
+        </SearchSort>
+    );
+
+    const searchSort = screen.getByTestId('search-sort');
+    expect(searchSort).toHaveClass('foo', 'ds_sort-options');
+});
+
+test('renders options correctly', () => {
+    const OPTION_VALUE_1 = 'relevance';
+    const OPTION_TEXT_1 = 'Most relevant';
+    const OPTION_VALUE_2 = 'date';
+    const OPTION_TEXT_2 = 'Updated (newest)';
+    const OPTION_VALUE_3 = 'adate';
+    const OPTION_TEXT_3 = 'Updated (oldest)';
+
+    render(
+        <SearchSort data-testid="search-sort">
+            <SearchSort.Option value={OPTION_VALUE_1}>{OPTION_TEXT_1}</SearchSort.Option>
+            <SearchSort.Option value={OPTION_VALUE_2}>{OPTION_TEXT_2}</SearchSort.Option>
+            <SearchSort.Option value={OPTION_VALUE_3}>{OPTION_TEXT_3}</SearchSort.Option>
+        </SearchSort>
+    );
+
+    const select = screen.getByRole('combobox');
+    const options = within(select).getAllByRole('option');
+
+    expect(options).toHaveLength(4);
+
+    expect(options[0]).toHaveTextContent('');
+    expect(options[0]).toHaveAttribute('value', '');
+
+    expect(options[1]).toHaveTextContent(OPTION_TEXT_1);
+    expect(options[1]).toHaveAttribute('value', OPTION_VALUE_1);
+
+    expect(options[2]).toHaveTextContent(OPTION_TEXT_2);
+    expect(options[2]).toHaveAttribute('value', OPTION_VALUE_2);
+
+    expect(options[3]).toHaveTextContent(OPTION_TEXT_3);
+    expect(options[3]).toHaveAttribute('value', OPTION_VALUE_3);
+});

package/src/components/SearchSort/SearchSort.tsx

@@ -0,0 +1,45 @@
+import { AllHTMLAttributes } from "react";
+import Button from "../Button/Button";
+import Select from "../Select/Select";
+
+const Option = ({
+    children,
+    value
+}: AllHTMLAttributes<HTMLOptionElement>) => {
+    return (
+        <option value={value}>
+            {children}
+        </option>
+    );
+}
+
+const SearchSort = ({
+    children,
+    className,
+    id = 'sort-by',
+    label = 'Sort by',
+    onApply,
+    ...props
+}: SGDS.Component.SearchSort) => {
+    return (
+        <div
+            className={[
+                'ds_sort-options',
+                className
+            ].join(' ')}
+            {...props}
+        >
+            <Select id={id} label={label}>
+                {children}
+            </Select>
+
+            <Button onClick={onApply} isSmall buttonStyle="secondary" type="submit">Apply sort</Button>
+        </div>
+    );
+};
+
+SearchSort.displayName = 'SearchSort';
+Option.displayName = 'SearchSort.Option';
+SearchSort.Option = Option;
+
+export default SearchSort;

package/src/components/SequentialNavigation/SequentialNavigation.Next.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
     title: 'Components/SequentialNavigation/SequentialNavigation.Next',
     component: SequentialNavigation.Next,
     argTypes: {
-        href: argTypes.href(),
+        href: argTypes.href({type: {name: 'string', required: true}}),
         linkComponent: argTypes.linkComponent(),
         textLabel: {
             description: 'String to use for the label that precedes the link text',

package/src/components/SequentialNavigation/SequentialNavigation.Previous.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
     title: 'Components/SequentialNavigation/SequentialNavigation.Previous',
     component: SequentialNavigation.Previous,
     argTypes: {
-        href: argTypes.href(),
+        href: argTypes.href({type: {name: 'string', required: true}}),
         linkComponent: argTypes.linkComponent(),
         textLabel: {
             description: 'String to use for the label that precedes the link text',

package/src/components/SequentialNavigation/SequentialNavigation.tsx

@@ -5,7 +5,6 @@ const SeqNavLink = ({
     linkComponent,
     textLabel
 }: SGDS.Component.SequentialNavigation.Link) => {
-    console.log(textLabel)
     const LINK_CLASSES = [
         'ds_sequential-nav__button',
         isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'

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

@@ -6,6 +6,15 @@ import SideNavigation from './SideNavigation';
 const meta = {
     title: 'Components/SideNavigation/SideNavigation.Item',
     component: SideNavigation.Item,
+    decorators: [
+        Story => (
+            <nav className="ds_side-navigation">
+                <ul className="ds_side-navigation__list">
+                    <Story />
+                </ul>
+            </nav>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         isCurrent: argTypes.isCurrent(),

package/src/components/SideNavigation/SideNavigation.List.stories.tsx

@@ -6,6 +6,13 @@ import SideNavigation from './SideNavigation';
 const meta = {
     title: 'Components/SideNavigation/SideNavigation.List',
     component: SideNavigation.List,
+    decorators: [
+        Story => (
+            <nav className="ds_side-navigation">
+                <Story />
+            </nav>
+        )
+    ],
     argTypes: {
         isRoot: {
             description: 'Indicates that this is the root list in a nested structure. Required for mobile navigation.',

package/src/components/SideNavigation/SideNavigation.tsx

@@ -43,6 +43,7 @@ const SideNavigationItem = function ({
 };
 
 const SideNavigation = function ({
+    ariaLabel = 'Sections',
     children,
     className,
     ...props
@@ -57,7 +58,7 @@ const SideNavigation = function ({
 
     return (
         <nav
-            aria-label="Sections"
+            aria-label={ariaLabel}
             className={[
                 'ds_side-navigation',
                 className

package/src/components/SiteFooter/SiteFooter.License.stories.tsx

@@ -6,6 +6,13 @@ import SiteFooter from './SiteFooter';
 const meta = {
     title: 'Components/SiteFooter/SiteFooter.License',
     component: SiteFooter.License,
+    decorators: [
+        Story => (
+            <nav className="ds_site-footer" style={{borderTop: 0}}>
+                <Story />
+            </nav>
+        )
+    ],
     argTypes: {
         children: argTypes.children()
     },

package/src/components/SiteFooter/SiteFooter.Link.stories.tsx

@@ -6,6 +6,15 @@ import SiteFooter from './SiteFooter';
 const meta = {
     title: 'Components/SiteFooter/SiteFooter.Link',
     component: SiteFooter.Link,
+    decorators: [
+        Story => (
+            <div className="ds_site-footer__site-items" style={{ borderBottom: 0 }}>
+                <ul>
+                    <Story />
+                </ul>
+            </div>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         linkComponent: argTypes.linkComponent(),

package/src/components/SiteFooter/SiteFooter.Org.stories.tsx

@@ -6,6 +6,13 @@ import SiteFooter from './SiteFooter';
 const meta = {
     title: 'Components/SiteFooter/SiteFooter.Org',
     component: SiteFooter.Org,
+    decorators: [
+        Story => (
+            <div className="ds_site-footer__content" style={{borderTop: 0}}>
+                <Story />
+            </div>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         title: {

package/src/components/SiteHeader/SiteHeader.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, { Children, useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
 import SiteNavigation from '../SiteNavigation/SiteNavigation';

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

@@ -6,7 +6,17 @@ import SiteNavigation from './SiteNavigation';
 const meta = {
     title: 'Components/SiteNavigation/SiteNavigation.Item',
     component: SiteNavigation.Item,
+    decorators: [
+        Story => (
+            <nav className="ds_site-navigation">
+                <ul className="ds_site-navigation__list">
+                    <Story />
+                </ul>
+            </nav>
+        )
+    ],
     argTypes: {
+        href: argTypes.href({type: {name: 'string', required: true}}),
         linkComponent: argTypes.linkComponent(),
         children: argTypes.children()
     },

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

@@ -6,10 +6,20 @@ import SkipLinks from './SkipLinks';
 const meta = {
     title: 'Components/SkipLinks/SkipLinks.Link',
     component: SkipLinks.Link,
+    decorators: [
+        Story => (
+            <ul className="ds_skip-links">
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
         fragmentId: {
             description: 'ID of the destination element',
-            type: 'string'
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

package/src/components/SkipLinks/SkipLinks.tsx

@@ -1,3 +1,8 @@
+import React, { useEffect } from 'react';
+
+// @ts-ignore
+import dsSkipLinks from '@scottish-government/design-system/src/components/skip-links/skip-links';
+
 const Link = ({
     children,
     fragmentId
@@ -18,6 +23,11 @@ const SkipLinks = ({
     isStatic,
     ...props
 }: SGDS.Component.SkipLinks) => {
+
+    useEffect(() => {
+        dsSkipLinks.init();
+    });
+
     return (
         <div
             className={[

package/src/components/SummaryCard/SummaryCard.Action.stories.tsx

@@ -6,6 +6,13 @@ import SummaryCard from './SummaryCard';
 const meta = {
     title: 'Components/SummaryCard/SummaryCard.Action',
     component: SummaryCard.Action,
+    decorators: [
+        Story => (
+            <div className="ds_summary-card__header">
+                <Story />
+            </div>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         onClick: argTypes.onClick(),

package/src/components/SummaryCard/SummaryCard.stories.tsx

@@ -9,6 +9,13 @@ const meta = {
     component: SummaryCard,
     argTypes: {
         headingLevel: argTypes.headingLevel(),
+        title: {
+            description: 'The title of the summary card',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
         children: argTypes.children()
     },
     args: {

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

@@ -6,10 +6,25 @@ import SummaryList from './SummaryList';
 const meta = {
     title: 'Components/SummaryList/SummaryList.Item',
     component: SummaryList.Item,
+    decorators: [
+        Story => (
+            <ul>
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
+        Title: {
+            description: 'Title of the summary list item.',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
         children: argTypes.children()
     },
     args: {
+        title: 'Contact details',
         children: [
             <SummaryList.Value name="Email">
                 email@gov.scot

package/src/components/SummaryList/SummaryList.Value.stories.tsx

@@ -8,8 +8,11 @@ const meta = {
     component: SummaryList.Value,
     argTypes: {
         name: {
-            description: 'Title of the summary list item',
-            type: 'string'
+            description: 'Name of the summary value',
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

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

@@ -9,7 +9,10 @@ const meta = {
     argTypes: {
         tabLabel: {
             description: '',
-            type: 'string'
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

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

@@ -6,6 +6,15 @@ import TaskList from './TaskList';
 const meta = {
     title: 'Components/TaskList/TaskList.Group',
     component: TaskList.Group,
+    decorators: [
+        Story => (
+            <div className="ds_task-list">
+                <ul>
+                    <Story />
+                </ul>
+            </div>
+        )
+    ],
     argTypes: {
         headingId: {
             description: 'ID of the task list\'s heading element',

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

@@ -6,6 +6,13 @@ import TaskList from './TaskList';
 const meta = {
     title: 'Components/TaskList/TaskList.Item',
     component: TaskList.Item,
+    decorators: [
+        Story => (
+            <ul>
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         id: {