@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/src/components/SiteFooter/types.ts

@@ -0,0 +1,20 @@
+import { LinkComponent } from "../../shared-types";
+
+export interface SiteFooterLinkProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    href?: string;
+    linkComponent?: LinkComponent;
+}
+
+export interface SiteFooterLicenseProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    href?: string;
+    logoSrc?: string;
+}
+
+export interface SiteFooterOrgProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    href?: string;
+    title: string;
+}
+
+export interface SiteFooterProps extends React.AllHTMLAttributes<HTMLElement> {
+    className?: string;
+}

package/src/components/SiteHeader/SiteHeader.stories.tsx

@@ -17,6 +17,7 @@ const meta = {
             <SiteHeader.Brand
                 homeUrl="/"
                 siteTitle="Design System React"
+                key="1"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.7 30.7">
                     <title>The Scottish Government</title>
@@ -26,7 +27,7 @@ const meta = {
                     <path fill="#333e48" d="M205.1 12.8c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6h-1.6V2.3H203v2.2h-1.3V6h1.3v4.7c0 1.4.7 2.1 2.1 2.1m-4.7-.2V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1h-1.8v8.1h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5.1h1.8zm-10.5-4.7h-4.5c.1-1 .8-2.1 2.3-2.1 1.5 0 2.1 1.2 2.2 2.1m-2.2 4.9c1.3 0 2.5-.4 3.3-1.2l-.8-1.2c-.6.6-1.5.9-2.3.9-1.5 0-2.4-1-2.6-2.2h6.2v-.4c0-2.5-1.5-4.4-4-4.4a4 4 0 0 0-4.1 4.2c.1 2.6 1.9 4.3 4.3 4.3m-5.9-.2V6.8c0-1.6-.9-2.4-2.3-2.4-1.2 0-2.3.8-2.7 1.5-.3-.9-1-1.5-2.2-1.5-1.2 0-2.3.8-2.6 1.3V4.6h-1.8v8.1h1.8V7c.4-.5 1.1-1.1 1.9-1.1 1 0 1.3.6 1.3 1.5v5.3h1.8V7c.4-.5 1.1-1.1 1.9-1.1 1 0 1.3.6 1.3 1.5v5.3h1.6zm-13.9 0V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1h-1.8v8.1h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5.1h1.8zm-11.1 0V7.1c.4-.6 1.3-1.1 2.1-1.1h.5V4.4c-1 0-2 .6-2.6 1.4V4.6H155v8.1h1.8zm-5.1-4.7h-4.5c.1-1 .8-2.1 2.3-2.1 1.5 0 2.1 1.2 2.2 2.1m-2.2 4.9c1.3 0 2.5-.4 3.3-1.2l-.8-1.2c-.6.6-1.5.9-2.3.9-1.5 0-2.4-1-2.6-2.2h6.2v-.4c0-2.5-1.5-4.4-4-4.4a4 4 0 0 0-4.1 4.2c.1 2.6 1.9 4.3 4.3 4.3m-7.8-.2 3.3-8.1h-1.9l-2.4 6.1-2.4-6.1h-1.9l3.3 8.1h2zm-9.7-1.3c-1.5 0-2.3-1.3-2.3-2.7 0-1.4.8-2.7 2.3-2.7 1.5 0 2.3 1.3 2.3 2.7 0 1.4-.8 2.7-2.3 2.7m0 1.5c2.6 0 4.1-1.9 4.1-4.2 0-2.3-1.6-4.2-4.1-4.2s-4.1 1.9-4.1 4.2a4 4 0 0 0 4.1 4.2m-10.7 0c3.5 0 5.6-2.4 5.6-6.2h-6.1v1.7h4a3.2 3.2 0 0 1-3.3 2.7c-2.2 0-3.8-1.7-3.8-4 0-2.4 1.6-4 3.8-4 1.2 0 2.3.7 2.9 1.5l1.6-.9a5.2 5.2 0 0 0-4.5-2.3 5.7 5.7 0 0 0-5.9 5.8c0 3.5 2.7 5.7 5.7 5.7m-11.5-.2V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.8 1.3V1.5h-1.8v11.2h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.6v5.1h1.7zm-12.2.2c2.2 0 3.4-1.1 3.4-2.5 0-3.2-4.9-2.1-4.9-3.6 0-.6.6-1 1.5-1 1 0 1.9.4 2.4 1l.7-1.2a4.8 4.8 0 0 0-3.1-1.1c-2 0-3.2 1.1-3.2 2.4 0 3.1 4.9 2 4.9 3.6 0 .6-.6 1.1-1.6 1.1a4 4 0 0 1-2.7-1.1l-.8 1.3c.8.7 2 1.1 3.4 1.1m-5-8.2h-1.8v8.1h1.8V4.6zm-.9-1c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1 0 .6.5 1.1 1.1 1.1M88 12.8c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6h-1.6V2.3h-1.8v2.2h-1.3V6h1.3v4.7c.1 1.4.8 2.1 2.2 2.1m-5.6 0c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6H82V2.3h-1.8v2.2h-1.3V6h1.3v4.7c.1 1.4.8 2.1 2.2 2.1m-8.3-1.5c-1.5 0-2.3-1.3-2.3-2.7 0-1.4.8-2.7 2.3-2.7 1.5 0 2.3 1.3 2.3 2.7 0 1.4-.8 2.7-2.3 2.7m0 1.5c2.6 0 4.1-1.9 4.1-4.2 0-2.3-1.6-4.2-4.1-4.2-2.6 0-4.1 1.9-4.1 4.2a4 4 0 0 0 4.1 4.2m-8.1 0c1.6 0 2.5-.7 3.1-1.4L68 10.3c-.5.6-1.1 1-1.9 1-1.5 0-2.4-1.1-2.4-2.7s1-2.7 2.4-2.7c.8 0 1.4.3 1.9.9l1.2-1.1c-.6-.7-1.6-1.3-3.2-1.3a4.1 4.1 0 0 0-4.2 4.2c.1 2.4 1.8 4.2 4.2 4.2m-9.7 0c3 0 4.3-1.6 4.3-3.5 0-4.1-6.5-2.9-6.5-4.9.1-.8.8-1.4 1.9-1.4 1.2 0 2.4.4 3.2 1.3l1.1-1.5c-1-1-2.4-1.6-4.2-1.6-2.5 0-4.1 1.4-4.1 3.3 0 4.1 6.5 2.6 6.5 5 0 .8-.6 1.5-2.2 1.5s-2.8-.7-3.5-1.6l-1.1 1.5a6 6 0 0 0 4.6 1.9"/>
                 </svg>
             </SiteHeader.Brand>,
-            <SiteHeader.Navigation>
+            <SiteHeader.Navigation key="2">
                 <SiteNavigation>
                 <SiteNavigation.Item href="#about">
                     About
@@ -51,10 +52,10 @@ const meta = {
                 </SiteNavigation.Item>
                 </SiteNavigation>
             </SiteHeader.Navigation>,
-            <SiteHeader.Search>
+            <SiteHeader.Search key="3">
                 <SiteSearch id="site-header-search" />
             </SiteHeader.Search>,
-            <SiteHeader.Phase>
+            <SiteHeader.Phase key="4">
                 <PhaseBanner phaseName="Beta">
                 This is a new service. Your{' '}
                 <a href="#feedback">

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

@@ -5,6 +5,17 @@ import SiteNavigation from '../SiteNavigation';
 import SiteSearch from '../SiteSearch';
 import PhaseBanner from '../PhaseBanner';
 
+const NAVIGATION_ITEMS = (
+    <>
+        <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
+        <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
+        <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
+        <SiteNavigation.Item href="#components" isCurrent>Components</SiteNavigation.Item>
+        <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
+        <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
+    </>
+);
+
 test('site header renders correctly (maximal, testing markup structure)', () => {
     render(
         <SiteHeader>
@@ -13,12 +24,7 @@ test('site header renders correctly (maximal, testing markup structure)', () =>
             </SiteHeader.Brand>
             <SiteHeader.Navigation>
                 <SiteNavigation>
-                    <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#components" current>Components</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
-                    <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
+                    {NAVIGATION_ITEMS}
                 </SiteNavigation>
             </SiteHeader.Navigation>
             <SiteHeader.Search>
@@ -155,16 +161,7 @@ test('site header logo link link with custom element', () => {
 });
 
 test('site header with site navigation', () => {
-    const NAVIGATION_ITEMS = (
-        <>
-            <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
-            <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
-            <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
-            <SiteNavigation.Item href="#components" current>Components</SiteNavigation.Item>
-            <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
-            <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
-        </>
-    );
+
 
     render(
         <>
@@ -240,6 +237,22 @@ test('site header with phase banner', () => {
     expect(siteHeaderPhaseBanner?.innerHTML).toEqual(phaseBannerReference.innerHTML);
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <SiteHeader>
+            <SiteHeader.Navigation>
+                <SiteNavigation>
+                    {NAVIGATION_ITEMS}
+                </SiteNavigation>
+            </SiteHeader.Navigation>
+        </SiteHeader>
+    );
+
+    const mobileNav = screen.getAllByRole('navigation')[0];
+    expect(mobileNav).toHaveClass('js-initialised');
+    expect(mobileNav).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <SiteHeader data-test="foo" />

package/src/components/SiteHeader/SiteHeader.tsx

@@ -1,16 +1,16 @@
 import React, { Children, useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
 import SiteNavigation from '../SiteNavigation';
-
-// @ts-ignore
 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 +36,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 +66,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;
@@ -83,6 +83,7 @@ const SiteHeader = ({
     });
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (mobileMenuRef.current) {
             new DSMobileMenu(mobileMenuRef.current).init();
         }

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

@@ -45,7 +45,7 @@ test('site navigation link renders correctly', () => {
     expect(link).toHaveAttribute('href', LINK_HREF)
 });
 
-test('site navigation link with custom element', () => {
+test('site navigation item with custom link element', () => {
     render(
         <SiteNavigation.Item href={LINK_HREF} linkComponent={
             ({ className, ...props }) => (
@@ -62,6 +62,21 @@ test('site navigation link with custom element', () => {
     expect(link?.textContent).toEqual(LINK_TEXT);
 });
 
+test('site navigation item without href', () => {
+    render(
+        // @ts-expect-error required prop missing
+        <SiteNavigation.Item>
+            {LINK_TEXT}
+        </SiteNavigation.Item>
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).queryByRole('link');
+
+    expect(link).not.toBeInTheDocument();
+    expect(item.textContent).toEqual(LINK_TEXT);
+});
+
 test('highlights current item', () => {
     render(
         <SiteNavigation.Item href={LINK_HREF} isCurrent>{LINK_TEXT}</SiteNavigation.Item>

package/src/components/SiteNavigation/SiteNavigation.tsx

@@ -1,9 +1,12 @@
+import { SiteNavigationItemProps, SiteNavigationProps } from "./types";
+import clsx from 'clsx';
+
 const Item = ({
     children,
     isCurrent = false,
     href,
     linkComponent
-}: SGDS.Component.SiteNavigation.Item) => {
+}: SiteNavigationItemProps) => {
     const classNames = ['ds_site-navigation__link'];
     let ariaCurrent: React.AriaAttributes["aria-current"];
 
@@ -12,11 +15,15 @@ const Item = ({
         ariaCurrent = 'page';
     }
 
+    const classNamesString = clsx(classNames);
+
     function processChildren(children: React.ReactNode) {
         if (linkComponent) {
-            return linkComponent({ className: classNames.join(' '), href, children });
+            return linkComponent({ className: classNamesString, href, children });
         } else if (href) {
-            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</a>;
+            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNamesString}>{children}</a>;
+        } else {
+            return <span className={classNamesString}>{children}</span>;
         }
     }
 
@@ -33,13 +40,13 @@ const SiteNavigation = ({
     children,
     className,
     ...props
-}: SGDS.Component.SiteNavigation) => {
+}: SiteNavigationProps) => {
     return (
         <nav
-            className={[
+            className={clsx([
                 'ds_site-navigation',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <ul className="ds_site-navigation__list">

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

@@ -142,6 +142,28 @@ test('autocomplete', () => {
 
 });
 
+test('instantiating/initialising DS component script: autocomplete', () => {
+    render(
+        <SiteSearch autocompleteEndpoint="/endpoint" />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchFormContainer = searchForm.parentElement;
+    expect(searchFormContainer).toHaveClass('js-initialised');
+    expect(searchFormContainer).toHaveClass('js-instantiated');
+});
+
+test('instantiating/initialising DS component script: no autocomplete', () => {
+    render(
+        <SiteSearch />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchFormContainer = searchForm.parentElement;
+    expect(searchFormContainer).not.toHaveClass('js-initialised');
+    expect(searchFormContainer).not.toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <SiteSearch data-test="foo" />

package/src/components/SiteSearch/SiteSearch.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
 import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
 import Button from '../Button';
+import { SiteSearchProps, SuggestionMappingFunctionProps } from './types';
+import clsx from 'clsx';
 
 const SiteSearch = function ({
     action = '/search',
@@ -14,19 +15,20 @@ 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
     }
 
     useEffect(() => {
-        if (hasAutocomplete && ref.current) {
+        const autocompleteElement = document.getElementById(autocompleteId);
+        if (hasAutocomplete && autocompleteElement && ref.current) {
             const options: AutoCompleteOptions = {};
             if (minLength) {
                 options.minLength = minLength;
@@ -36,7 +38,7 @@ const SiteSearch = function ({
             }
 
             const autocomplete = new DSAutocomplete(
-                document.getElementById(autocompleteId),
+                autocompleteElement,
                 autocompleteEndpoint,
                 options
             );
@@ -47,11 +49,11 @@ const SiteSearch = function ({
 
     return (
         <div
-            className={[
-                'ds_site-search', ,
+            className={clsx([
+                'ds_site-search',
                 className,
-                hasAutocomplete ? 'ds_autocomplete' : undefined
-            ].join(' ')}
+                hasAutocomplete && 'ds_autocomplete'
+            ])}
             id={autocompleteId ? autocompleteId : undefined}
             ref={ref}
             {...props}
@@ -68,11 +70,11 @@ const SiteSearch = function ({
                     <input aria-autocomplete={hasAutocomplete ? 'list' : undefined}
                         aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined}
                         autoComplete={hasAutocomplete ? 'off' : undefined}
-                        className={[
+                        className={clsx([
                             'ds_input',
                             'ds_site-search__input',
-                            hasAutocomplete ? 'js-autocomplete-input' : undefined
-                        ].join(' ')}
+                            hasAutocomplete && 'js-autocomplete-input'
+                        ])}
                         id={id}
                         name={name}
                         placeholder={placeholder}

package/src/components/SiteSearch/types.ts

@@ -0,0 +1,19 @@
+type FormMethods = 'GET' | 'POST';
+
+export type Suggestion = {
+    displayText: string;
+    isActive: boolean;
+}
+
+export type SuggestionMappingFunctionProps = (suggestions: object[]) => Suggestion[];
+
+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
 import dsSkipLinks from '@scottish-government/design-system/src/components/skip-links/skip-links';
+import { SkipLinksLinkProps, SkipLinksProps } from './types';
+import clsx from 'clsx';
 
 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();
@@ -30,10 +30,10 @@ const SkipLinks = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_skip-links',
-                isStatic && 'ds_skip-links--static',
-            ].join(' ')}
+                isStatic && 'ds_skip-links--static'
+            ])}
             {...props}
         >
             <ul className="ds_skip-links__list">

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,9 @@ 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';
+import clsx from 'clsx';
 
 const SummaryCard = ({
     children,
@@ -10,14 +13,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 {
@@ -27,10 +30,10 @@ const SummaryCard = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_summary-card',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <div className="ds_summary-card__header">

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">