@scottish-government/designsystem-react 0.0.0

package/src/components/date-picker/date-picker.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSDatePicker from '@scottish-government/design-system/src/components/date-picker/date-picker';
+import TextInput from '../text-input/text-input';
+
+const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
+    width = 'fixed-10',
+    disabledDates,
+    error,
+    errorMessage,
+    hintText,
+    id,
+    iconPath = './',
+    label,
+    maxDate,
+    minDate,
+    multiple,
+    name,
+    onBlur,
+    onChange,
+    value,
+    ...props
+}) => {
+    // todo: dateSelectCallback function
+
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSDatePicker(ref.current, {imagePath: iconPath}).init();
+        }
+    }, [ref, iconPath]);
+
+    function handleBlur(event: React.FocusEvent) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+
+    function handleChange(event: React.ChangeEvent) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+
+    return (
+        <div
+            className={[
+                "ds_datepicker",
+                multiple && "ds_datepicker--multiple"
+            ].join(' ')}
+            data-disableddates={disabledDates}
+            data-maxdate={maxDate}
+            data-mindate={minDate}
+            data-module="ds-datepicker"
+            ref={ref}
+            {...props}
+        >
+            {(multiple ? (
+                <fieldset className="ds_datepicker__input-wrapper">
+                    <legend>{label}</legend>
+                    <div>
+                        <TextInput
+                            className="js-datepicker-date"
+                            error={!!error}
+                            id={id + "-day"}
+                            hintText={hintText}
+                            label="Day"
+                            name={name + "-day"}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            value={value?.split('/')[0]}
+                            width="fixed-2"
+                        />
+                    </div>
+
+                    <div>
+                        <TextInput
+                            className="js-datepicker-month"
+                            error={!!error}
+                            id={id + "-month"}
+                            hintText={hintText}
+                            label="Month"
+                            name={name + "-month"}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            value={value?.split('/')[1]}
+                            width="fixed-2"
+                        />
+                    </div>
+
+                    <div>
+                        <TextInput
+                            className="js-datepicker-year"
+                            error={!!error}
+                            id={id + "-year"}
+                            hintText={hintText}
+                            label="Year"
+                            name={name + "-year"}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            value={value?.split('/')[2]}
+                            width="fixed-4"
+                        />
+                    </div>
+                </fieldset>
+            ) : (
+                <TextInput
+                    error={!!error}
+                    errorMessage={errorMessage}
+                    id={id}
+                    hasButton
+                    hintText={hintText}
+                    label={label}
+                    name={name}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    placeholder="dd/mm/yyyy"
+                    value={value}
+                    width={width}
+                />
+            ))}
+        </div>
+    );
+};
+
+DatePicker.displayName = 'DatePicker';
+
+export default DatePicker;

package/src/components/details/details.test.tsx

@@ -0,0 +1,38 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Details from './details';
+
+const summaryText = 'I can\'t sign in';
+const content = '<p>hello</p>';
+
+test('details renders correctly', () => {
+
+    render(
+        <Details summary={summaryText}>
+            <p>hello</p>
+        </Details>
+    );
+
+    const summaryElement = screen.getByText(summaryText);
+    const detailsElement = summaryElement.parentNode;
+    const textElement = summaryElement.nextSibling;
+
+    expect(detailsElement).toHaveClass('ds_details');
+    expect(detailsElement.tagName).toEqual('DETAILS');
+    expect(summaryElement).toHaveClass('ds_details__summary');
+    expect(summaryElement.tagName).toEqual('SUMMARY');
+    expect(textElement).toHaveClass('ds_details__text');
+    expect(textElement.innerHTML).toEqual(content);
+});
+
+test('passing additional props', () => {
+    render(
+        <Details data-test="foo" summary={summaryText}>
+            <p>hello</p>
+        </Details>
+    )
+
+    const summaryElement = screen.getByText(summaryText);
+    const detailsElement = summaryElement.parentNode;
+    expect(detailsElement?.dataset.test).toEqual('foo');
+});

package/src/components/details/details.tsx

@@ -0,0 +1,25 @@
+const Details: React.FC<SGDS.Component.Details> = ({
+    children,
+    summary,
+    ...props
+}) => {
+    return (
+        <details
+            className={[
+                "ds_details",
+            ].join(' ')}
+            {...props}
+        >
+            <summary className="ds_details__summary">
+                {summary}
+            </summary>
+            <div className="ds_details__text">
+                {children}
+            </div>
+        </details>
+    );
+};
+
+Details.displayName = 'Details';
+
+export default Details;

package/src/components/error-message/error-message.test.tsx

