@scottish-government/designsystem-react 1.0.1 → 1.1.0

package/src/components/ConfirmationNotification/ConfirmationNotification.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react';
+import AbstractNotificationMessage from '../../common/AbstractNotificationMessage';
+import DSNotificationMessage from '@scottish-government/design-system/src/components/notification-message/notification-message';
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
+import clsx from 'clsx';
+
+const ConfirmationNotification = ({
+    ariaLive,
+    children,
+    className,
+    headingLevel = 'h3',
+    isDismissable,
+    title,
+    ...props
+}: AbstractNotificationMessageProps) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new DSNotificationMessage(ref.current).init();
+        }
+    }, [ref]);
+    
+    return (
+        <AbstractNotificationMessage
+            ariaLive={ariaLive}
+            className={clsx([
+                'ds_notification-message--success',
+                className
+            ])}
+            headingLevel={headingLevel}
+            icon="CheckCircle"
+            isDismissable={isDismissable}
+            ref={ref}
+            title={title}
+            {...props}
+        >
+            {children}
+        </AbstractNotificationMessage>
+    );
+};
+
+ConfirmationNotification.displayName = 'ConfirmationNotification';
+
+export default ConfirmationNotification;

package/src/components/ConfirmationNotification/index.ts

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

package/src/components/ErrorNotification/ErrorNotification.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ErrorNotification from './ErrorNotification';
+
+const meta = {
+    title: 'Components/NotificationMessage/ErrorNotification',
+    component: ErrorNotification,
+    argTypes: {
+        ariaLive: argTypes.ariaLive(),
+        children: argTypes.children(),
+        headingLevel: argTypes.headingLevel(),
+        icon: { table: { disable: true } },
+        isDismissable: argTypes.boolean()
+    },
+    args: {
+        ariaLive: 'polite',
+        children: (<p>That link does not seem to be working.<br />Please try again.</p>),
+        headingLevel: 'h3',
+        isDismissable: false,
+        title: 'Something went wrong',
+    }
+} satisfies Meta<typeof ErrorNotification>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const NoChildren: Story = {
+    args: {
+        children: undefined
+    }
+};
+
+export const DifferentHeadingLevel: Story = {
+    args: {
+        headingLevel: 'h2'
+    }
+};
+
+export const Dismissable: Story = {
+    args: {
+        isDismissable: true
+    }
+};

package/src/components/ErrorNotification/ErrorNotification.test.tsx

@@ -0,0 +1,101 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import ErrorNotification from './ErrorNotification';
+
+const NOTIFICATION_TEXT = 'Further details of the notification message';
+const TITLE_TEXT = 'Important information';
+
+test('error notification message renders correctly', () => {
+    render(
+        <ErrorNotification title={TITLE_TEXT}>
+            {NOTIFICATION_TEXT}
+        </ErrorNotification>
+    );
+
+    const container = document.querySelector('.ds_notification-message');
+    const heading = screen.getByRole('heading');
+    const content = heading.nextElementSibling;
+   
+    expect(container?.ariaLive).toEqual('polite');
+
+    expect(heading.tagName).toEqual('H3');
+    expect(heading.textContent).toEqual(TITLE_TEXT)
+    expect(content?.textContent).toEqual(NOTIFICATION_TEXT)
+});
+
+test('error notification message with close button', () => {
+    render(
+        <ErrorNotification isDismissable>
+            {NOTIFICATION_TEXT}
+        </ErrorNotification>
+    );
+
+    const closeButton = screen.getByRole('button');
+    const closeButtonLabel = within(closeButton).getByText('Close this notification');
+    const closeButtonIcon = within(closeButton).getByRole('img', { hidden: true });
+
+    expect(closeButton).toHaveClass('ds_notification-message__close', 'js-close-notification-message');
+    expect(closeButton).toHaveAttribute('type', 'button');
+
+    expect(closeButtonLabel).toBeInTheDocument();
+    expect(closeButtonLabel).toHaveClass('visually-hidden');
+
+    expect(closeButtonIcon).toHaveClass('ds_icon', 'ds_icon--fill');
+});
+
+test('error notification message with icon', () => {
+    render(
+        <ErrorNotification icon="Search">
+            {NOTIFICATION_TEXT}
+        </ErrorNotification>
+    );
+
+
+    const notificationIcon = screen.getByRole('img', { hidden: true });
+
+    expect(notificationIcon).toHaveClass('ds_icon', 'ds_notification-message__icon', 'ds_icon--24');
+    expect(notificationIcon).toHaveAttribute('aria-hidden');
+});
+
+test("does not render body when no children specified", () => {
+  const { container } = render(<ErrorNotification title={TITLE_TEXT} />);
+
+  expect(
+    container.querySelector(".ds_notification-message__body"),
+  ).not.toBeInTheDocument();
+});
+
+test('error notification message with custom aria live and custom header level', () => {
+    render(
+        <ErrorNotification headingLevel="h2" ariaLive="assertive" title={TITLE_TEXT}/>
+    );
+
+    const container = document.querySelector('.ds_notification-message');
+    const heading = screen.getByRole('heading');
+
+    expect(container?.ariaLive).toEqual('assertive');
+
+    expect(heading.tagName).toEqual('H2');
+});
+
+test('passing additional props', () => {
+    render(
+        <ErrorNotification data-test="foo">
+            {NOTIFICATION_TEXT}
+        </ErrorNotification>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <ErrorNotification className="foo">
+            {NOTIFICATION_TEXT}
+        </ErrorNotification>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container).toHaveClass('foo', 'ds_notification-message');
+});

