@scottish-government/designsystem-react 0.0.0

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSCheckboxes from '@scottish-government/design-system/src/forms/checkbox/checkboxes'
+import HintText from '../../common/hint-text';
+
+export const Checkbox: React.FC<SGDS.Component.Checkbox> = ({
+    checked,
+    hintText,
+    id,
+    exclusive,
+    label,
+    name,
+    onBlur,
+    onChange,
+    small
+}) => {
+    const hintTextId = `hint-text-${id}`;
+    const behaviour = exclusive && 'exclusive';
+
+    function handleBlur(event: React.FocusEvent) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+
+    function handleChange(event: React.ChangeEvent) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+
+    return (
+        <>
+            {exclusive && <p className="ds_checkbox-separator">or</p>}
+            <div
+                className={[
+                    'ds_checkbox',
+                    small && 'ds_checkbox--small'
+                ].join(' ')}>
+
+                <input
+                    aria-describedby={hintText ? hintTextId : undefined}
+                    className="ds_checkbox__input"
+                    data-behaviour={behaviour}
+                    defaultChecked={!!checked}
+                    id={id}
+                    name={name || id}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    type="checkbox" />
+                <label
+                    className="ds_checkbox__label"
+                    htmlFor={id}
+                >{label}</label>
+                {hintText && <HintText id={hintTextId} text={hintText} />}
+            </div>
+        </>
+    );
+};
+
+/**
+ * @param {Object} props - Properties for the element
+ * @param {Array} items - Checkboxes
+ * @param {boolean} small - Use the small display style for all checkboxes
+ * @returns {JSX.Element} - The element
+ */
+export const CheckboxGroup: React.FC<SGDS.Component.Checkbox.Group> = ({
+    items,
+    small,
+    ...props
+}) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSCheckboxes(ref.current).init();
+        }
+    }, [ref])
+
+    return (
+        <div
+            className="ds_checkboxes ds_field-group"
+            data-module="ds-checkboxes"
+            ref={ref}
+            {...props}
+        >
+            {items && items.map((item, index: number) => (
+                <Checkbox
+                    exclusive={item.exclusive}
+                    checked={item.checked}
+                    hintText={item.hintText}
+                    id={item.id}
+                    key={'checkbox' + index}
+                    label={item.label}
+                    onBlur={item.onBlur}
+                    onChange={item.onChange}
+                    small={small || item.small}
+                />
+            ))}
+        </div>
+    )
+};
+
+Checkbox.displayName = 'Checkbox';
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export default CheckboxGroup;

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

@@ -0,0 +1,46 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ConfirmationMessage from './confirmation-message';
+
+const titleString = 'Landlord added successfully';
+
+test('renders correctly with icon, title and message', () => {
+    render(
+        <ConfirmationMessage title={titleString}>
+            <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
+        </ConfirmationMessage>
+    );
+
+    const container = document.querySelector('.ds_confirmation-message');
+    const header = screen.getByRole('heading');
+
+    expect(container?.ariaLive).toEqual('polite');
+
+    expect(header.tagName).toEqual('H3');
+    expect(header.textContent).toEqual(titleString)
+});
+
+test("does not render body when no children specified", () => {
+  const { container } = render(<ConfirmationMessage title={titleString} />);
+
+  expect(
+    container.querySelector(".ds_confirmation-message__body"),
+  ).not.toBeInTheDocument();
+});
+
+test('renders confirmation message with custom aria live and custom heaer level', () => {
+    const titleString = 'Landlord added successfully';
+
+    render(
+        <ConfirmationMessage headerLevel="h2" ariaLive="alert" title={titleString}>
+            <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
+        </ConfirmationMessage>
+    );
+
+    const container = document.querySelector('.ds_confirmation-message');
+    const header = screen.getByRole('heading');
+
+    expect(container?.ariaLive).toEqual('alert');
+
+    expect(header.tagName).toEqual('H2');
+});

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

