@scottish-government/designsystem-react 0.0.0

package/src/components/aspect-box/aspect-box.test.tsx

@@ -0,0 +1,81 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import AspectBox from './aspect-box';
+
+test('aspect box renders correctly', () => {
+    render(
+        <AspectBox>
+            <img src="./highland-cow.jpg" alt="" />
+        </AspectBox>
+    );
+
+    const image = document.querySelector('img');
+    const imageContainer = image?.parentNode;
+
+    expect(image).toHaveClass('ds_aspect-box__inner');
+    expect(imageContainer).toHaveClass('ds_aspect-box');
+});
+
+test('1:1 ratio', () => {
+    render(
+        <AspectBox ratio="1:1">
+            <img src="./highland-cow.jpg" alt="" />
+        </AspectBox>
+    );
+
+    const image = document.querySelector('img');
+    const imageContainer = image?.parentNode;
+
+    expect(imageContainer).toHaveClass('ds_aspect-box--square');
+});
+
+test('square ratio', () => {
+    render(
+        <AspectBox ratio="square">
+            <img src="./highland-cow.jpg" alt="" />
+        </AspectBox>
+    );
+
+    const image = document.querySelector('img');
+    const imageContainer = image?.parentNode;
+
+    expect(imageContainer).toHaveClass('ds_aspect-box--square');
+});
+
+test('4:3 ratio', () => {
+    render(
+        <AspectBox ratio="4:3">
+            <img src="./highland-cow.jpg" alt="" />
+        </AspectBox>
+    );
+
+    const image = document.querySelector('img');
+    const imageContainer = image?.parentNode;
+
+    expect(imageContainer).toHaveClass('ds_aspect-box--43');
+});
+
+test('21:9 ratio', () => {
+    render(
+        <AspectBox ratio="21:9">
+            <img src="./highland-cow.jpg" alt="" />
+        </AspectBox>
+    );
+
+    const image = document.querySelector('img');
+    const imageContainer = image?.parentNode;
+
+    expect(imageContainer).toHaveClass('ds_aspect-box--219');
+});
+
+test('passing additional props', () => {
+    render(
+        <AspectBox data-test="foo">
+            <img src="./highland-cow.jpg" alt="" />
+        </AspectBox>
+    );
+
+    const image = document.querySelector('img');
+    const imageContainer = image?.parentNode;
+    expect(imageContainer?.dataset.test).toEqual('foo');
+});

package/src/components/aspect-box/aspect-box.tsx

@@ -0,0 +1,57 @@
+import React, { Children, useEffect, useRef } from 'react';
+// @ts-ignore
+import DSAspectBox from '@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback';
+
+const AspectBox: React.FC<SGDS.Component.AspectBox> = ({
+    children,
+    ratio,
+    ...props
+}) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSAspectBox(ref.current).init();
+        }
+    }, [ref]);
+
+    function processChild(child: any) {
+        if (['img', 'svg', 'picture'].includes(child.type)) {
+            return React.cloneElement(child, { className: 'ds_aspect-box__inner' });
+        }
+    }
+
+    let ratioClassName;
+    switch (ratio) {
+        case '1:1':
+        case 'square':
+            ratioClassName = 'ds_aspect-box--square'
+            break;
+        case '4:3':
+            ratioClassName = 'ds_aspect-box--43'
+            break;
+        case '21:9':
+            ratioClassName = 'ds_aspect-box--219'
+            break;
+        default:
+            ratioClassName = ''
+            break;
+    }
+
+    return (
+        <div
+            className={[
+                'ds_aspect-box',
+                `${ratioClassName}`
+            ].join(' ')}
+            ref={ref}
+            {...props}
+        >
+            {Children.map(children, child => processChild(child))}
+        </div>
+    );
+};
+
+AspectBox.displayName = 'AspectBox';
+
+export default AspectBox;

package/src/components/back-to-top/back-to-top.test.tsx

@@ -0,0 +1,45 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import BackToTop from './back-to-top';
+
+test('back to top renders correctly', () => {
+    render(
+        <BackToTop data-test="foo" />
+    );
+
+    const button = screen.getByRole('link');
+    const container = button.parentElement;
+    const icon = within(button).getByRole('img', {hidden: true});
+
+    // check button
+    expect(button).toHaveClass('ds_back-to-top__button');
+    expect(button).toHaveAttribute('href', '#page-top');
+    expect(button.tagName).toEqual('A');
+
+    // check container
+    expect(container).toHaveClass('ds_back-to-top');
+
+    // check icon
+    expect(icon).toHaveClass('ds_icon', 'ds_back-to-top__icon');
+    expect(icon).toHaveAttribute('aria-hidden', 'true');
+});
+
+test('renders with custom href', () => {
+    render(
+        <BackToTop href="#foo" />
+    );
+
+    // check href
+    const button = screen.getByRole('link');
+    expect(button).toHaveAttribute('href', '#foo');
+});
+
+test('passing additional props', () => {
+    render(
+        <BackToTop data-test="foo" />
+    );
+
+    const button = screen.getByRole('link');
+    const container = button.parentElement;
+    expect(container?.dataset.test).toEqual('foo');
+});

