@scottish-government/designsystem-react 0.13.0 → 1.0.0

package/src/components/NotificationTag/NotificationTag.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import NotificationTag from './NotificationTag';
+
+const meta = {
+    title: 'Components/Notification Tag',
+    component: NotificationTag,
+    argTypes: {
+        children: argTypes.children(),
+        description: {
+            description: 'Additional description for screen readers',
+            type: 'string'
+        },
+        label: {
+            description: 'Visible label, leave blank for a dot notification tag',
+            type: 'string'
+        },
+        isHidden: {
+            description: 'Hides the tag from screen readers',
+            control: 'boolean',
+        },
+    },
+    args: {
+        label: '99+',
+        description: 'Unread notifications'
+    }
+} satisfies Meta<typeof NotificationTag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <NotificationTag {...args}
+            >
+            <svg className="ds_icon ds_icon--40" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40" width="30" height="40" fill="none">
+                <path d="m2.77792 35c-.75 0-1.40056-.2754-1.95167-.8262-.550833-.5512-.82625-1.2017-.82625-1.9517v-24.44418c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h24.44418c.75 0 1.4005.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v24.44418c0 .75-.2754 1.4005-.8262 1.9517-.5512.5508-1.2017.8262-1.9517.8262zm5.19416-6.6387h8.75002c.3936 0 .7235-.1337.9896-.4009.2664-.2672.3995-.5982.3995-.9929 0-.395-.1331-.7244-.3995-.9883-.2661-.2639-.596-.3959-.9896-.3959h-8.75002c-.39333 0-.72319.1336-.98958.4009-.26611.2669-.39917.5979-.39917.9929s.13306.7244.39917.9883c.26639.2639.59625.3959.98958.3959zm0-6.9726h14.05582c.3933 0 .7232-.1334.9896-.4004.2661-.2672.3992-.5983.3992-.9933 0-.3947-.1331-.724-.3992-.9879-.2664-.2639-.5963-.3959-.9896-.3959h-14.05582c-.39333 0-.72319.1335-.98958.4005-.26611.2672-.39917.5983-.39917.9933 0 .3947.13306.724.39917.9879.26639.2639.59625.3958.98958.3958zm0-6.972h14.05582c.3933 0 .7232-.1336.9896-.4009.2661-.2669.3992-.5979.3992-.9929s-.1331-.7244-.3992-.9883c-.2664-.2639-.5963-.3958-.9896-.3958h-14.05582c-.39333 0-.72319.1336-.98958.4008-.26611.2672-.39917.5982-.39917.9929 0 .395.13306.7244.39917.9883.26639.2639.59625.3959.98958.3959z" />
+            </svg>
+        </NotificationTag>
+    )
+};
+
+export const Dot: Story = {
+    args: {
+        label: ''
+    },
+    render: (args) => (
+        <NotificationTag {...args}
+            >
+            <svg className="ds_icon ds_icon--40" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40" width="30" height="40" fill="none">
+                <path d="m2.77792 35c-.75 0-1.40056-.2754-1.95167-.8262-.550833-.5512-.82625-1.2017-.82625-1.9517v-24.44418c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h24.44418c.75 0 1.4005.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v24.44418c0 .75-.2754 1.4005-.8262 1.9517-.5512.5508-1.2017.8262-1.9517.8262zm5.19416-6.6387h8.75002c.3936 0 .7235-.1337.9896-.4009.2664-.2672.3995-.5982.3995-.9929 0-.395-.1331-.7244-.3995-.9883-.2661-.2639-.596-.3959-.9896-.3959h-8.75002c-.39333 0-.72319.1336-.98958.4009-.26611.2669-.39917.5979-.39917.9929s.13306.7244.39917.9883c.26639.2639.59625.3959.98958.3959zm0-6.9726h14.05582c.3933 0 .7232-.1334.9896-.4004.2661-.2672.3992-.5983.3992-.9933 0-.3947-.1331-.724-.3992-.9879-.2664-.2639-.5963-.3959-.9896-.3959h-14.05582c-.39333 0-.72319.1335-.98958.4005-.26611.2672-.39917.5983-.39917.9933 0 .3947.13306.724.39917.9879.26639.2639.59625.3958.98958.3958zm0-6.972h14.05582c.3933 0 .7232-.1336.9896-.4009.2661-.2669.3992-.5979.3992-.9929s-.1331-.7244-.3992-.9883c-.2664-.2639-.5963-.3958-.9896-.3958h-14.05582c-.39333 0-.72319.1336-.98958.4008-.26611.2672-.39917.5982-.39917.9929 0 .395.13306.7244.39917.9883.26639.2639.59625.3959.98958.3959z" />
+            </svg>
+        </NotificationTag>
+    )
+};
+
+export const Hidden: Story = {
+    render: (args) => (
+        <NotificationTag {...args}
+            isHidden
+            >
+            <svg className="ds_icon ds_icon--40" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40" width="30" height="40" fill="none">
+                <path d="m2.77792 35c-.75 0-1.40056-.2754-1.95167-.8262-.550833-.5512-.82625-1.2017-.82625-1.9517v-24.44418c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h24.44418c.75 0 1.4005.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v24.44418c0 .75-.2754 1.4005-.8262 1.9517-.5512.5508-1.2017.8262-1.9517.8262zm5.19416-6.6387h8.75002c.3936 0 .7235-.1337.9896-.4009.2664-.2672.3995-.5982.3995-.9929 0-.395-.1331-.7244-.3995-.9883-.2661-.2639-.596-.3959-.9896-.3959h-8.75002c-.39333 0-.72319.1336-.98958.4009-.26611.2669-.39917.5979-.39917.9929s.13306.7244.39917.9883c.26639.2639.59625.3959.98958.3959zm0-6.9726h14.05582c.3933 0 .7232-.1334.9896-.4004.2661-.2672.3992-.5983.3992-.9933 0-.3947-.1331-.724-.3992-.9879-.2664-.2639-.5963-.3959-.9896-.3959h-14.05582c-.39333 0-.72319.1335-.98958.4005-.26611.2672-.39917.5983-.39917.9933 0 .3947.13306.724.39917.9879.26639.2639.59625.3958.98958.3958zm0-6.972h14.05582c.3933 0 .7232-.1336.9896-.4009.2661-.2669.3992-.5979.3992-.9929s-.1331-.7244-.3992-.9883c-.2664-.2639-.5963-.3958-.9896-.3958h-14.05582c-.39333 0-.72319.1336-.98958.4008-.26611.2672-.39917.5982-.39917.9929 0 .395.13306.7244.39917.9883.26639.2639.59625.3959.98958.3959z" />
+            </svg>
+        </NotificationTag>
+    )
+};