@@ -0,0 +1,40 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ErrorMessage from './error-message';
+
+const errorText = 'Error message';
+const errorId = 'errormessage';
+
+test('error message renders correctly', () => {
+
+    render(
+        <ErrorMessage text={errorText} id={errorId}/>
+    );
+
+    const errorMessageElement = screen.getByRole('paragraph');
+
+    expect(errorMessageElement).toHaveAttribute('id', errorId);
+    expect(errorMessageElement).toHaveClass('ds_question__error-message');
+    expect(errorMessageElement.textContent).toEqual(errorText);
+});
+
+test('error message with HTML content', () => {
+    const errorId = 'errormessage';
+
+    render(
+        <ErrorMessage id={errorId}>hello <a href="#foo">world</a></ErrorMessage>
+    );
+
+    const errorMessageElement = screen.getByRole('paragraph');
+
+    expect(errorMessageElement.innerHTML).toEqual('hello <a href="#foo">world</a>');
+});
+
+test('passing additional props', () => {
+    render(
+        <ErrorMessage data-test="foo" text={errorText} id={errorId}/>
+    )
+
+    const errorMessageElement = screen.getByRole('paragraph');
+    expect(errorMessageElement?.dataset.test).toEqual('foo');
+});

package/src/components/error-message/error-message.tsx

@@ -0,0 +1,23 @@
+const ErrorMessage: React.FC<SGDS.Component.ErrorMessage> = ({
+    children,
+    id,
+    text,
+    ...props
+}) => {
+    return (
+        <p
+            className={[
+                'ds_question__error-message',
+            ].join(' ')}
+            dangerouslySetInnerHTML={text ? { __html: text } : undefined}
+            id={id}
+            {...props}
+        >
+            {!text ? children : null}
+        </p>
+    );
+};
+
+ErrorMessage.displayName = 'ErrorMessage';
+
+export default ErrorMessage;

package/src/components/inset-text/inset-text.test.tsx