package/src/components/ErrorNotification/ErrorNotification.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react';
+import AbstractNotificationMessage from '../../common/AbstractNotificationMessage';
+import DSNotificationMessage from '@scottish-government/design-system/src/components/notification-message/notification-message';
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
+import clsx from 'clsx';
+
+const ErrorNotification = ({
+    ariaLive,
+    children,
+    className,
+    headingLevel = 'h3',
+    isDismissable,
+    title,
+    ...props
+}: AbstractNotificationMessageProps) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new DSNotificationMessage(ref.current).init();
+        }
+    }, [ref]);
+    
+    return (
+        <AbstractNotificationMessage
+            ariaLive={ariaLive}
+            className={clsx([
+                'ds_notification-message--error',
+                className
+            ])}
+            headingLevel={headingLevel}
+            icon="Error"
+            isDismissable={isDismissable}
+            ref={ref}
+            title={title}
+            {...props}
+        >
+            {children}
+        </AbstractNotificationMessage>
+    );
+};
+
+ErrorNotification.displayName = 'ErrorNotification';
+
+export default ErrorNotification;

package/src/components/ErrorNotification/index.ts

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

package/src/components/FileDownload/FileDownload.test.tsx

@@ -5,7 +5,7 @@ import FileDownload from './FileDownload';
 const FILE_TITLE = 'Scotland\'s Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive';
 const FILE_URL = 'my-file.file';
 