package/src/components/NotificationTag/NotificationTag.test.tsx

@@ -0,0 +1,70 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import NotificationTag from './NotificationTag';
+
+const NOTIFICATION_TAG_LABEL = '11';
+const NOTIFICATION_TAG_DESCRIPTION = 'new messages';
+const NOTIFICATION_TAG_ICON = 'SVG icon';
+
+test('notification tag renders correctly', () => {
+    render(
+        <NotificationTag label={NOTIFICATION_TAG_LABEL} description={NOTIFICATION_TAG_DESCRIPTION} data-testid="notification-tag">{NOTIFICATION_TAG_ICON}</NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+    const notificationTagWrapper = notificationTag.parentElement;
+    const notificationTagDescription = notificationTag.lastChild;
+
+    expect(notificationTag).toHaveClass('ds_notification-tag');
+    expect(notificationTag.nodeName).toEqual('SPAN');
+    expect(notificationTag).not.toHaveAttribute('aria-hidden');
+    expect(notificationTagWrapper).toHaveClass('ds_notification-tag__wrapper');
+    expect(notificationTagWrapper?.nodeName).toEqual('SPAN');
+    expect(notificationTagDescription).toHaveClass('visually-hidden');
+    expect(notificationTagDescription?.nodeName).toEqual('SPAN');
+});
+
+test('notification tag with dot', () => {
+    render(
+        <NotificationTag data-testid="notification-tag">
+            {NOTIFICATION_TAG_ICON}
+        </NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+
+    expect(notificationTag).toHaveClass('ds_notification-tag--dot');
+});
+
+test('aria-hidden on notification tag', () => {
+    render(
+        <NotificationTag isHidden data-testid="notification-tag">
+            {NOTIFICATION_TAG_ICON}
+        </NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+    expect(notificationTag.getAttribute('aria-hidden')).toEqual('true');
+});
+
+test('passing additional props', () => {
+    render(
+        <NotificationTag data-test="foo" data-testid="notification-tag">
+            {NOTIFICATION_TAG_ICON}
+        </NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+    expect(notificationTag?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS class', () => {
+    render(
+        <NotificationTag className="foo" data-testid="notification-tag">
+            {NOTIFICATION_TAG_ICON}
+        </NotificationTag>
+    );
+
+    const notificationTag = screen.getByTestId('notification-tag');
+    expect(notificationTag).toHaveClass('foo', 'ds_notification-tag');
+});

package/src/components/NotificationTag/NotificationTag.tsx

@@ -0,0 +1,32 @@
+import { NotificationTagProps } from "./types";
+import clsx from 'clsx';
+
+const NotificationTag = ({
+    children,
+    className,
+    description,
+    isHidden,
+    label,
+    ...props
+}: NotificationTagProps) => {
+    return (
+        <span className="ds_notification-tag__wrapper">
+            {children}
+            <span
+                aria-hidden={isHidden ? "true" : undefined}
+                className={clsx([
+                    'ds_notification-tag',
+                    !label && 'ds_notification-tag--dot',
+                    className
+                ])}
+                {...props}
+            >
+                {label} {description && <span className="visually-hidden">{description}</span>}
+            </span>
+        </span>
+    )
+};
+
+NotificationTag.displayName = 'NotificationTag';
+
+export default NotificationTag;

package/src/components/NotificationTag/index.ts

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

package/src/components/NotificationTag/types.ts

@@ -0,0 +1,5 @@
+export interface NotificationTagProps extends React.AllHTMLAttributes<HTMLElement> {
+    description?: string
+    isHidden?: boolean
+    label?: string
+}

package/src/components/PageHeader/PageHeader.tsx

@@ -1,4 +1,5 @@
 import { PageHeaderProps } from "./types";
+import clsx from 'clsx';
 
 const PageHeader = ({
     children,
@@ -10,10 +11,10 @@ const PageHeader = ({
 }: PageHeaderProps) => {
     return (
         <header
-            className={[
+            className={clsx([
                 'ds_page-header',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}

package/src/components/PageMetadata/PageMetadata.tsx

@@ -1,4 +1,5 @@
 import { MetdataItemProps, MetadataProps } from "./types";
+import clsx from 'clsx';
 
 const MetadataItem = ({
     children,
@@ -7,10 +8,10 @@ const MetadataItem = ({
     ...props
 }: MetdataItemProps) => {
     return (
-        <div className={[
+        <div className={clsx([
             'ds_metadata__item',
             className
-        ].join(' ')}
+        ])}
             {...props}
         >
             <dt className="ds_metadata__key">{name}</dt>{' '}
@@ -29,11 +30,11 @@ const Metadata = ({
 }: MetadataProps) => {
     return (
         <dl
-            className={[
+            className={clsx([
                 'ds_metadata',
                 isInline && 'ds_metadata--inline',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             {children}

package/src/components/Pagination/Pagination.test.tsx

@@ -84,6 +84,26 @@ test('pagination page with click event', () => {
     expect(ONCLICK_FUNCTION).toHaveBeenCalled();
 });
 
+test('pagination page with onClick that is not a function', () => {
+    render(
+        <Page
+            ariaLabel={PAGE_ARIA_LABEL}
+            href={PAGE_HREF}
+            // @ts-expect-error onClick is not a function
+            onClick='foo'
+        >{PAGE_LABEL}</Page>
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('link');
+
+    fireEvent.click(link);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('Ellipsis item renders correctly', () => {
     render(
         <Ellipsis/>

package/src/components/Pagination/Pagination.tsx

@@ -1,6 +1,7 @@
 import Icon from "../../common/Icon";
 import { PaginationPageProps, PaginationProps } from "./types";
 import { LinkComponentProps } from "../../shared-types";
+import clsx from 'clsx';
 
 export const Page = ({
     ariaLabel,
@@ -12,17 +13,18 @@ export const Page = ({
     onClick
 }: PaginationPageProps) => {
     function handleClick(event: React.MouseEvent) {
+        /* istanbul ignore else */
         if (typeof onClick === 'function') {
             onClick(event);
         }
     }
 
     function processChildren(children: React.ReactNode) {
-        const classNames = [
+        const classNames = clsx([
             'ds_pagination__link',
             className,
-            isCurrent ? 'ds_current' : undefined
-        ].join(' ');
+            isCurrent && 'ds_current'
+        ]);
 
         const linkProps: LinkComponentProps = {
             'aria-label': ariaLabel,
@@ -107,10 +109,10 @@ const Pagination = ({
     }
 
     return (
-        <nav className={[
+        <nav className={clsx([
                 'ds_pagination',
                 className
-            ].join(' ')}
+            ])}
             aria-label={ariaLabel}
             {...props}
         >

package/src/components/PhaseBanner/PhaseBanner.tsx

@@ -1,5 +1,6 @@
 import Tag from "../Tag/Tag";
 import { PhaseBannerProps } from "./types";
+import clsx from 'clsx';
 
 const PhaseBanner = ({
     children,
@@ -9,10 +10,10 @@ const PhaseBanner = ({
 }: PhaseBannerProps) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_phase-banner',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <div className="ds_wrapper">

package/src/components/Question/Question.tsx

@@ -2,6 +2,7 @@ import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText'
 import WrapperTag from '../../common/WrapperTag';
 import { QuestionProps } from './types';
+import clsx from 'clsx';
 
 const Question = function ({
     children,
@@ -16,11 +17,11 @@ const Question = function ({
     return (
         <WrapperTag
             tagName={tagName}
-            className={[
+            className={clsx([
                 'ds_question',
                 hasError && 'ds_question--error',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             {legend && <legend>{legend}</legend>}

package/src/components/Question/types.ts

@@ -1,9 +1,9 @@
 type QuestionTags = 'div' | 'fieldset';
 
 export interface QuestionProps extends React.AllHTMLAttributes<HTMLElement> {
-    errorMessage?: string;
+    errorMessage?: string | React.ReactNode;
     hasError?: boolean;
-    hintText?: string;
+    hintText?: string | React.ReactNode;
     legend?: string;
     tagName: QuestionTags;
 }

package/src/components/RadioButton/RadioButton.test.tsx

@@ -61,6 +61,36 @@ test('radio with change fn', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('radio with onBlur that is not a function', () => {
+    render(
+        // @ts-expect-error onBlur is not a function
+        <RadioButton onBlur='foo' name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    fireEvent.blur(radio);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('radio with onChange that is not a function', () => {
+    render(
+        // @ts-expect-error onChange is not a function
+        <RadioButton onChange='foo' name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    fireEvent.click(radio);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('radio with hint text', () => {
     render(
         <RadioButton hintText="hint text" name="benefitType" label="Pension Credit" id="pensioncredit" />

package/src/components/RadioButton/RadioButton.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
-
 import HintText from '../../common/HintText';
 import { CheckboxRadioContext } from '../../utils/context';
 import { RadioButtonProps } from './types';
+import clsx from 'clsx';
 
 const RadioButton = ({
     checked,
@@ -33,10 +33,10 @@ const RadioButton = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_radio',
                 isSmall && 'ds_radio--small'
-            ].join(' ')}>
+            ])}>
             <input
                 aria-describedby={hintText ? hintTextId : undefined}
                 className="ds_radio__input"

package/src/components/RadioButton/RadioGroup.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CheckboxRadioContext } from '../../utils/context';
 import { RadioGroupProps } from './types';
+import clsx from 'clsx';
 
 const RadioGroup = ({
     children,
@@ -12,12 +13,12 @@ const RadioGroup = ({
 }: RadioGroupProps) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_radios',
                 'ds_field-group',
                 isInline && 'ds_field-group--inline',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <CheckboxRadioContext value={{ isSmall: !!isSmall, name}}>

package/src/components/SearchFacets/SearchFacets.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
         children: argTypes.children()
     },
     args: {
-        title: 'Application incomplete'
+
     }
 } satisfies Meta<typeof Facets>;
 

package/src/components/SearchFacets/SearchFacets.tsx

@@ -2,6 +2,7 @@ import React, { Children } from 'react';
 import Icon from "../../common/Icon";
 import { Cancel } from '../../../src/images/icons';
 import { SearchFacetsGroupProps, SearchFacetsItemProps, SearchFacetsProps } from './types';
+import clsx from 'clsx';
 
 const FacetsItem = ({
     accessibleName,
@@ -71,10 +72,10 @@ const Facets = ({
     });
 
     return (
-        <div className={[
+        <div className={clsx([
                 "ds_facets",
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <p className="visually-hidden">There {facetCount === 1 ? 'is' : 'are'} {facetCount} search {facetCount === 1 ? 'filter' : 'filters'} applied</p>

package/src/components/SearchResult/SearchResult.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 import SearchResult from './SearchResult';
+import Metadata from '../PageMetadata';
 // @ts-expect-error no types
 import coo from '../../../static/images/highland-cow.jpg';
 
@@ -29,20 +30,20 @@ export const Default: Story = {
     )
 };
 
-export const Metadata: Story = {
+export const WithMetadata: Story = {
     render: (args) => (
         <SearchResult {...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">
+            <SearchResult.Metadata>
+                <Metadata.Item name="Publication type">
                     Statistics
-                </SearchResult.MetaItem>
-                <SearchResult.MetaItem name="Date">
+                </Metadata.Item>
+                <Metadata.Item name="Date">
                     18 June 2024
-                </SearchResult.MetaItem>
-            </SearchResult.Meta>
+                </Metadata.Item>
+            </SearchResult.Metadata>
         </SearchResult>
     )
 };
@@ -93,14 +94,14 @@ export const KitchenSink: Story = {
                 </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">
+            <SearchResult.Metadata>
+                <Metadata.Item name="Publication type">
                     Statistics
-                </SearchResult.MetaItem>
-                <SearchResult.MetaItem name="Date">
+                </Metadata.Item>
+                <Metadata.Item name="Date">
                     18 June 2024
-                </SearchResult.MetaItem>
-            </SearchResult.Meta>
+                </Metadata.Item>
+            </SearchResult.Metadata>
             <SearchResult.Context title="Part of">
                 <SearchResult.ContextItem><a href="#">Environment statistics</a></SearchResult.ContextItem>
                 <SearchResult.ContextItem><a href="#">Energy statistics</a></SearchResult.ContextItem>

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

@@ -1,6 +1,7 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import SearchResult from './SearchResult';
+import Metadata from '../PageMetadata';
 
 const RESULT_TITLE = 'My title';
 const RESULT_HREF = '#foo';
@@ -15,11 +16,11 @@ test('search result renders correctly', () => {
             <SearchResult.Content>
                 {RESULT_CONTENT}
             </SearchResult.Content>
-            <SearchResult.Meta>
-                <SearchResult.MetaItem name={META_KEY}>
+            <SearchResult.Metadata>
+                <Metadata.Item name={META_KEY}>
                     {META_VALUE}
-                </SearchResult.MetaItem>
-            </SearchResult.Meta>
+                </Metadata.Item>
+            </SearchResult.Metadata>
             <SearchResult.Context>
                 <SearchResult.ContextItem>{CONTEXT_VALUE}</SearchResult.ContextItem>
             </SearchResult.Context>

package/src/components/SearchResult/SearchResult.tsx

@@ -3,6 +3,7 @@ import ConditionalWrapper from '../../common/ConditionalWrapper';
 import AspectBox from '../AspectBox';
 import Metadata from '../PageMetadata';
 import { SearchResultContextProps, SearchResultProps } from './types';
+import clsx from 'clsx';
 
 const SearchResultLinkHrefContext = createContext('');
 
@@ -93,10 +94,10 @@ const SearchResult = ({
     const LINK_CLASS = 'ds_search-result__link';
 
     return (
-        <div className={[
+        <div className={clsx([
             'ds_search-result',
-            isPromoted ? 'ds_search-result--promoted' : ''
-        ].join(' ')}
+            isPromoted && 'ds_search-result--promoted'
+        ])}
             {...props}
         >
             <ConditionalWrapper
@@ -125,14 +126,12 @@ SearchResult.Content = SearchResultContent;
 SearchResult.Context = SearchResultContext;
 SearchResult.ContextItem = SearchResultContextItem;
 SearchResult.Media = SearchResultMedia;
-SearchResult.Meta = SearchResultMeta;
-SearchResult.MetaItem = Metadata.Item;
+SearchResult.Metadata = SearchResultMeta;
 
 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';
+SearchResultMeta.displayName = 'SearchResult.Metadata';
 
 export default SearchResult;

package/src/components/SearchSort/SearchSort.tsx

@@ -2,6 +2,7 @@ import { AllHTMLAttributes } from "react";
 import Button from "../Button";
 import Select from "../Select";
 import { SearchSortProps } from "./types";
+import clsx from 'clsx';
 
 const Option = ({
     children,
@@ -24,10 +25,10 @@ const SearchSort = ({
 }: SearchSortProps) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_sort-options',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <Select id={id} label={label}>