@@ -0,0 +1,33 @@
+import { test, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import InsetText from './inset-text';
+
+const text = `You may be able to apply for free school meals at the same
+    time as you apply for the clothing grant.`;
+
+test('inset text renders correctly', () => {
+
+    render(
+        <InsetText>
+            {text}
+        </InsetText>
+    );
+
+    const insetTextOuter = document.querySelector('.ds_inset-text');
+    const insetTextInner = insetTextOuter?.querySelector('.ds_inset-text__text');
+
+    expect(insetTextOuter).toBeInTheDocument();
+    expect(insetTextInner).toBeInTheDocument();
+    expect(insetTextInner?.textContent).toEqual(text);
+});
+
+test('passing additional props', () => {
+    render(
+        <InsetText data-test="foo">
+            {text}
+        </InsetText>
+    )
+
+    const insetTextOuter = document.querySelector('.ds_inset-text');
+    expect(insetTextOuter?.dataset.test).toEqual('foo');
+});

package/src/components/inset-text/inset-text.tsx

@@ -0,0 +1,19 @@
+const InsetText: React.FC<React.PropsWithChildren> = ({
+    children,
+    ...props
+}) => {
+    return (
+        <div
+            className="ds_inset-text"
+            {...props}
+        >
+            <div className="ds_inset-text__text">
+                {children}
+            </div>
+        </div>
+    );
+};
+
+InsetText.displayName = 'InsetText';
+
+export default InsetText;

package/src/components/notification-banner/notification-banner.test.tsx

@@ -0,0 +1,93 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import NotificationBanner from './notification-banner';
+
+const text = 'We need to tell you about something';
+
+test('notification banner renders correctly', () => {
+    render(
+        <NotificationBanner>
+            {text}
+        </NotificationBanner>
+    );
+
+    const bannerTitle = screen.getByRole('heading');
+    const bannerText = bannerTitle.nextSibling;
+    const bannerContent = bannerTitle.parentNode;
+    const bannerWrapper = bannerContent?.parentNode;
+    const bannerContainer = bannerWrapper?.parentNode;
+
+    expect(bannerTitle.textContent).toEqual('Information');
+    expect(bannerTitle.tagName).toEqual('H2');
+    expect(bannerTitle).toHaveClass('visually-hidden');
+
+    expect(bannerText).toHaveClass('ds_notification__text');
+    expect(bannerText.textContent).toEqual(text);
+
+    expect(bannerContent).toHaveClass('ds_notification__content');
+    expect(bannerWrapper).toHaveClass('ds_wrapper');
+    expect(bannerContainer).toHaveClass('ds_notification', 'ds_reversed');
+});
+
+test('notification banner with close button', () => {
+    render(
+        <NotificationBanner close>
+            {text}
+        </NotificationBanner>
+    );
+
+    const bannerTitle = screen.getByRole('heading');
+    const bannerContent = bannerTitle.parentNode;
+    const closeButton = screen.getByRole('button');
+    const closeButtonLabel = within(closeButton).getByText('Close this notification');
+    const closeButtonIcon = within(closeButton).getByRole('img', { hidden: true });
+
+    expect(bannerContent).toHaveClass('ds_notification__content--has-close');
+    expect(closeButton).toHaveClass('ds_notification__close', 'js-close-notification');
+    expect(closeButton).toHaveAttribute('type', 'button');
+
+    expect(closeButtonLabel).toBeInTheDocument();
+    expect(closeButtonLabel).toHaveClass('visually-hidden');
+
+    expect(closeButtonIcon).toHaveClass('ds_icon', 'ds_icon--fill');
+});
+
+test('notification banner with icon', () => {
+    render(
+        <NotificationBanner icon>
+            {text}
+        </NotificationBanner>
+    );
+
+    const bannerTitle = screen.getByRole('heading');
+    const bannerIconContainer = bannerTitle.nextSibling;
+    const bannerIcon = within(bannerIconContainer).getByRole('img', { hidden: true });
+
+    expect(bannerIconContainer).toHaveClass('ds_notification__icon');
+    expect(bannerIcon).toHaveClass('ds_icon');
+    expect(bannerIcon).toHaveAttribute('aria-hidden');
+});
+
+test('notification banner with icon modifier classes', () => {
+    render(
+        <NotificationBanner icon iconColour iconInverse>
+            {text}
+        </NotificationBanner>
+    );
+
+    const bannerTitle = screen.getByRole('heading');
+    const bannerIconContainer = bannerTitle.nextSibling;
+
+    expect(bannerIconContainer).toHaveClass('ds_notification__icon', 'ds_notification__icon--inverse', 'ds_notification__icon--colour');
+});
+
+test('passing additional props', () => {
+    render(
+        <NotificationBanner data-test="foo">
+            {text}
+        </NotificationBanner>
+    )
+
+    const bannerContainer = document.querySelector('.ds_notification');
+    expect(bannerContainer?.dataset.test).toEqual('foo');
+});

package/src/components/notification-banner/notification-banner.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSNotificationBanner from '@scottish-government/design-system/src/components/notification-banner/notification-banner';
+import Button from '../button/button';
+import Icon from '../../common/icon';
+import ScreenReaderText from '../../common/screen-reader-text';
+
+const NotificationBanner: React.FC<SGDS.Component.NotificationBanner> = ({
+    children,
+    close,
+    icon,
+    iconColour,
+    iconInverse,
+    title = 'Information',
+    ...props
+}) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSNotificationBanner(ref.current).init();
+        }
+    }, [ref]);
+
+    return (
+        <div
+            className="ds_notification  ds_reversed"
+            data-module="ds-notification"
+            ref={ref}
+            {...props}
+        >
+            <div className="ds_wrapper">
+                <div className={
+                    [
+                        'ds_notification__content',
+                        close && 'ds_notification__content--has-close'
+                    ].join(' ')}
+                >
+                    <h2 className="visually-hidden">{title}</h2>
+
+                    {icon &&
+                        <span
+                        className={[
+                                'ds_notification__icon',
+                                iconInverse && 'ds_notification__icon--inverse',
+                                iconColour && 'ds_notification__icon--colour'
+                            ].join(' ')} aria-hidden="true">
+                            <Icon icon="priority_high" />
+                        </span>
+                    }
+
+                    <div className="ds_notification__text">
+                        {children}
+                    </div>
+
+                    {close &&
+                        <Button className="ds_notification__close js-close-notification">
+                            <ScreenReaderText>Close this notification</ScreenReaderText>
+                            <Icon fill icon="close" aria-hidden="true" />
+                        </Button>
+                    }
+                </div>
+            </div>
+        </div>
+    );
+};
+
+NotificationBanner.displayName = 'NotificationBanner';
+
+export default NotificationBanner;

package/src/components/notification-panel/notification-panel.test.tsx

