@scottish-government/designsystem-react 0.8.0 → 0.10.0-beta.0

package/src/components/Pagination/Pagination.test.tsx

@@ -54,7 +54,7 @@ test('current pagination page', () => {
         <Page
             ariaLabel={PAGE_ARIA_LABEL}
             href={PAGE_HREF}
-            current
+            isCurrent
         >{PAGE_LABEL}</Page>
     );
 

package/src/components/Pagination/Pagination.tsx

@@ -4,8 +4,8 @@ export const Page = ({
     ariaLabel,
     children,
     className,
-    current = false,
     href,
+    isCurrent = false,
     linkComponent,
     onClick
 }: SGDS.Component.Pagination.Page) => {
@@ -19,7 +19,7 @@ export const Page = ({
         const classNames = [
             'ds_pagination__link',
             className,
-            current ? 'ds_current' : undefined
+            isCurrent ? 'ds_current' : undefined
         ].join(' ');
 
         const linkProps: SGDS.LinkComponentProps = {
@@ -28,7 +28,7 @@ export const Page = ({
             onClick: handleClick
         };
 
-        if (current) {
+        if (isCurrent) {
             linkProps['aria-current'] = 'page';
         }
 
@@ -144,7 +144,7 @@ const Pagination = ({
                     <Page
                         ariaLabel={`Page ${item}`}
                         href={pattern.replace('$1', String(item))}
-                        current={item === page}
+                        isCurrent={item === page}
                         key={`pagination${index}`}
                         linkComponent={linkComponent}
                         onClick={onClick}

package/src/components/PhaseBanner/PhaseBanner.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import PhaseBanner from './PhaseBanner';
+
+const meta = {
+    title: 'Components/Phase banner',
+    component: PhaseBanner,
+    argTypes: {
+        children: argTypes.children(),
+        phaseName: {
+            description: 'The text for the banner\'s tag component.',
+            type: 'string'
+        }
+    },
+    args: {
+        phaseName: 'Beta'
+    }
+} satisfies Meta<typeof PhaseBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        phaseName: 'Beta'
+    },
+};
+
+export const CustomContent: Story = {
+    args: {
+        phaseName: 'Beta',
+        children: <>This is a new service. Your <a href="#foo">feedback</a> will help us to improve it.</>
+    },
+    render: (args: any) => (
+        <PhaseBanner {...args}></PhaseBanner>
+    )
+};

package/src/components/Question/Question.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Question from './Question';
+import TextInput from '../TextInput/TextInput';
+import Checkbox from '../Checkbox/Checkbox';
+import CheckboxGroup from '../Checkbox/CheckboxGroup';
+
+const meta = {
+    title: 'Components/Question',
+    component: Question,
+    argTypes: {
+        errorMessage: argTypes.errorMessage(),
+        hasError: argTypes.hasError(),
+        hintText: argTypes.hintText(),
+        legend: {
+            desctiption: 'Text for a question\'s legend element (if the question uses a fieldset)',
+            type: 'string'
+        },
+        tagName: {
+            control: { type: 'select' },
+            description: 'HTML tag name to use for the question',
+            options: ['div', 'fieldset'],
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        children: <TextInput
+            id="text-input-question"
+            label="First name"
+        />,
+        tagName: 'div'
+    }
+} satisfies Meta<typeof Question>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const ErrorQuestion: Story = {
+    args: {
+        errorMessage: 'This is a required field',
+        hasError: true
+    }
+}
+
+export const FieldsetQuestion: Story = {
+    args: {
+        children: <CheckboxGroup>
+            <Checkbox
+            checked
+            id="universal-credit"
+            label="Universal Credit"
+            />
+            <Checkbox
+            id="pension-credit"
+            label="Pension Credit"
+            />
+            <Checkbox
+            id="jsa"
+            label="Income-based Job Seeker's Allowance"
+            />
+            <Checkbox
+            isExclusive
+            id="none"
+            label="No, I do not receive any of these benefits"
+            />
+        </CheckboxGroup>,
+        errorMessage: 'You must select at least one option',
+        hasError: true,
+        hintText: 'Select all that apply.',
+        legend: 'Do you receive any of these benefits',
+        tagName: 'fieldset'
+    }
+}

package/src/components/Question/Question.tsx

@@ -24,7 +24,7 @@ const Question = function ({
         >
             {legend && <legend>{legend}</legend>}
             {hintText && <HintText text={hintText} />}
-            {hasError && errorMessage && <ErrorMessage text={errorMessage} />}
+            {hasError && errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
             {children}
         </WrapperTag>
     );

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import RadioButton from './RadioButton';
+
+const meta = {
+    title: 'Components/Radio button',
+    component: RadioButton,
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'The radio is checked on load'
+        },
+        hintText: argTypes.hintText(),
+        id: argTypes.id(),
+        label: argTypes.label(),
+        name: { type: 'string' },
+        onBlur: argTypes.onBlur(),
+        onChange: argTypes.onChange(),
+        isSmall: argTypes.isSmall()
+    },
+    args: {
+        id: 'arrears-radio',
+        label: 'Arrears',
+        name: 'radio-name',
+    }
+} satisfies Meta<typeof RadioButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const KitchenSink: Story = {
+    args: {
+        checked: true,
+        hintText: 'This means you\'re paid for the period coming up, e.g. the month ahead',
+        isSmall: false
+    }
+};
+
+export const SmallRadio: Story = {
+    args: {
+        isSmall: true
+    }
+};
+
+export const Blur: Story = {
+    args: {
+        onBlur: () => {console.log('radio button blur')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('radio'));
+        await userEvent.tab();
+    }
+}
+
+export const Change: Story = {
+    args: {
+        onChange: () => {console.log('radio button change')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('radio'));
+    }
+}

package/src/components/RadioButton/RadioButton.test.tsx

@@ -12,6 +12,7 @@ test('individual radio renders correctly', () => {
     const label = screen.getByText('Pension Credit');
 
     expect(radioContainer).toHaveClass('ds_radio');
+    expect(radioContainer).not.toHaveClass('ds_radio--small');
     expect(radio.tagName).toEqual('INPUT');
     expect(radio).toHaveAttribute('type', 'radio');
     expect(radio.id).toEqual('pensioncredit');
@@ -74,7 +75,7 @@ test('radio with hint text', () => {
 
 test('small radio', () => {
     render(
-        <RadioButton small name="benefitType" label="Pension Credit" id="pensioncredit" />
+        <RadioButton isSmall name="benefitType" label="Pension Credit" id="pensioncredit" />
     );
 
     const radio = screen.getByRole('radio');

package/src/components/RadioButton/RadioButton.tsx

@@ -1,14 +1,17 @@
+import { useContext } from 'react';
+
 import HintText from '../../common/HintText';
+import { CheckboxRadioContext } from '../../utils/context';
 
 const RadioButton = ({
     checked,
     hintText,
     id,
+    isSmall,
     label,
     name,
     onBlur,
-    onChange,
-    small
+    onChange
 }: SGDS.Component.RadioButton) => {
     const hintTextId = `hint-text-${id}`;
 
@@ -24,11 +27,14 @@ const RadioButton = ({
         }
     }
 
+    isSmall = isSmall || useContext(CheckboxRadioContext).isSmall;
+    name = name || useContext(CheckboxRadioContext).name;
+
     return (
         <div
             className={[
                 'ds_radio',
-                small && 'ds_radio--small'
+                isSmall && 'ds_radio--small'
             ].join(' ')}>
             <input
                 aria-describedby={hintText ? hintTextId : undefined}

package/src/components/RadioButton/RadioGroup.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import RadioButton from '../RadioButton/RadioButton';
+import RadioGroup from './RadioGroup';
+
+const meta = {
+    title: 'Components/Radio group',
+    component: RadioGroup,
+    argTypes: {
+        isInline: {
+            control: 'boolean',
+            description: 'Whether to display the radio buttons in the group inline'
+        },
+        name: {type: 'string'},
+        isSmall: argTypes.isSmall(),
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <RadioButton
+                id="flat-radio"
+                label="Flat"
+            />
+            <RadioButton
+                id="bungalow-radio"
+                label="Bungalow"
+            />
+            <RadioButton
+                id="cottage-radio"
+                label="Cottage"
+            />
+            <RadioButton
+                id="terraced-radio"
+                label="Terraced house"
+            />
+            <RadioButton
+                id="semi-radio"
+                label="Semi-detached house"
+            />
+            <RadioButton
+                id="detached-radio"
+                label="Detached house"
+            />
+        </>,
+        name: 'propertyType'
+    }
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const SmallRadios: Story = {
+    args: {
+        isSmall: true
+    }
+};
+
+export const InlineRadios: Story = {
+    args: {
+        children: <>
+            <RadioButton
+                id="yes-radio"
+                label="Yes"
+            />
+            <RadioButton
+                id="no-radio"
+                label="No"
+            />
+        </>,
+        isInline: true
+    }
+};

package/src/components/RadioButton/RadioGroup.test.tsx

@@ -22,7 +22,7 @@ test('radio group passes all expected item params', () => {
     const RADIO_NAME = 'radioname';
 
     render(
-        <RadioGroup name={RADIO_NAME} small>
+        <RadioGroup name={RADIO_NAME} isSmall>
             <RadioButton id="banana" />
             <p>foo</p>
         </RadioGroup>
@@ -36,7 +36,7 @@ test('radio group passes all expected item params', () => {
 
 test('inline radio group', () => {
     render(
-        <RadioGroup inline>
+        <RadioGroup isInline>
             <RadioButton id="banana" />
         </RadioGroup>
     );

package/src/components/RadioButton/RadioGroup.tsx

@@ -1,34 +1,27 @@
-import React, { Children } from 'react';
-import RadioButton from './RadioButton';
+import React from 'react';
+import { CheckboxRadioContext } from '../../utils/context';
 
 const RadioGroup = ({
     children,
     className,
-    inline,
+    isInline,
+    isSmall,
     name,
-    small,
     ...props
 }: SGDS.Component.RadioButton.Group) => {
-    function processChild(child: any) {
-        if (child && child.type === RadioButton) {
-            return React.cloneElement(child as React.ReactElement<SGDS.Component.RadioButton>, { small: small, name: name });
-        } else {
-            return child;
-        }
-    }
-
     return (
         <div
             className={[
                 'ds_radios',
                 'ds_field-group',
-                inline && 'ds_field-group--inline',
+                isInline && 'ds_field-group--inline',
                 className
             ].join(' ')}
             {...props}
         >
-
-            {Children.map(children, child => processChild(child))}
+            <CheckboxRadioContext value={{ isSmall: !!isSmall, name }}>
+                {children}
+            </CheckboxRadioContext>
         </div>
     );
 };

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Select from './Select';
+
+const meta = {
+    title: 'Components/Select',
+    component: Select,
+    argTypes: {
+        defaultValue: {type: 'string'},
+        errorMessage: argTypes.errorMessage(),
+        hasError: argTypes.hasError(),
+        hintText: argTypes.hintText(),
+        id: argTypes.id(),
+        label: argTypes.label(),
+        name: { type: 'string' },
+        onBlur: argTypes.onBlur(),
+        onChange: argTypes.onChange(),
+        placeholder: {type: 'string'},
+        width: argTypes.inputWidth(),
+        children: argTypes.children()
+    },
+    args: {
+        id: 'component',
+        label: 'Choose a component',
+        children: <>
+            <option value="accordion">
+                Accordion
+            </option>
+            <option value="breadcrumbs">
+                Breadcrumbs
+            </option>
+            <option value="button">
+                Button
+            </option>
+        </>
+    }
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const KitchenSink: Story = {
+    args: {
+        defaultValue: 'button',
+        errorMessage: 'This field is required',
+        hasError: true,
+        hintText: 'Choose a component to learn more about how it works',
+        id: 'kitchensink',
+        placeholder: 'Choose',
+        width: 'fluid-one-third'
+    }
+};
+
+export const Blur: Story = {
+    args: {
+        onBlur: () => {console.log('select blur')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('combobox'));
+        await userEvent.tab();
+    }
+}
+
+export const Change: Story = {
+    args: {
+        onChange: () => {console.log('select change')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('combobox'));
+        await userEvent.selectOptions(canvas.getByRole('combobox'), ['button'])
+    }
+}

package/src/components/Select/Select.tsx

@@ -40,7 +40,7 @@ const Select = function ({
         <>
             <label className="ds_label" htmlFor={id}>{label}</label>
             {hintText && <HintText id={hintTextId} text={hintText} />}
-            {errorMessage && <ErrorMessage id={errorMessageId} text={errorMessage}/>}
+            {errorMessage && <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>}
             <div
                 className={[
                     "ds_select-wrapper",

package/src/components/SequentialNavigation/SequentialNavigation.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SequentialNavigation from './SequentialNavigation';
+
+const meta = {
+    title: 'Components/Sequential navigation',
+    component: SequentialNavigation,
+    argTypes: {
+        ariaLabel: argTypes.ariaLabel({ description: 'Text to use for an aria-label attribute on the nav element' }),
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <SequentialNavigation.Previous href="#previous">
+                Apply for or renew a Blue Badge
+            </SequentialNavigation.Previous>
+            <SequentialNavigation.Next href="#next">
+                Eligibility: who can have one?
+            </SequentialNavigation.Next>
+        </>
+    }
+} satisfies Meta<typeof SequentialNavigation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/SideNavigation/SideNavigation.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import SideNavigation from './SideNavigation';
+
+const meta = {
+    title: 'Components/Side navigation',
+    component: SideNavigation,
+    argTypes: {
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <SideNavigation.List isRoot>
+                <SideNavigation.Item
+                    isCurrent
+                    href="#apples"
+                    title="Apples"
+                >
+                </SideNavigation.Item>
+                <SideNavigation.Item
+                    href="#bananas"
+                    title="Bananas"
+                />
+                <SideNavigation.Item
+                    href="#cherries"
+                    title="Cherries"
+                />
+                <SideNavigation.Item
+                    href="#dates"
+                    title="Dates"
+                />
+            </SideNavigation.List>
+        </>
+    }
+} satisfies Meta<typeof SideNavigation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const NestedNavigation: Story = {
+    args: {
+        children: <>
+            <SideNavigation.List isRoot>
+                <SideNavigation.Item
+                    href="#apples"
+                    title="Apples"
+                >
+                <SideNavigation.List>
+                    <SideNavigation.Item
+                        href="#green-apples"
+                        title="Green apples"
+                    >
+                    <SideNavigation.List>
+                        <SideNavigation.Item
+                            isCurrent
+                            href="#bramley"
+                            title="Bramley"
+                        />
+                        <SideNavigation.Item
+                            href="#granny-smith"
+                            title="Granny smith"
+                        />
+                    </SideNavigation.List>
+                    </SideNavigation.Item>
+                    <SideNavigation.Item
+                        href="#red-apples"
+                        title="Red apples"
+                    />
+                </SideNavigation.List>
+                </SideNavigation.Item>
+                <SideNavigation.Item
+                    href="#bananas"
+                    title="Bananas"
+                />
+                <SideNavigation.Item
+                    href="#cherries"
+                    title="Cherries"
+                />
+                <SideNavigation.Item
+                    href="#dates"
+                    title="Dates"
+                />
+            </SideNavigation.List>
+        </>
+    }
+};

package/src/components/SideNavigation/SideNavigation.test.tsx

@@ -10,7 +10,7 @@ test('side navigation renders correctly', () => {
                     <SideNavigation.List>
                         <SideNavigation.Item href="#green-apples" title="Green apples">
                             <SideNavigation.List>
-                                <SideNavigation.Item href="#bramley" title="Bramley" current/>
+                                <SideNavigation.Item href="#bramley" title="Bramley" isCurrent/>
                                 <SideNavigation.Item href="#granny-smith" title="Granny smith"/>
                             </SideNavigation.List>
                         </SideNavigation.Item>
@@ -60,7 +60,7 @@ test('side nav link renders correctly', () => {
 
 test('current side nav item without link renders correctly', () => {
     render(
-        <SideNavigation.Item href="#green-apples" title="Green apples" current />
+        <SideNavigation.Item href="#green-apples" title="Green apples" isCurrent />
     );
 
     const item = screen.getByRole('listitem');

package/src/components/SideNavigation/SideNavigation.tsx

@@ -18,7 +18,7 @@ const SideNavigationList = function ({
 const SideNavigationItem = function ({
     children,
     href,
-    current = false,
+    isCurrent = false,
     linkComponent,
     title
 }: SGDS.Component.SideNavigation.Item) {
@@ -31,7 +31,7 @@ const SideNavigationItem = function ({
                 children && 'ds_side-navigation__item--has-children'
             ].join(' ')}
         >
-            {current ?
+            {isCurrent ?
                 <span className={LINK_CLASS + ' ds_current'}>{title}</span> :
                 linkComponent ? linkComponent({ className: LINK_CLASS, href, children: title }) :
                 <a href={href} className={LINK_CLASS}>{title}</a>