@scottish-government/designsystem-react 0.10.2 → 0.11.1

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');
+});

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';
+import Metadata from '../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/SearchResult/index.ts

@@ -0,0 +1 @@
+export { default } from './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";
+import Select from "../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/SearchSort/index.ts

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

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 
 const Select = function ({

package/src/components/Select/index.ts

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