package/src/components/back-to-top/back-to-top.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSBackToTop from '@scottish-government/design-system/src/components/back-to-top/back-to-top';
+import Icon from '../../common/icon';
+
+const BackToTop: React.FC<SGDS.Component.BackToTop> = ({
+    href = '#page-top',
+    ...props
+}) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSBackToTop(ref.current).init();
+        }
+    }, [ref]);
+
+    return (
+        <div
+            className='ds_back-to-top'
+            ref={ref}
+            {...props}
+        >
+            <a href={href} className="ds_back-to-top__button">Back to top
+                <Icon className="ds_back-to-top__icon" icon="arrow_upward"/>
+            </a>
+       </div>
+    );
+};
+
+BackToTop.displayName = 'BackToTop';
+
+export default BackToTop;

package/src/components/breadcrumbs/breadcrumbs.test.tsx

@@ -0,0 +1,77 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Breadcrumbs from './breadcrumbs';
+
+const items = [
+    { href: 'home', title: 'Home' },
+    { href: 'category', title: 'Category' },
+    { title: 'Page' }
+];
+
+test('renders correctly', () => {
+    render(
+        <Breadcrumbs items={items} />
+    );
+
+    const nav = screen.getByRole('navigation');
+    const list = within(nav).getByRole('list');
+    const listItems = within(list).getAllByRole('listitem');
+
+    // check nav
+    expect(nav).toHaveAttribute('aria-label', 'Breadcrumb');
+
+    // check list
+    expect(list.tagName).toEqual('OL');
+    expect(list).toHaveClass('ds_breadcrumbs');
+
+    // check items
+    expect(listItems.length).toEqual(items.length);
+
+    listItems.forEach((item, index) => {
+        expect(item).toHaveClass('ds_breadcrumbs__item');
+
+        const link = within(item).queryByRole('link');
+
+        if (index + 1 < listItems.length) {
+            expect(link).toBeDefined();
+            expect(link).toHaveClass('ds_breadcrumbs__link');
+        } else {
+            expect(link).toBeNull();
+        }
+    });
+
+    // check href matches correct item
+    const categoryLink = within(list).getByRole('link', { name: 'Category' });
+    expect(categoryLink).toHaveAttribute('href', 'category');
+});
+
+test('renders with last item hidden', () => {
+    render(
+        <Breadcrumbs
+            hideLastItem
+            items={items}
+        />
+    );
+
+    // check still 3 items
+    const list = screen.getByRole('list');
+    const listItems = within(list).getAllByRole('listitem');
+    expect(listItems.length).toEqual(3);
+
+    // check last item is hidden
+    const pageCrumb = within(list).getByText('Page');
+    expect(pageCrumb).toHaveClass('visually-hidden');
+    expect(pageCrumb.tagName).toEqual('LI');
+});
+
+test('passing additional props', () => {
+    render(
+        <Breadcrumbs
+            items={items}
+            data-test="foo"
+        />
+    );
+
+    const nav = screen.getByRole('navigation');
+    expect(nav.dataset.test).toEqual('foo');
+});

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,53 @@
+const Breadcrumb: React.FC<SGDS.Component.Breadcrumbs.Item> = ({
+    hidden,
+    href,
+    title
+}) => {
+    return (
+        <li
+            className={[
+                'ds_breadcrumbs__item',
+                hidden && 'visually-hidden'
+            ].join(' ')}
+        >
+
+            {href ? (<a className="ds_breadcrumbs__link" href={href}>
+                {title}
+            </a>) : (title)}
+        </li>
+    );
+};
+
+/**
+ * @param {boolean} hideLastItem
+ * @param {Array} items
+ * @param {Object} props - Properties for the element
+ * @returns {JSX.Element} - The element
+ */
+const Breadcrumbs: React.FC<SGDS.Component.Breadcrumbs> = ({
+    hideLastItem,
+    items,
+    ...props
+}) => {
+    return (
+        <nav
+            aria-label="Breadcrumb"
+            {...props}
+        >
+            <ol className="ds_breadcrumbs">
+                {items && items.map((item, index: number) => (
+                    <Breadcrumb
+                        title={item.title}
+                        href={item.href}
+                        hidden={(hideLastItem) && index + 1 === items.length}
+                        key={'breadcrumb' + index}
+                    />
+                ))}
+            </ol>
+        </nav>
+    );
+};
+
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export default Breadcrumbs;

