@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/src/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
 import { CheckboxRadioContext } from '../../utils/context';
-
 import HintText from '../../common/HintText';
+import { CheckboxProps } from './types';
+import clsx from 'clsx';
 
 const Checkbox = ({
     checked,
@@ -13,17 +14,17 @@ const Checkbox = ({
     name,
     onBlur,
     onChange
-}: SGDS.Component.Checkbox) => {
+}: CheckboxProps) => {
     const hintTextId = `hint-text-${id}`;
     const behaviour = isExclusive && 'exclusive';
 
-    function handleBlur(event: React.FocusEvent) {
+    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
         if (typeof onBlur === 'function') {
             onBlur(event);
         }
     }
 
-    function handleChange(event: React.ChangeEvent) {
+    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
         if (typeof onChange === 'function') {
             onChange(event);
         }
@@ -35,10 +36,10 @@ const Checkbox = ({
         <>
             {isExclusive && <p className="ds_checkbox-separator">or</p>}
             <div
-                className={[
+                className={clsx([
                     'ds_checkbox',
                     isSmall && 'ds_checkbox--small'
-                ].join(' ')}>
+                ])}>
 
                 <input
                     aria-describedby={hintText ? hintTextId : undefined}
@@ -54,7 +55,7 @@ const Checkbox = ({
                     className="ds_checkbox__label"
                     htmlFor={id}
                 >{label}</label>
-                {hintText && <HintText id={hintTextId} text={hintText} />}
+                {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
             </div>
         </>
     );

package/src/components/Checkbox/CheckboxGroup.test.tsx

@@ -18,6 +18,16 @@ test('checkbox group renders correctly', () => {
     expect(checkboxContainer).not.toHaveClass('ds_checkbox--small');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <CheckboxGroup data-testid="checkboxgroup" />
+    );
+
+    const checkboxGroup = screen.getByTestId('checkboxgroup');
+    expect(checkboxGroup).toHaveClass('js-initialised');
+    expect(checkboxGroup).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <CheckboxGroup data-testid="checkboxgroup" data-test="foo" />

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -1,18 +1,19 @@
 import React, { useEffect, useRef } from 'react';
 import { CheckboxRadioContext } from '../../utils/context';
-
-// @ts-ignore
-import DSCheckboxes from '@scottish-government/design-system/src/forms/checkbox/checkboxes'
+import DSCheckboxes from '@scottish-government/design-system/src/components/checkbox/checkboxes'
+import { CheckboxGroupProps } from './types';
+import clsx from 'clsx';
 
 export const CheckboxGroup = ({
     children,
     className,
     isSmall,
     ...props
-}: SGDS.Component.Checkbox.Group) => {
+}: CheckboxGroupProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSCheckboxes(ref.current).init();
         }
@@ -20,11 +21,11 @@ export const CheckboxGroup = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_checkboxes',
                 'ds_field-group',
                 className
-            ].join(' ')}
+            ])}
             data-module="ds-checkboxes"
             ref={ref}
             {...props}

package/src/components/Checkbox/types.ts

@@ -0,0 +1,9 @@
+import { CheckboxRadioBase } from '../../shared-types';
+
+export interface CheckboxGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    isSmall?: boolean;
+}
+
+export interface CheckboxProps extends CheckboxRadioBase<HTMLInputElement> {
+    isExclusive?: boolean;
+}

package/src/components/ConfirmationMessage/ConfirmationMessage.tsx

@@ -1,5 +1,7 @@
 import Icon from '../../common/Icon';
 import WrapperTag from '../../common/WrapperTag';
+import { ConfirmationMessageProps } from './types';
+import clsx from 'clsx';
 
 const ConfirmationMessage = ({
     ariaLive = 'polite',
@@ -8,14 +10,14 @@ const ConfirmationMessage = ({
     headingLevel = 'h3',
     title,
     ...props
-}: SGDS.Component.ConfirmationMessage) => {
+}: ConfirmationMessageProps) => {
     return (
         <div
             aria-live={ariaLive}
-            className={[
+            className={clsx([
                 'ds_confirmation-message',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <Icon className="ds_confirmation-message__icon" icon="CheckCircle" iconSize="24" />

package/src/components/ConfirmationMessage/types.ts

@@ -0,0 +1,7 @@
+import { HeadingLevel } from '../../shared-types';
+
+export interface ConfirmationMessageProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLive: React.AriaAttributes['aria-live'];
+    headingLevel: HeadingLevel;
+    title: string;
+}

package/src/components/ContentsNav/ContentsNav.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
     },
     args: {
         children: <>
-            <ContentsNav.Item current>
+            <ContentsNav.Item isCurrent>
                 Apply for Blue Badge
             </ContentsNav.Item>
             <ContentsNav.Item href="#2">
@@ -39,4 +39,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+    args: {
+        ariaLabel: 'Contents navigation',
+        title: 'Contents'
+    }
 };

package/src/components/ContentsNav/ContentsNav.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
+import { ContentsNavItemProps, ContentsNavProps } from './types';
+import clsx from 'clsx';
 
 const ContentsNavItem = ({
     children,
     isCurrent,
     href,
     linkComponent
-}: SGDS.Component.ContentsNav.ContentsNavItem) => {
+}: ContentsNavItemProps) => {
     const classNames = ['ds_contents-nav__link'];
     let ariaCurrent: React.AriaAttributes["aria-current"];
 
@@ -14,13 +16,15 @@ const ContentsNavItem = ({
         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 aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</span>;
+            return <span aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNamesString}>{children}</span>;
         }
     }
 
@@ -39,14 +43,14 @@ const ContentsNav = ({
     className,
     title = 'Contents',
     ...props
-}: SGDS.Component.ContentsNav) => {
+}: ContentsNavProps) => {
     return (
         <nav
             aria-label={ariaLabel}
-            className={[
+            className={clsx([
                 'ds_contents-nav',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <h2 className="ds_contents-nav__title">{title}</h2>

package/src/components/ContentsNav/types.ts

@@ -0,0 +1,11 @@
+import { LinkComponent } from "../../shared-types";
+
+export interface ContentsNavItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    isCurrent?: boolean;
+    linkComponent?: LinkComponent;
+}
+
+export interface ContentsNavProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel: React.AriaAttributes['aria-label'];
+    title: string;
+}

package/src/components/CookieBanner/CookieBanner.Buttons.stories.tsx

@@ -12,9 +12,9 @@ const meta = {
     },
     args: {
         children: [
-            <Button className="js-accept-all-cookies" small buttonStyle="secondary">Accept all cookies</Button>,
-            <Button className="js-accept-essential-cookies" small buttonStyle="secondary">Use essential cookies only</Button>,
-            <a href="/cookies/">Set cookie preferences</a>
+            <Button className="js-accept-all-cookies" isSmall buttonStyle="secondary" key="1">Accept all cookies</Button>,
+            <Button className="js-accept-essential-cookies" isSmall buttonStyle="secondary" key="2">Use essential cookies only</Button>,
+            <a href="/cookies/" key="3">Set cookie preferences</a>
         ]
     }
 } satisfies Meta<typeof CookieBanner.Buttons>;

package/src/components/CookieBanner/CookieBanner.stories.tsx

@@ -12,13 +12,13 @@ const meta = {
     },
     args: {
         children: [
-            <p key="foo">We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
+            <p key="1">We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
                 experience.</p>,
-            <p key="bar">Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
-                To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>,
-            <CookieBanner.Buttons>
-                <Button className="js-accept-all-cookies" small buttonStyle="secondary">Accept all cookies</Button>
-                <Button className="js-accept-essential-cookies" small buttonStyle="secondary">Use essential cookies only</Button>
+            <p key="2">Click &lsquo;Accept all cookies&rsquo; to agree to all cookies that collect anonymous data.
+                To only allow the cookies that make the site work, click &lsquo;Use essential cookies only.&rsquo; Visit &lsquo;Set cookie preferences&rsquo; to control specific cookies.</p>,
+            <CookieBanner.Buttons key="3">
+                <Button className="js-accept-all-cookies" isSmall buttonStyle="secondary">Accept all cookies</Button>
+                <Button className="js-accept-essential-cookies" isSmall buttonStyle="secondary">Use essential cookies only</Button>
                 <a href="/cookies/">Set cookie preferences</a>
             </CookieBanner.Buttons>
         ]

package/src/components/CookieBanner/CookieBanner.test.tsx

@@ -4,8 +4,9 @@
  */
 
 import { test, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import CookieBanner from './CookieBanner';
+import Button from '../Button/Button';
 
 const BANNER_TEXT = 'We need to tell you about something';
 
@@ -16,6 +17,11 @@ test('cookie banner renders correctly', () => {
     render(
         <CookieBanner>
             {BANNER_TEXT}
+            <CookieBanner.Buttons>
+                <Button className="js-accept-all-cookies" isSmall buttonStyle="secondary">Accept all cookies</Button>
+                <Button className="js-accept-essential-cookies" isSmall buttonStyle="secondary">Use essential cookies only</Button>
+                <a href="/cookies/">Set cookie preferences</a>
+                </CookieBanner.Buttons>
         </CookieBanner>
     );
 
@@ -23,3 +29,20 @@ test('cookie banner renders correctly', () => {
 
     expect(bannerContainer).toHaveClass('ds_notification', 'ds_notification--large', 'ds_notification--cookie', 'js-initial-cookie-content');
 });
+
+test('instantiating/initialising DS component script', () => {
+    render(
+        <CookieBanner data-testid="cookie-banner" >
+            {BANNER_TEXT}
+            <CookieBanner.Buttons>
+                <Button className="js-accept-all-cookies" isSmall buttonStyle="secondary">Accept all cookies</Button>
+                <Button className="js-accept-essential-cookies" isSmall buttonStyle="secondary">Use essential cookies only</Button>
+                <a href="/cookies/">Set cookie preferences</a>
+            </CookieBanner.Buttons>
+        </CookieBanner>
+    );
+
+    const cookieBanner = screen.getByTestId('cookie-banner');
+    expect(cookieBanner).toHaveClass('js-initialised');
+    expect(cookieBanner).toHaveClass('js-instantiated');
+});

package/src/components/CookieBanner/CookieBanner.tsx

@@ -1,25 +1,36 @@
 
+import { useEffect, useRef } from 'react';
 import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
-// @ts-ignore
 import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';
+import { AbstractNotificationBannerProps } from '../../common/AbstractNotificationBanner/types';
+import clsx from 'clsx';
 
 const CookieBanner = ({
     children,
     className,
-    title,
+    title = 'Information',
     ...props
-}: SGDS.Common.AbstractNotificationBanner) => {
+}: AbstractNotificationBannerProps) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new DSCookieBanner(ref.current).init();
+        }
+    }, [ref]);
 
     return (
         <>
             <AbstractNotificationBanner
-                className={[
+                className={clsx([
                     'ds_notification--large',
                     'ds_notification--cookie',
                     'js-initial-cookie-content',
                     className
-                ].join(' ')}
+                ])}
                 data-module="ds-cookie-notification"
+                ref={ref}
                 title={title}
                 {...props}
             >

package/src/components/DatePicker/DatePicker.test.tsx

@@ -24,8 +24,6 @@ test('date picker renders correctly', () => {
     expect(label.tagName).toEqual('LABEL');
     expect(textInput).toHaveClass('ds_input', 'ds_input--fixed-10');
     expect(textInput.id).toEqual(DATE_PICKER_ID);
-
-    // todo: check for DS script being fired
 });
 
 test('date picker with disabled dates', () => {
@@ -61,23 +59,6 @@ test('date picker with hint text', () => {
     expect(textInput).toHaveAttribute('aria-describedby', hintTextEl.id);
 });
 
-test('date picker with custom icon path', () => {
-    const ICON_PATH = '/my/icon/path'
-
-    render(
-        <DatePicker
-            id={DATE_PICKER_ID}
-            label={LABEL_TEXT}
-            iconPath={ICON_PATH}
-        />
-    );
-    const datePicker = screen.getAllByRole('generic')[1];
-    const label = within(datePicker).getByText(LABEL_TEXT);
-    const textInput = within(datePicker).getByRole('textbox');
-
-    // todo
-});
-
 test('date picker with max date', () => {
     const MAX_DATE = '28/05/2023'
 
@@ -144,6 +125,44 @@ test('date picker with change fn', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('date picker with onBlur that is not a function', () => {
+    render(
+        <DatePicker
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            // @ts-expect-error onBlur is not a function
+            onBlur='foo'
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+    const textInput = within(datePicker).getByRole('textbox');
+
+    fireEvent.blur(textInput);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('date picker with onChange that is not a function', () => {
+    render(
+        <DatePicker
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            // @ts-expect-error onChange is not a function
+            onChange='foo'
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+    const textInput = within(datePicker).getByRole('textbox');
+
+    fireEvent.change(textInput, { target: { value: 'foo' } });
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('date picker with initial value', () => {
     const INITIAL_VALUE = '28/05/2023';
 
@@ -226,6 +245,20 @@ test('date picker with error message', () => {
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <DatePicker
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            data-test="foo"
+        />
+    )
+
+    const datePicker = screen.getAllByRole('generic')[1];
+    expect(datePicker).toHaveClass('js-initialised');
+    expect(datePicker).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <DatePicker

package/src/components/DatePicker/DatePicker.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
 import DSDatePicker from '@scottish-government/design-system/src/components/date-picker/date-picker';
 import ErrorMessage from '../ErrorMessage';
 import TextInput from '../TextInput';
+import { DatePickerProps } from './types';
+import clsx from 'clsx';
 
 const DatePicker = ({
     className,
@@ -12,7 +13,6 @@ const DatePicker = ({
     hasError,
     hintText,
     id,
-    iconPath = './',
     label,
     maxDate,
     minDate,
@@ -23,17 +23,17 @@ const DatePicker = ({
     value,
     width = 'fixed-10',
     ...props
-}: SGDS.Component.DatePicker) => {
+}: DatePickerProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSDatePicker(ref.current, {
-                dateSelectCallback,
-                imagePath: iconPath
+                dateSelectCallback
             }).init();
         }
-    }, [ref, dateSelectCallback, iconPath]);
+    }, [ref, dateSelectCallback]);
 
     function handleBlur(event: React.FocusEvent) {
         if (typeof onBlur === 'function') {
@@ -49,11 +49,11 @@ const DatePicker = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 "ds_datepicker",
                 multiple && "ds_datepicker--multiple",
                 className
-            ].join(' ')}
+            ])}
             data-disableddates={disabledDates}
             data-maxdate={maxDate}
             data-mindate={minDate}

package/src/components/DatePicker/types.ts

@@ -0,0 +1,19 @@
+import { InputWidth } from "../../shared-types";
+
+export interface DatePickerProps extends React.AllHTMLAttributes<HTMLElement> {
+    dateSelectCallback?: (date: Date) => void;
+    disabledDates?: string;
+    hasError?: boolean;
+    errorMessage?: string | React.ReactNode;
+    id: string;
+    hintText?: string | React.ReactNode;
+    label: string;
+    maxDate?: string;
+    minDate?: string;
+    isMultiple?: boolean;
+    name?: string;
+    onBlur?: React.EventHandler<React.FocusEvent>;
+    onChange?: React.EventHandler<React.FormEvent>;
+    value?: string;
+    width?: InputWidth;
+}

package/src/components/Details/Details.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
     argTypes: {
         children: argTypes.children(),
         summary: {
-            description: 'Text to use for the details component\'s ‘summary’ element',
+            description: 'Text to use for the details component\'s \'summary\' element',
             type: {
                 name: 'string',
                 required: true

package/src/components/Details/Details.tsx

@@ -1,15 +1,18 @@
+import { DetailsProps } from "./types";
+import clsx from 'clsx';
+
 const Details = ({
     children,
     className,
     summary,
     ...props
-}: SGDS.Component.Details) => {
+}: DetailsProps) => {
     return (
         <details
-            className={[
+            className={clsx([
                 "ds_details",
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <summary className="ds_details__summary">

package/src/components/Details/types.ts

@@ -0,0 +1,4 @@
+export interface DetailsProps extends React.AllHTMLAttributes<HTMLDetailsElement> {
+    title?: string;
+    summary: string;
+}

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,15 +1,18 @@
+import { ErrorMessageProps } from "./types";
+import clsx from 'clsx';
+
 const ErrorMessage = ({
     children,
     className,
     id,
     ...props
-}: SGDS.Component.ErrorMessage) => {
+}: ErrorMessageProps) => {
     return (
         <p
-            className={[
+            className={clsx([
                 'ds_question__error-message',
                 className
-            ].join(' ')}
+            ])}
             id={id}
             {...props}
         >

package/src/components/ErrorMessage/types.ts

@@ -0,0 +1,3 @@
+export interface ErrorMessageProps extends React.AllHTMLAttributes<HTMLElement> {
+    id?: string;
+}

package/src/components/ErrorSummary/ErrorSummary.test.tsx

@@ -74,7 +74,7 @@ test('error summary item with no link', () => {
 test('error summary item with custom element', () => {
     render(
         <ErrorSummary.Item fragmentId={ERROR_FRAGMENT_ID} linkComponent={
-            ({ className, ...props }) => (
+            ({ ...props }) => (
                 <strong role="link" {...props}/>
             )}>
             {ERROR_TEXT}

package/src/components/ErrorSummary/ErrorSummary.tsx

@@ -1,10 +1,12 @@
 import { useId } from 'react';
+import { ErrorSummaryItemProps, ErrorSummaryProps } from './types';
+import clsx from 'clsx';
 
 const ErrorSummaryItem = ({
     children,
     fragmentId,
     linkComponent
-}: SGDS.Component.ErrorSummary.Item) => {
+}: ErrorSummaryItemProps) => {
     const HREF = '#' + fragmentId;
 
     function processChildren(children: React.ReactNode) {
@@ -29,14 +31,14 @@ const ErrorSummary = ({
     className,
     title = 'There is a problem',
     ...props
-}: SGDS.Component.ErrorSummary) => {
+}: ErrorSummaryProps) => {
     const summaryTitleId = useId();
 
     return (
-        <div className={[
+        <div className={clsx([
                 'ds_error-summary',
                 className
-            ].join(' ')}
+            ])}
             aria-labelledby={summaryTitleId}
             role="alert"
             {...props}

package/src/components/ErrorSummary/types.ts

@@ -0,0 +1,11 @@
+
+import { LinkComponent } from '../../shared-types';
+
+export interface ErrorSummaryItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    fragmentId: string;
+    linkComponent?: LinkComponent;
+}
+
+export interface ErrorSummaryProps extends React.AllHTMLAttributes<HTMLElement> {
+    title: string;
+}