@scottish-government/designsystem-react 0.13.0 → 1.0.0

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

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

package/dist/components/SummaryList/types.js

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

package/dist/components/Table/Table.d.ts

@@ -1,5 +1,6 @@
+import { TableProps } from './types';
 declare const Table: {
-    ({ children, className, smallscreen, ...props }: SGDS.Component.Table): import("react").JSX.Element;
+    ({ children, className, smallscreen, ...props }: TableProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Table;

package/dist/components/Table/Table.jsx

@@ -4,19 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// @ts-ignore
 const table_1 = __importDefault(require("@scottish-government/design-system/src/components/table/table"));
+const clsx_1 = __importDefault(require("clsx"));
 const Table = ({ children, className, smallscreen, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (ref.current) {
-            new table_1.default().init();
+            new table_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<table className={[
+    return (<table className={(0, clsx_1.default)([
             'ds_table',
             className
-        ].join(' ')} data-smallscreen={smallscreen} ref={ref} {...props}>
+        ])} data-smallscreen={smallscreen} ref={ref} {...props}>
             {children}
         </table>);
 };

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

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

package/dist/components/Table/types.js

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

package/dist/components/Tabs/Tabs.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import { TabsItemProps, TabsProps } from './types';
 declare const Tabs: {
-    ({ baseId, children, className, headingLevel, isBorderless, isManual, title, ...props }: SGDS.Component.Tabs): React.JSX.Element;
+    ({ baseId, children, className, headingLevel, isBorderless, isManual, title, ...props }: TabsProps): React.JSX.Element;
     displayName: string;
     Item: {
-        ({ isBorderless, children, className, id, tabLabel, ...props }: SGDS.Component.Tabs.Item): React.JSX.Element;
+        ({ isBorderless, children, className, id, tabLabel, ...props }: TabsItemProps): React.JSX.Element;
         displayName: string;
     };
 };

package/dist/components/Tabs/Tabs.jsx

@@ -38,14 +38,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
-// @ts-ignore
 const tabs_1 = __importDefault(require("@scottish-government/design-system/src/components/tabs/tabs"));
+const clsx_1 = __importDefault(require("clsx"));
 const TabItem = ({ isBorderless, children, className, id, tabLabel, ...props }) => {
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_tabs__content',
             !isBorderless && 'ds_tabs__content--bordered',
             className
-        ].join(' ')} id={id} {...props}>
+        ])} data-label={tabLabel} id={id} {...props}>
             {children}
         </div>);
 };
@@ -58,6 +58,7 @@ const Tabs = ({ baseId = 'tabs', children, className, headingLevel = 'h2', isBor
     const ref = (0, react_1.useRef)(null);
     const headingId = `${baseId}-heading`;
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new tabs_1.default(ref.current).init();
         }
@@ -76,11 +77,11 @@ const Tabs = ({ baseId = 'tabs', children, className, headingLevel = 'h2', isBor
             return <TabListItem href={`#${child.props.id}`}>{child.props.tabLabel}</TabListItem>;
         }
     });
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_tabs',
             isManual && 'ds_tabs--manual',
             className
-        ].join(' ')} ref={ref} {...props}>
+        ])} ref={ref} {...props}>
             <WrapperTag_1.default id={headingId} className="ds_tabs__title" tagName={headingLevel}>
                 {title}
             </WrapperTag_1.default>

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

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

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

package/dist/components/Tag/Tag.d.ts