-test('inset text renders correctly', () => {
+test('File download renders correctly', () => {
     render(
         <FileDownload fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );

package/src/components/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import FileUpload from './FileUpload';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+import { defaultText } from '@scottish-government/design-system/src/components/file-upload/file-upload';
+
+const meta = {
+    title: 'Components/FileUpload',
+    component: FileUpload,
+    args: {
+        // capture?: boolean | 'user' | 'environment'
+        id: 'file-upload',
+        label: 'Upload a file',
+        text: JSON.parse(JSON.stringify(defaultText))
+    },
+    argTypes: {
+        accept: {
+            control: { type: 'text' },
+            description: 'Value of the "accept" attribute on the input element',
+            table: {
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        capture: argTypes.select({options: ['', 'user', 'environment']}),
+        errorMessage: argTypes.errorMessage(),
+        files: argTypes.hidden(),
+        hasError: argTypes.boolean(),
+        hintText: argTypes.hintText(),
+        id: argTypes.id(),
+        isMultiple: argTypes.boolean(),
+        label: argTypes.label(),
+        name: {type: 'string'},
+        text: argTypes.hidden()
+    }
+} satisfies Meta<typeof FileUpload>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const Multiple: Story = {
+    args: {
+        isMultiple: true
+    }
+};
+
+export const KitchenSink: Story = {
+    args: {
+        errorMessage: 'Please select at least one file',
+        hasError: true,
+        hintText: 'The files must be no larger than 10MB each',
+        isMultiple: true,
+        label: 'Upload your files'
+    }
+}
+
+export const DifferentText: Story = {
+    args: {
+        label: 'Upload a banana 🍌',
+        text: {
+            buttonText: 'Choose a banana',
+            buttonTextPlural: 'Choose some bananas',
+            defaultStatusText: 'No banana chosen',
+            defaultStatusTextPlural: 'No bananas chosen',
+            enteredDropzone: 'Entered banana zone',
+            filesAddedText: '$NUMBER bananas',
+            filesListHeading: 'Bananas selected for upload',
+            instructionText: 'or drag and drop a banana here',
+            instructionTextPlural: 'or drag and drop some bananas here',
+            leftDropzone: 'Left banana zone'
+        }
+    }
+}

package/src/components/FileUpload/FileUpload.test.tsx

@@ -0,0 +1,185 @@
+import { test, expect, vi } from 'vitest';
+import { screen, render, fireEvent } from '@testing-library/react';
+import FileUpload from './FileUpload';
+
+const ID = 'my-file-upload'
+const LABEL_TEXT = 'Upload a file';
+
+test('file upload renders correctly', () => {
+    render(
+        <FileUpload data-testid="file-upload" id={ID} label={LABEL_TEXT} />
+    );
+
+    const fileUploadElement = screen.getByTestId('file-upload');
+    const label = screen.getByText(LABEL_TEXT);
+    const dropzoneButton = document.getElementById(ID + '-dropzone');
+    const statusSpan = document.getElementById(ID + '-status');
+    const commaSpan = document.getElementById(ID + '-comma');
+    const buttonContainer = document.querySelector('.ds_file-upload__button-container');
+    const pseudoButton = document.querySelector('.ds_file-upload__button');
+    const instructionSpan = document.getElementById(ID + '-instruction');
+    const fileInput = document.getElementById(ID);
+
+    expect(fileUploadElement).toHaveClass('ds_file-upload');
+    expect(fileUploadElement.tagName).toEqual('DIV');
+
+    expect(label).toHaveClass('ds_label');
+    expect(label).toHaveAttribute('for', ID);
+    expect(label).toHaveAttribute('id', ID + '-label');
+    expect(label.tagName).toEqual('LABEL');
+    expect(label.textContent).toEqual(LABEL_TEXT);
+    expect(label.parentElement).toEqual(fileUploadElement);
+
+    expect(dropzoneButton).toHaveClass('ds_file-upload__dropzone');
+    expect(dropzoneButton).toHaveAttribute('id', ID + '-dropzone');
+    expect(dropzoneButton).toHaveAttribute('type', 'button');
+    expect(dropzoneButton?.tagName).toEqual('BUTTON');
+    expect(dropzoneButton).toHaveAttribute('aria-labelledby', `${label.id} ${commaSpan?.id} ${dropzoneButton?.id}`);
+    expect(dropzoneButton?.parentElement).toEqual(fileUploadElement);
+    expect(dropzoneButton?.previousElementSibling).toEqual(label);
+
+    expect(statusSpan).toHaveClass('ds_file-upload__status');
+    expect(statusSpan).toHaveAttribute('aria-live', 'polite');
+    expect(statusSpan?.tagName).toEqual('SPAN');
+    expect(statusSpan?.textContent).toEqual('No file chosen');
+    expect(statusSpan?.parentElement).toEqual(dropzoneButton);
+
+    expect(commaSpan).toHaveClass('visually-hidden');
+    expect(commaSpan?.tagName).toEqual('SPAN');
+    expect(commaSpan?.parentElement).toEqual(dropzoneButton);
+    expect(commaSpan?.previousElementSibling).toEqual(statusSpan);
+
+    expect(buttonContainer?.tagName).toEqual('SPAN');
+    expect(buttonContainer?.parentElement).toEqual(dropzoneButton);
+    expect(buttonContainer?.previousElementSibling).toEqual(commaSpan);
+
+    expect(pseudoButton?.tagName).toEqual('SPAN');
+    expect(pseudoButton?.textContent).toEqual('Choose file');
+    expect(pseudoButton?.parentElement).toEqual(buttonContainer);
+
+    expect(instructionSpan).toHaveClass('ds_file-upload__instruction');
+    expect(instructionSpan?.tagName).toEqual('SPAN');
+    expect(instructionSpan?.textContent).toEqual('or drag and drop file here');
+    expect(instructionSpan?.parentElement).toEqual(buttonContainer);
+    expect(instructionSpan?.previousElementSibling).toEqual(pseudoButton);
+
+    expect(fileInput).not.toHaveAttribute('aria-describedby');
+    expect(fileInput).toHaveAttribute('aria-hidden', 'true');
+    expect(fileInput).toHaveClass('ds_file-upload__input');
+    expect(fileInput).toHaveAttribute('hidden', 'true');
+    expect(fileInput).toHaveAttribute('name', ID);
+    expect(fileInput).toHaveAttribute('tabindex', '-1');
+    expect(fileInput).toHaveAttribute('type', 'file');
+});
+
+test('multiple file upload', () => {
+    const LABEL_TEXT = 'Upload files';
+
+    render(
+        <FileUpload isMultiple data-testid="file-upload" id={ID} label={LABEL_TEXT} />
+    );
+
+    const label = screen.getByText(LABEL_TEXT);
+    const statusSpan = document.getElementById(ID + '-status');
+    const pseudoButton = document.querySelector('.ds_file-upload__button');
+    const instructionSpan = document.getElementById(ID + '-instruction');
+    const fileInput = document.getElementById(ID);
+
+    expect(label.textContent).toEqual(LABEL_TEXT);
+    expect(statusSpan?.textContent).toEqual('No files chosen');
+    expect(pseudoButton?.textContent).toEqual('Choose files');
+    expect(instructionSpan?.textContent).toEqual('or drag and drop files here');
+    expect(fileInput).toHaveAttribute('multiple');
+});
+
+test('with hint text', () => {
+    const HINT_TEXT = 'My hint text'
+
+    render(
+        <FileUpload hintText={HINT_TEXT} data-testid="file-upload" id={ID} label={LABEL_TEXT} />
+    );
+
+    const label = screen.getByText(LABEL_TEXT);
+    const hintText = document.getElementById('hint-text-' + ID);
+
+    expect(hintText).toBeInTheDocument();
+    expect(hintText).toHaveClass('ds_hint-text');
+    expect(hintText?.textContent).toEqual(HINT_TEXT);
+    expect(hintText?.previousElementSibling).toEqual(label);
+});
+
+test('with error text', () => {
+    const ERROR_TEXT = 'My error text'
+
+    render(
+        <FileUpload errorMessage={ERROR_TEXT} hasError data-testid="file-upload" id={ID} label={LABEL_TEXT} />
+    );
+
+    const label = screen.getByText(LABEL_TEXT);
+    const errorText = document.getElementById('error-message-' + ID);
+
+    expect(errorText).toBeInTheDocument();
+    expect(errorText).toHaveClass('ds_question__error-message');
+    expect(errorText?.textContent).toEqual(ERROR_TEXT);
+    expect(errorText?.previousElementSibling).toEqual(label);
+});
+
+test('with blur fn', () => {
+    const ONBLUR_FUNCTION = vi.fn();
+
+    render(
+        <FileUpload onBlur={ONBLUR_FUNCTION} id={ID} label={LABEL_TEXT} />
+    );
+
+    const fileInput = document.getElementById(ID);
+
+    if (fileInput) {
+        fireEvent.blur(fileInput);
+    }
+
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
+});
+
+test('with change fn', () => {
+    const ONCHANGE_FUNCTION = vi.fn();
+
+    render(
+        <FileUpload onChange={ONCHANGE_FUNCTION} id={ID} label={LABEL_TEXT} />
+    );
+
+    const fileInput = document.getElementById(ID);
+
+    if (fileInput) {
+        fireEvent.change(fileInput);
+    }
+
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
+});
+
+test('passing additional props', () => {
+    render(
+        <FileUpload
+            data-testid="file-upload"
+            id={ID}
+            label={LABEL_TEXT}
+            data-test="foo"
+        />
+    );
+
+    const fileUploadElement = screen.getByTestId('file-upload');
+    expect(fileUploadElement?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <FileUpload
+            data-testid="file-upload"
+            id={ID}
+            label={LABEL_TEXT}
+            className="foo"
+        />
+    );
+
+    const fileUploadElement = screen.getByTestId('file-upload');
+    expect(fileUploadElement).toHaveClass('foo');
+});

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef } from 'react';
+import { FileUploadProps } from './types';
+import ErrorMessage from '../ErrorMessage';
+import HintText from '../../common/HintText';
+import DSFileUpload from '@scottish-government/design-system/src/components/file-upload/file-upload'
+
+const FileUpload = ({
+    accept,
+    capture,
+    className,
+    errorMessage,
+    hasError,
+    hintText,
+    id,
+    isMultiple,
+    label,
+    name,
+    onBlur,
+    onChange,
+    text,
+    ...props
+}: FileUploadProps) => {
+    const ref = useRef(null);
+
+    const errorMessageId = `error-message-${id}`;
+    const hintTextId = `hint-text-${id}`;
+    const describedbys: string[] = [];
+
+    if (hintText) { describedbys.push(hintTextId) };
+    if (errorMessage) { describedbys.push(errorMessageId) };
+
+    const options = {
+        text: text
+    }
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSFileUpload(ref.current, options).init();
+        }
+    }, [ref]);
+
+    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+
+    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+
+    return (
+        <div className={[
+                'ds_file-upload',
+                className
+            ].join(' ')}
+            ref={ref}
+            {...props}
+        >
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
+            {errorMessage && <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>}
+            <input
+                accept={accept}
+                aria-describedby={describedbys.length ? describedbys.join(' ') : undefined}
+                aria-invalid={hasError}
+                capture={capture}
+                className={[
+                    'ds_file-upload__input',
+                    hasError ? 'ds_file-upload__input--error' : ''
+                ].join(' ')}
+                id={id}
+                multiple={isMultiple}
+                name={name || id}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                type="file"
+            />
+        </div>
+    );
+};
+
+FileUpload.displayName = 'FileUpload';
+
+export default FileUpload;

package/src/components/FileUpload/index.ts

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

package/src/components/FileUpload/types.ts

@@ -0,0 +1,25 @@
+import { FormFieldBase } from '../../shared-types';
+
+type TextArgs = {
+    buttonText: string
+    buttonTextPlural: string
+    defaultStatusText: string
+    defaultStatusTextPlural: string
+    enteredDropzone: string
+    filesAddedText: string
+    filesListHeading: string
+    instructionText: string
+    instructionTextPlural: string
+    leftDropzone: string
+}
+
+export interface FileUploadProps extends FormFieldBase<HTMLElement> {
+    accept?: string,
+    capture?: boolean | 'user' | 'environment'
+    className?: string
+    files?: File[]
+    id: string
+    isMultiple?: boolean
+    name?: string
+    text?: Partial<TextArgs>
+}

package/src/components/InfoNotification/InfoNotification.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import InfoNotification from './InfoNotification';
+
+const meta = {
+    title: 'Components/NotificationMessage/InfoNotification',
+    component: InfoNotification,
+    argTypes: {
+        ariaLive: argTypes.ariaLive(),
+        children: argTypes.children(),
+        headingLevel: argTypes.headingLevel(),
+        icon: { table: { disable: true } },
+        isDismissable: argTypes.boolean()
+    },
+    args: {
+        ariaLive: 'polite',
+        children: (<p>You have added the landlord <strong>John Smith</strong> to the application.</p>),
+        headingLevel: 'h3',
+        isDismissable: false,
+        title: 'Landlord added successfully',
+    }
+} satisfies Meta<typeof InfoNotification>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const NoChildren: Story = {
+    args: {
+        children: undefined
+    }
+};
+
+export const DifferentHeadingLevel: Story = {
+    args: {
+        headingLevel: 'h2'
+    }
+};
+
+export const Dismissable: Story = {
+    args: {
+        isDismissable: true
+    }
+};