@@ -0,0 +1,32 @@
+import Icon from '../../common/icon';
+import WrapperTag from '../../common/wrapper-tag';
+
+const ConfirmationMessage: React.FC<SGDS.Component.ConfirmationMessage> = ({
+    ariaLive = 'polite',
+    children,
+    headerLevel = 'h3',
+    title
+}) => {
+    return (
+        <div
+            aria-live={ariaLive}
+            className="ds_confirmation-message"
+        >
+            <Icon className="ds_confirmation-message__icon" icon="check_circle" iconSize="24" />
+
+            <WrapperTag
+                className="ds_confirmation-message__title"
+                tagName={headerLevel}
+            >
+                {title}
+            </WrapperTag>
+            {children && <div className="ds_confirmation-message__body">
+                {children}
+            </div>}
+        </div>
+    );
+};
+
+ConfirmationMessage.displayName = 'ConfirmationMessage';
+
+export default ConfirmationMessage;

package/src/components/contents-nav/contents-nav.test.tsx

@@ -0,0 +1,136 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import ContentsNav, {Link} from './contents-nav';
+
+test('contents nav renders correctly', () => {
+    const items = [
+        {
+            title: 'Apply for Blue Badge',
+            current: true
+        },
+        {
+            title: 'Eligibility',
+            href: '#2'
+        },
+        {
+            title: 'Using your Blue Badge',
+            href: '#3'
+        },
+        {
+            title: 'Report a lost, stolen or misuesd Blue Badge',
+            href: '#4'
+        },
+        {
+            title: 'Changing or handing back a Blue Badge',
+            href: '#5'
+        }
+    ];
+
+    const label = 'Pages in this guide';
+
+    render(
+        <ContentsNav label={label} items={items} />
+    )
+
+    const contentsNav = screen.getByRole('navigation');
+    const contentsNavTitle = within(contentsNav).getByRole('heading');
+    const contentsNavList = within(contentsNav).getByRole('list');
+
+    expect(contentsNav).toHaveClass('ds_contents-nav');
+    expect(contentsNav.ariaLabel).toEqual(label);
+    expect(contentsNav.tagName).toEqual('NAV');
+    expect(contentsNavTitle).toHaveClass('ds_contents-nav__title');
+    expect(contentsNavTitle.textContent).toEqual('Contents');
+    expect(contentsNavList).toHaveClass('ds_contents-nav__list');
+    expect(contentsNavList.tagName).toEqual('UL');
+    expect(contentsNavList.children.length).toEqual(items.length);
+});
+
+test('contents nav with custom title', () => {
+    const title = 'My title';
+
+    render(
+        <ContentsNav title={title} items={[]} />
+    );
+
+    const contentsNav = screen.getByRole('navigation');
+    const contentsNavTitle = within(contentsNav).getByRole('heading');
+    expect(contentsNavTitle.textContent).toEqual(title);
+});
+
+test('contents nav item', () => {
+    const href = '#foo';
+    const content = 'My content';
+
+    render(
+        <Link href={href} title={content} />
+    );
+
+    const listItem = screen.getByRole('listitem');
+    const link = within(listItem).getByRole('link');
+
+    expect(listItem).toHaveClass('ds_contents-nav__item');
+    expect(listItem.tagName).toEqual('LI');
+    expect(link).toHaveClass('ds_contents-nav__link');
+    expect(link.tagName).toEqual('A');
+    expect(link.textContent).toEqual(content);
+    expect(link).toHaveAttribute('href', href);
+});
+
+test('contents nav current item with href', () => {
+    const href = '#foo';
+    const content = 'My content';
+
+    render(
+        <Link current href={href} title={content} />
+    );
+
+    const listItem = screen.getByRole('listitem');
+    const link = within(listItem).getByText(content);
+
+    expect(listItem.ariaCurrent).toEqual('page');
+    expect(link.tagName).toEqual('SPAN');
+    expect(link).toHaveClass('ds_current');
+});
+
+test('contents nav current item without href', () => {
+    const content = 'My content';
+
+    render(
+        <Link current title={content} />
+    );
+
+    const listItem = screen.getByRole('listitem');
+    const link = within(listItem).getByText(content);
+
+    expect(listItem.ariaCurrent).toEqual('page');
+    expect(link.tagName).toEqual('SPAN');
+    expect(link).toHaveClass('ds_current');
+});
+
+test('contents nav item without href', () => {
+    const content = 'My content';
+
+    render(
+        <Link title={content} />
+    );
+
+    const listItem = screen.getByRole('listitem');
+    const link = within(listItem).getByText(content);
+
+    expect(link.tagName).toEqual('SPAN');
+    expect(link).not.toHaveClass('ds_current');
+});
+
+test('passing additional props', () => {
+    render(
+        <ContentsNav data-test="foo" items={[
+            {
+                title: 'Apply for Blue Badge',
+            }
+        ]} />
+    )
+
+    const contentsNav = screen.getByRole('navigation');
+    expect(contentsNav?.dataset.test).toEqual('foo');
+});