package/src/components/button/button.test.tsx

@@ -0,0 +1,125 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Button from './button';
+
+test('renders correctly', () => {
+    render(
+        <Button>Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('ds_button');
+    expect(button).toHaveAttribute('type', 'button');
+    expect(button.tagName).toEqual('BUTTON');
+    expect(button.textContent).toEqual('Button text');
+});
+
+test('secondary button', () => {
+    render(
+        <Button buttonStyle="secondary">Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('ds_button--secondary');
+});
+
+test('disabled button', () => {
+    render(
+        <Button disabled>Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+});
+
+test('fixed-width button', () => {
+    render(
+        <Button width="fixed">Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('ds_button--fixed');
+});
+
+test('max-width button', () => {
+    render(
+        <Button width="max">Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('ds_button--max');
+});
+
+test('small button', () => {
+    render(
+        <Button small>Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('ds_button--small');
+});
+
+test('button with icon', () => {
+    render(
+        <Button icon="chevron_right">Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    const icon = within(button).getByRole('img', { hidden: true });
+
+    expect(button).toHaveClass('ds_button--has-icon');
+    expect(icon).toBeInTheDocument();
+});
+
+test('button with icon (left)', () => {
+    render(
+        <Button icon="chevron_left" iconLeft>Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveClass('ds_button--has-icon', 'ds_button--has-icon--left');
+});
+
+test('button only icon', () => {
+    render(
+        <Button icon="search" iconOnly>Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    const buttonText = within(button).getByText('Button text');
+
+    expect(button).not.toHaveClass('ds_button--has-icon');
+    expect(buttonText).toHaveClass('visually-hidden');
+});
+
+test('link styled as button', () => {
+    render(
+        <Button href="#foo">Button text</Button>
+    );
+
+    const button = screen.getByRole('link');
+    expect(button.tagName).toEqual('A');
+    expect(button).toHaveAttribute('href', '#foo');
+    expect(button).not.toHaveAttribute('type');
+});
+
+test('button styled as link', () => {
+    render(
+        <Button styleAsLink>Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('ds_link');
+    expect(button).not.toHaveClass('ds_button');
+    expect(button.tagName).toEqual('BUTTON');
+});
+
+test('passing additional props', () => {
+    render(
+        <Button data-test="foo">Button text</Button>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button.dataset.test).toEqual('foo');
+});

package/src/components/button/button.tsx

@@ -0,0 +1,48 @@
+import Icon from '../../common/icon';
+import ScreenReaderText from '../../common/screen-reader-text';
+import WrapperTag from '../../common/wrapper-tag';
+
+const Button: React.FC<SGDS.Component.Button> = ({
+    children,
+    buttonStyle,
+    icon,
+    iconLeft,
+    iconOnly = false,
+    href,
+    small,
+    styleAsLink,
+    type = 'button',
+    width,
+    ...props
+}) => {
+    // determine which HTML tag to use
+    let tagName = 'button';
+    if (href) {
+        tagName = 'a';
+    }
+
+    return (
+        <WrapperTag
+            tagName={tagName}
+            className={[
+                !styleAsLink ? 'ds_button' : 'ds_link',
+                width && `ds_button--${width}`,
+                buttonStyle && `ds_button--${buttonStyle}`,
+                small && 'ds_button--small',
+                (icon && !iconOnly) ? 'ds_button--has-icon' : undefined,
+                iconLeft && 'ds_button--has-icon--left'
+            ].join(' ')}
+            href={href}
+            {...(tagName === 'button' ? { type: type } : {})}
+            {...props}
+        >
+            {iconOnly ? <ScreenReaderText>{children}</ScreenReaderText> : children}
+
+            {icon && <Icon icon={icon}/>}
+        </WrapperTag>
+    )
+};
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/components/checkbox/checkbox.test.tsx

@@ -0,0 +1,180 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import CheckboxGroup, { Checkbox } from './checkbox';
+
+test('checkbox group renders correct children', () => {
+    const items = [
+        {
+            id: 'universal-credit',
+            label: 'Universal Credit',
+            checked: true
+        },
+        {
+            id: 'pensioncredit',
+            label: 'Pension Credit'
+        },
+        {
+            id: 'jsa',
+            label: 'Income-based Job Seeker\'s Allowance',
+        },
+        {
+            exclusive: true,
+            id: 'none',
+            label: 'No, I do not receive any of these benefits',
+        }
+    ];
+
+    render(
+        <CheckboxGroup items={items} />
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    const groupContainer = checkboxes[0].parentNode.parentNode;
+    expect(checkboxes.length).toEqual(items.length);
+    expect(groupContainer).toHaveClass('ds_checkboxes', 'ds_field-group');
+});
+
+test('checkbox group passes all expected item params', () => {
+    const onBlurFn = vi.fn();
+    const onChangeFn = vi.fn();
+
+    render(
+        <CheckboxGroup small items={[
+            {
+                checked: true,
+                exclusive: true,
+                hintText: 'hint text',
+                id: 'myid',
+                label: 'label text',
+                onBlur: {onBlurFn},
+                onChange: {onChangeFn},
+                small: true
+            }
+        ]}/>
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    const checkboxContainer = checkbox.parentNode;
+    const hintText = screen.getByText('hint text');
+
+    expect(checkbox).toHaveAttribute('data-behaviour', 'exclusive');
+    expect(checkbox).toHaveAttribute('checked');
+    expect(checkbox.id).toEqual('myid');
+    expect(checkboxContainer).toHaveClass('ds_checkbox--small');
+    expect(hintText).toBeInTheDocument();
+    expect(checkbox).toHaveAttribute('aria-describedby', hintText.id);
+
+    // fireEvent.blur(checkbox);
+    // expect(onBlurFn).toHaveBeenCalled();
+
+    // fireEvent.click(checkbox);
+    // expect(onChangeFn).toHaveBeenCalled();
+});
+
+test('individual checkbox renders correctly', () => {
+    render(
+        <Checkbox label="Pension Credit" id="pensioncredit" />
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    const checkboxContainer = checkbox.parentNode;
+    const label = screen.getByText('Pension Credit');
+
+    expect(checkboxContainer).toHaveClass('ds_checkbox');
+    expect(checkbox.tagName).toEqual('INPUT');
+    expect(checkbox).toHaveAttribute('type', 'checkbox');
+    expect(checkbox.id).toEqual('pensioncredit');
+    expect(checkbox).toHaveAttribute('name', checkbox.id);
+    expect(checkbox).toHaveClass('ds_checkbox__input');
+    expect(label).toHaveAttribute('for', checkbox.id);
+    expect(checkbox).not.toHaveAttribute('aria-describedby');
+    expect(label).toHaveClass('ds_checkbox__label');
+});
+
+test('checked checkbox', () => {
+    render(
+        <Checkbox checked label="Pension Credit" id="pensioncredit" />
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+
+    expect(checkbox).toHaveAttribute('checked')
+});
+
+test('exclusive checkbox', () => {
+    render(
+        <Checkbox exclusive label="Pension Credit" id="pensioncredit" />
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    const separator = checkbox.parentNode?.previousSibling;
+
+    expect(checkbox).toHaveAttribute('data-behaviour', 'exclusive');
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveClass('ds_checkbox-separator');
+    expect(separator.textContent).toEqual('or');
+});
+
+test('checkbox with blur fn', () => {
+    const onBlurFn = vi.fn();
+
+    render(
+        <Checkbox onBlur={onBlurFn} label="Pension Credit" id="pensioncredit" />
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+
+    fireEvent.blur(checkbox);
+
+    expect(onBlurFn).toHaveBeenCalled();
+});
+
+test('checkbox with change fn', () => {
+    const onChangeFn = vi.fn();
+
+    render(
+        <Checkbox onChange={onChangeFn} label="Pension Credit" id="pensioncredit" />
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+
+    fireEvent.click(checkbox);
+
+    expect(onChangeFn).toHaveBeenCalled();
+});
+
+test('checkbox with hint text', () => {
+    render(
+        <Checkbox hintText="hint text" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const hintText = screen.getByText('hint text');
+    const checkbox = screen.getByRole('checkbox');
+
+    expect(hintText).toBeInTheDocument();
+    expect(checkbox).toHaveAttribute('aria-describedby', hintText.id);
+});
+
+test('small checkbox', () => {
+    render(
+        <Checkbox small label="Pension Credit" id="pensioncredit" />
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    const checkboxContainer = checkbox.parentNode;
+
+    expect(checkboxContainer).toHaveClass('ds_checkbox--small');
+});
+
+test('passing additional props', () => {
+    render(
+        <CheckboxGroup data-test="foo" items={[{
+            id: 'universal-credit',
+            label: 'Universal Credit'
+        }]} />
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    const groupContainer = checkboxes[0]?.parentNode?.parentNode;
+    expect(groupContainer?.dataset.test).toEqual('foo');
+});