@scottish-government/designsystem-react 0.0.0

package/src/components/select/select.test.tsx

@@ -0,0 +1,208 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Select from './select';
+
+const id = 'select-component';
+const labelText = 'choose a component';
+const options = [
+    {
+        text: 'Accordion',
+        value: 'accordion'
+    },
+    {
+        text: 'Breadcrumbs',
+        value: 'breadcrumbs'
+    },
+    {
+        text: 'Button',
+        value: 'button'
+    }
+];
+
+test('select renders correctly', () => {
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+    const selectWrapper = select.parentNode;
+    const label = selectWrapper?.previousSibling;
+    const selectArrow = select.nextSibling;
+
+    expect(select).toHaveClass('ds_select');
+    expect(select.id).toEqual(id);
+    expect(select).toHaveAttribute('name', id);
+
+    expect(selectWrapper).toHaveClass('ds_select-wrapper');
+    expect(selectWrapper.tagName).toEqual('DIV');
+
+    expect(label).toHaveClass('ds_label');
+    expect(label).toHaveAttribute('for', id);
+
+    expect(selectArrow).toHaveClass('ds_select-arrow');
+    expect(selectArrow).toHaveAttribute('aria-hidden');
+    expect(selectArrow.textContent).toEqual('');
+});
+
+test('select with width', () => {
+    const width = 'fixed-10';
+
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            width={width}
+        />
+    );
+
+    const selectWrapper = screen.getByRole('combobox').parentNode;
+    expect(selectWrapper).toHaveClass(`ds_input--${width}`);
+});
+
+test('select with hint text', () => {
+    const hintText = 'hint text';
+
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            hintText={hintText}
+        />
+    );
+
+    const hintTextEl = screen.getByText(hintText);
+    const select = screen.getByRole('combobox');
+
+    expect(hintTextEl).toBeInTheDocument();
+    expect(select).toHaveAttribute('aria-describedby', hintTextEl.id);
+});
+
+test('select with custom name', () => {
+    const name = 'foo';
+
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            name={name}
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+    expect(select).toHaveAttribute('name', name);
+});
+
+test('select with blur function', () => {
+    const onBlurFn = vi.fn();
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            onBlur={onBlurFn}
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+
+    fireEvent.blur(select);
+
+    expect(onBlurFn).toHaveBeenCalled();
+});
+
+test('select with change function', () => {
+    const onChangeFn = vi.fn();
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            onChange={onChangeFn}
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+
+    fireEvent.change(select, {target: {value: 'button'}});
+
+    expect(onChangeFn).toHaveBeenCalled();
+});
+
+test('select with placeholder option', () => {
+    const placeholder = 'foo';
+
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            placeholder={placeholder}
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+    const firstOption = select.childNodes[0];
+    expect(firstOption.textContent).toEqual(placeholder);
+    expect(firstOption).toHaveAttribute('value', '');
+});
+
+test('select with initial value', () => {
+    const initialValue = 'button';
+
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            defaultValue={initialValue}
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+    const selectedOption = [].slice.call(select.childNodes).filter(childNode => childNode.selected)[0];
+    expect(selectedOption).toHaveAttribute('value', initialValue);
+});
+
+test('select with error message', () => {
+    const errorMessage = 'This is a required field';
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            error
+            errorMessage={errorMessage}
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+    const selectWrapper = select.parentNode;
+    const errorMessageElement = screen.getByText(errorMessage);
+
+    expect(selectWrapper).toHaveClass('ds_input--error')
+    expect(select).toHaveAttribute('aria-describedby', errorMessageElement.id);
+    expect(errorMessageElement).toBeInTheDocument();
+    expect(errorMessageElement).toHaveClass('ds_question__error-message');
+});
+
+test('passing additional props', () => {
+    render(
+        <Select
+            id={id}
+            label={labelText}
+            options={options}
+            data-test="foo"
+        />
+    );
+
+    const select = screen.getByRole('combobox');
+    const selectWrapper = select.parentNode;
+    expect(selectWrapper?.dataset.test).toEqual('foo');
+});

package/src/components/select/select.tsx