package/src/components/contents-nav/contents-nav.tsx

@@ -0,0 +1,54 @@
+import WrapperTag from '../../common/wrapper-tag';
+
+export const Link: React.FC<SGDS.Component.ContentsNav.Link> = ({
+    title,
+    current,
+    href
+}) => {
+    // determine which HTML tag to use
+    const tagName = href && !current ? 'a' : 'span';
+
+    return (
+        <li
+            aria-current={current && 'page' || undefined}
+            className="ds_contents-nav__item"
+        >
+            <WrapperTag
+                tagName={tagName}
+                className={[
+                    'ds_contents-nav__link',
+                    current && 'ds_current'
+                ].join(' ')}
+                href={!current ? href : undefined}
+            >
+                {title}
+            </WrapperTag>
+        </li>
+    );
+};
+
+const ContentsNav: React.FC<SGDS.Component.ContentsNav> = function({
+    items,
+    label = 'Pages in this section',
+    title = 'Contents',
+    ...props
+}) {
+    return (
+        <nav
+            aria-label={label}
+            className="ds_contents-nav"
+            {...props}
+        >
+            <h2 className="ds_contents-nav__title">{title}</h2>
+            <ul className="ds_contents-nav__list">
+                {items && items.map((item, index: number) => (
+                    <Link current={item.current} href={item.href} title={item.title} key={'link' + index} />
+                ))}
+            </ul>
+        </nav>
+    );
+};
+
+ContentsNav.displayName = 'ContentsNav';
+
+export default ContentsNav;

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

