@scottish-government/designsystem-react 0.10.1 → 0.11.0

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Tabs from './Tabs';
+
+const meta = {
+    title: 'Components/Tabs/Tabs.Item',
+    component: Tabs.Item,
+    argTypes: {
+        tabLabel: {
+            description: '',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        children: argTypes.children()
+    },
+    args: {
+        baseId: 'my-tabs',
+        children: [
+            <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>
+        ],
+        tabLabel: 'Courses and funding'
+    }
+} satisfies Meta<typeof Tabs.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Tag from './Tag';
 
@@ -6,12 +7,7 @@ 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'
-        },
+        colour: argTypes.tagColour(),
     },
 } satisfies Meta<typeof Tag>;
 

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

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import TaskList from './TaskList';
+
+const meta = {
+    title: 'Components/TaskList/TaskList.Group',
+    component: TaskList.Group,
+    decorators: [
+        Story => (
+            <div className="ds_task-list">
+                <ul>
+                    <Story />
+                </ul>
+            </div>
+        )
+    ],
+    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: 'Tell us about your daily living and mobility circumstances'
+    }
+} satisfies Meta<typeof TaskList.Group>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <TaskList.Group {...args}>
+            <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>
+    )
+};
+
+export const WithIntroduction: Story = {
+    args: {
+        intro: 'This information will be used to check what additional benefits you may be able to apply for.'
+    },
+    render: (args) => (
+        <TaskList.Group {...args}>
+            <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>
+    )
+};

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import TaskList from './TaskList';
+
+const meta = {
+    title: 'Components/TaskList/TaskList.Item',
+    component: TaskList.Item,
+    decorators: [
+        Story => (
+            <ul>
+                <Story />
+            </ul>
+        )
+    ],
+    argTypes: {
+        href: argTypes.href(),
+        id: {
+            description: 'The value of the task\'s id attribute',
+            type: 'string'
+        },
+        isComplete: {
+            control: 'boolean',
+            description: 'Whether the task is complete'
+        },
+        statusText: {
+            description: 'The text to use for the task\'s status tag',
+            type: 'string'
+        },
+        tagColour: argTypes.tagColour(),
+        title: {
+            description: 'The title of the task item',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
+        children: argTypes.children()
+    },
+    args: {
+        title: 'Medications'
+    }
+} satisfies Meta<typeof TaskList.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const WithTextDescription: Story = {
+    args: {
+        children: 'Tell us about any medication you need.'
+    }
+};
+
+export const WithStatusTag: Story = {
+    args: {
+        children: 'Tell us about any medication you need.',
+        statusText: 'Cannot start yet'
+    }
+};
+
+export const WithLink: Story = {
+    args: {
+        children: 'Tell us about any medication you need.',
+        href: '#medication'
+    }
+};
+
+export const Complete: Story = {
+    args: {
+        children: 'Tell us about any medication you need.',
+        isComplete: true
+    }
+};

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

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import TaskList from './TaskList';
 
 const meta = {
-    title: 'Components/Task list',
+    title: 'Components/TaskList',
     component: TaskList,
     argTypes: {
         headingId: {

package/src/components/TaskList/TaskList.test.tsx

@@ -219,10 +219,29 @@ test('task with custom link element', () => {
 });
 
 test('completed task has green tag', () => {
+    const STATUS_TEXT = 'MY STATUS TEXT';
+
+    render(
+        <TaskList.Item
+            id={TASK_ITEM.id}
+            statusText={STATUS_TEXT}
+            title={TASK_ITEM.title}
+            isComplete
+        >
+            {TASK_SUMMARY_CONTENT}
+        </TaskList.Item>
+    );
+
+    const tag = document.querySelector('.ds_tag');
+
+    expect(tag).toHaveClass('ds_tag--green');
+    expect(tag?.textContent).toEqual(STATUS_TEXT);
+});
+
+test('completed task has default text if no statusText set', () => {
     render(
         <TaskList.Item
             id={TASK_ITEM.id}
-            statusText={TASK_ITEM.statusText}
             title={TASK_ITEM.title}
             isComplete
         >
@@ -233,6 +252,7 @@ test('completed task has green tag', () => {
     const tag = document.querySelector('.ds_tag');
 
     expect(tag).toHaveClass('ds_tag--green');
+    expect(tag?.textContent).toEqual('Completed');
 });
 
 test('specific tag colour', () => {

package/src/components/TaskList/TaskList.tsx

@@ -18,6 +18,7 @@ const TaskItem = ({
 }: SGDS.Component.TaskList.Item) => {
     if (isComplete) {
         tagColour = 'green';
+        statusText = statusText || 'Completed'
     }
 
     const LINK_CLASS = 'ds_task-list__task-link';