@scottish-government/designsystem-react 0.13.0 → 1.0.0

package/src/components/ConfirmationMessage/ConfirmationMessage.tsx

@@ -1,6 +1,7 @@
 import Icon from '../../common/Icon';
 import WrapperTag from '../../common/WrapperTag';
 import { ConfirmationMessageProps } from './types';
+import clsx from 'clsx';
 
 const ConfirmationMessage = ({
     ariaLive = 'polite',
@@ -13,10 +14,10 @@ const ConfirmationMessage = ({
     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/ContentsNav/ContentsNav.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ContentsNavItemProps, ContentsNavProps } from './types';
+import clsx from 'clsx';
 
 const ContentsNavItem = ({
     children,
@@ -15,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>;
         }
     }
 
@@ -44,10 +47,10 @@ const ContentsNav = ({
     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/CookieBanner/CookieBanner.test.tsx

@@ -4,7 +4,7 @@
  */
 
 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';
 
@@ -29,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,9 +1,9 @@
 
 import { useEffect, useRef } from 'react';
 import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
-// @ts-expect-error no types from core SGDS
 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,
@@ -14,6 +14,7 @@ const CookieBanner = ({
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSCookieBanner(ref.current).init();
         }
@@ -22,12 +23,12 @@ const CookieBanner = ({
     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}

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

@@ -59,20 +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}
-        />
-    );
-
-    // todo
-});
-
 test('date picker with max date', () => {
     const MAX_DATE = '28/05/2023'
 
@@ -139,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';
 
@@ -221,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,9 +1,9 @@
 import { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
 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,
@@ -13,7 +13,6 @@ const DatePicker = ({
     hasError,
     hintText,
     id,
-    iconPath = './',
     label,
     maxDate,
     minDate,
@@ -28,13 +27,13 @@ const DatePicker = ({
     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') {
@@ -50,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

@@ -4,10 +4,9 @@ export interface DatePickerProps extends React.AllHTMLAttributes<HTMLElement> {
     dateSelectCallback?: (date: Date) => void;
     disabledDates?: string;
     hasError?: boolean;
-    errorMessage?: string;
+    errorMessage?: string | React.ReactNode;
     id: string;
-    hintText?: string;
-    iconPath?: string;
+    hintText?: string | React.ReactNode;
     label: string;
     maxDate?: string;
     minDate?: string;

package/src/components/Details/Details.tsx

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

package/src/components/ErrorMessage/ErrorMessage.tsx

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

package/src/components/ErrorSummary/ErrorSummary.tsx

@@ -1,5 +1,6 @@
 import { useId } from 'react';
 import { ErrorSummaryItemProps, ErrorSummaryProps } from './types';
+import clsx from 'clsx';
 
 const ErrorSummaryItem = ({
     children,
@@ -34,10 +35,10 @@ const ErrorSummary = ({
     const summaryTitleId = useId();
 
     return (
-        <div className={[
+        <div className={clsx([
                 'ds_error-summary',
                 className
-            ].join(' ')}
+            ])}
             aria-labelledby={summaryTitleId}
             role="alert"
             {...props}

package/src/components/FeatureHeader/FeatureHeader.stories.tsx

@@ -0,0 +1,223 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import FeatureHeader from './FeatureHeader';
+import Button from '../Button';
+// @ts-expect-error no types
+import photograph from '../../../static/images/highland-cow.jpg';
+// @ts-expect-error no types
+import illustration from '../../../static/images/illustration.svg';
+
+
+
+type foo = typeof FeatureHeader;
+
+
+const meta = {
+    title: 'Components/FeatureHeader',
+    component: FeatureHeader,
+    argTypes: {
+        backgroundColor: argTypes.select({options: ['none', 'secondary', 'tertiary', 'brand']}),
+        children: argTypes.children(),
+        hasCoverImage: argTypes.boolean(),
+        hasNoImagePadding: argTypes.boolean(),
+        id: argTypes.id({ type: { name: 'string', required: false } }),
+        isFullWidth: argTypes.boolean(),
+        isWideText: argTypes.boolean(),
+        isTopAlignImage: argTypes.boolean(),
+        tagName: argTypes.select({ options: ['div', 'header'] })
+    },
+    args: {
+        backgroundColor: 'secondary'
+    }
+} satisfies Meta<foo & { image: string }>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>
+    }
+};
+
+
+export const WithoutContent: Story = {
+    name: 'Without content',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>
+    }
+};
+
+export const WithCallToAction: Story = {
+    name: 'Call to action',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+                <Button href="#foo" icon="ChevronRight">Get started</Button>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>
+    }
+};
+
+export const WithCoverImage: Story = {
+    name: 'Cover image',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        hasCoverImage: true
+    }
+};
+
+export const WithCoverImagePhotograph: Story = {
+    name: 'Cover image (photograph)',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={photograph}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        hasCoverImage: true
+    }
+};
+
+export const FullWidth: Story = {
+    name: 'Full width',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        isFullWidth: true
+    }
+};
+
+export const FullWidthImagePaddingRemoved: Story = {
+    name: 'Full width with image padding removed',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        hasNoImagePadding: true,
+        isFullWidth: true
+    }
+};
+
+export const WideText: Story = {
+    name: 'Wide text',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        isWideText: true
+    }
+};
+
+export const TopAlign: Story = {
+    name: 'Top aligned image',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        isTopAlignImage: true
+    }
+};
+
+export const TopAlignPhotograph: Story = {
+    name: 'Top aligned image (photograph)',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={photograph}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        isTopAlignImage: true
+    }
+};