@@ -0,0 +1,209 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import DatePicker from './date-picker';
+
+const labelText = 'Date of birth';
+const id = 'date-picker';
+
+test('date picker renders correctly', () => {
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+        />
+    );
+
+    // a little hacky. maybe testid would be better?
+    const datePicker = screen.getAllByRole('generic')[1];
+    const label = within(datePicker).getByText(labelText);
+    const textInput = within(datePicker).getByRole('textbox');
+
+    expect(datePicker).toHaveClass('ds_datepicker');
+    expect(label).toHaveClass('ds_label');
+    expect(label).toHaveAttribute('for', textInput.id);
+    expect(label.tagName).toEqual('LABEL');
+    expect(textInput).toHaveClass('ds_input', 'ds_input--fixed-10');
+    expect(textInput.id).toEqual(id);
+
+    // todo: check for DS script being fired
+});
+
+test('date picker with disabled dates', () => {
+    const disabledDates = '18/05/2023 19/05/2023'
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            disabledDates={disabledDates}
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+
+    expect(datePicker).toHaveAttribute('data-disableddates', disabledDates);
+});
+
+test('date picker with hint text', () => {
+    const hintText = 'My hint text'
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            hintText={hintText}
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+    const hintTextEl = screen.getByText(hintText);
+    const textInput = within(datePicker).getByRole('textbox');
+
+    expect(hintTextEl).toBeInTheDocument();
+    expect(textInput).toHaveAttribute('aria-describedby', hintTextEl.id);
+});
+
+test('date picker with custom icon path', () => {
+    const iconPath = '/my/icon/path'
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            iconPath={iconPath}
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+    const label = within(datePicker).getByText(labelText);
+    const textInput = within(datePicker).getByRole('textbox');
+
+    // todo
+});
+
+test('date picker with max date', () => {
+    const maxDate = '28/05/2023'
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            maxDate={maxDate}
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+
+    expect(datePicker).toHaveAttribute('data-maxDate', maxDate);
+});
+
+test('date picker with min date', () => {
+    const minDate = '28/05/2023'
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            minDate={minDate}
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+
+    expect(datePicker).toHaveAttribute('data-mindate', minDate);
+});
+
+test('date picker with blur fn', () => {
+    const onBlurFn = vi.fn();
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            onBlur={onBlurFn}
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+    const textInput = within(datePicker).getByRole('textbox');
+
+    fireEvent.blur(textInput);
+
+    expect(onBlurFn).toHaveBeenCalled();
+});
+
+test('date picker with change fn', () => {
+    const onChangeFn = vi.fn();
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            onChange={onChangeFn}
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+    const textInput = within(datePicker).getByRole('textbox');
+
+    fireEvent.change(textInput, {target: {value: 'foo'}});
+
+    expect(onChangeFn).toHaveBeenCalled();
+});
+
+test('date picker with initial value', () => {
+    const initialValue = '28/05/2023';
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            value={initialValue}
+        />
+    );
+    const datePicker = screen.getAllByRole('generic')[1];
+    const textInput = within(datePicker).getByRole('textbox');
+
+    expect(textInput).toHaveValue(initialValue);
+});
+
+test('date picker with multiple inputs', () => {
+    const initialValue = '28/05/2023';
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            multiple
+            value={initialValue}
+        />
+    );
+
+    const datePicker = screen.getAllByRole('generic')[1];
+    const textInputs = within(datePicker).getAllByRole('textbox');
+    const dateInput = textInputs[0];
+    const monthInput = textInputs[1];
+    const yearInput = textInputs[2];
+    const dateLabel = within(datePicker).getByText('Day');
+    const monthLabel = within(datePicker).getByText('Month');
+    const yearLabel = within(datePicker).getByText('Year');
+
+    expect(textInputs.length).toEqual(3);
+
+    expect(dateInput).toHaveValue(initialValue.split('/')[0]);
+    expect(monthInput).toHaveValue(initialValue.split('/')[1]);
+    expect(yearInput).toHaveValue(initialValue.split('/')[2]);
+
+    expect(dateInput).toHaveAttribute('id', `${id}-day`);
+    expect(monthInput).toHaveAttribute('id', `${id}-month`);
+    expect(yearInput).toHaveAttribute('id', `${id}-year`);
+
+    expect(dateInput).toHaveClass('ds_input', 'ds_input--fixed-2', 'js-datepicker-date');
+    expect(monthInput).toHaveClass('ds_input', 'ds_input--fixed-2', 'js-datepicker-month');
+    expect(yearInput).toHaveClass('ds_input', 'ds_input--fixed-4', 'js-datepicker-year');
+
+    expect(dateLabel).toHaveClass('ds_label');
+    expect(monthLabel).toHaveClass('ds_label');
+    expect(yearLabel).toHaveClass('ds_label');
+
+    expect(dateLabel).toHaveAttribute('for', dateInput.id);
+    expect(monthLabel).toHaveAttribute('for', monthInput.id);
+    expect(yearLabel).toHaveAttribute('for', yearInput.id);
+});
+
+test('passing additional props', () => {
+    render(
+        <DatePicker
+            id={id}
+            label={labelText}
+            data-test="foo"
+        />
+    )
+
+    const datePicker = screen.getAllByRole('generic')[1];
+    expect(datePicker?.dataset.test).toEqual('foo');
+});