@scottish-government/designsystem-react 0.12.1 → 0.13.0

package/src/components/SkipLinks/SkipLinks.stories.tsx

@@ -8,16 +8,16 @@ const meta = {
     component: SkipLinks,
     argTypes: {
         mainContentId: {
-            description: 'The id attribute of the ‘main content’ element to link to',
+            description: 'The id attribute of the \'main content\' element to link to',
             type: 'string'
         },
         mainLinkText: {
-            description: 'The text to use for the ‘main content’ link',
+            description: 'The text to use for the \'main content\' link',
             type: 'string'
         },
         isStatic: {
             control: 'boolean',
-            description: 'Use the ‘static’ display variant'
+            description: 'Use the \'static\' display variant'
         },
         children: argTypes.children()
     },

package/src/components/SkipLinks/SkipLinks.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
-
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import dsSkipLinks from '@scottish-government/design-system/src/components/skip-links/skip-links';
+import { SkipLinksLinkProps, SkipLinksProps } from './types';
 
 const Link = ({
     children,
     fragmentId
-}: SGDS.Component.SkipLinks.Link) => {
+}: SkipLinksLinkProps) => {
     return (
         <li
             className="ds_skip-links__item"
@@ -22,7 +22,7 @@ const SkipLinks = ({
     mainLinkText = 'Skip to main content',
     isStatic,
     ...props
-}: SGDS.Component.SkipLinks) => {
+}: SkipLinksProps) => {
 
     useEffect(() => {
         dsSkipLinks.init();

package/src/components/SkipLinks/types.ts

@@ -0,0 +1,9 @@
+export interface SkipLinksLinkProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    fragmentId: string;
+}
+
+export interface SkipLinksProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    mainContentId?: string;
+    mainLinkText?: string;
+    isStatic?: boolean;
+}

package/src/components/SummaryCard/SummaryCard.test.tsx

@@ -16,17 +16,6 @@ const ACTIONS = [
     }
 ];
 
-const ITEMS = [
-    {
-        title: 'Phone number',
-        value: '0123 456 7890'
-    },
-    {
-        title: 'Address',
-        value: `Victoria Quay\nEdinburgh\nEH6 6QQ`
-    }
-];
-
 const TITLE_TEXT = 'Joe Bloggs';
 
 test('summary card renders correctly', () => {

package/src/components/SummaryCard/SummaryCard.tsx

@@ -3,6 +3,8 @@ import React, { Children, useId } from 'react';
 import ActionLink from '../../common/ActionLink';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import WrapperTag from "../../common/WrapperTag";
+import { SummaryCardProps } from './types';
+import { ActionLinkProps } from '../../common/ActionLink/types';
 
 const SummaryCard = ({
     children,
@@ -10,14 +12,14 @@ const SummaryCard = ({
     headingLevel = 'h3',
     title,
     ...props
-}: SGDS.Component.SummaryCard) => {
-    let actions: any[] = [];
-    let remainingChildren: any[] = [];
+}: SummaryCardProps) => {
+    const actions: React.ReactElement[] = [];
+    const remainingChildren: 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 === ActionLink) {
             actions.push(React.cloneElement(thisChild, { describedby: describedById }));
         } else {

package/src/components/SummaryCard/types.ts

@@ -0,0 +1,6 @@
+import { HeadingLevel } from '../../shared-types';
+
+export interface SummaryCardProps extends React.AllHTMLAttributes<HTMLElement> {
+    headingLevel?: HeadingLevel;
+    title: string;
+}

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

@@ -14,7 +14,7 @@ const meta = {
         )
     ],
     argTypes: {
-        Title: {
+        title: {
             description: 'Title of the summary list item.',
             type: {
                 name: 'string',
@@ -26,16 +26,16 @@ const meta = {
     args: {
         title: 'Contact details',
         children: [
-            <SummaryList.Value name="Email">
+            <SummaryList.Value name="Email" key="1">
                 email@gov.scot
             </SummaryList.Value>,
-            <SummaryList.Value name="Telephone">
+            <SummaryList.Value name="Telephone" key="2">
                 0123 456 7890
             </SummaryList.Value>,
-            <SummaryList.Action href="foo">
+            <SummaryList.Action href="foo" key="3">
                 Change
             </SummaryList.Action>,
-            <SummaryList.Action onclick={function w(){}}>
+            <SummaryList.Action onclick={function w(){}} key="4">
                 Delete
             </SummaryList.Action>
         ]

package/src/components/SummaryList/SummaryList.stories.tsx

@@ -34,7 +34,7 @@ const meta = {
             <SummaryList.Item title="Address">
                 <SummaryList.Value>
                     Scottish Government<br />
-                    St Andrew's House<br />
+                    St Andrew&apos;s House<br />
                     Regent Road<br />
                     Edinburgh<br />
                     EH1 3DG

package/src/components/SummaryList/SummaryList.test.tsx

@@ -1,5 +1,5 @@
 import { test, expect, vi } from 'vitest';
-import { within, render, screen, fireEvent } from '@testing-library/react';
+import { within, render, screen } from '@testing-library/react';
 import SummaryList from './SummaryList';
 
 const ONCLICK_FUNCTION = vi.fn();
@@ -7,11 +7,6 @@ const TITLE = 'Name';
 const VALUE_1 = 'Jane Smith';
 const VALUE_2 = 'Tony Brown';
 
-const ACTION_HREF = "#foo"
-const ACTION_ONCLICK = ONCLICK_FUNCTION;
-const ACTION_TEXT = 'Name';
-const DESCRIBEDBY_ID = 'q1-name';
-
 test('summary list renders correctly', () => {
     render(
         <SummaryList data-testid="summarylist">

package/src/components/SummaryList/SummaryList.tsx

@@ -2,18 +2,20 @@ 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';
 
 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,7 +77,7 @@ const SummaryList = ({
     className,
     isBorderless,
     ...props
-}: SGDS.Component.SummaryList) => {
+}: SummaryListProps) => {
     return (
         <ol
             className={[

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.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSTable from '@scottish-government/design-system/src/components/table/table';
+import { TableProps } from './types';
 
 const Table = ({
     children,
     className,
     smallscreen,
     ...props
-}: SGDS.Component.Table) => {
+}: TableProps) => {
     const ref = useRef(null);
 
     useEffect(() => {

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.tsx

@@ -1,7 +1,8 @@
 import React, { Children, useEffect, useRef, useId } from 'react';
 import WrapperTag from '../../common/WrapperTag';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSTabs from '@scottish-government/design-system/src/components/tabs/tabs';
+import { TabListItemProps, TabsItemProps, TabsProps } from './types';
 
 const TabItem = ({
     isBorderless,
@@ -10,7 +11,7 @@ const TabItem = ({
     id,
     tabLabel,
     ...props
-}: SGDS.Component.Tabs.Item) => {
+}: TabsItemProps) => {
     return (
         <div
             className={[
@@ -18,6 +19,7 @@ const TabItem = ({
                 !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,7 +48,7 @@ const Tabs = ({
     isManual = false,
     title = 'Contents',
     ...props
-}: SGDS.Component.Tabs) => {
+}: TabsProps) => {
     const ref = useRef(null);
 
     const headingId = `${baseId}-heading`;
@@ -58,7 +60,7 @@ const Tabs = ({
     }, [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, {

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,9 +1,11 @@
+import { TagProps } from "./types";
+
 const Tag = ({
     children,
     className,
     colour,
     ...props
-}: SGDS.Component.Tag) => {
+}: TagProps) => {
     return (
         <span
             className={[

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,7 @@ 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';
 
 const TaskItem = ({
     children,
@@ -15,7 +16,7 @@ const TaskItem = ({
     tagColour = 'grey',
     title,
     ...props
-}: SGDS.Component.TaskList.Item) => {
+}: TaskListItemProps) => {
     if (isComplete) {
         tagColour = 'green';
         statusText = statusText || 'Completed'
@@ -24,11 +25,13 @@ 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 (
@@ -77,7 +80,7 @@ const TaskGroup = ({
     intro,
     title,
     ...props
-}: SGDS.Component.TaskList.Group) => {
+}: TaskListGroupProps) => {
     return (
         <li
             className={[
@@ -101,12 +104,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 +134,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.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSCharacterCount from '@scottish-government/design-system/src/forms/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';
 
 const TextInput = ({
     buttonIcon,
     buttonText,
-    children,
     className,
     countThreshold,
     width,
@@ -29,7 +29,7 @@ const TextInput = ({
     type = 'text',
     value,
     ...props
-}: SGDS.Component.TextInput) => {
+}: TextInputProps) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -45,13 +45,13 @@ const TextInput = ({
         }
     }, [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 +63,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}

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;
+}

package/src/components/Textarea/Textarea.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
+import { TextInputBase } from '../../shared-types';
 
 const Textarea = ({
     className,
@@ -21,7 +22,7 @@ const Textarea = ({
     rows = 4,
     value,
     ...props
-}: SGDS.Component.Textarea) => {
+}: TextInputBase<HTMLTextAreaElement>) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -36,13 +37,13 @@ const Textarea = ({
         }
     }, [ref]);
 
-    function handleBlur(event: React.FocusEvent) {
+    function handleBlur(event: React.FocusEvent<HTMLTextAreaElement>) {
         if (typeof onBlur === 'function') {
             onBlur(event);
         }
     }
 
-    function handleChange(event: React.ChangeEvent) {
+    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
         if (typeof onChange === 'function') {
             onChange(event);
         }
@@ -54,7 +55,7 @@ const Textarea = ({
             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>}
 
             <textarea

package/src/components/WarningText/WarningText.tsx

@@ -2,7 +2,7 @@ const WarningText = ({
     children,
     className,
     ...props
-}: SGDS.Component.WarningText) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <div
             className={[

package/src/hooks/useTracking/useTracking.test.tsx

@@ -6,7 +6,9 @@ import { fireEvent, render, screen } from '@testing-library/react';
 
 import useTracking from './useTracking';
 
-const Link = ({ children }) => <a href="#">{children}</a>;
+const Link = ({ children }: {
+    children: React.ReactNode;
+}) => <a href="#">{children}</a>;
 
 const Links = () => {
     useTracking();
@@ -45,9 +47,7 @@ test('text tracking on component render', async () => {
 
     const button = screen.getByRole('button');
     const firstLink = screen.getByText('First link');
-
-    // todo: this will fail until the tracking script in DS core is updated to use textContent instead of innerText
-    // expect(firstLink).toHaveAttribute('data-section', SECTION_ONE_TEXT);
+    expect(firstLink).toHaveAttribute('data-section', SECTION_ONE_TEXT);
 
     fireEvent(
         button,
@@ -58,7 +58,5 @@ test('text tracking on component render', async () => {
     ));
 
     const secondLink = await screen.findByText('Second link')
-
-    // todo: this will fail until the tracking script in DS core is updated to use textContent instead of innerText
-    // expect(secondLink).toHaveAttribute('data-section', SECTION_TWO_TEXT);
+    expect(secondLink).toHaveAttribute('data-section', SECTION_TWO_TEXT);
 });