@scottish-government/designsystem-react 0.13.0 → 1.0.0

package/src/components/Select/Select.test.tsx

@@ -134,6 +134,48 @@ test('select with change function', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('select with onBlur that is not a function', () => {
+    render(
+        <Select
+        id={SELECT_ID}
+        label={LABEL_TEXT}
+            // @ts-expect-error onBlur is not a function
+            onBlur='foo'
+        >
+            {OPTIONS}
+        </Select>
+    );
+
+    const select = screen.getByRole('combobox');
+
+    fireEvent.blur(select);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('select with onChange that is not a function', () => {
+    render(
+        <Select
+        id={SELECT_ID}
+        label={LABEL_TEXT}
+            // @ts-expect-error onChange is not a function
+            onChange='foo'
+        >
+            {OPTIONS}
+        </Select>
+    );
+
+    const select = screen.getByRole('combobox');
+
+    fireEvent.change(select, {target: {value: 'button'}});
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('select with placeholder option', () => {
     const PLACEHOLDER_TEXT = 'foo';
 

package/src/components/Select/Select.tsx

@@ -1,6 +1,7 @@
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 import { SelectProps } from './types';
+import clsx from 'clsx';
 
 const Select = function ({
     children,
@@ -43,12 +44,12 @@ const Select = function ({
             {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
             {errorMessage && <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>}
             <div
-                className={[
+                className={clsx([
                     "ds_select-wrapper",
                     hasError && 'ds_input--error',
                     width && `ds_input--${width}`,
                     className
-                ].join(' ')}
+                ])}
                 {...props}
             >
                 <select

package/src/components/SequentialNavigation/SequentialNavigation.tsx

@@ -1,4 +1,5 @@
 import { SequentialNavigationLinkProps, SequentialNavigationProps } from "./types";
+import clsx from 'clsx';
 
 const SeqNavLink = ({
     children,
@@ -7,15 +8,15 @@ const SeqNavLink = ({
     linkComponent,
     textLabel
 }:SequentialNavigationLinkProps) => {
-    const LINK_CLASSES = [
+    const LINK_CLASSES = clsx([
         'ds_sequential-nav__button',
         isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'
-    ].join(' ');
+    ]);
 
-    const ITEM_CLASSES = [
+    const ITEM_CLASSES = clsx([
         'ds_sequential-nav__item',
         isPrev ? 'ds_sequential-nav__item--prev' : 'ds_sequential-nav__item--next'
-    ].join(' ');
+    ]);
 
     function processChildren(children: React.ReactNode) {
         const linkInner = <span className="ds_sequential-nav__text" data-label={textLabel}>{children}</span>
@@ -62,10 +63,10 @@ const SequentialNavigation = ({
 }: SequentialNavigationProps) => {
     return (
         <nav
-            className={[
+            className={clsx([
                 'ds_sequential-nav',
                 className
-            ].join(' ')}
+            ])}
             aria-label={ariaLabel}
             {...props}
         >

package/src/components/SideNavigation/SideNavigation.test.tsx

@@ -109,6 +109,30 @@ test('side nav link with custom element', () => {
     expect(link?.textContent).toEqual(LINK_TEXT);
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <SideNavigation>
+            <SideNavigation.List>
+                <SideNavigation.Item href="#dates" title="Dates"/>
+            </SideNavigation.List>
+        </SideNavigation>
+    );
+
+    const sideNavigation = screen.getByRole('navigation');
+    expect(sideNavigation).toHaveClass('js-initialised');
+    expect(sideNavigation).toHaveClass('js-instantiated');
+});
+
+test('instantiating/initialising DS component script: no children', () => {
+    render(
+        <SideNavigation />
+    );
+
+    const sideNavigation = screen.getByRole('navigation');
+    expect(sideNavigation).not.toHaveClass('js-initialised');
+    expect(sideNavigation).not.toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <SideNavigation data-test="foo" />

package/src/components/SideNavigation/SideNavigation.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
 import DSSideNavigation from '@scottish-government/design-system/src/components/side-navigation/side-navigation';
 import { SideNavigationItemProps, SideNavigationListProps, SideNavigationProps } from './types';
+import clsx from 'clsx';
 
 const SideNavigationList = function ({
     children,
@@ -27,10 +27,10 @@ const SideNavigationItem = function ({
 
     return (
         <li
-            className={[
+            className={clsx([
                 'ds_side-navigation__item',
                 children && 'ds_side-navigation__item--has-children'
-            ].join(' ')}
+            ])}
         >
             {isCurrent ?
                 <span className={LINK_CLASS + ' ds_current'}>{title}</span> :
@@ -52,18 +52,21 @@ const SideNavigation = function ({
     const ref = useRef(null);
 
     useEffect(() => {
-        if (ref.current && children) {
-            new DSSideNavigation(ref.current).init();
+        /* istanbul ignore else */
+        if (ref.current) {
+            if (children) {
+                new DSSideNavigation(ref.current).init();
+            }
         }
     }, [ref]);
 
     return (
         <nav
             aria-label={ariaLabel}
-            className={[
+            className={clsx([
                 'ds_side-navigation',
                 className
-            ].join(' ')}
+            ])}
             data-module="ds-side-navigation"
             ref={ref}
             {...props}

package/src/components/SiteFooter/SiteFooter.tsx

@@ -1,6 +1,7 @@
 import React, { Children } from 'react';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import { SiteFooterLicenseProps, SiteFooterLinkProps, SiteFooterOrgProps, SiteFooterProps } from './types';
+import clsx from 'clsx';
 
 const License = ({
     children,
@@ -79,10 +80,10 @@ const SiteFooter = ({
 }: SiteFooterProps) => {
     return (
         <footer
-            className={[
+            className={clsx([
                 "ds_site-footer",
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <div className="ds_wrapper">

package/src/components/SiteHeader/SiteHeader.test.tsx

@@ -5,6 +5,17 @@ import SiteNavigation from '../SiteNavigation';
 import SiteSearch from '../SiteSearch';
 import PhaseBanner from '../PhaseBanner';
 
+const NAVIGATION_ITEMS = (
+    <>
+        <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
+        <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
+        <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
+        <SiteNavigation.Item href="#components" isCurrent>Components</SiteNavigation.Item>
+        <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
+        <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
+    </>
+);
+
 test('site header renders correctly (maximal, testing markup structure)', () => {
     render(
         <SiteHeader>
@@ -13,12 +24,7 @@ test('site header renders correctly (maximal, testing markup structure)', () =>
             </SiteHeader.Brand>
             <SiteHeader.Navigation>
                 <SiteNavigation>
-                    <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#components" current>Components</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
+                    {NAVIGATION_ITEMS}
                 </SiteNavigation>
             </SiteHeader.Navigation>
             <SiteHeader.Search>
@@ -155,16 +161,7 @@ test('site header logo link link with custom element', () => {
 });
 
 test('site header with site navigation', () => {
-    const NAVIGATION_ITEMS = (
-        <>
-            <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
-            <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
-            <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
-            <SiteNavigation.Item href="#components" current>Components</SiteNavigation.Item>
-            <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
-            <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
-        </>
-    );
+
 
     render(
         <>
@@ -240,6 +237,22 @@ test('site header with phase banner', () => {
     expect(siteHeaderPhaseBanner?.innerHTML).toEqual(phaseBannerReference.innerHTML);
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <SiteHeader>
+            <SiteHeader.Navigation>
+                <SiteNavigation>
+                    {NAVIGATION_ITEMS}
+                </SiteNavigation>
+            </SiteHeader.Navigation>
+        </SiteHeader>
+    );
+
+    const mobileNav = screen.getAllByRole('navigation')[0];
+    expect(mobileNav).toHaveClass('js-initialised');
+    expect(mobileNav).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <SiteHeader data-test="foo" />

package/src/components/SiteHeader/SiteHeader.tsx

@@ -1,7 +1,6 @@
 import React, { Children, useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
 import SiteNavigation from '../SiteNavigation';
-// @ts-expect-error no types from core SGDS
 import DSMobileMenu from '@scottish-government/design-system/src/components/site-navigation/site-navigation';
 import { SiteHeaderBrandProps, SiteHeaderProps } from './types';
 import { SiteNavigationProps } from '../SiteNavigation/types';
@@ -84,6 +83,7 @@ const SiteHeader = ({
     });
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (mobileMenuRef.current) {
             new DSMobileMenu(mobileMenuRef.current).init();
         }

package/src/components/SiteNavigation/SiteNavigation.test.tsx

@@ -45,7 +45,7 @@ test('site navigation link renders correctly', () => {
     expect(link).toHaveAttribute('href', LINK_HREF)
 });
 
-test('site navigation link with custom element', () => {
+test('site navigation item with custom link element', () => {
     render(
         <SiteNavigation.Item href={LINK_HREF} linkComponent={
             ({ className, ...props }) => (
@@ -62,6 +62,21 @@ test('site navigation link with custom element', () => {
     expect(link?.textContent).toEqual(LINK_TEXT);
 });
 
+test('site navigation item without href', () => {
+    render(
+        // @ts-expect-error required prop missing
+        <SiteNavigation.Item>
+            {LINK_TEXT}
+        </SiteNavigation.Item>
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).queryByRole('link');
+
+    expect(link).not.toBeInTheDocument();
+    expect(item.textContent).toEqual(LINK_TEXT);
+});
+
 test('highlights current item', () => {
     render(
         <SiteNavigation.Item href={LINK_HREF} isCurrent>{LINK_TEXT}</SiteNavigation.Item>

package/src/components/SiteNavigation/SiteNavigation.tsx

@@ -1,4 +1,5 @@
 import { SiteNavigationItemProps, SiteNavigationProps } from "./types";
+import clsx from 'clsx';
 
 const Item = ({
     children,
@@ -14,11 +15,15 @@ const Item = ({
         ariaCurrent = 'page';
     }
 
+    const classNamesString = clsx(classNames);
+
     function processChildren(children: React.ReactNode) {
         if (linkComponent) {
-            return linkComponent({ className: classNames.join(' '), href, children });
+            return linkComponent({ className: classNamesString, href, children });
         } else if (href) {
-            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</a>;
+            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNamesString}>{children}</a>;
+        } else {
+            return <span className={classNamesString}>{children}</span>;
         }
     }
 
@@ -38,10 +43,10 @@ const SiteNavigation = ({
 }: SiteNavigationProps) => {
     return (
         <nav
-            className={[
+            className={clsx([
                 'ds_site-navigation',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <ul className="ds_site-navigation__list">

package/src/components/SiteSearch/SiteSearch.test.tsx

@@ -142,6 +142,28 @@ test('autocomplete', () => {
 
 });
 
+test('instantiating/initialising DS component script: autocomplete', () => {
+    render(
+        <SiteSearch autocompleteEndpoint="/endpoint" />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchFormContainer = searchForm.parentElement;
+    expect(searchFormContainer).toHaveClass('js-initialised');
+    expect(searchFormContainer).toHaveClass('js-instantiated');
+});
+
+test('instantiating/initialising DS component script: no autocomplete', () => {
+    render(
+        <SiteSearch />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchFormContainer = searchForm.parentElement;
+    expect(searchFormContainer).not.toHaveClass('js-initialised');
+    expect(searchFormContainer).not.toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <SiteSearch data-test="foo" />

package/src/components/SiteSearch/SiteSearch.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
 import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
 import Button from '../Button';
 import { SiteSearchProps, SuggestionMappingFunctionProps } from './types';
+import clsx from 'clsx';
 
 const SiteSearch = function ({
     action = '/search',
@@ -27,7 +27,8 @@ const SiteSearch = function ({
     }
 
     useEffect(() => {
-        if (hasAutocomplete && ref.current) {
+        const autocompleteElement = document.getElementById(autocompleteId);
+        if (hasAutocomplete && autocompleteElement && ref.current) {
             const options: AutoCompleteOptions = {};
             if (minLength) {
                 options.minLength = minLength;
@@ -37,7 +38,7 @@ const SiteSearch = function ({
             }
 
             const autocomplete = new DSAutocomplete(
-                document.getElementById(autocompleteId),
+                autocompleteElement,
                 autocompleteEndpoint,
                 options
             );
@@ -48,11 +49,11 @@ const SiteSearch = function ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_site-search',
                 className,
-                hasAutocomplete ? 'ds_autocomplete' : undefined
-            ].join(' ')}
+                hasAutocomplete && 'ds_autocomplete'
+            ])}
             id={autocompleteId ? autocompleteId : undefined}
             ref={ref}
             {...props}
@@ -69,11 +70,11 @@ const SiteSearch = function ({
                     <input aria-autocomplete={hasAutocomplete ? 'list' : undefined}
                         aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined}
                         autoComplete={hasAutocomplete ? 'off' : undefined}
-                        className={[
+                        className={clsx([
                             'ds_input',
                             'ds_site-search__input',
-                            hasAutocomplete ? 'js-autocomplete-input' : undefined
-                        ].join(' ')}
+                            hasAutocomplete && 'js-autocomplete-input'
+                        ])}
                         id={id}
                         name={name}
                         placeholder={placeholder}

package/src/components/SiteSearch/types.ts

@@ -1,5 +1,11 @@
 type FormMethods = 'GET' | 'POST';
-export type SuggestionMappingFunctionProps = (suggestionObj: {response: string}) => [];
+
+export type Suggestion = {
+    displayText: string;
+    isActive: boolean;
+}
+
+export type SuggestionMappingFunctionProps = (suggestions: object[]) => Suggestion[];
 
 export interface SiteSearchProps extends React.AllHTMLAttributes<HTMLInputElement> {
     action?: string;

package/src/components/SkipLinks/SkipLinks.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-// @ts-expect-error no types from core SGDS
 import dsSkipLinks from '@scottish-government/design-system/src/components/skip-links/skip-links';
 import { SkipLinksLinkProps, SkipLinksProps } from './types';
+import clsx from 'clsx';
 
 const Link = ({
     children,
@@ -30,10 +30,10 @@ const SkipLinks = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_skip-links',
-                isStatic && 'ds_skip-links--static',
-            ].join(' ')}
+                isStatic && 'ds_skip-links--static'
+            ])}
             {...props}
         >
             <ul className="ds_skip-links__list">

package/src/components/SummaryCard/SummaryCard.tsx

@@ -5,6 +5,7 @@ import ConditionalWrapper from '../../common/ConditionalWrapper';
 import WrapperTag from "../../common/WrapperTag";
 import { SummaryCardProps } from './types';
 import { ActionLinkProps } from '../../common/ActionLink/types';
+import clsx from 'clsx';
 
 const SummaryCard = ({
     children,
@@ -29,10 +30,10 @@ const SummaryCard = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_summary-card',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <div className="ds_summary-card__header">

package/src/components/SummaryList/SummaryList.tsx

@@ -1,9 +1,9 @@
 import React, { Children, useId } from 'react';
-
 import ActionLink from '../../common/ActionLink';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import { SummaryListItemProps, SummaryListProps } from './types';
 import { ActionLinkProps } from '@/src/common/ActionLink/types';
+import clsx from 'clsx';
 
 const Item = ({
     children,
@@ -80,11 +80,11 @@ const SummaryList = ({
 }: SummaryListProps) => {
     return (
         <ol
-            className={[
+            className={clsx([
                 'ds_summary-list',
                 isBorderless && 'ds_summary-list--no-border',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
            {children}

package/src/components/Table/Table.test.tsx

@@ -58,6 +58,42 @@ test('table with smallscreen behaviour', () => {
     expect(table.nodeName).toEqual('TABLE');
 });
 
+test('instantiating/initialising DS component script: smallscreen', () => {
+    render(
+        <Table smallscreen="scrolling">
+            <caption>Public holidays in 2020</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Date</th>
+                    <th scope="col">Day</th>
+                    <th scope="col">Holiday</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>10 April</td>
+                    <td>Friday</td>
+                    <td>Good Friday</td>
+                </tr>
+            </tbody>
+        </Table>
+    );
+
+    const table = screen.getByRole('table');
+    expect(table).toHaveClass('js-initialised');
+    expect(table).toHaveClass('js-instantiated');
+});
+
+test('instantiating/initialising DS component script: not smallscreen', () => {
+    render(
+        <Table />
+    );
+
+    const table = screen.getByRole('table');
+    expect(table).not.toHaveClass('js-initialised');
+    expect(table).not.toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <Table data-test="foo"/>

package/src/components/Table/Table.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
 import DSTable from '@scottish-government/design-system/src/components/table/table';
 import { TableProps } from './types';
+import clsx from 'clsx';
 
 const Table = ({
     children,
@@ -12,17 +12,18 @@ const Table = ({
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
-            new DSTable().init();
+            new DSTable(ref.current).init();
         }
     }, [ref]);
 
     return (
         <table
-            className={[
+            className={clsx([
                 'ds_table',
                 className
-            ].join(' ')}
+            ])}
             data-smallscreen={smallscreen}
             ref={ref}
             {...props}

package/src/components/Tabs/Tabs.test.tsx

@@ -187,6 +187,20 @@ test('with manual activation', () => {
     expect(tabContainer).toHaveClass('ds_tabs--manual');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <Tabs data-testid="tabcontainer" data-test="foo">
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    expect(tabContainer).toHaveClass('js-initialised');
+    expect(tabContainer).toHaveClass('js-instantiated');
+});
+
 test('passing additional props to tab container', () => {
     render(
         <Tabs data-testid="tabcontainer" data-test="foo">