@scottish-government/designsystem-react 0.13.0 → 1.0.1

package/dist/components/Select/types.d.ts

@@ -0,0 +1,6 @@
+import { FormFieldBase, InputWidth } from "../../shared-types";
+export interface SelectProps extends FormFieldBase<HTMLElement> {
+    defaultValue?: string;
+    placeholder?: string;
+    width?: InputWidth;
+}

package/dist/components/Select/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SequentialNavigation/SequentialNavigation.d.ts

@@ -1,12 +1,13 @@
+import { SequentialNavigationLinkProps, SequentialNavigationProps } from "./types";
 declare const SequentialNavigation: {
-    ({ ariaLabel, children, className, ...props }: SGDS.Component.SequentialNavigation): import("react").JSX.Element;
+    ({ ariaLabel, children, className, ...props }: SequentialNavigationProps): import("react").JSX.Element;
     displayName: string;
     Next: {
-        ({ children, href, linkComponent, textLabel }: SGDS.Component.SequentialNavigation.Link): import("react").JSX.Element;
+        ({ children, href, linkComponent, textLabel }: SequentialNavigationLinkProps): import("react").JSX.Element;
         displayName: string;
     };
     Previous: {
-        ({ children, href, linkComponent, textLabel }: SGDS.Component.SequentialNavigation.Link): import("react").JSX.Element;
+        ({ children, href, linkComponent, textLabel }: SequentialNavigationLinkProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/SequentialNavigation/SequentialNavigation.jsx

@@ -1,14 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
 const SeqNavLink = ({ children, href, isPrev, linkComponent, textLabel }) => {
-    const LINK_CLASSES = [
+    const LINK_CLASSES = (0, clsx_1.default)([
         'ds_sequential-nav__button',
         isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'
-    ].join(' ');
-    const ITEM_CLASSES = [
+    ]);
+    const ITEM_CLASSES = (0, clsx_1.default)([
         'ds_sequential-nav__item',
         isPrev ? 'ds_sequential-nav__item--prev' : 'ds_sequential-nav__item--next'
-    ].join(' ');
+    ]);
     function processChildren(children) {
         const linkInner = <span className="ds_sequential-nav__text" data-label={textLabel}>{children}</span>;
         if (linkComponent) {
@@ -29,10 +33,10 @@ const PreviousLink = ({ children, href, linkComponent, textLabel = 'Previous' })
     return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel} isPrev>{children}</SeqNavLink>;
 };
 const SequentialNavigation = ({ ariaLabel = 'Article navigation', children, className, ...props }) => {
-    return (<nav className={[
+    return (<nav className={(0, clsx_1.default)([
             'ds_sequential-nav',
             className
-        ].join(' ')} aria-label={ariaLabel} {...props}>
+        ])} aria-label={ariaLabel} {...props}>
             {children}
         </nav>);
 };

package/dist/components/SequentialNavigation/types.d.ts

@@ -0,0 +1,10 @@
+import { LinkComponent } from "../../shared-types";
+export interface SequentialNavigationLinkProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    href: string;
+    isPrev?: boolean;
+    linkComponent?: LinkComponent;
+    textLabel?: string;
+}
+export interface SequentialNavigationProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel?: React.AriaAttributes['aria-label'];
+}

package/dist/components/SequentialNavigation/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SideNavigation/SideNavigation.d.ts

@@ -1,12 +1,13 @@
+import { SideNavigationItemProps, SideNavigationListProps, SideNavigationProps } from './types';
 declare const SideNavigation: {
-    ({ ariaLabel, children, className, ...props }: SGDS.Component.SideNavigation): import("react").JSX.Element;
+    ({ ariaLabel, children, className, ...props }: SideNavigationProps): import("react").JSX.Element;
     displayName: string;
     Item: {
-        ({ children, href, isCurrent, linkComponent, title }: SGDS.Component.SideNavigation.Item): import("react").JSX.Element;
+        ({ children, href, isCurrent, linkComponent, title }: SideNavigationItemProps): import("react").JSX.Element;
         displayName: string;
     };
     List: {
-        ({ children, isRoot }: SGDS.Component.SideNavigation.List): import("react").JSX.Element;
+        ({ children, isRoot }: SideNavigationListProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/SideNavigation/SideNavigation.jsx

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// @ts-ignore
 const side_navigation_1 = __importDefault(require("@scottish-government/design-system/src/components/side-navigation/side-navigation"));
+const clsx_1 = __importDefault(require("clsx"));
 const SideNavigationList = function ({ children, isRoot }) {
     return (<ul className="ds_side-navigation__list" id={isRoot ? 'side-navigation-root' : undefined}>
             {children}
@@ -13,10 +13,10 @@ const SideNavigationList = function ({ children, isRoot }) {
 };
 const SideNavigationItem = function ({ children, href, isCurrent = false, linkComponent, title }) {
     const LINK_CLASS = 'ds_side-navigation__link';
-    return (<li className={[
+    return (<li className={(0, clsx_1.default)([
             'ds_side-navigation__item',
             children && 'ds_side-navigation__item--has-children'
-        ].join(' ')}>
+        ])}>
             {isCurrent ?
             <span className={LINK_CLASS + ' ds_current'}>{title}</span> :
             linkComponent ? linkComponent({ className: LINK_CLASS, href, children: title }) :
@@ -28,14 +28,17 @@ const SideNavigationItem = function ({ children, href, isCurrent = false, linkCo
 const SideNavigation = function ({ ariaLabel = 'Sections', children, className, ...props }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        if (ref.current && children) {
-            new side_navigation_1.default(ref.current).init();
+        /* istanbul ignore else */
+        if (ref.current) {
+            if (children) {
+                new side_navigation_1.default(ref.current).init();
+            }
         }
     }, [ref]);
-    return (<nav aria-label={ariaLabel} className={[
+    return (<nav aria-label={ariaLabel} className={(0, clsx_1.default)([
             'ds_side-navigation',
             className
-        ].join(' ')} data-module="ds-side-navigation" ref={ref} {...props}>
+        ])} data-module="ds-side-navigation" ref={ref} {...props}>
             <input type="checkbox" className="fully-hidden  js-toggle-side-navigation" id="show-side-navigation" aria-controls="side-navigation-root"/>
             <label className="ds_side-navigation__expand  ds_link" htmlFor="show-side-navigation">
                 <span className="visually-hidden">Show all</span> Pages in this section

package/dist/components/SideNavigation/types.d.ts

@@ -0,0 +1,13 @@
+import { LinkComponent } from "../../shared-types";
+export interface SideNavigationListProps extends React.AllHTMLAttributes<HTMLUListElement> {
+    isRoot?: boolean;
+}
+export interface SideNavigationItemProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    isCurrent?: boolean;
+    href: string;
+    linkComponent?: LinkComponent;
+    title: string;
+}
+export interface SideNavigationProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel?: string;
+}

package/dist/components/SideNavigation/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SiteFooter/SiteFooter.d.ts

@@ -1,20 +1,21 @@
 import React from 'react';
+import { SiteFooterLicenseProps, SiteFooterLinkProps, SiteFooterOrgProps, SiteFooterProps } from './types';
 declare const SiteFooter: {
-    ({ children, className, ...props }: SGDS.Component.SiteFooter): React.JSX.Element;
+    ({ children, className, ...props }: SiteFooterProps): React.JSX.Element;
     Links: {
-        ({ children, ...props }: SGDS.Component.SiteFooter.Links): React.JSX.Element;
+        ({ children, ...props }: React.AllHTMLAttributes<HTMLUListElement>): React.JSX.Element;
         displayName: string;
     };
     Link: {
-        ({ children, href, linkComponent, ...props }: SGDS.Component.SiteFooter.Link): React.JSX.Element;
+        ({ children, href, linkComponent, ...props }: SiteFooterLinkProps): React.JSX.Element;
         displayName: string;
     };
     License: {
-        ({ children, ...props }: SGDS.Component.SiteFooter.License): React.JSX.Element;
+        ({ children, ...props }: SiteFooterLicenseProps): React.JSX.Element;
         displayName: string;
     };
     Org: {
-        ({ href, title, children, ...props }: SGDS.Component.SiteFooter.Org): React.JSX.Element;
+        ({ href, title, children, ...props }: SiteFooterOrgProps): React.JSX.Element;
         displayName: string;
     };
     displayName: string;

package/dist/components/SiteFooter/SiteFooter.jsx

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
+const clsx_1 = __importDefault(require("clsx"));
 const License = ({ children, ...props }) => {
     return (<div className="ds_site-footer__copyright" {...props}>
             {children}
@@ -66,7 +67,7 @@ const Link = ({ children, href, linkComponent, ...props }) => {
 };
 const Org = ({ href, title, children, ...props }) => {
     children = react_1.Children.map(children, child => {
-        let thisChild = child;
+        const thisChild = child;
         if (thisChild && ['img', 'svg', 'picture'].includes(thisChild.type)) {
             return react_1.default.cloneElement(thisChild, { className: 'ds_site-footer__org-logo' });
         }
@@ -81,10 +82,10 @@ const Org = ({ href, title, children, ...props }) => {
         </div>);
 };
 const SiteFooter = ({ children, className, ...props }) => {
-    return (<footer className={[
+    return (<footer className={(0, clsx_1.default)([
             "ds_site-footer",
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <div className="ds_wrapper">
                 <div className="ds_site-footer__content">
                     {children}

package/dist/components/SiteFooter/types.d.ts

@@ -0,0 +1,16 @@
+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/dist/components/SiteFooter/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SiteHeader/SiteHeader.d.ts

@@ -1,20 +1,21 @@
 import React from 'react';
+import { SiteHeaderBrandProps, SiteHeaderProps } from './types';
 declare const SiteHeader: {
-    ({ children, ...props }: SGDS.Component.SiteHeader): React.JSX.Element;
+    ({ children, ...props }: SiteHeaderProps): React.JSX.Element;
     Brand: {
-        ({ children, homeUrl, linkComponent, siteTitle }: SGDS.Component.SiteHeader.Brand): React.JSX.Element;
+        ({ children, homeUrl, linkComponent, siteTitle }: SiteHeaderBrandProps): React.JSX.Element;
         displayName: string;
     };
     Navigation: {
-        ({ children }: any): any;
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): React.ReactNode;
         displayName: string;
     };
     Phase: {
-        ({ children }: any): any;
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): React.ReactNode;
         displayName: string;
     };
     Search: {
-        ({ children }: any): any;
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): React.ReactNode;
         displayName: string;
     };
     displayName: string;

package/dist/components/SiteHeader/SiteHeader.jsx

@@ -39,7 +39,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const Icon_1 = __importDefault(require("../../common/Icon"));
 const SiteNavigation_1 = __importDefault(require("../SiteNavigation"));
-// @ts-ignore
 const site_navigation_1 = __importDefault(require("@scottish-government/design-system/src/components/site-navigation/site-navigation"));
 const Brand = ({ children, homeUrl = '/', linkComponent, siteTitle }) => {
     function processChildren(children) {
@@ -96,6 +95,7 @@ const SiteHeader = ({ children, ...props }) => {
         }
     });
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (mobileMenuRef.current) {
             new site_navigation_1.default(mobileMenuRef.current).init();
         }

package/dist/components/SiteHeader/types.d.ts

@@ -0,0 +1,20 @@
+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/dist/components/SiteHeader/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SiteNavigation/SiteNavigation.d.ts

@@ -1,8 +1,9 @@
+import { SiteNavigationItemProps, SiteNavigationProps } from "./types";
 declare const SiteNavigation: {
-    ({ children, className, ...props }: SGDS.Component.SiteNavigation): import("react").JSX.Element;
+    ({ children, className, ...props }: SiteNavigationProps): import("react").JSX.Element;
     displayName: string;
     Item: {
-        ({ children, isCurrent, href, linkComponent }: SGDS.Component.SiteNavigation.Item): import("react").JSX.Element;
+        ({ children, isCurrent, href, linkComponent }: SiteNavigationItemProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/SiteNavigation/SiteNavigation.jsx

@@ -1,5 +1,9 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
 const Item = ({ children, isCurrent = false, href, linkComponent }) => {
     const classNames = ['ds_site-navigation__link'];
     let ariaCurrent;
@@ -7,12 +11,16 @@ const Item = ({ children, isCurrent = false, href, linkComponent }) => {
         classNames.push('ds_current');
         ariaCurrent = 'page';
     }
+    const classNamesString = (0, clsx_1.default)(classNames);
     function processChildren(children) {
         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>;
         }
     }
     return (<li className="ds_site-navigation__item">
@@ -20,10 +28,10 @@ const Item = ({ children, isCurrent = false, href, linkComponent }) => {
         </li>);
 };
 const SiteNavigation = ({ children, className, ...props }) => {
-    return (<nav className={[
+    return (<nav className={(0, clsx_1.default)([
             'ds_site-navigation',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <ul className="ds_site-navigation__list">
                 {children}
             </ul>

package/dist/components/SiteNavigation/types.d.ts

@@ -0,0 +1,9 @@
+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/dist/components/SiteNavigation/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SiteSearch/SiteSearch.d.ts

@@ -1,5 +1,6 @@
+import { SiteSearchProps } from './types';
 declare const SiteSearch: {
-    ({ action, autocompleteEndpoint, autocompleteSuggestionMappingFunction, className, id, method, minLength, name, placeholder, ...props }: SGDS.Component.SiteSearch): import("react").JSX.Element;
+    ({ action, autocompleteEndpoint, autocompleteSuggestionMappingFunction, className, id, method, minLength, name, placeholder, ...props }: SiteSearchProps): import("react").JSX.Element;
     displayName: string;
 };
 export default SiteSearch;

package/dist/components/SiteSearch/SiteSearch.jsx

@@ -4,15 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// @ts-ignore
 const autocomplete_1 = __importDefault(require("@scottish-government/design-system/src/components/autocomplete/autocomplete"));
 const Button_1 = __importDefault(require("../Button"));
+const clsx_1 = __importDefault(require("clsx"));
 const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocompleteSuggestionMappingFunction, className, id = 'site-search', method = 'GET', minLength = 3, name = 'q', placeholder = 'Search', ...props }) {
     const ref = (0, react_1.useRef)(null);
     const hasAutocomplete = !!autocompleteEndpoint;
-    let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
+    const autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
     (0, react_1.useEffect)(() => {
-        if (hasAutocomplete && ref.current) {
+        const autocompleteElement = document.getElementById(autocompleteId);
+        if (hasAutocomplete && autocompleteElement && ref.current) {
             const options = {};
             if (minLength) {
                 options.minLength = minLength;
@@ -20,15 +21,15 @@ const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocom
             if (autocompleteSuggestionMappingFunction) {
                 options.suggestionMappingFunction = autocompleteSuggestionMappingFunction;
             }
-            const autocomplete = new autocomplete_1.default(document.getElementById(autocompleteId), autocompleteEndpoint, options);
+            const autocomplete = new autocomplete_1.default(autocompleteElement, autocompleteEndpoint, options);
             autocomplete.init();
         }
     }, [ref, autocompleteEndpoint, autocompleteId, hasAutocomplete, minLength, autocompleteSuggestionMappingFunction]);
-    return (<div className={[
-            'ds_site-search', ,
+    return (<div className={(0, clsx_1.default)([
+            'ds_site-search',
             className,
-            hasAutocomplete ? 'ds_autocomplete' : undefined
-        ].join(' ')} id={autocompleteId ? autocompleteId : undefined} ref={ref} {...props}>
+            hasAutocomplete && 'ds_autocomplete'
+        ])} id={autocompleteId ? autocompleteId : undefined} ref={ref} {...props}>
 
             <form role="search" className="ds_site-search__form" method={method} action={action}>
                 <label className="ds_label  visually-hidden" htmlFor={id} id={id + '-label'}>Search</label>
@@ -36,11 +37,11 @@ const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocom
                 {hasAutocomplete && (<div role="status" aria-live="polite" id="autocomplete-status" className="visually-hidden"></div>)}
 
                 <div className="ds_input__wrapper  ds_input__wrapper--has-icon">
-                    <input aria-autocomplete={hasAutocomplete ? 'list' : undefined} aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined} autoComplete={hasAutocomplete ? 'off' : undefined} className={[
+                    <input aria-autocomplete={hasAutocomplete ? 'list' : undefined} aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined} autoComplete={hasAutocomplete ? 'off' : undefined} className={(0, clsx_1.default)([
             'ds_input',
             'ds_site-search__input',
-            hasAutocomplete ? 'js-autocomplete-input' : undefined
-        ].join(' ')} id={id} name={name} placeholder={placeholder} required spellCheck="false" type="search"/>
+            hasAutocomplete && 'js-autocomplete-input'
+        ])} id={id} name={name} placeholder={placeholder} required spellCheck="false" type="search"/>
 
                     <Button_1.default type="submit" icon="Search" isIconOnly>Search</Button_1.default>
 

package/dist/components/SiteSearch/types.d.ts

@@ -0,0 +1,17 @@
+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;
+}
+export {};

package/dist/components/SiteSearch/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SkipLinks/SkipLinks.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import { SkipLinksLinkProps, SkipLinksProps } from './types';
 declare const SkipLinks: {
-    ({ children, mainContentId, mainLinkText, isStatic, ...props }: SGDS.Component.SkipLinks): React.JSX.Element;
+    ({ children, mainContentId, mainLinkText, isStatic, ...props }: SkipLinksProps): React.JSX.Element;
     displayName: string;
     Link: {
-        ({ children, fragmentId }: SGDS.Component.SkipLinks.Link): React.JSX.Element;
+        ({ children, fragmentId }: SkipLinksLinkProps): React.JSX.Element;
         displayName: string;
     };
 };

package/dist/components/SkipLinks/SkipLinks.jsx

@@ -37,8 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-// @ts-ignore
 const skip_links_1 = __importDefault(require("@scottish-government/design-system/src/components/skip-links/skip-links"));
+const clsx_1 = __importDefault(require("clsx"));
 const Link = ({ children, fragmentId }) => {
     return (<li className="ds_skip-links__item">
             <a href={`#${fragmentId}`} className="ds_skip-links__link">{children}</a>
@@ -48,10 +48,10 @@ const SkipLinks = ({ children, mainContentId = 'main-content', mainLinkText = 'S
     (0, react_1.useEffect)(() => {
         skip_links_1.default.init();
     });
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_skip-links',
-            isStatic && 'ds_skip-links--static',
-        ].join(' ')} {...props}>
+            isStatic && 'ds_skip-links--static'
+        ])} {...props}>
             <ul className="ds_skip-links__list">
                 {children ? children : <Link fragmentId={mainContentId}>{mainLinkText}</Link>}
             </ul>

package/dist/components/SkipLinks/types.d.ts

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

package/dist/components/SkipLinks/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SummaryCard/SummaryCard.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { SummaryCardProps } from './types';
+import { ActionLinkProps } from '../../common/ActionLink/types';
 declare const SummaryCard: {
-    ({ children, className, headingLevel, title, ...props }: SGDS.Component.SummaryCard): React.JSX.Element;
+    ({ children, className, headingLevel, title, ...props }: SummaryCardProps): React.JSX.Element;
     displayName: string;
     Action: {
-        ({ children, describedby, href, linkComponent, onclick }: SGDS.Common.ActionLink): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+        ({ children, describedby, href, linkComponent, onclick }: ActionLinkProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
         displayName: string;
     };
 };

package/dist/components/SummaryCard/SummaryCard.jsx

@@ -40,9 +40,10 @@ const react_1 = __importStar(require("react"));
 const ActionLink_1 = __importDefault(require("../../common/ActionLink"));
 const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const clsx_1 = __importDefault(require("clsx"));
 const SummaryCard = ({ children, className, headingLevel = 'h3', title, ...props }) => {
-    let actions = [];
-    let remainingChildren = [];
+    const actions = [];
+    const remainingChildren = [];
     const describedById = (0, react_1.useId)();
     react_1.Children.forEach(children, (child) => {
         const thisChild = child;
@@ -53,10 +54,10 @@ const SummaryCard = ({ children, className, headingLevel = 'h3', title, ...props
             remainingChildren.push(thisChild);
         }
     });
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_summary-card',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <div className="ds_summary-card__header">
                 <WrapperTag_1.default className="ds_summary-card__header-title" id={describedById} tagName={headingLevel}>{title}</WrapperTag_1.default>
 

package/dist/components/SummaryCard/types.d.ts

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

package/dist/components/SummaryCard/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SummaryList/SummaryList.d.ts

@@ -1,16 +1,18 @@
 import React from 'react';
+import { SummaryListItemProps, SummaryListProps } from './types';
+import { ActionLinkProps } from '../../common/ActionLink/types';
 declare const SummaryList: {
-    ({ children, className, isBorderless, ...props }: SGDS.Component.SummaryList): React.JSX.Element;
+    ({ children, className, isBorderless, ...props }: SummaryListProps): React.JSX.Element;
     Action: {
-        ({ children, describedby, href, linkComponent, onclick }: SGDS.Common.ActionLink): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+        ({ children, describedby, href, linkComponent, onclick }: ActionLinkProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
         displayName: string;
     };
     Item: {
-        ({ children, title }: SGDS.Component.SummaryList.Item): React.JSX.Element;
+        ({ children, title }: SummaryListItemProps): React.JSX.Element;
         displayName: string;
     };
     Value: {
-        ({ children }: SGDS.Component.SummaryList.Answer): React.JSX.Element;
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): React.JSX.Element;
         displayName: string;
     };
     displayName: string;

package/dist/components/SummaryList/SummaryList.jsx

@@ -39,9 +39,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const ActionLink_1 = __importDefault(require("../../common/ActionLink"));
 const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
+const clsx_1 = __importDefault(require("clsx"));
 const Item = ({ children, title }) => {
-    let values = [];
-    let actions = [];
+    const values = [];
+    const actions = [];
     const describedById = (0, react_1.useId)();
     react_1.Children.forEach(children, (child) => {
         const thisChild = child;
@@ -75,11 +76,11 @@ const Value = ({ children }) => {
     return (<q className="ds_summary-list__answer">{children}</q>);
 };
 const SummaryList = ({ children, className, isBorderless, ...props }) => {
-    return (<ol className={[
+    return (<ol className={(0, clsx_1.default)([
             'ds_summary-list',
             isBorderless && 'ds_summary-list--no-border',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
            {children}
         </ol>);
 };