@scottish-government/designsystem-react 0.0.0

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

@@ -0,0 +1,56 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Metadata, {MetadataItem} from './page-metadata';
+
+const name = 'Directorate';
+const value = 'Equality, Inclusion and Human Rights Directorate';
+
+test('metadata renders correctly', () => {
+    render(
+        <Metadata>
+            <MetadataItem name={name}>
+                {value}
+            </MetadataItem>
+        </Metadata>
+    );
+
+    const metadata = document.querySelector('.ds_metadata');
+    const metadataItem = document.querySelector('.ds_metadata__item');
+    const metadataItemKey = screen.getByRole('term');
+    const metadataItemValue = screen.getByRole('definition');
+
+    expect(metadata).toBeInTheDocument();
+    expect(metadataItem).toBeInTheDocument();
+    expect(metadataItemKey).toHaveClass('ds_metadata__key');
+    expect(metadataItemKey.textContent).toEqual(name);
+    expect(metadataItemValue).toHaveClass('ds_metadata__value');
+    expect(metadataItemValue.textContent).toEqual(value);
+});
+
+test('inline metadata', () => {
+    render(
+        <Metadata inline>
+            <MetadataItem name={name}>
+                {value}
+            </MetadataItem>
+        </Metadata>
+    );
+
+    const metadata = document.querySelector('.ds_metadata');
+    expect(metadata).toHaveClass('ds_metadata--inline');
+});
+
+test('passing additional props', () => {
+    render(
+        <Metadata data-test="foo">
+            <MetadataItem data-test="bar" name="Last updated">
+                21/04/2020
+            </MetadataItem>
+        </Metadata>
+    )
+
+    const metadata = document.querySelector('.ds_metadata');
+    const metadataItem = document.querySelector('.ds_metadata__item');
+    expect(metadata?.dataset.test).toEqual('foo');
+    expect(metadataItem?.dataset.test).toEqual('bar');
+});

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

@@ -0,0 +1,39 @@
+export const MetadataItem: React.FC<SGDS.Component.Metadata.Item> = ({
+    children,
+    name,
+    ...props
+}) => {
+    return (
+        <div className="ds_metadata__item"
+            {...props}
+        >
+            <dt className="ds_metadata__key">{name}</dt>{' '}
+            <dd className="ds_metadata__value">
+                {children}
+            </dd>
+        </div>
+    );
+};
+
+const Metadata: React.FC<SGDS.Component.Metadata> = ({
+    children,
+    inline,
+    ...props
+}) => {
+    return (
+        <dl
+            className={[
+                'ds_metadata',
+                inline && 'ds_metadata--inline',
+            ].join(' ')}
+            {...props}
+        >
+            {children}
+        </dl>
+    );
+};
+
+Metadata.displayName = 'Metadata';
+MetadataItem.displayName = 'MetadataItem';
+
+export default Metadata;

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

