@scottish-government/designsystem-react 0.3.0-beta.0 → 0.4.0

package/src/components/task-list/task-list.test.tsx

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import TaskList, {Task, TaskGroup} from './task-list';
+import TaskList from './task-list';
 
 const taskListHeadingText = 'Application incomplete';
 
@@ -23,27 +23,27 @@ test('task list renders correctly', () => {
         <TaskList
             title={taskListHeadingText}
         >
-            <Task
+            <TaskList.Item
                 id={tasks[0].id}
                 statusText={tasks[0].statusText}
                 title={tasks[0].title}
             >
                 Tell us about your conditions, symptoms and any sensory issues you have.
-            </Task>
-            <Task
+            </TaskList.Item>
+            <TaskList.Item
                 id={tasks[1].id}
                 statusText={tasks[1].statusText}
                 title={tasks[1].title}
             >
                 Tell us about any medication you need.
-            </Task>
-            <Task
+            </TaskList.Item>
+            <TaskList.Item
                 id={tasks[2].id}
                 statusText={tasks[2].statusText}
                 title={tasks[2].title}
             >
                 Share any supporting documents and provide details of people we can talk to about you.
-            </Task>
+            </TaskList.Item>
         </TaskList>
     );
 
@@ -96,35 +96,34 @@ test('task list with completed tasks', () => {
         <TaskList
             title={taskListHeadingText}
         >
-            <Task
+            <TaskList.Item
                 id={tasks[0].id}
                 statusText={tasks[0].statusText}
                 title={tasks[0].title}
                 isComplete
             >
                 Tell us about your conditions, symptoms and any sensory issues you have.
-            </Task>
-            <Task
+            </TaskList.Item>
+            <TaskList.Item
                 id={tasks[1].id}
                 statusText={tasks[1].statusText}
                 title={tasks[1].title}
                 isComplete
             >
                 Tell us about any medication you need.
-            </Task>
-            <Task
+            </TaskList.Item>
+            <TaskList.Item
                 id={tasks[2].id}
                 statusText={tasks[2].statusText}
                 title={tasks[2].title}
             >
                 Share any supporting documents and provide details of people we can talk to about you.
-            </Task>
+            </TaskList.Item>
         </TaskList>
     );
 
     const taskListStatus = screen.getByRole('navigation');
     const taskListStatus1 = taskListStatus.children[0];
-
     const taskListStatusLink = within(taskListStatus).getByRole('link');
 
     expect(taskListStatus1.textContent).toEqual('You have completed 2 of 3 sections.');
@@ -133,52 +132,52 @@ test('task list with completed tasks', () => {
 
 test('task renders correctly', () => {
     render(
-        <Task
+        <TaskList.Item
             id={taskItem.id}
             statusText={taskItem.statusText}
             title={taskItem.title}
         >
             {taskSummaryContent}
-        </Task>
+        </TaskList.Item>
     );
 
     const task = screen.getByRole('listitem');
     const tag = document.querySelector('.ds_tag');
     const taskHeading = within(task).getByRole('heading');
-    const taskDetails = taskHeading.parentNode;
-    const taskSummary = taskHeading.nextSibling;
+    const taskDetails = taskHeading.parentElement;
+    const taskSummary = taskHeading.nextElementSibling;
 
     expect(task).toHaveClass('ds_task-list__task');
     expect(task).toHaveAttribute('id', taskItem.id);
 
     expect(taskDetails).toHaveClass('ds_task-list__task-details');
-    expect(taskDetails.parentNode).toEqual(task);
-    expect(taskDetails.tagName).toEqual('DIV');
+    expect(taskDetails?.parentElement).toEqual(task);
+    expect(taskDetails?.tagName).toEqual('DIV');
 
     expect(taskHeading).toHaveClass('ds_task-list__task-heading');
     expect(taskHeading.tagName).toEqual('H3');
     expect(taskHeading.textContent).toEqual(`${taskItem.title}(${taskItem.statusText})`);
 
     expect(taskSummary).toHaveClass('ds_task-list__task-summary');
-    expect(taskSummary.tagName).toEqual('P');
-    expect(taskSummary.textContent).toEqual(taskSummaryContent);
+    expect(taskSummary?.tagName).toEqual('P');
+    expect(taskSummary?.textContent).toEqual(taskSummaryContent);
 
     expect(tag).toHaveAttribute('aria-hidden', 'true');
-    expect(tag.textContent).toEqual(taskItem.statusText);
+    expect(tag?.textContent).toEqual(taskItem.statusText);
 });
 
 test('task with link', () => {
     const href = '#foo';
 
     render(
-        <Task
+        <TaskList.Item
             id={taskItem.id}
             statusText={taskItem.statusText}
             title={taskItem.title}
             href={href}
         >
             {taskSummaryContent}
-        </Task>
+        </TaskList.Item>
     );
 
     const task = screen.getByRole('listitem');
@@ -188,20 +187,20 @@ test('task with link', () => {
     expect(link).toHaveClass('ds_task-list__task-link');
     expect(link).toHaveAttribute('href', href);
     expect(link.textContent).toEqual(`${taskItem.title}(${taskItem.statusText})`);
-    expect(link.parentNode).toEqual(taskHeading);
+    expect(link.parentElement).toEqual(taskHeading);
     expect(link.textContent).toEqual(taskHeading.textContent);
 });
 
 test('completed task has green tag', () => {
     render(
-        <Task
+        <TaskList.Item
             id={taskItem.id}
             statusText={taskItem.statusText}
             title={taskItem.title}
             isComplete
         >
             {taskSummaryContent}
-        </Task>
+        </TaskList.Item>
     );
 
     const tag = document.querySelector('.ds_tag');
@@ -213,14 +212,14 @@ test('specific tag colour', () => {
     const tagColour = 'red';
 
     render(
-        <Task
+        <TaskList.Item
             id={taskItem.id}
             statusText={taskItem.statusText}
             title={taskItem.title}
             tagColour={tagColour}
         >
             {taskSummaryContent}
-        </Task>
+        </TaskList.Item>
     );
 
     const tag = document.querySelector('.ds_tag');
@@ -230,12 +229,12 @@ test('specific tag colour', () => {
 
 test('no status tag when no status text provided', () => {
     render(
-        <Task
+        <TaskList.Item
             id={taskItem.id}
             title={taskItem.title}
         >
             {taskSummaryContent}
-        </Task>
+        </TaskList.Item>
     );
 
     const tag = document.querySelector('.ds_tag');
@@ -247,72 +246,72 @@ test('task group renders correctly', () => {
     const taskGroupHeadingText = 'Provide your health details';
 
     render(
-        <TaskGroup title={taskGroupHeadingText}>
-            <Task
+        <TaskList.Group title={taskGroupHeadingText}>
+            <TaskList.Item
                 id={tasks[0].id}
                 statusText={tasks[0].statusText}
                 title={tasks[0].title}
             >
                 Tell us about your conditions, symptoms and any sensory issues you have.
-            </Task>
-            <Task
+            </TaskList.Item>
+            <TaskList.Item
                 id={tasks[1].id}
                 statusText={tasks[1].statusText}
                 title={tasks[1].title}
             >
                 Tell us about any medication you need.
-            </Task>
-            <Task
+            </TaskList.Item>
+            <TaskList.Item
                 id={tasks[2].id}
                 statusText={tasks[2].statusText}
                 title={tasks[2].title}
             >
                 Share any supporting documents and provide details of people we can talk to about you.
-            </Task>
-        </TaskGroup>
+            </TaskList.Item>
+        </TaskList.Group>
     );
 
     const taskGroup = document.querySelector('.ds_task-list-group__section');
-    const taskGroupHeading = taskGroup.querySelector('.ds_task-list-heading');
-    const innerTaskList = taskGroup.querySelector('.ds_task-list');
+    const taskGroupHeading = taskGroup?.querySelector('.ds_task-list-heading');
+    const innerTaskList = taskGroup?.querySelector('.ds_task-list');
 
     expect(taskGroup).toHaveClass('ds_task-list-group__section');
-    expect(taskGroup.tagName).toEqual('LI');
+    expect(taskGroup?.tagName).toEqual('LI');
 
-    expect(taskGroupHeading.tagName).toEqual('H2');
-    expect(taskGroupHeading.textContent).toEqual(taskGroupHeadingText);
+    expect(taskGroupHeading?.tagName).toEqual('H2');
+    expect(taskGroupHeading?.textContent).toEqual(taskGroupHeadingText);
 
     // a bit hacky, but list should be last child
-    expect(taskGroup.children[taskGroup.children.length - 1]).toEqual(innerTaskList);
+    expect(taskGroup?.children[taskGroup.children.length - 1]).toEqual(innerTaskList);
 });
 
 test('task group with intro text', () => {
     const taskGroupIntroText = 'This information will be used to check what additional benefits you may be able to apply for.';
 
     render(
-        <TaskGroup title="Provide your health details" intro={taskGroupIntroText}>
-            <Task
+        <TaskList.Group title="Provide your health details" intro={taskGroupIntroText}>
+            <TaskList.Item
                 id={tasks[0].id}
                 statusText={tasks[0].statusText}
                 title={tasks[0].title}
             >
                 Tell us about your conditions, symptoms and any sensory issues you have.
-            </Task>
-            <Task
+            </TaskList.Item>
+            <TaskList.Item
                 id={tasks[1].id}
                 statusText={tasks[1].statusText}
                 title={tasks[1].title}
             >
                 Tell us about any medication you need.
-            </Task>
-            <Task
+            </TaskList.Item>
+            <TaskList.Item
                 id={tasks[2].id}
                 statusText={tasks[2].statusText}
                 title={tasks[2].title}
             >
                 Share any supporting documents and provide details of people we can talk to about you.
-            </Task>
-        </TaskGroup>
+            </TaskList.Item>
+        </TaskList.Group>
     );
 
     const taskGroup = document.querySelector('.ds_task-list-group__section');
@@ -326,62 +325,61 @@ test('task group with intro text', () => {
 test('task list counts completed items from all groups for its status text and the first incomplete section wraps to the next group sensibly', () => {
     render(
         <TaskList>
-            <TaskGroup title="Provide your health details">
-                <Task
+            <TaskList.Group title="Provide your health details">
+                <TaskList.Item
                     id={tasks[0].id}
                     statusText={tasks[0].statusText}
                     title={tasks[0].title}
                     isComplete
                 >
                     Tell us about your conditions, symptoms and any sensory issues you have.
-                </Task>
-                <Task
+                </TaskList.Item>
+                <TaskList.Item
                     id={tasks[1].id}
                     statusText={tasks[1].statusText}
                     title={tasks[1].title}
                     isComplete
                 >
                     Tell us about any medication you need.
-                </Task>
-                <Task
+                </TaskList.Item>
+                <TaskList.Item
                     id={tasks[2].id}
                     statusText={tasks[2].statusText}
                     title={tasks[2].title}
                     isComplete
                 >
                     Share any supporting documents and provide details of people we can talk to about you.
-                </Task>
-            </TaskGroup>
-            <TaskGroup title="Provide your health details">
-                <Task
+                </TaskList.Item>
+            </TaskList.Group>
+            <TaskList.Group title="Provide your health details">
+                <TaskList.Item
                     id={tasks[0].id + '2'}
                     statusText={tasks[0].statusText}
                     title={tasks[0].title}
                 >
                     Tell us about your conditions, symptoms and any sensory issues you have.
-                </Task>
-                <Task
+                </TaskList.Item>
+                <TaskList.Item
                     id={tasks[1].id + '2'}
                     statusText={tasks[1].statusText}
                     title={tasks[1].title}
                 >
                     Tell us about any medication you need.
-                </Task>
-                <Task
+                </TaskList.Item>
+                <TaskList.Item
                     id={tasks[2].id + '2'}
                     statusText={tasks[2].statusText}
                     title={tasks[2].title}
                     isComplete
                 >
                     Share any supporting documents and provide details of people we can talk to about you.
-                </Task>
-            </TaskGroup>
+                </TaskList.Item>
+            </TaskList.Group>
         </TaskList>
     );
 
     const taskListStatus = screen.getByRole('navigation');
     const taskListStatus1 = taskListStatus.children[0];
-
     const taskListStatusLink = within(taskListStatus).getByRole('link');
 
     expect(taskListStatus1.textContent).toEqual('You have completed 4 of 6 sections.');
@@ -397,27 +395,27 @@ test('passing additional props to task list', () => {
     );
 
     const taskList = screen.getByRole('list');
-    const taskListWrapper = taskList.parentNode;
+    const taskListWrapper = taskList.parentElement;
     expect(taskListWrapper?.dataset.test).toEqual('foo');
 });
 
 test('passing additional props to task group', () => {
     render(
-        <TaskGroup data-test="foo">
-        </TaskGroup>
+        <TaskList.Group data-test="foo">
+        </TaskList.Group>
     );
 
-    const taskGroup = document.querySelector('.ds_task-list-group__section');
+    const taskGroup = document.querySelector('.ds_task-list-group__section') as HTMLElement;
     expect(taskGroup?.dataset.test).toEqual('foo');
 });
 
 test('passing additional props to task', () => {
     render(
-        <Task data-test="foo">
-        </Task>
+        <TaskList.Item data-test="foo">
+        </TaskList.Item>
     );
 
-    const task = document.querySelector('.ds_task-list__task');
+    const task = document.querySelector('.ds_task-list__task') as HTMLElement;
     expect(task?.dataset.test).toEqual('foo');
 });
 
@@ -430,14 +428,14 @@ test('passing additional CSS classes to task list', () => {
     );
 
     const taskList = screen.getByRole('list');
-    const taskListWrapper = taskList.parentNode;
+    const taskListWrapper = taskList.parentElement;
     expect(taskListWrapper).toHaveClass('foo');
 });
 
 test('passing additional CSS classes to task group', () => {
     render(
-        <TaskGroup className="foo">
-        </TaskGroup>
+        <TaskList.Group className="foo">
+        </TaskList.Group>
     );
 
     const taskGroup = document.querySelector('.ds_task-list-group__section');
@@ -446,8 +444,8 @@ test('passing additional CSS classes to task group', () => {
 
 test('passing additional CSS classes to task', () => {
     render(
-        <Task className="foo">
-        </Task>
+        <TaskList.Item className="foo">
+        </TaskList.Item>
     );
 
     const task = document.querySelector('.ds_task-list__task');

package/src/components/task-list/task-list.tsx

@@ -4,7 +4,7 @@ import HintText from '../../common/hint-text';
 import ScreenReaderText from '../../common/screen-reader-text';
 import Tag from '../tag/tag';
 
-export const Task: React.FC<SGDS.Component.TaskList.Task> = ({
+const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
     children,
     className,
     href,
@@ -58,7 +58,7 @@ export const Task: React.FC<SGDS.Component.TaskList.Task> = ({
  * @param {string} props.title - The title of the task group
  * @returns {JSX.Element} - The element
  */
-export const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
+const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
     children,
     className,
     intro,
@@ -82,7 +82,9 @@ export const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
     );
 };
 
-const TaskList: React.FC<SGDS.Component.TaskList> = ({
+const TaskList: React.FC<SGDS.Component.TaskList>
+    & { Group: React.FC<SGDS.Component.TaskList.Group> }
+    & { Item: React.FC<SGDS.Component.TaskList.Item> } = ({
     children,
     className,
     headingId = 'task-list',
@@ -94,7 +96,7 @@ const TaskList: React.FC<SGDS.Component.TaskList> = ({
     let completedTasksCount = 0;
 
     function processChild(item: any) {
-        if (item.type.displayName === 'Task') {
+        if (item.type.displayName === 'TaskItem') {
             taskCount = taskCount + 1;
 
             if (item.props.isComplete) {
@@ -139,7 +141,9 @@ const TaskList: React.FC<SGDS.Component.TaskList> = ({
 };
 
 TaskList.displayName = 'TaskList';
-Task.displayName = 'Task';
+TaskItem.displayName = 'TaskItem';
 TaskGroup.displayName = 'TaskGroup';
+TaskList.Item = TaskItem;
+TaskList.Group = TaskGroup;
 
 export default TaskList;

package/src/components/text-input/text-input.test.tsx

@@ -56,7 +56,7 @@ test('text input with character count', () => {
     );
 
     const textInput = screen.getByRole('textbox');
-    const textInputWrapper = textInput.parentNode;
+    const textInputWrapper = textInput.parentElement;
 
     expect(textInputWrapper).toHaveAttribute('data-maxlength', maxLength.toString());
     expect(textInputWrapper).toHaveAttribute('data-module', 'ds-character-count');
@@ -76,7 +76,7 @@ test('text input with character count and threshold', () => {
     );
 
     const textInput = screen.getByRole('textbox');
-    const textInputWrapper = textInput.parentNode;
+    const textInputWrapper = textInput.parentElement;
 
     expect(textInputWrapper).toHaveAttribute('data-threshold', countThreshold.toString());
 });
@@ -106,9 +106,9 @@ test('text input with currency', () => {
     );
 
     const textInput = screen.getByRole('textbox');
-    const textInputWrapper = textInput.parentNode;
+    const textInputWrapper = textInput.parentElement;
 
-    expect(textInputWrapper.tagName).toEqual('DIV')
+    expect(textInputWrapper?.tagName).toEqual('DIV')
     expect(textInputWrapper).toHaveClass('ds_currency-wrapper');
     expect(textInputWrapper).not.toHaveAttribute('data-symbol');
 });
@@ -126,7 +126,7 @@ test('text input with custom currency symbol', () => {
     );
 
     const textInput = screen.getByRole('textbox');
-    const textInputWrapper = textInput.parentNode;
+    const textInputWrapper = textInput.parentElement;
 
     expect(textInputWrapper).toHaveAttribute('data-symbol', symbol);
 });
@@ -145,7 +145,7 @@ test('text input with button', () => {
     );
 
     const textInput = screen.getByRole('textbox');
-    const textInputWrapper = textInput.parentNode;
+    const textInputWrapper = textInput.parentElement;
     const button = screen.getByRole('button');
     const buttonTextElement = within(button).getByText(buttonText);
     const buttonIconElement = within(button).getByRole('img', { hidden: true });

package/src/components/textarea/textarea.test.tsx

@@ -41,7 +41,7 @@ test('textarea with character count', () => {
     );
 
     const textarea = screen.getByRole('textbox');
-    const textareaWrapper = textarea.parentNode;
+    const textareaWrapper = textarea.parentElement;
 
     expect(textareaWrapper).toHaveAttribute('data-maxlength', maxLength.toString());
     expect(textareaWrapper).toHaveAttribute('data-module', 'ds-character-count');
@@ -61,7 +61,7 @@ test('text input with character count and threshold', () => {
     );
 
     const textarea = screen.getByRole('textbox');
-    const textareaWrapper = textarea.parentNode;
+    const textareaWrapper = textarea.parentElement;
 
     expect(textareaWrapper).toHaveAttribute('data-threshold', countThreshold.toString());
 });

package/src/components/warning-text/warning-text.test.tsx

@@ -35,7 +35,7 @@ test('passing additional props', () => {
         </WarningText>
     )
 
-    const warningTextOuter = document.querySelector('.ds_warning-text');
+    const warningTextOuter = document.querySelector('.ds_warning-text') as HTMLElement;
     expect(warningTextOuter?.dataset.test).toEqual('foo');
 });
 

package/vitest-setup.ts

@@ -4,7 +4,7 @@ import { cleanup } from '@testing-library/react';
 import { afterEach } from 'vitest';
 
 afterEach(() => {
-  cleanup();
+    cleanup();
 });
 
 // mock CSS.supports()

package/@types/components/NotificationBanner.d.ts

@@ -1,9 +0,0 @@
-declare namespace SGDS.Component {
-    interface NotificationBanner extends React.AllHTMLAttributes<HTMLDivElement> {
-        close?: boolean,
-        icon?: boolean,
-        iconColour?: boolean,
-        iconInverse?: boolean,
-        title: string
-    }
-}