@@ -1,5 +1,6 @@
+import { TagProps } from "./types";
 declare const Tag: {
-    ({ children, className, colour, ...props }: SGDS.Component.Tag): import("react").JSX.Element;
+    ({ children, className, colour, ...props }: TagProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Tag;

package/dist/components/Tag/Tag.jsx

@@ -1,11 +1,15 @@
 "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 Tag = ({ children, className, colour, ...props }) => {
-    return (<span className={[
+    return (<span className={(0, clsx_1.default)([
             'ds_tag',
             className,
-            colour && `ds_tag--${colour}`,
-        ].join(' ')} {...props}>
+            colour && `ds_tag--${colour}`
+        ])} {...props}>
             {children}
         </span>);
 };

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

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

package/dist/components/Tag/types.js

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

package/dist/components/TaskList/TaskList.d.ts

@@ -1,12 +1,13 @@
+import { TaskListGroupProps, TaskListItemProps, TaskListProps } from './types';
 declare const TaskList: {
-    ({ children, className, headingId, title, ...props }: SGDS.Component.TaskList): import("react").JSX.Element;
+    ({ children, className, headingId, title, ...props }: TaskListProps): import("react").JSX.Element;
     displayName: string;
     Item: {
-        ({ children, className, href, id, isComplete, linkComponent, statusText, tagColour, title, ...props }: SGDS.Component.TaskList.Item): import("react").JSX.Element;
+        ({ children, className, href, id, isComplete, linkComponent, statusText, tagColour, title, ...props }: TaskListItemProps): import("react").JSX.Element;
         displayName: string;
     };
     Group: {
-        ({ children, className, intro, title, ...props }: SGDS.Component.TaskList.Group): import("react").JSX.Element;
+        ({ children, className, intro, title, ...props }: TaskListGroupProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/TaskList/TaskList.jsx

@@ -8,6 +8,7 @@ const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWr
 const HintText_1 = __importDefault(require("../../common/HintText"));
 const ScreenReaderText_1 = __importDefault(require("../../common/ScreenReaderText"));
 const Tag_1 = __importDefault(require("../Tag"));
+const clsx_1 = __importDefault(require("clsx"));
 const TaskItem = ({ children, className, href, id, isComplete = false, linkComponent, statusText, tagColour = 'grey', title, ...props }) => {
     if (isComplete) {
         tagColour = 'green';
@@ -15,17 +16,19 @@ const TaskItem = ({ children, className, href, id, isComplete = false, linkCompo
     }
     const LINK_CLASS = 'ds_task-list__task-link';
     function getLinkElement(children) {
+        let linkElement;
         if (linkComponent) {
-            return linkComponent({ className: LINK_CLASS, href, children });
+            linkElement = linkComponent({ className: LINK_CLASS, href, children });
         }
-        else if (href) {
-            return <a href={href} className={LINK_CLASS}>{children}</a>;
+        else {
+            linkElement = <a href={href} className={LINK_CLASS}>{children}</a>;
         }
+        return linkElement;
     }
-    return (<li className={[
+    return (<li className={(0, clsx_1.default)([
             'ds_task-list__task',
             className
-        ].join(' ')} id={id} {...props}>
+        ])} id={id} {...props}>
             <div className="ds_task-list__task-details">
                 <h3 className="ds_task-list__task-heading">
                 <ConditionalWrapper_1.default condition={typeof href !== 'undefined'} wrapper={(children) => getLinkElement(children)}>
@@ -49,10 +52,10 @@ const TaskItem = ({ children, className, href, id, isComplete = false, linkCompo
  * @returns {JSX.Element} - The element
  */
 const TaskGroup = ({ children, className, intro, title, ...props }) => {
-    return (<li className={[
+    return (<li className={(0, clsx_1.default)([
             'ds_task-list-group__section',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <h2 className="ds_task-list-heading">{title}</h2>
             {intro && <p className="ds_task-list-intro">{intro}</p>}
             <ul className="ds_task-list">
@@ -62,7 +65,7 @@ const TaskGroup = ({ children, className, intro, title, ...props }) => {
 };
 const TaskList = ({ children, className, headingId = 'task-list', title, ...props }) => {
     let taskCount = 0;
-    let incompleteTaskIds = [];
+    const incompleteTaskIds = [];
     let completedTasksCount = 0;
     function processChild(item) {
         if (item.type.displayName === 'TaskList.Item') {

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

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

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

package/dist/components/TextInput/TextInput.d.ts

@@ -1,5 +1,6 @@
+import { TextInputProps } from './types';
 declare const TextInput: {
-    ({ buttonIcon, buttonText, children, className, countThreshold, width, isCurrency, currencySymbol, errorMessage, hasButton, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, type, value, ...props }: SGDS.Component.TextInput): import("react").JSX.Element;
+    ({ buttonIcon, buttonText, className, countThreshold, width, isCurrency, currencySymbol, errorMessage, hasButton, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, type, value, ...props }: TextInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TextInput;

package/dist/components/TextInput/TextInput.jsx

@@ -4,17 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// @ts-ignore
-const character_count_1 = __importDefault(require("@scottish-government/design-system/src/forms/character-count/character-count"));
+const character_count_1 = __importDefault(require("@scottish-government/design-system/src/components/character-count/character-count"));
 const Button_1 = __importDefault(require("../Button"));
 const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
 const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
 const HintText_1 = __importDefault(require("../../common/HintText"));
-const TextInput = ({ buttonIcon, buttonText, children, className, countThreshold, width, isCurrency, currencySymbol, errorMessage, hasButton = false, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, type = 'text', value, ...props }) => {
+const clsx_1 = __importDefault(require("clsx"));
+const TextInput = ({ buttonIcon, buttonText, className, countThreshold, width, isCurrency, currencySymbol, errorMessage, hasButton = false, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, type = 'text', value, ...props }) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = (0, react_1.useRef)(null);
-    const inputWrapperClasses = `${hasButton ? 'ds_input__wrapper  ds_input__wrapper--has-icon' : ''} ${isCurrency ? 'ds_currency-wrapper' : ''}`;
+    const inputWrapperClasses = (0, clsx_1.default)(hasButton && 'ds_input__wrapper', hasButton && 'ds_input__wrapper--has-icon', isCurrency && 'ds_currency-wrapper');
     const describedbys = [];
     if (hintText) {
         describedbys.push(hintTextId);
@@ -25,6 +25,7 @@ const TextInput = ({ buttonIcon, buttonText, children, className, countThreshold
     }
     ;
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new character_count_1.default(ref.current).init();
         }
@@ -41,15 +42,15 @@ const TextInput = ({ buttonIcon, buttonText, children, className, countThreshold
     }
     return (<ConditionalWrapper_1.default condition={typeof maxlength !== 'undefined' && maxlength > 0} wrapper={(children) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}>
             <label className="ds_label" htmlFor={id}>{label}</label>
-            {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
+            {hintText && <HintText_1.default id={hintTextId}>{hintText}</HintText_1.default>}
             {errorMessage && <ErrorMessage_1.default id={errorMessageId}>{errorMessage}</ErrorMessage_1.default>}
             <ConditionalWrapper_1.default condition={hasButton || typeof isCurrency !== 'undefined' && isCurrency} wrapper={(children) => <div className={inputWrapperClasses} data-symbol={currencySymbol}>{children}</div>}>
-                <input aria-describedby={describedbys.join(' ')} aria-invalid={hasError} className={[
+                <input aria-describedby={describedbys.join(' ')} aria-invalid={hasError} className={(0, clsx_1.default)([
             'ds_input',
             className,
-            hasError ? 'ds_input--error' : '',
-            width ? `ds_input--${width}` : '',
-        ].join(' ')} defaultValue={value} id={id} maxLength={maxlength} name={name || id} onBlur={handleBlur} onChange={handleChange} placeholder={placeholder} type={type} {...props}/>
+            hasError && 'ds_input--error',
+            width && `ds_input--${width}`,
+        ])} defaultValue={value} id={id} maxLength={maxlength} name={name || id} onBlur={handleBlur} onChange={handleChange} placeholder={placeholder} type={type} {...props}/>
                 {hasButton && (buttonText || buttonIcon) && <Button_1.default isIconOnly icon={buttonIcon}>{buttonText}</Button_1.default>}
             </ConditionalWrapper_1.default>
         </ConditionalWrapper_1.default>);

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

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

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

package/dist/components/Textarea/Textarea.d.ts

@@ -1,5 +1,6 @@
+import { TextInputBase } from '../../shared-types';
 declare const Textarea: {
-    ({ className, countThreshold, errorMessage, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, rows, value, ...props }: SGDS.Component.Textarea): import("react").JSX.Element;
+    ({ className, countThreshold, errorMessage, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, rows, value, ...props }: TextInputBase<HTMLTextAreaElement>): import("react").JSX.Element;
     displayName: string;
 };
 export default Textarea;

package/dist/components/Textarea/Textarea.jsx

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// @ts-ignore
-const character_count_1 = __importDefault(require("@scottish-government/design-system/src/forms/character-count/character-count"));
+const character_count_1 = __importDefault(require("@scottish-government/design-system/src/components/character-count/character-count"));
 const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
 const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
 const HintText_1 = __importDefault(require("../../common/HintText"));
+const clsx_1 = __importDefault(require("clsx"));
 const Textarea = ({ className, countThreshold, errorMessage, hasError, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, rows = 4, value, ...props }) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
@@ -23,6 +23,7 @@ const Textarea = ({ className, countThreshold, errorMessage, hasError, hintText,
     }
     ;
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new character_count_1.default(ref.current).init();
         }
@@ -39,14 +40,14 @@ const Textarea = ({ className, countThreshold, errorMessage, hasError, hintText,
     }
     return (<ConditionalWrapper_1.default condition={typeof maxlength !== 'undefined' && maxlength > 0} wrapper={(children) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}>
             <label className="ds_label" htmlFor={id}>{label}</label>
-            {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
+            {hintText && <HintText_1.default id={hintTextId}>{hintText}</HintText_1.default>}
             {errorMessage && <ErrorMessage_1.default id={errorMessageId}>{errorMessage}</ErrorMessage_1.default>}
 
-            <textarea aria-describedby={describedbys.join(' ')} aria-invalid={hasError} className={[
+            <textarea aria-describedby={describedbys.join(' ')} aria-invalid={hasError} className={(0, clsx_1.default)([
             'ds_input',
             hasError && 'ds_input--error',
             className
-        ].join(' ')} defaultValue={value} id={id} maxLength={maxlength} name={name || id} onBlur={handleBlur} onChange={handleChange} placeholder={placeholder} rows={rows} {...props}/>
+        ])} defaultValue={value} id={id} maxLength={maxlength} name={name || id} onBlur={handleBlur} onChange={handleChange} placeholder={placeholder} rows={rows} {...props}/>
 
         </ConditionalWrapper_1.default>);
 };

package/dist/components/WarningText/WarningText.d.ts

@@ -1,5 +1,5 @@
 declare const WarningText: {
-    ({ children, className, ...props }: SGDS.Component.WarningText): import("react").JSX.Element;
+    ({ children, className, ...props }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
 };
 export default WarningText;

package/dist/components/WarningText/WarningText.jsx

@@ -1,10 +1,14 @@
 "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 WarningText = ({ children, className, ...props }) => {
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_warning-text',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <strong className="ds_warning-text__icon" aria-hidden="true"></strong>
             <strong className="visually-hidden">Warning</strong>
             <div className="ds_warning-text__text">

package/dist/hooks/useTracking/useTracking.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
 const react_1 = require("react");
-//@ts-ignore
 const tracking_1 = __importDefault(require("@scottish-government/design-system/src/base/tools/tracking/tracking"));
 function default_1() {
     (0, react_1.useEffect)(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scottish-government/designsystem-react",
   "description": "A React/JSX implementation of the Scottish Government Design System",
-  "version": "0.13.0",
+  "version": "1.0.0",
   "license": "MIT",
   "author": {
     "name": "Scottish Government Digital Design System team",
@@ -12,20 +12,21 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "npx eslint && npm run svgr && npm run tsc",
-    "coverage": "vitest test.tsx run --coverage",
     "svgr": "npx @svgr/cli node_modules/@scottish-government/design-system/src/images/icons/svg --config-file .svgrrc",
     "svgr_documents": "npx @svgr/cli node_modules/@scottish-government/design-system/src/images/documents/svg --config-file .svgrrc_documents",
     "test": "vitest test.tsx",
+    "test:coverage": "vitest test.tsx run --coverage",
     "tsc": "node ./node_modules/typescript/bin/tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "@scottish-government/design-system": "^3.2.1"
+    "@scottish-government/design-system": "^4.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/js": "^9.39.1",
+    "@scottish-government/design-system": "^4.0.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",
     "@storybook/addon-onboarding": "^10.0.8",
@@ -43,6 +44,7 @@
     "@vitest/browser": "4.0.10",
     "@vitest/browser-playwright": "^4.0.10",
     "@vitest/coverage-v8": "^4.0.10",
+    "clsx": "^2.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.5.0",

package/src/common/AbstractNotificationBanner/AbstractNotificationBanner.tsx

@@ -2,6 +2,7 @@ import { Children } from 'react';
 import Icon from '../Icon';
 import ScreenReaderText from '../ScreenReaderText';
 import { AbstractNotificationBannerProps, AbstractNotificationBannerButtonsProps } from './types';
+import clsx from 'clsx';
 
 const Buttons = ({
     children
@@ -33,29 +34,30 @@ const AbstractNotificationBanner = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_notification',
                 className
-            ].join(' ')}
+            ])}
             data-module="ds-notification"
             {...props}
         >
             <div className="ds_wrapper">
                 <div className={
-                    [
+                    clsx([
                         'ds_notification__content',
                         isDismissable && 'ds_notification__content--has-close'
-                    ].join(' ')}
+                    ])}
                 >
                     <h2 className="visually-hidden">{title}</h2>
 
                     {icon &&
                         <span
-                        className={[
+                            className={clsx([
                                 'ds_notification__icon',
                                 hasInverseIcon && 'ds_notification__icon--inverse',
                                 hasColourIcon && 'ds_notification__icon--colour'
-                            ].join(' ')} aria-hidden="true">
+                            ])}
+                            aria-hidden="true">
                             <Icon icon={icon} />
                         </span>
                     }

package/src/common/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import * as Icons from '../../images/icons';
 import { IconProps } from './types';
+import clsx from 'clsx';
 
 const Icon = ({
     ariaLabel,
@@ -15,12 +16,12 @@ const Icon = ({
         <IconComponent
             aria-hidden={ariaLabel ? undefined : true}
             aria-label={ariaLabel}
-            className={[
+            className={clsx([
                     'ds_icon',
                     className,
                     isFilled && 'ds_icon--fill',
                     iconSize && `ds_icon--${iconSize}`
-            ].join(' ')}
+            ])}
         />
     );
 };

package/src/components/Accordion/Accordion.test.tsx

@@ -99,6 +99,17 @@ test('accordion with custom heading level', () => {
     expect(firstAccordionTitle?.tagName).toEqual(HEADING_LEVEL.toUpperCase());
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} data-test="foo">
+        </Accordion>
+    )
+
+    const accordion = screen.getByTestId(ACCORDION_ID);
+    expect(accordion).toHaveClass('js-initialised');
+    expect(accordion).toHaveClass('js-instantiated');
+});
+
 test('passing additional props to accordion', () => {
     render(
         <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} data-test="foo">

package/src/components/Accordion/Accordion.tsx

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, useEffect, useRef, useId } from 'react';
 import WrapperTag from '../../common/WrapperTag';
-// @ts-expect-error no types from core SGDS
 import DSAccordion from '@scottish-government/design-system/src/components/accordion/accordion';
 import { AccordionItemProps, AccordionProps } from './types';
+import clsx from 'clsx';
 
 let accordionItemCounter = 0;
 const AccordionHeadingLevelContext = createContext('h3');
@@ -31,19 +31,19 @@ const AccordionItem = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_accordion-item',
                 className
-            ].join(' ')}
+            ])}
             id={processedId}
             {...props}
         >
             <input
                 aria-labelledby={`panel-${processedId}-heading`}
-                className={[
+                className={clsx([
                     'ds_accordion-item__control',
                     'visually-hidden'
-                ].join(' ')}
+                ])}
                 defaultChecked={isOpen}
                 id={`${processedId}-control`}
                 type="checkbox"
@@ -82,6 +82,7 @@ const Accordion = ({
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSAccordion(ref.current).init();
         }
@@ -93,21 +94,21 @@ const Accordion = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_accordion',
-                isSmall ? 'ds_accordion--small' : '',
+                isSmall && 'ds_accordion--small',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >
             { !hideOpenAll && (
                 <button
-                className={[
+                className={clsx([
                     'ds_accordion__open-all',
                     'ds_link',
                     'js-open-all'
-                ].join(' ')}
+                ])}
                 type='button'
                 >
                     Open all