@@ -0,0 +1,86 @@
+import ErrorMessage from '../error-message/error-message';
+import HintText from '../../common/hint-text';
+
+const Option: React.FC<SGDS.Component.Select.Option> = function ({
+    text,
+    value
+}) {
+    return (
+        <option value={value}>{text}</option>
+    );
+};
+
+const Select: React.FC<SGDS.Component.Select> = function ({
+    defaultValue,
+    error,
+    errorMessage,
+    hintText,
+    id,
+    label,
+    name,
+    onBlur,
+    onChange,
+    options,
+    placeholder,
+    width,
+    ...props
+}) {
+    const errorMessageId = `error-message-${id}`;
+    const hintTextId = `hint-text-${id}`;
+    const describedbys: string[] = [];
+
+    if (hintText) { describedbys.push(hintTextId) };
+    if (errorMessage) { describedbys.push(errorMessageId) };
+
+    function handleBlur(event: React.FocusEvent) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+
+    function handleChange(event: React.ChangeEvent) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+
+    return (
+        <>
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <HintText id={hintTextId} text={hintText} />}
+            {errorMessage && <ErrorMessage id={errorMessageId} text={errorMessage}/>}
+            <div
+                className={[
+                    "ds_select-wrapper",
+                    error && 'ds_input--error',
+                    width && `ds_input--${width}`,
+                ].join(' ')}
+                {...props}
+            >
+                <select
+                    aria-describedby={describedbys.join(' ')}
+                    className="ds_select"
+                    defaultValue={defaultValue}
+                    id={id}
+                    name={name || id}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                >
+                    <option value="">{placeholder}</option>
+                    {options && options.map((option, index: number) => (
+                        <Option
+                            value={option.value}
+                            text={option.text}
+                            key={`option-${index}`}
+                        />
+                    ))}
+                </select>
+                <span className="ds_select-arrow" aria-hidden="true"></span>
+            </div>
+        </>
+    );
+};
+
+Select.displayName = 'Select';
+
+export default Select;

package/src/components/sequential-navigation/sequential-navigation.test.tsx

