@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/src/components/SummaryList/SummaryList.tsx

@@ -1,19 +1,21 @@
 import React, { Children, useId } from 'react';
-
 import ActionLink from '../../common/ActionLink';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
+import { SummaryListItemProps, SummaryListProps } from './types';
+import { ActionLinkProps } from '@/src/common/ActionLink/types';
+import clsx from 'clsx';
 
 const Item = ({
     children,
     title
-}: SGDS.Component.SummaryList.Item) => {
-    let values: any[] = [];
-    let actions: any[] = [];
+}: SummaryListItemProps) => {
+    const values: React.ReactElement[] = [];
+    const actions: React.ReactElement[] = [];
 
     const describedById = useId();
 
     Children.forEach(children, (child: React.ReactNode) => {
-        const thisChild = child as React.ReactElement<SGDS.Common.ActionLink>;
+        const thisChild = child as React.ReactElement<ActionLinkProps>;
         if (thisChild && thisChild.type === Value) {
             values.push(thisChild);
         } else if (thisChild && thisChild.type === ActionLink) {
@@ -64,7 +66,7 @@ const Item = ({
 
 const Value = ({
     children
-}: SGDS.Component.SummaryList.Answer) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <q className="ds_summary-list__answer">{children}</q>
     );
@@ -75,14 +77,14 @@ const SummaryList = ({
     className,
     isBorderless,
     ...props
-}: SGDS.Component.SummaryList) => {
+}: SummaryListProps) => {
     return (
         <ol
-            className={[
+            className={clsx([
                 'ds_summary-list',
                 isBorderless && 'ds_summary-list--no-border',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
            {children}

package/src/components/SummaryList/types.ts

@@ -0,0 +1,7 @@
+export interface SummaryListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    title: string;
+}
+
+export interface SummaryListProps extends React.OlHTMLAttributes<HTMLOListElement> {
+    isBorderless?: boolean;
+}

package/src/components/Table/Table.test.tsx

@@ -58,6 +58,42 @@ test('table with smallscreen behaviour', () => {
     expect(table.nodeName).toEqual('TABLE');
 });
 
+test('instantiating/initialising DS component script: smallscreen', () => {
+    render(
+        <Table smallscreen="scrolling">
+            <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>
+            </tbody>
+        </Table>
+    );
+
+    const table = screen.getByRole('table');
+    expect(table).toHaveClass('js-initialised');
+    expect(table).toHaveClass('js-instantiated');
+});
+
+test('instantiating/initialising DS component script: not smallscreen', () => {
+    render(
+        <Table />
+    );
+
+    const table = screen.getByRole('table');
+    expect(table).not.toHaveClass('js-initialised');
+    expect(table).not.toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <Table data-test="foo"/>

package/src/components/Table/Table.tsx

@@ -1,27 +1,29 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
 import DSTable from '@scottish-government/design-system/src/components/table/table';
+import { TableProps } from './types';
+import clsx from 'clsx';
 
 const Table = ({
     children,
     className,
     smallscreen,
     ...props
-}: SGDS.Component.Table) => {
+}: TableProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
-            new DSTable().init();
+            new DSTable(ref.current).init();
         }
     }, [ref]);
 
     return (
         <table
-            className={[
+            className={clsx([
                 'ds_table',
                 className
-            ].join(' ')}
+            ])}
             data-smallscreen={smallscreen}
             ref={ref}
             {...props}

package/src/components/Table/types.ts

@@ -0,0 +1,6 @@
+type SmallScreen = 'scrolling' | 'boxes';
+
+export interface TableProps extends React.AllHTMLAttributes<HTMLTableElement> {
+    className?: string;
+    smallscreen?: SmallScreen;
+}

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

@@ -17,15 +17,15 @@ const meta = {
         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>
+            <h3 key="1">Search for training courses and funding</h3>,
+            <p key="2">A wide range of training courses for your employees are available.</p>,
+            <p key="3">Opportunities include distance learning, short courses and vocational training.</p>,
+            <p key="4"><a href="#">Visit My World of Work to search for training courses</a>.</p>,
+            <p key="5">You can also <a href="#">search for training courses, and funding towards training</a>.</p>
         ],
-        tabLabel: 'Courses and funding'
+        tabLabel: 'Courses and funding',
+        id: 'my-tab'
     }
 } satisfies Meta<typeof Tabs.Item>;
 

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

@@ -35,14 +35,14 @@ const meta = {
     args: {
         baseId: 'my-tabs',
         children: [
-            <Tabs.Item key="foo" tabLabel="Courses and funding">
+            <Tabs.Item id="foo" 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">
+            <Tabs.Item id="bar" 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>
@@ -53,7 +53,7 @@ const meta = {
                 </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">
+            <Tabs.Item id="baz" 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>

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

@@ -187,6 +187,20 @@ test('with manual activation', () => {
     expect(tabContainer).toHaveClass('ds_tabs--manual');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <Tabs data-testid="tabcontainer" data-test="foo">
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    expect(tabContainer).toHaveClass('js-initialised');
+    expect(tabContainer).toHaveClass('js-instantiated');
+});
+
 test('passing additional props to tab container', () => {
     render(
         <Tabs data-testid="tabcontainer" data-test="foo">

package/src/components/Tabs/Tabs.tsx

@@ -1,7 +1,8 @@
 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 { TabListItemProps, TabsItemProps, TabsProps } from './types';
+import clsx from 'clsx';
 
 const TabItem = ({
     isBorderless,
@@ -10,14 +11,15 @@ const TabItem = ({
     id,
     tabLabel,
     ...props
-}: SGDS.Component.Tabs.Item) => {
+}: TabsItemProps) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_tabs__content',
                 !isBorderless && 'ds_tabs__content--bordered',
                 className
-            ].join(' ')}
+            ])}
+            data-label={tabLabel}
             id={id}
             {...props}
         >
@@ -29,7 +31,7 @@ const TabItem = ({
 const TabListItem = ({
     children,
     href
-}: SGDS.Component.Tabs.TabListItem) => {
+}: TabListItemProps) => {
     return (
         <li className="ds_tabs__tab">
             <a className="ds_tabs__tab-link" href={href}>{children}</a>
@@ -46,19 +48,20 @@ const Tabs = ({
     isManual = false,
     title = 'Contents',
     ...props
-}: SGDS.Component.Tabs) => {
+}: TabsProps) => {
     const ref = useRef(null);
 
     const headingId = `${baseId}-heading`;
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSTabs(ref.current).init();
         }
     }, [ref]);
 
     const processedItems = Children.map(children, child => {
-        const thisChild = child as React.ReactElement<SGDS.Component.Tabs.Item>;
+        const thisChild = child as React.ReactElement<TabsItemProps>;
 
         if (thisChild && thisChild.type === TabItem) {
             return React.cloneElement(thisChild, {
@@ -76,11 +79,11 @@ const Tabs = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_tabs',
                 isManual && 'ds_tabs--manual',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >

package/src/components/Tabs/types.ts

@@ -0,0 +1,19 @@
+import { HeadingLevel } from '../../shared-types';
+
+export interface TabsItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    isBorderless?: boolean;
+    id: string;
+    tabLabel: string;
+}
+
+export interface TabListItemProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    href: string;
+}
+
+export interface TabsProps extends React.AllHTMLAttributes<HTMLElement> {
+    baseId: string;
+    isBorderless?: boolean;
+    headingLevel?: HeadingLevel;
+    isManual?: boolean;
+    title: string;
+}

package/src/components/Tag/Tag.tsx

@@ -1,16 +1,19 @@
+import { TagProps } from "./types";
+import clsx from 'clsx';
+
 const Tag = ({
     children,
     className,
     colour,
     ...props
-}: SGDS.Component.Tag) => {
+}: TagProps) => {
     return (
         <span
-            className={[
+            className={clsx([
                 'ds_tag',
                 className,
-                colour && `ds_tag--${colour}`,
-            ].join(' ')}
+                colour && `ds_tag--${colour}`
+            ])}
             {...props}
         >
             {children}

package/src/components/Tag/types.ts

@@ -0,0 +1,5 @@
+import { TagColour } from '../../shared-types';
+
+export interface TagProps extends React.AllHTMLAttributes<HTMLElement> {
+    colour?: TagColour;
+}

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

@@ -16,11 +16,6 @@ const meta = {
         )
     ],
     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: {

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

@@ -11,7 +11,6 @@ const meta = {
             description: 'ID of the task list\'s heading element',
             type: 'string'
         },
-        linkComponent: argTypes.linkComponent(),
         title: {
             description: 'The title of the task list',
             type: {

package/src/components/TaskList/TaskList.tsx

@@ -3,6 +3,8 @@ import ConditionalWrapper from '../../common/ConditionalWrapper';
 import HintText from '../../common/HintText';
 import ScreenReaderText from '../../common/ScreenReaderText';
 import Tag from '../Tag';
+import { TaskListGroupProps, TaskListItemProps, TaskListProps } from './types';
+import clsx from 'clsx';
 
 const TaskItem = ({
     children,
@@ -15,7 +17,7 @@ const TaskItem = ({
     tagColour = 'grey',
     title,
     ...props
-}: SGDS.Component.TaskList.Item) => {
+}: TaskListItemProps) => {
     if (isComplete) {
         tagColour = 'green';
         statusText = statusText || 'Completed'
@@ -24,19 +26,21 @@ const TaskItem = ({
     const LINK_CLASS = 'ds_task-list__task-link';
 
     function getLinkElement(children: React.ReactNode) {
+        let linkElement;
         if (linkComponent) {
-            return linkComponent({ className: LINK_CLASS, href, children });
-        } else if (href) {
-            return <a href={href} className={LINK_CLASS}>{children}</a>;
+            linkElement = linkComponent({ className: LINK_CLASS, href, children });
+        } else {
+            linkElement = <a href={href} className={LINK_CLASS}>{children}</a>;
         }
+        return linkElement as React.JSX.Element;
     }
 
     return (
         <li
-            className={[
+            className={clsx([
                 'ds_task-list__task',
                 className
-            ].join(' ')}
+            ])}
             id={id}
             {...props}
         >
@@ -77,13 +81,13 @@ const TaskGroup = ({
     intro,
     title,
     ...props
-}: SGDS.Component.TaskList.Group) => {
+}: TaskListGroupProps) => {
     return (
         <li
-            className={[
+            className={clsx([
                 'ds_task-list-group__section',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <h2 className="ds_task-list-heading">{title}</h2>
@@ -101,12 +105,12 @@ const TaskList = ({
     headingId = 'task-list',
     title,
     ...props
-}: SGDS.Component.TaskList) => {
+}: TaskListProps) => {
     let taskCount = 0;
-    let incompleteTaskIds: string[] = [];
+    const incompleteTaskIds: string[] = [];
     let completedTasksCount = 0;
 
-    function processChild(item: any) {
+    function processChild(item: React.JSX.Element) {
         if (item.type.displayName === 'TaskList.Item') {
             taskCount = taskCount + 1;
 
@@ -131,7 +135,7 @@ const TaskList = ({
     }
 
     Children.forEach(children, child => {
-        processChild(child);
+        processChild(child as React.JSX.Element);
     });
 
     return (

package/src/components/TaskList/types.ts

@@ -0,0 +1,20 @@
+import { LinkComponent, TagColour } from '../../shared-types';
+
+export interface TaskListGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    intro?: string;
+    title: string;
+}
+
+export interface TaskListItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    href?: string;
+    id?: string;
+    isComplete?: boolean;
+    linkComponent?: LinkComponent;
+    statusText?: string;
+    tagColour?: TagColour;
+    title: string;
+}
+
+export interface TaskListProps extends React.AllHTMLAttributes<HTMLElement> {
+    headingId?: string;
+}

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

@@ -58,7 +58,6 @@ test('text input with character count', () => {
     const textInput = screen.getByRole('textbox');
     const textInputWrapper = textInput.parentElement;
 
-    expect(textInputWrapper).toHaveAttribute('data-maxlength', MAX_LENGTH.toString());
     expect(textInputWrapper).toHaveAttribute('data-module', 'ds-character-count');
 });
 
@@ -232,6 +231,44 @@ test('text input with change function', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('text input with onBlur that is not a function', () => {
+    render(
+        <TextInput
+        id={INPUT_ID}
+        label={LABEL_TEXT}
+            // @ts-expect-error onBlur is not a function
+            onBlur='foo'
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    fireEvent.blur(textInput);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('text input with onChange that is not a function', () => {
+    render(
+        <TextInput
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            // @ts-expect-error onChange is not a function
+            onChange='foo'
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    fireEvent.change(textInput, {target: {value: 'foo'}});
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('text input with placeholder text', () => {
     const PLACEHOLDER_TEXT = 'foo';
 
@@ -299,6 +336,21 @@ test('text input with error message', () => {
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <TextInput
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            maxlength={200}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const textInputContainer = textInput.parentElement;
+    expect(textInputContainer).toHaveClass('js-initialised');
+    expect(textInputContainer).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <TextInput

package/src/components/TextInput/TextInput.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
-import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
+import DSCharacterCount from '@scottish-government/design-system/src/components/character-count/character-count';
 import Button from '../Button';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
+import { TextInputProps } from './types';
+import clsx from 'clsx';
 
 const TextInput = ({
     buttonIcon,
     buttonText,
-    children,
     className,
     countThreshold,
     width,
@@ -29,29 +29,34 @@ const TextInput = ({
     type = 'text',
     value,
     ...props
-}: SGDS.Component.TextInput) => {
+}: TextInputProps) => {
     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' : ''} ${isCurrency ? 'ds_currency-wrapper' : ''}`;
+    const inputWrapperClasses = clsx(
+        hasButton && 'ds_input__wrapper',
+        hasButton && 'ds_input__wrapper--has-icon',
+        isCurrency && 'ds_currency-wrapper'
+    );
     const describedbys: string[] = [];
 
     if (hintText) { describedbys.push(hintTextId) };
     if (errorMessage) { describedbys.push(errorMessageId) };
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSCharacterCount(ref.current).init();
         }
     }, [ref]);
 
-    function handleBlur(event: React.FocusEvent) {
+    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
         if (typeof onBlur === 'function') {
             onBlur(event);
         }
     }
 
-    function handleChange(event: React.ChangeEvent) {
+    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
         if (typeof onChange === 'function') {
             onChange(event);
         }
@@ -63,7 +68,7 @@ const TextInput = ({
             wrapper={(children: React.JSX.Element) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}
         >
             <label className="ds_label" htmlFor={id}>{label}</label>
-            {hintText && <HintText id={hintTextId} text={hintText} />}
+            {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
             {errorMessage && <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>}
             <ConditionalWrapper
                 condition={hasButton || typeof isCurrency !== 'undefined' && isCurrency}
@@ -72,12 +77,12 @@ const TextInput = ({
                 <input
                     aria-describedby={describedbys.join(' ')}
                     aria-invalid={hasError}
-                    className={[
+                    className={clsx([
                         'ds_input',
                         className,
-                        hasError ? 'ds_input--error' : '',
-                        width ? `ds_input--${width}` : '',
-                    ].join(' ')}
+                        hasError && 'ds_input--error',
+                        width && `ds_input--${width}`,
+                    ])}
                     defaultValue={value}
                     id={id}
                     maxLength={maxlength}

package/src/components/TextInput/types.ts

@@ -0,0 +1,12 @@
+import { IconName, InputWidth, TextInputBase } from '../../shared-types';
+
+export interface TextInputProps extends TextInputBase<HTMLInputElement> {
+    buttonIcon?: IconName;
+    buttonText?: string;
+    className?: string;
+    currencySymbol?: string;
+    hasButton?: boolean;
+    isCurrency?: boolean;
+    type?: string;
+    width?: InputWidth;
+}