@scottish-government/designsystem-react 0.12.0 → 0.13.0

package/src/components/SiteHeader/SiteHeader.test.tsx

@@ -1,9 +1,9 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import SiteHeader from './SiteHeader';
-import SiteNavigation from '../SiteNavigation/SiteNavigation';
-import SiteSearch from '../SiteSearch/SiteSearch';
-import PhaseBanner from '../PhaseBanner/PhaseBanner';
+import SiteNavigation from '../SiteNavigation';
+import SiteSearch from '../SiteSearch';
+import PhaseBanner from '../PhaseBanner';
 
 test('site header renders correctly (maximal, testing markup structure)', () => {
     render(

package/src/components/SiteHeader/SiteHeader.tsx

@@ -1,16 +1,17 @@
 import React, { Children, useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
-import SiteNavigation from '../SiteNavigation/SiteNavigation';
-
-// @ts-ignore
+import SiteNavigation from '../SiteNavigation';
+// @ts-expect-error no types from core SGDS
 import DSMobileMenu from '@scottish-government/design-system/src/components/site-navigation/site-navigation';
+import { SiteHeaderBrandProps, SiteHeaderProps } from './types';
+import { SiteNavigationProps } from '../SiteNavigation/types';
 
 const Brand = ({
     children,
     homeUrl = '/',
     linkComponent,
     siteTitle
-}: SGDS.Component.SiteHeader.Brand) => {
+}: SiteHeaderBrandProps) => {
     function processChildren(children: React.ReactNode) {
         const image = React.cloneElement(children as React.ReactElement<HTMLImageElement>, { className: 'ds_site-branding__logo-image' });
 
@@ -36,26 +37,26 @@ const Brand = ({
 
 const Navigation = ({
     children
-}: any) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return children;
 }
 
 const Phase = ({
     children
-}: any) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return children;
 }
 
 const Search = ({
     children
-}: any) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return children;
 }
 
 const SiteHeader = ({
     children,
     ...props
-}: SGDS.Component.SiteHeader) => {
+}: SiteHeaderProps) => {
     const mobileMenuRef = useRef(null);
 
     let branding: React.ReactNode;
@@ -66,14 +67,14 @@ const SiteHeader = ({
 
     // assign to slots
     Children.forEach(children, (child: React.ReactNode) => {
-        const thisChild = child as React.ReactElement<any>;
+        const thisChild = child as React.JSX.Element;
         if (thisChild && thisChild.type === Brand) {
             branding = thisChild;
         } else if (thisChild && thisChild.type === Navigation) {
             navigation = thisChild;
 
             if (thisChild.props.children.type === SiteNavigation) {
-                mobileNavigation = React.cloneElement(thisChild.props.children as React.ReactElement<SGDS.Component.SiteNavigation>, { className: 'ds_site-navigation--mobile', id: 'mobile-navigation', ref: mobileMenuRef});
+                mobileNavigation = React.cloneElement(thisChild.props.children as React.ReactElement<SiteNavigationProps>, { className: 'ds_site-navigation--mobile', id: 'mobile-navigation', ref: mobileMenuRef});
             }
         } else if (thisChild && thisChild.type === Phase) {
             phase = thisChild;

package/src/components/SiteHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './SiteHeader';

package/src/components/SiteHeader/types.ts

@@ -0,0 +1,22 @@
+import { LinkComponent } from "../../shared-types";
+import { PhaseBannerProps } from "../PhaseBanner/types";
+import { SiteNavigationItemProps } from "../SiteNavigation/types";
+import { SiteSearchProps } from "../SiteSearch/types";
+
+export interface SiteHeaderBrandProps extends React.AllHTMLAttributes<HTMLElement> {
+    homeUrl: string;
+    linkComponent?: LinkComponent;
+    siteTitle?: string;
+}
+
+export interface SiteHeaderProps extends React.AllHTMLAttributes<HTMLHeadingElement> {
+    logo?: {
+        alt?: string;
+        href?: string;
+        src?: string;
+    };
+    navigationItems?: SiteNavigationItemProps[];
+    phaseBanner?: PhaseBannerProps;
+    siteSearch?: SiteSearchProps;
+    siteTitle?: string;
+}

package/src/components/SiteNavigation/SiteNavigation.tsx

@@ -1,9 +1,11 @@
+import { SiteNavigationItemProps, SiteNavigationProps } from "./types";
+
 const Item = ({
     children,
     isCurrent = false,
     href,
     linkComponent
-}: SGDS.Component.SiteNavigation.Item) => {
+}: SiteNavigationItemProps) => {
     const classNames = ['ds_site-navigation__link'];
     let ariaCurrent: React.AriaAttributes["aria-current"];
 
@@ -33,7 +35,7 @@ const SiteNavigation = ({
     children,
     className,
     ...props
-}: SGDS.Component.SiteNavigation) => {
+}: SiteNavigationProps) => {
     return (
         <nav
             className={[

package/src/components/SiteNavigation/index.ts

@@ -0,0 +1 @@
+export { default } from './SiteNavigation';

package/src/components/SiteNavigation/types.ts

@@ -0,0 +1,11 @@
+import { LinkComponent } from '../../shared-types';
+
+export interface SiteNavigationItemProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    isCurrent?: boolean;
+    href: string;
+    linkComponent?: LinkComponent;
+}
+
+export interface SiteNavigationProps extends React.AllHTMLAttributes<HTMLElement> {
+    ref?: React.RefObject<null>;
+}

package/src/components/SiteSearch/SiteSearch.stories.tsx

@@ -11,8 +11,10 @@ type AutocompleteResponseObject = {
     category: string
 }
 
-const suggestionMappingFunction = function (request: XMLHttpRequest) {
-    const responseObj = JSON.parse(request.response).map((item: string) => ({
+type SuggestionObject = { response: string };
+
+const suggestionMappingFunction = function (suggestionObj: SuggestionObject) {
+    const responseObj = JSON.parse(suggestionObj.response).map((item: string) => ({
         key: '',
         displayText: item,
         weight: '',

package/src/components/SiteSearch/SiteSearch.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
-import Button from '../Button/Button';
+import Button from '../Button';
+import { SiteSearchProps, SuggestionMappingFunctionProps } from './types';
 
 const SiteSearch = function ({
     action = '/search',
@@ -14,14 +15,14 @@ const SiteSearch = function ({
     name = 'q',
     placeholder = 'Search',
     ...props
-}: SGDS.Component.SiteSearch) {
+}: SiteSearchProps) {
     const ref = useRef(null);
     const hasAutocomplete = !!autocompleteEndpoint;
-    let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
+    const autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
 
     type AutoCompleteOptions = {
         minLength?: number,
-        suggestionMappingFunction?: Function,
+        suggestionMappingFunction?: SuggestionMappingFunctionProps,
         throttleDelay?: number
     }
 
@@ -48,7 +49,7 @@ const SiteSearch = function ({
     return (
         <div
             className={[
-                'ds_site-search', ,
+                'ds_site-search',
                 className,
                 hasAutocomplete ? 'ds_autocomplete' : undefined
             ].join(' ')}

package/src/components/SiteSearch/index.ts

@@ -0,0 +1 @@
+export { default } from './SiteSearch';

package/src/components/SiteSearch/types.ts

@@ -0,0 +1,13 @@
+type FormMethods = 'GET' | 'POST';
+export type SuggestionMappingFunctionProps = (suggestionObj: {response: string}) => [];
+
+export interface SiteSearchProps extends React.AllHTMLAttributes<HTMLInputElement> {
+    action?: string;
+    autocompleteEndpoint?: string;
+    autocompleteSuggestionMappingFunction?: SuggestionMappingFunctionProps;
+    id: string;
+    method?: FormMethods;
+    minLength?: number;
+    name?: string;
+    placeholder?: string;
+}

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/index.ts

@@ -0,0 +1 @@
+export { default } from './SkipLinks';

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import SummaryCard from './SummaryCard';
-import SummaryList from '../SummaryList/SummaryList';
+import SummaryList from '../SummaryList';
 
 const meta = {
     title: 'Components/SummaryCard',

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

@@ -1,7 +1,7 @@
 import { test, expect, vi } from 'vitest';
-import { render, screen, within, fireEvent } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import SummaryCard from './SummaryCard';
-import SummaryList from '../SummaryList/SummaryList';
+import SummaryList from '../SummaryList';
 
 const ONCLICK_FUNCTION = vi.fn();
 
@@ -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/index.ts

@@ -0,0 +1 @@
+export { default } from './SummaryCard';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './SummaryList';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './Table';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './Tabs';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './Tag';