@@ -0,0 +1,77 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import NotificationPanel from './notification-panel';
+
+const headingText = 'Thank you';
+const text = 'Your Saltire Scholarship Application form has been successfully submitted.';
+
+test('notification banner renders correctly', () => {
+    render(
+        <NotificationPanel title={headingText}>
+            {text}
+        </NotificationPanel>
+    );
+
+    const notificationPanelHeading = screen.getByRole('heading');
+    const notificationPanelContent = notificationPanelHeading.nextSibling;
+    const notificationPanel = notificationPanelHeading.parentNode;
+
+    expect(notificationPanel).toHaveClass('ds_notification-panel');
+    expect(notificationPanelHeading).toHaveClass('ds_notification-panel__title');
+    expect(notificationPanelHeading.textContent).toEqual(headingText);
+    expect(notificationPanelHeading.tagName).toEqual('H1');
+    expect(notificationPanelContent).toHaveClass('ds_notification-panel__content');
+    expect(notificationPanelContent.textContent).toEqual(text);
+});
+
+test('notification banner with custom heading level', () => {
+    const headerLevel = 'h2';
+
+    render(
+        <NotificationPanel headerLevel={headerLevel} title={headingText}>
+            {text}
+        </NotificationPanel>
+    );
+
+    const notificationPanelHeading = screen.getByRole('heading');
+    expect(notificationPanelHeading.tagName).toEqual(headerLevel.toUpperCase());
+});
+
+test('notification banner with aria-live', () => {
+    const ariaLive = 'polite';
+
+    render(
+        <NotificationPanel ariaLive={ariaLive} title={headingText}>
+            {text}
+        </NotificationPanel>
+    );
+
+    const notificationPanelHeading = screen.getByRole('heading');
+    const notificationPanel = notificationPanelHeading.parentNode;
+
+    expect(notificationPanel).toHaveAttribute('aria-live', ariaLive);
+});
+
+test('notification banner with nonsense heading level reverts to H1', () => {
+    const headerLevel = 'h2';
+    render(
+        <NotificationPanel headerLevel={headerLevel} title={headingText}>
+            {text}
+        </NotificationPanel>
+    );
+
+    const notificationPanelHeading = screen.getByRole('heading');
+    expect(notificationPanelHeading.tagName).toEqual(headerLevel.toUpperCase());
+});
+
+test('passing additional props', () => {
+    render(
+        <NotificationPanel title={headingText} data-test="foo">
+            {text}
+        </NotificationPanel>
+    )
+
+    const notificationPanelHeading = screen.getByRole('heading');
+    const notificationPanel = notificationPanelHeading.parentNode;
+    expect(notificationPanel?.dataset.test).toEqual('foo');
+});

package/src/components/notification-panel/notification-panel.tsx

@@ -0,0 +1,31 @@
+import WrapperTag from '../../common/wrapper-tag';
+
+const NotificationPanel: React.FC<SGDS.Component.NotificationPanel> = function ({
+    ariaLive,
+    children,
+    headerLevel = 'h1',
+    title,
+    ...props
+}) {
+    return (
+        <div
+            aria-live={ariaLive}
+            className="ds_notification-panel"
+            {...props}
+        >
+            <WrapperTag
+                className="ds_notification-panel__title"
+                tagName={headerLevel}
+            >
+                {title}
+            </WrapperTag>
+            <div className="ds_notification-panel__content">
+                {children}
+            </div>
+        </div>
+    );
+};
+
+NotificationPanel.displayName = 'NotificationPanel';
+
+export default NotificationPanel;

package/src/components/page-header/page-header.test.tsx

@@ -0,0 +1,48 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import PageHeader from './page-header';
+
+const labelText = 'Guide';
+const titleText = 'Apply for or renew a disabled parking permit';
+
+test('notification banner renders correctly', () => {
+    render(
+        <PageHeader label={labelText} title={titleText}/>
+    );
+
+    const header = screen.getByRole('banner');
+    const title = within(header).getByRole('heading');
+    const label = title.previousSibling;;
+
+    expect(header).toHaveClass('ds_page-header');
+    expect(header.tagName).toEqual('HEADER');
+
+    expect(label).toHaveClass('ds_page-header__label', 'ds_content-label');
+    expect(label?.textContent).toEqual(labelText);
+    expect(label?.tagName).toEqual('SPAN');
+
+    expect(title).toHaveClass('ds_page-header__title');
+    expect(title.textContent).toEqual(titleText);
+    expect(title.tagName).toEqual('H1');
+});
+
+test('header with no label', () => {
+    render(
+        <PageHeader title={titleText}/>
+    );
+
+    const header = screen.getByRole('banner');
+    const title = within(header).getByRole('heading');
+    const label = title.previousSibling;
+
+    expect(label).not.toBeInTheDocument();
+});
+
+test('passing additional props', () => {
+    render(
+       <PageHeader data-test="foo" label={labelText} title={titleText}/>
+    )
+
+    const header = screen.getByRole('banner');
+    expect(header?.dataset.test).toEqual('foo');
+});

package/src/components/page-header/page-header.tsx

@@ -0,0 +1,22 @@
+const PageHeader: React.FC<SGDS.Component.PageHeader> = ({
+    children,
+    label,
+    title,
+    ...props
+}) => {
+    return (
+        <header
+            className="ds_page-header"
+            {...props}
+        >
+            {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}
+            <h1 className="ds_page-header__title">{title}</h1>
+
+            {children}
+        </header>
+    );
+};
+
+PageHeader.displayName = 'PageHeader';
+
+export default PageHeader;