@@ -0,0 +1,67 @@
+import { test, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import PhaseBanner from './phase-banner';
+
+const text = 'This is a new service. Your feedback will help us to improve it.';
+const defaultText = 'This is a new service';
+
+test('inset text renders correctly', () => {
+    render(
+        <PhaseBanner>
+            {text}
+        </PhaseBanner>
+    );
+
+    const phaseBanner = document.querySelector('.ds_phase-banner');
+    const phaseBannerContent = phaseBanner?.querySelector('.ds_phase-banner__content');
+    const phaseBannerWrapper = phaseBannerContent?.parentNode;
+    const phaseBannerText = phaseBannerContent?.querySelector('.ds_phase-banner__text');
+
+    expect(phaseBanner).toBeInTheDocument();
+    expect(phaseBanner?.tagName).toEqual('DIV');
+    expect(phaseBannerWrapper).toHaveClass('ds_wrapper');
+    expect(phaseBannerWrapper.tagName).toEqual('DIV');
+    expect(phaseBannerContent.tagName).toEqual('P');
+    expect(phaseBannerText.tagName).toEqual('SPAN');
+    expect(phaseBannerText.textContent).toEqual(text);
+});
+
+test('phase banner with default text', () => {
+    render(
+        <PhaseBanner>
+        </PhaseBanner>
+    );
+
+    const phaseBanner = document.querySelector('.ds_phase-banner');
+    const phaseBannerContent = phaseBanner?.querySelector('.ds_phase-banner__content');
+    const phaseBannerText = phaseBannerContent?.querySelector('.ds_phase-banner__text');
+
+    expect(phaseBannerText?.textContent).toEqual(defaultText);
+});
+
+test('phase banner with phase tag', () => {
+    const phase = 'Beta';
+
+    render(
+        <PhaseBanner phaseName={phase}></PhaseBanner>
+    );
+
+    const phaseBanner = document.querySelector('.ds_phase-banner');
+    const phaseBannerTag = phaseBanner?.querySelector('.ds_phase-banner__tag');
+
+    expect(phaseBannerTag).toBeInTheDocument();
+    expect(phaseBannerTag.tagName).toEqual('SPAN');
+    expect(phaseBannerTag).toHaveClass('ds_tag', 'ds_phase-banner__tag');
+    expect(phaseBannerTag.textContent).toEqual(phase);
+});
+
+test('passing additional props', () => {
+    render(
+        <PhaseBanner data-test="foo">
+            This is a new service. Your <a href="#feedback">feedback</a> will help us to improve it.
+        </PhaseBanner>
+    )
+
+    const phaseBanner = document.querySelector('.ds_phase-banner');
+    expect(phaseBanner?.dataset.test).toEqual('foo');
+});

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

@@ -0,0 +1,27 @@
+import Tag from "../tag/tag";
+
+const PhaseBanner: React.FC<SGDS.Component.PhaseBanner> = ({
+    children,
+    phaseName,
+    ...props
+}) => {
+    return (
+        <div
+            className="ds_phase-banner"
+            {...props}
+        >
+            <div className="ds_wrapper">
+                <p className="ds_phase-banner__content">
+                    {phaseName && <Tag title={phaseName} className="ds_phase-banner__tag" />}
+                    <span className="ds_phase-banner__text">
+                        {children || "This is a new service"}
+                    </span>
+                </p>
+            </div>
+        </div>
+    )
+}
+
+PhaseBanner.displayName = 'PhaseBanner';
+
+export default PhaseBanner;

package/src/components/question/question.test.tsx

@@ -0,0 +1,69 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Question from './question';
+
+test('question renders correctly (basic q, just a wrapper, invalid example)', () => {
+    render(
+        <Question>
+        </Question>
+    );
+
+    const questionElement = document.querySelector('.ds_question');
+    expect(questionElement).toBeInTheDocument();
+    expect(questionElement?.tagName).toEqual('DIV');
+});
+
+test('fieldset question with legend', () => {
+    const legendText = 'My legend';
+
+    render(
+        <Question tagName="fieldset" legend={legendText}>
+        </Question>
+    );
+
+    const questionElement = screen.getByRole('group');
+    const legendElement = within(questionElement).getByText(legendText);
+    expect(questionElement?.tagName).toEqual('FIELDSET');
+    expect(legendElement.tagName).toEqual('LEGEND');
+});
+
+test('question with hint text', () => {
+    const hintText = 'My hint text';
+
+    render(
+        <Question hintText={hintText}>
+        </Question>
+    );
+
+    const hintTextElement = screen.getByRole('paragraph');
+    const firstQuestionChild = document.querySelector('.ds_question')?.childNodes[0]
+    expect(hintTextElement).toHaveClass('ds_hint-text');
+    expect(hintTextElement.textContent).toEqual(hintText);
+    expect(hintTextElement).toBe(firstQuestionChild);
+});
+
+test('question with error', () => {
+    const errorMessage = 'My error message';
+
+    render(
+        <Question error errorMessage={errorMessage}>
+        </Question>
+    );
+
+    const questionElement = document.querySelector('.ds_question');
+    const errorMessageElement = questionElement.querySelector('.ds_question__error-message');
+
+    expect(questionElement).toHaveClass('ds_question--error');
+    expect(errorMessageElement).toBeInTheDocument();
+    expect(errorMessageElement.textContent).toEqual(errorMessage);
+});
+
+test('passing additional props', () => {
+    render(
+        <Question data-test="foo">
+        </Question>
+    )
+
+    const questionElement = document.querySelector('.ds_question');
+    expect(questionElement?.dataset.test).toEqual('foo');
+});

package/src/components/question/question.tsx

@@ -0,0 +1,33 @@
+import ErrorMessage from '../error-message/error-message';
+import HintText from '../../common/hint-text';
+import WrapperTag from '../../common/wrapper-tag';
+
+const Question: React.FC<SGDS.Component.Question> = function ({
+    children,
+    error,
+    errorMessage,
+    hintText,
+    legend,
+    tagName = 'div',
+    ...props
+}) {
+    return (
+        <WrapperTag
+            tagName={tagName}
+            className={[
+                'ds_question',
+                error && 'ds_question--error'
+            ].join(' ')}
+            {...props}
+        >
+            {legend && <legend>{legend}</legend>}
+            {hintText && <HintText text={hintText} />}
+            {error && errorMessage && <ErrorMessage text={errorMessage} />}
+            {children}
+        </WrapperTag>
+    );
+};
+
+Question.displayName = 'Question';
+
+export default Question;

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

@@ -0,0 +1,190 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import RadioGroup, { Radio } from './radio-button';
+
+test('radio 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',
+        },
+        {
+            id: 'none',
+            label: 'I do not receive any of these benefits',
+        }
+    ];
+    const groupName = "foo"
+
+    render(
+        <RadioGroup name={groupName} items={items} />
+    );
+
+    const radios = screen.getAllByRole('radio');
+    const groupContainer = radios[0].parentNode.parentNode;
+    expect(radios.length).toEqual(items.length);
+    expect(groupContainer).toHaveClass('ds_radios', 'ds_field-group');
+});
+
+test('inline radio group', () => {
+    const items = [
+        {
+            id: 'radio-yes',
+            label: 'Yes'
+        },
+        {
+            id: 'radio-no',
+            label: 'No'
+        }
+    ];
+    const groupName = "yesno"
+
+    render(
+        <RadioGroup inline name={groupName} items={items} />
+    );
+
+
+    const radio = screen.getAllByRole('radio')[0];
+    const groupContainer = radio.parentNode.parentNode;
+    expect(groupContainer).toHaveClass('ds_field-group--inline');
+});
+
+test('radio group passes all expected item params', () => {
+    const onBlurFn = vi.fn();
+    const onChangeFn = vi.fn();
+    const groupName = "foo"
+
+    render(
+        <RadioGroup name={groupName} small items={[
+            {
+                checked: true,
+                exclusive: true,
+                hintText: 'hint text',
+                id: 'myid',
+                label: 'label text',
+                onBlur: {onBlurFn},
+                onChange: {onChangeFn},
+                small: true
+            }
+        ]}/>
+    );
+
+    const radio = screen.getByRole('radio');
+    const radioContainer = radio.parentNode;
+    const hintText = screen.getByText('hint text');
+
+    expect(radio).toHaveAttribute('checked');
+    expect(radio).toHaveAttribute('name', groupName);
+    expect(radio.id).toEqual('myid');
+    expect(radioContainer).toHaveClass('ds_radio--small');
+    expect(hintText).toBeInTheDocument();
+    expect(radio).toHaveAttribute('aria-describedby', hintText.id);
+
+    // fireEvent.blur(radio);
+    // expect(onBlurFn).toHaveBeenCalled();
+
+    // fireEvent.click(radio);
+    // expect(onChangeFn).toHaveBeenCalled();
+});
+
+test('individual radio renders correctly', () => {
+    render(
+        <Radio name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+    const radioContainer = radio.parentNode;
+    const label = screen.getByText('Pension Credit');
+
+    expect(radioContainer).toHaveClass('ds_radio');
+    expect(radio.tagName).toEqual('INPUT');
+    expect(radio).toHaveAttribute('type', 'radio');
+    expect(radio.id).toEqual('pensioncredit');
+    expect(radio).toHaveAttribute('name', 'benefitType');
+    expect(radio).toHaveClass('ds_radio__input');
+    expect(label).toHaveAttribute('for', radio.id);
+    expect(radio).not.toHaveAttribute('aria-describedby');
+    expect(label).toHaveClass('ds_radio__label');
+});
+
+test('checked radio', () => {
+    render(
+        <Radio name="benefitType" checked label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    expect(radio).toHaveAttribute('checked')
+});
+
+test('radio with blur fn', () => {
+    const onBlurFn = vi.fn();
+
+    render(
+        <Radio onBlur={onBlurFn} name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    fireEvent.blur(radio);
+
+    expect(onBlurFn).toHaveBeenCalled();
+});
+
+test('radio with change fn', () => {
+    const onChangeFn = vi.fn();
+
+    render(
+        <Radio onChange={onChangeFn} name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    fireEvent.click(radio);
+
+    expect(onChangeFn).toHaveBeenCalled();
+});
+
+test('radio with hint text', () => {
+    render(
+        <Radio hintText="hint text" name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const hintText = screen.getByText('hint text');
+    const radio = screen.getByRole('radio');
+
+    expect(hintText).toBeInTheDocument();
+    expect(radio).toHaveAttribute('aria-describedby', hintText.id);
+});
+
+test('small radio', () => {
+    render(
+        <Radio small name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+    const radioContainer = radio.parentNode;
+
+    expect(radioContainer).toHaveClass('ds_radio--small');
+});
+
+test('passing additional props', () => {
+    render(
+        <RadioGroup data-test="foo" items={[{
+            id: 'universal-credit',
+            label: 'Universal Credit'
+        }]} />
+    );
+
+    const radios = screen.getAllByRole('radio');
+    const groupContainer = radios[0]?.parentNode?.parentNode;
+    expect(groupContainer?.dataset.test).toEqual('foo');
+});

package/src/components/radio-button/radio-button.tsx

@@ -0,0 +1,88 @@
+import HintText from '../../common/hint-text';
+
+export const Radio: React.FC<SGDS.Component.RadioButton> = ({
+    checked,
+    hintText,
+    id,
+    label,
+    name,
+    onBlur,
+    onChange,
+    small
+}) => {
+    const hintTextId = `hint-text-${id}`;
+
+    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_radio',
+                small && 'ds_radio--small'
+            ].join(' ')}>
+            <input
+                aria-describedby={hintText ? hintTextId : undefined}
+                className="ds_radio__input"
+                defaultChecked={!!checked}
+                id={id}
+                name={name}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                type="radio" />
+            <label
+                className="ds_radio__label"
+                htmlFor={id}
+            >{label}</label>
+            {hintText && <HintText id={hintTextId} text={hintText} />}
+        </div>
+    );
+};
+
+const RadioGroup: React.FC<SGDS.Component.RadioButton.Group> = ({
+    inline,
+    items,
+    name,
+    small,
+    ...props
+}) => {
+    return (
+        <div
+            className={[
+                'ds_radios',
+                'ds_field-group',
+                inline && 'ds_field-group--inline'
+            ].join(' ')}
+            {...props}
+        >
+
+            {items && items.map((item, index: number) => (
+                <Radio
+                    checked={item.checked}
+                    hintText={item.hintText}
+                    id={item.id}
+                    key={'radio' + index}
+                    label={item.label}
+                    name={name}
+                    onBlur={item.onBlur}
+                    onChange={item.onChange}
+                    small={small || item.small}
+                />
+            ))}
+        </div>
+    )
+};
+
+Radio.displayName = 'Radio';
+RadioGroup.displayName = 'RadioGroup';
+
+export default RadioGroup;