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

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import Table from './Table';
+
+const meta = {
+    title: 'Components/Table',
+    component: Table,
+    argTypes: {
+        smallscreen: {
+            description: 'The behaviour to use on small screens',
+            children: { control: false },
+            control: { type: 'select' },
+            options: [undefined,'boxes', 'scrolling'],
+            type: 'string',
+        }
+    },
+    args: {
+        children: <>
+            <caption>Public holidays in 2020</caption>
+            <thead>
+                <tr>
+                    <th scope="col">
+                        Date
+                    </th>
+                    <th scope="col">
+                        Day
+                    </th>
+                    <th scope="col">
+                        Holiday
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>
+                        10 April
+                    </td>
+                    <td>
+                        Friday
+                    </td>
+                    <td>
+                        Good Friday
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        8 May
+                    </td>
+                    <td>
+                        Friday
+                    </td>
+                    <td>
+                        Early May Bank Holiday
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        25 May
+                    </td>
+                    <td>
+                        Monday
+                    </td>
+                    <td>
+                        Spring Bank Holiday
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        3 August
+                    </td>
+                    <td>
+                        Monday
+                    </td>
+                    <td>
+                        Summer Bank Holiday
+                    </td>
+                </tr>
+            </tbody>
+        </>
+    }
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const Boxes: Story = {
+    args: {smallscreen: 'boxes'}
+};
+
+export const Scrolling: Story = {
+    args: {smallscreen: 'scrolling'}
+};

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Tabs from './Tabs';
+
+const meta = {
+    title: 'Components/Tabs',
+    component: Tabs,
+    argTypes: {
+        baseId: {
+            description: 'A string that IDs for subcomponents are derived from.',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        headingLevel: argTypes.headingLevel({
+            description: 'Heading level to use for the tab container\'s title',
+        }),
+        isBorderless: {
+            description: 'Whether to give each tab a border',
+            control: 'boolean'
+        },
+        isManual: {
+            control: 'boolean',
+            description: 'Whether to require manual tab activation',
+            type: 'boolean'
+        },
+        title: {
+            description: 'The title of the tab list',
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    args: {
+        baseId: 'my-tabs',
+        children: [
+            <Tabs.Item key="foo" tabLabel="Courses and funding">
+                <h3>Search for training courses and funding</h3>
+                <p>A wide range of training courses for your employees are available.</p>
+                <p>Opportunities include distance learning, short courses and vocational training.</p>
+                <p><a href="#">Visit My World of Work to search for training courses</a>.</p>
+                <p>You can also <a href="#">search for training courses, and funding towards training</a>.</p>
+            </Tabs.Item>,
+            <Tabs.Item key="bar" tabLabel="Choosing apprenticeships">
+                <h3>Choosing an apprenticeship for your business</h3>
+                <p>Apprenticeships can help you address skills gaps in your business. The government provides help with the cost of training an apprentice.</p>
+                <p>There are 3 different types of apprenticeship:</p>
+                <ul>
+                    <li>Foundation Apprenticeships let school or college students do short-term work experience at your business as part of a qualification</li>
+                    <li>Modern Apprenticeships let your new or current employees gain a qualification while working in a paid role at your business</li>
+                    <li>Graduate Apprenticeships let your new or current employees gain a degree while working in a paid role at your business</li>
+                </ul>
+                <p>You can find more information on the <a href="#">apprenticeships.scot</a> website.</p>
+            </Tabs.Item>,
+            <Tabs.Item key="baz" tabLabel="Extra skills support">
+                <h3>Extra skills support</h3>
+                <p>The <a href="#">Skills for Growth</a> service can offer skills advice to businesses with fewer than 250 employees.</p>
+                <p>Businesses of any size can get skills advice by completing a <a href="#">skills support request form</a>.</p>
+                <p>Businesses of any size can also get skills advice by calling Skills Development Scotland on 0800 783 6000.</p>
+            </Tabs.Item>
+        ],
+        title: 'My tabs'
+    }
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const ManualActivation: Story = {
+    args: {
+        isManual: true
+    }
+};
+
+export const NoBorder: Story = {
+    args: {
+        isBorderless: true
+    }
+};
+
+export const DifferentHeadingLevel: Story = {
+    args: {
+        headingLevel: 'h4'
+    }
+};

package/src/components/Tabs/Tabs.test.tsx

@@ -1,7 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import Tabs from './Tabs';
-import slugify from '../../utils/slugify';
 
 test('tab container renders correctly', () => {
     render(
@@ -62,13 +61,12 @@ test('tab container renders correctly', () => {
     //expect(tabPanelOne.tabIndex).toEqual(0);
 
     // tab panels have ID
-    expect(tabPanelOne).toHaveAttribute('id');
-    expect(tabPanelTwo).toHaveAttribute('id');
+    expect(tabPanelOne.id).not.toEqual(tabPanelTwo.id);
 });
 
 test('non-bordered tabs', () => {
     render(
-        <Tabs data-testid="tabcontainer" bordered={false}>
+        <Tabs data-testid="tabcontainer" isBorderless>
             <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
                 <div data-testid="tabpanel1content">Content one</div>
             </Tabs.Item>
@@ -146,8 +144,8 @@ test('custom baseID', () => {
     // default title slugified to part of the ID
     expect(tabHeading).toHaveAttribute('id', `${BASE_ID}-heading`);
     // generated IDs using the slug of the tab title
-    expect(tabPanelOne).toHaveAttribute('id', `${BASE_ID}-tab-1`);
-    expect(tabPanelTwo).toHaveAttribute('id', `${BASE_ID}-tab-2`);
+    expect(tabPanelOne.id.indexOf(BASE_ID)).toBeGreaterThan(-1);
+    expect(tabPanelTwo.id.indexOf(BASE_ID)).toBeGreaterThan(-1);
 });
 
 test('tab with and without specific ID attribute', () => {
@@ -169,13 +167,13 @@ test('tab with and without specific ID attribute', () => {
     const tabPanelOne = screen.getByTestId('tabpanel1');
     const tabPanelTwo = screen.getByTestId('tabpanel2');
 
-    expect(tabPanelOne).toHaveAttribute('id', `${BASE_ID}-${slugify(TAB_LABEL)}`);
+    expect(tabPanelOne).toHaveAttribute('id');
     expect(tabPanelTwo).toHaveAttribute('id', TAB_ID);
 });
 
 test('with manual activation', () => {
     render(
-        <Tabs data-testid="tabcontainer" manual>
+        <Tabs data-testid="tabcontainer" isManual>
             <Tabs.Item title="Tab 1" data-testid="tabpanel1">
                 <div data-testid="tabpanel1content">Content one</div>
             </Tabs.Item>

package/src/components/Tabs/Tabs.tsx

@@ -1,11 +1,10 @@
-import React, { Children, useEffect, useRef } from 'react';
+import React, { Children, useEffect, useRef, useId } from 'react';
 import WrapperTag from '../../common/WrapperTag';
 // @ts-ignore
 import DSTabs from '@scottish-government/design-system/src/components/tabs/tabs';
-import slugify from '../../utils/slugify';
 
 const TabItem = ({
-    bordered,
+    isBorderless,
     children,
     className,
     id,
@@ -16,7 +15,7 @@ const TabItem = ({
         <div
             className={[
                 'ds_tabs__content',
-                bordered && 'ds_tabs__content--bordered',
+                !isBorderless && 'ds_tabs__content--bordered',
                 className
             ].join(' ')}
             id={id}
@@ -40,11 +39,11 @@ const TabListItem = ({
 
 const Tabs = ({
     baseId = 'tabs',
-    bordered = true,
     children,
     className,
     headingLevel = 'h2',
-    manual = false,
+    isBorderless,
+    isManual = false,
     title = 'Contents',
     ...props
 }: SGDS.Component.Tabs) => {
@@ -63,8 +62,8 @@ const Tabs = ({
 
         if (thisChild && thisChild.type === TabItem) {
             return React.cloneElement(thisChild, {
-                bordered: bordered,
-                id: thisChild.props.id || `${baseId}-${slugify(thisChild.props.tabLabel)}`,
+                isBorderless: !!isBorderless,
+                id: thisChild.props.id || `${baseId}-${useId()}`,
             });
         }
     });
@@ -79,7 +78,7 @@ const Tabs = ({
         <div
             className={[
                 'ds_tabs',
-                manual && 'ds_tabs--manual',
+                isManual && 'ds_tabs--manual',
                 className
             ].join(' ')}
             ref={ref}

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import Tag from './Tag';
+
+const meta = {
+    title: 'Components/Tag',
+    component: Tag,
+    argTypes: {
+        colour: {
+            control: { type: 'select' },
+            description: 'The tag colour to use',
+            options: ['', 'blue', 'green', 'grey', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow'],
+            type: 'string'
+        },
+    },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: 'Status',
+    },
+};

package/src/components/TaskList/TaskList.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import TaskList from './TaskList';
+
+const meta = {
+    title: 'Components/Task list',
+    component: TaskList,
+    argTypes: {
+        headingId: {
+            description: 'ID of the task list\'s heading element',
+            type: 'string'
+        },
+        linkComponent: argTypes.linkComponent(),
+        title: {
+            description: 'The title of the task list',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        children: argTypes.children()
+    },
+    args: {
+        title: 'Application incomplete'
+    }
+} satisfies Meta<typeof TaskList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <TaskList {...args}>
+            <TaskList.Item
+                href="#conditions"
+                id="task-conditions"
+                isComplete
+                statusText="Completed"
+                title="Conditions"
+            >
+                Tell us about your conditions, symptoms and any sensory issues you have.
+            </TaskList.Item>
+            <TaskList.Item
+                href="#in-progress"
+                id="task-medications"
+                statusText="In progress"
+                title="Medications"
+            >
+                Tell us about any medication you need.
+            </TaskList.Item>
+            <TaskList.Item
+                id="task-contacts"
+                statusText="Cannot start yet"
+                title="Contacts and supporting information"
+            >
+                Share any supporting documents and provide details of people we can talk to about you.
+            </TaskList.Item>
+        </TaskList>
+    )
+};
+
+export const Groups: Story = {
+    render: (args) => (
+        <TaskList {...args}>
+            <TaskList.Group title="Provide your health details">
+                <TaskList.Item
+                href="#conditions"
+                id="task-conditions"
+                isComplete
+                statusText="Completed"
+                title="Conditions"
+                >
+                Tell us about your conditions, symptoms and any sensory issues you have.
+                </TaskList.Item>
+                <TaskList.Item
+                href="#in-progress"
+                id="task-medications"
+                isComplete
+                statusText="Completed"
+                title="Medications"
+                >
+                Tell us about any medication you need.
+                </TaskList.Item>
+                <TaskList.Item
+                href="#contacts"
+                id="task-contacts"
+                isComplete
+                statusText="Completed"
+                title="Contacts and supporting information"
+                >
+                Share any supporting documents and provide details of people we can talk to about you.
+                </TaskList.Item>
+            </TaskList.Group>
+            <TaskList.Group
+                intro="This information will be used to check what additional benefits you may be able to apply for."
+                title="Tell us about your daily living and mobility circumstances"
+            >
+                <TaskList.Item
+                href="#preparing-food"
+                id="task-preparing-food"
+                statusText="In progress"
+                tagColour="grey"
+                title="Preparing food"
+                >
+                Questions about your ability to prepare a simple meal safely and any help you need to do this.
+                </TaskList.Item>
+                <TaskList.Item
+                href="#taking-nutrition"
+                id="task-taking-nutrition"
+                statusText="Not started"
+                tagColour="grey"
+                title="Taking nutrition"
+                >
+                Questions about your ability to eat and drink and any help you need to do this.
+                </TaskList.Item>
+                <TaskList.Item
+                href="#managing-therapy"
+                id="task-managing-therapy"
+                statusText="Not started"
+                tagColour="grey"
+                title="Managing therapy or monitoring a health condition"
+                >
+                Questions about any help you need to monitor changes in your health condition, take medication or do therapy at home.
+                </TaskList.Item>
+            </TaskList.Group>
+        </TaskList>
+    )
+};

package/src/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import TextInput from './TextInput';
+
+const meta = {
+    title: 'Components/Text input',
+    component: TextInput,
+    argTypes: {
+        buttonIcon: {
+            control: { type: 'select' },
+            description: 'Name of the icon to use',
+            options: ['ArrowUpward', 'CalendarToday', 'Cancel', 'CheckCircle', 'ChevronLeft', 'ChevronRight', 'Close', 'Description', 'DoubleChevronLeft', 'DoubleChevronRight', 'Error', 'ExpandLess', 'ExpandMore', 'List', 'Menu', 'PriorityHigh', 'Search'],
+            type: 'string'
+        },
+        buttonText: {
+            desctiption: 'Text content for the button',
+            type: 'string'
+        },
+        countThreshold: argTypes.countThreshold(),
+        currencySymbol: {
+            description: 'Currency symbol to use (default is \'£\')',
+            type: 'string'
+        },
+        errorMessage: argTypes.errorMessage(),
+        hasButton: {
+            control: 'boolean',
+            description: 'Whether the component has an associated button',
+            type: 'boolean'
+        },
+        isCurrency: {
+            control: 'boolean',
+            description: 'Whether the component is a currency field',
+            type: 'boolean'
+        },
+        hasError: argTypes.hasError(),
+        hintText: argTypes.hintText(),
+        id: argTypes.id(),
+        label: argTypes.label(),
+        maxlength: argTypes.maxlength(),
+        name: {type: 'string'},
+        onBlur: argTypes.onBlur(),
+        onChange: argTypes.onChange(),
+        placeholder: {type: 'string'},
+        type: {
+            control: { type: 'select' },
+            options: ['date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week'],
+            type: {
+                required: true,
+                name: 'string'
+            }
+        },
+        value: {type: 'string'},
+        width: argTypes.inputWidth()
+    },
+    args: {
+        id: 'first-name',
+        label: 'First name'
+    }
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const KitchenSink: Story = {
+    args: {
+        countThreshold: 50,
+        errorMessage: 'This field is required',
+        hasError: true,
+        hintText: 'Please enter your first or given name',
+        id: 'kitchensink',
+        maxlength: 20,
+        value: 'Cholmondley',
+        width: 'fixed-20'
+    }
+};
+
+export const Currency: Story = {
+    args: {
+        currencySymbol: '$',
+        id: 'price',
+        isCurrency: true,
+        label: 'Price per unit',
+        placeholder: '0.00',
+        step: '.01',
+        type: 'number',
+        width: 'fluid-one-quarter'
+    }
+}
+
+export const WithButton: Story = {
+    args: {
+        buttonIcon: 'Search',
+        buttonText: 'Search',
+        hasButton: true,
+        id: 'withbutton'
+    }
+}
+
+export const Blur: Story = {
+    args: {
+        onBlur: () => {console.log('text input blur')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('textbox'));
+        await userEvent.tab();
+    }
+}
+
+export const Change: Story = {
+    args: {
+        onChange: () => {console.log('text input change')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('textbox'));
+        await userEvent.type(canvas.getByRole('textbox'),'banana');
+        await userEvent.tab();
+    }
+}

package/src/components/TextInput/TextInput.test.tsx

@@ -101,7 +101,7 @@ test('text input with currency', () => {
         <TextInput
             id={INPUT_ID}
             label={LABEL_TEXT}
-            currency
+            isCurrency
         />
     );
 
@@ -120,8 +120,8 @@ test('text input with custom currency symbol', () => {
         <TextInput
             id={INPUT_ID}
             label={LABEL_TEXT}
-            currency
             currencySymbol={CURRENCY_SYMBOL}
+            isCurrency
         />
     );
 

package/src/components/TextInput/TextInput.tsx

@@ -13,7 +13,7 @@ const TextInput = ({
     className,
     countThreshold,
     width,
-    currency,
+    isCurrency,
     currencySymbol,
     errorMessage,
     hasButton = false,
@@ -33,7 +33,7 @@ const TextInput = ({
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
-    const inputWrapperClasses = `${hasButton ? 'ds_input__wrapper  ds_input__wrapper--has-icon' : ''} ${currency ? 'ds_currency-wrapper' : ''}`;
+    const inputWrapperClasses = `${hasButton ? 'ds_input__wrapper  ds_input__wrapper--has-icon' : ''} ${isCurrency ? 'ds_currency-wrapper' : ''}`;
     const describedbys: string[] = [];
 
     if (hintText) { describedbys.push(hintTextId) };
@@ -64,9 +64,9 @@ const TextInput = ({
         >
             <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>}
             <ConditionalWrapper
-                condition={hasButton || typeof currency !== 'undefined' && currency}
+                condition={hasButton || typeof isCurrency !== 'undefined' && isCurrency}
                 wrapper={(children: React.JSX.Element) => <div className={inputWrapperClasses} data-symbol={currencySymbol}>{children}</div>}
             >
                 <input
@@ -88,7 +88,7 @@ const TextInput = ({
                     type={type}
                     {...props}
                 />
-                {hasButton && (buttonText || buttonIcon) && <Button iconOnly icon={buttonIcon}>{buttonText}</Button>}
+                {hasButton && (buttonText || buttonIcon) && <Button isIconOnly icon={buttonIcon}>{buttonText}</Button>}
             </ConditionalWrapper>
         </ConditionalWrapper>
     );