@@ -0,0 +1,67 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import SequentialNavigation from './sequential-navigation';
+
+const nextLinkObj = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
+const prevLinkObj = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
+
+test('sequential navigation renders correctly', () => {
+    render(
+        <SequentialNavigation
+            next={nextLinkObj}
+            previous={prevLinkObj}
+        />
+    );
+
+    const sequentialNavigation = screen.getByRole('navigation');
+    const prevLink = screen.getAllByRole('link')[0];
+    const prevLinkWrapper = prevLink.parentNode;
+    const nextLink = screen.getAllByRole('link')[1];
+    const nextLinkWrapper = nextLink.parentNode;
+
+    expect(sequentialNavigation).toHaveClass('ds_sequential-nav');
+    expect(sequentialNavigation).toHaveAttribute('aria-label', 'Article navigation');
+
+    expect(prevLink).toHaveClass('ds_sequential-nav__button', 'ds_sequential-nav__button--left');
+    expect(prevLink).toHaveAttribute('href', prevLinkObj.href);
+    expect(prevLink.textContent).toEqual(prevLinkObj.title);
+    expect(prevLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--prev');
+    expect(prevLinkWrapper.tagName).toEqual('DIV');
+    expect(prevLink.childNodes[0]).toHaveAttribute('data-label', 'Previous')
+
+    expect(nextLink).toHaveClass('ds_sequential-nav__button', 'ds_sequential-nav__button--right');
+    expect(nextLink).toHaveAttribute('href', nextLinkObj.href);
+    expect(nextLink.textContent).toEqual(nextLinkObj.title);
+    expect(nextLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--next');
+    expect(nextLinkWrapper.tagName).toEqual('DIV');
+    expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next')
+});
+
+test('with custom aria label', () => {
+    const ariaLabel = 'My label';
+
+    render(
+        <SequentialNavigation
+            ariaLabel={ariaLabel}
+            next={nextLinkObj}
+            previous={prevLinkObj}
+        />
+    );
+
+    const sequentialNavigation = screen.getByRole('navigation');
+
+    expect(sequentialNavigation).toHaveAttribute('aria-label', ariaLabel);
+});
+
+test('passing additional props', () => {
+    render(
+        <SequentialNavigation
+            data-test="foo"
+            next={nextLinkObj}
+            previous={prevLinkObj}
+        />
+    );
+
+    const sequentialNavigation = screen.getByRole('navigation');
+    expect(sequentialNavigation?.dataset.test).toEqual('foo');
+});

package/src/components/sequential-navigation/sequential-navigation.tsx

@@ -0,0 +1,55 @@
+const NextLink: React.FC<SGDS.Component.SequentialNavigation.Link> = ({
+    href,
+    title
+}) => {
+    return (
+        <div
+            className="ds_sequential-nav__item  ds_sequential-nav__item--next"
+        >
+            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--right">
+                <span className="ds_sequential-nav__text" data-label="Next">
+                    {title}
+                </span>
+            </a>
+        </div>
+    );
+};
+
+const PrevLink: React.FC<SGDS.Component.SequentialNavigation.Link> = ({
+    href,
+    title,
+}) => {
+    return (
+        <div
+            className="ds_sequential-nav__item  ds_sequential-nav__item--prev"
+        >
+            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--left">
+                <span className="ds_sequential-nav__text" data-label="Previous">
+                    {title}
+                </span>
+            </a>
+        </div>
+    );
+};
+
+const SequentialNavigation: React.FC<SGDS.Component.SequentialNavigation> = ({
+    ariaLabel = 'Article navigation',
+    next,
+    previous,
+    ...props
+}) => {
+    return (
+        <nav
+            className="ds_sequential-nav"
+            aria-label={ariaLabel}
+            {...props}
+        >
+            {previous && <PrevLink href={previous.href} title={previous.title}></PrevLink>}
+            {next && <NextLink href={next.href} title={next.title}></NextLink>}
+        </nav>
+    );
+};
+
+SequentialNavigation.displayName = 'SequentialNavigation';
+
+export default SequentialNavigation;

package/src/components/side-navigation/side-navigation.test.tsx

@@ -0,0 +1,156 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import SideNavigation, { List, Link } from './side-navigation';
+
+const items = [
+    {
+        title: 'Apples',
+        href: '#apples',
+        items: [
+            {
+                title: 'Green apples',
+                href: '#green-apples',
+                items: [
+                    {
+                        title: 'Bramley',
+                        current: true
+                    },
+                    {
+                        title: 'Granny Smith',
+                        href: '#granny-smith'
+                    }
+                ]
+            },
+            {
+                title: 'Red apples',
+                href: '#red-apples'
+            }
+        ]
+    },
+    {
+        title: 'Bananas',
+        href: '#bananas'
+    },
+    {
+        title: 'Cherries',
+        href: '#cherries'
+    },
+    {
+        title: 'Dates',
+        href: '#dates'
+    }
+];
+
+test('side navigation renders correctly', () => {
+    render(
+        <SideNavigation items={items} />
+    );
+
+    const sideNavigation = screen.getByRole('navigation');
+    const toggle = within(sideNavigation).getByRole('checkbox');
+    const label = document.querySelector('.ds_side-navigation__expand');
+    const rootList = within(sideNavigation).getAllByRole('list')[0];
+
+    expect(sideNavigation).toHaveClass('ds_side-navigation');
+    expect(sideNavigation).toHaveAttribute('aria-label', 'Sections');
+
+    expect(toggle).toHaveClass('fully-hidden', 'js-toggle-side-navigation');
+    expect(toggle).toHaveAttribute('id', 'show-side-navigation');
+    expect(toggle).toHaveAttribute('aria-controls', 'side-navigation-root');
+
+    expect(label).toHaveClass('ds_link');
+    expect(label).toHaveAttribute('for', toggle.id);
+    expect(label.textContent).toEqual('Show all Pages in this section');
+
+    expect(rootList).toHaveAttribute('id', 'side-navigation-root');
+
+    // some specifics of this case
+    expect(rootList.children.length).toEqual(4);
+    expect(document.querySelectorAll('.ds_side-navigation__link').length).toEqual(8);
+    expect(document.querySelectorAll('.ds_side-navigation__list').length).toEqual(3);
+});
+
+test('side nav link renders correctly', () => {
+    render(
+        <Link title="Green apples" href="#green-apples" />
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('link');
+
+    expect(item).toHaveClass('ds_side-navigation__item');
+
+    expect(link).toHaveClass('ds_side-navigation__link');
+    expect(link).toHaveAttribute('href', '#green-apples');
+    expect(link.textContent).toEqual('Green apples');
+});
+
+test('current side nav item without link renders correctly', () => {
+    render(
+        <Link title="Green apples" href="#green-apples" current />
+    );
+
+    const item = screen.getByRole('listitem');
+    const span = within(item).getByText('Green apples');
+
+    expect(span).toHaveClass('ds_side-navigation__link', 'ds_current');
+    expect(span.tagName).toEqual('SPAN');
+});
+
+test('side nav link with children', () => {
+    render(
+        <Link title="Green apples" href="#green-apples" items={[{
+            title: 'Bramley',
+            href: '#bramley'
+        },
+        {
+            title: 'Granny Smith',
+            href: '#granny-smith'
+        }]} />
+    );
+
+    const childList = screen.getByRole('list');
+    const childItem = screen.getAllByRole('listitem')[1];
+    const childLink = within(childItem).getByRole('link');
+
+    expect(childList).toHaveClass('ds_side-navigation__list');
+    expect(childList.children.length).toEqual(2);
+
+    // check properties of first child link
+    expect(childItem).toHaveClass('ds_side-navigation__item');
+    expect(childLink).toHaveClass('ds_side-navigation__link');
+    expect(childLink).toHaveAttribute('href', '#bramley');
+    expect(childLink.textContent).toEqual('Bramley');
+});
+
+test('side nav list renders correctly', () => {
+    const items = [
+        {
+            title: 'Bramley',
+            href: '#bramley'
+        },
+        {
+            title: 'Granny Smith',
+            href: '#granny-smith'
+        }
+    ];
+
+    render(
+        <List items={items}/>
+    );
+
+    const list = screen.getByRole('list');
+    const item = screen.getAllByRole('listitem')[0];
+    const link = within(item).getByRole('link');
+
+    expect(list).toHaveClass('ds_side-navigation__list');
+    expect(list.tagName).toEqual('UL');
+
+    expect(list.children.length).toEqual(items.length);
+
+    // check properties of first link
+    expect(item).toHaveClass('ds_side-navigation__item');
+    expect(link).toHaveClass('ds_side-navigation__link');
+    expect(link).toHaveAttribute('href', '#bramley');
+    expect(link.textContent).toEqual('Bramley');
+});

package/src/components/side-navigation/side-navigation.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSSideNavigation from '@scottish-government/design-system/src/components/side-navigation/side-navigation';
+
+export const List: React.FC<SGDS.Component.SideNavigation.List> = function ({
+    items,
+    root
+}) {
+    return (
+        <ul className="ds_side-navigation__list"
+            id={root ? 'side-navigation-root' : undefined }
+        >
+            {items && items.map((item, index: number) => (
+                <Link
+                    title={item.title}
+                    href={item.href}
+                    items={item.items}
+                    current={item.current}
+                    key={'sidenavitem' + index}
+                />
+            ))}
+        </ul>
+    );
+};
+
+export const Link: React.FC<SGDS.Component.SideNavigation.Link> = function ({
+    current = false,
+    href,
+    items,
+    title
+}) {
+    return (
+        <li
+            className={[
+                'ds_side-navigation__item',
+                items && 'ds_side-navigation__item--has-children'
+            ].join(' ')}
+        >
+            {current ?
+                <span className="ds_side-navigation__link  ds_current">{title}</span> :
+                <a href={href} className="ds_side-navigation__link">{title}</a>
+            }
+
+            {items && <List items={items} />}
+        </li>
+    );
+};
+
+const SideNavigation: React.FC<SGDS.Component.SideNavigation> = function ({
+    children,
+    items,
+    ...props
+}) {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSSideNavigation(ref.current).init();
+        }
+    }, [ref]);
+
+    return (
+        <nav
+            aria-label="Sections"
+            className="ds_side-navigation"
+            data-module="ds-side-navigation"
+            ref={ref}
+            {...props}
+        >
+            <input type="checkbox" className="fully-hidden  js-toggle-side-navigation" id="show-side-navigation" aria-controls="side-navigation-root" />
+            <label className="ds_side-navigation__expand  ds_link" htmlFor="show-side-navigation">
+                <span className="visually-hidden">Show all</span> Pages in this section
+                <span className="ds_side-navigation__expand-indicator"></span>
+            </label>
+
+            {items && <List root items={items} />}
+        </nav>
+    );
+};
+
+SideNavigation.displayName = 'SideNavigation';
+Link.displayName = 'SideNavLink';
+List.displayName = 'SideNavList';
+
+export default SideNavigation;