@scottish-government/designsystem-react 0.12.1 → 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/eslint.config.mjs

@@ -0,0 +1,32 @@
+// import eslint from "@eslint";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { react },
+    languageOptions: { globals: globals.browser },
+    settings: {
+      react: {
+        version: "detect"
+      }
+    }
+  },
+  tseslint.configs.recommended,
+  react.configs.flat.recommended,
+  {
+    rules: {
+      "react/react-in-jsx-scope": "off"
+    }
+  },
+  {
+    ignores: [
+      "coverage/**",
+      "dist/**",
+      "node_modules/**"
+    ]
+  }
+]);

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.12.1",
+  "version": "1.0.0",
   "license": "MIT",
   "author": {
     "name": "Scottish Government Digital Design System team",
@@ -11,20 +11,22 @@
   "typings": "dist/index.d.ts",
   "main": "dist/index.js",
   "scripts": {
-    "build": "npm run svgr && npm run tsc",
-    "coverage": "vitest test.tsx run --coverage",
+    "build": "npx eslint && npm run svgr && npm run tsc",
     "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",
@@ -42,11 +44,16 @@
     "@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",
     "jsdom": "^27.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "storybook": "^10.0.8",
+    "storybook": "^10.1.10",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0",
     "vitest": "^4.0.10"
   }
 }

package/src/common/AbstractNotificationBanner/AbstractNotificationBanner.tsx

@@ -1,12 +1,14 @@
 import { Children } from 'react';
 import Icon from '../Icon';
 import ScreenReaderText from '../ScreenReaderText';
+import { AbstractNotificationBannerProps, AbstractNotificationBannerButtonsProps } from './types';
+import clsx from 'clsx';
 
 const Buttons = ({
     children
-}: SGDS.Common.AbstractNotificationBanner.Buttons) => {
+}: AbstractNotificationBannerButtonsProps) => {
     return (<div className="ds_button-group">{children}</div>);
-}
+};
 
 const AbstractNotificationBanner = ({
     children,
@@ -17,8 +19,8 @@ const AbstractNotificationBanner = ({
     isDismissable,
     title = 'Information',
     ...props
-}: SGDS.Common.AbstractNotificationBanner) => {
-    let content: any[] = [];
+}: AbstractNotificationBannerProps) => {
+    const content: React.ReactElement[] = [];
     let buttons;
 
     Children.forEach(children, (child) => {
@@ -32,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/AbstractNotificationBanner/types.ts

@@ -0,0 +1,15 @@
+import { IconName } from '../../shared-types';
+
+export interface AbstractNotificationBannerProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    hasIcon?: boolean;
+    hasColourIcon?: boolean;
+    hasInverseIcon?: boolean;
+    icon?: IconName;
+    isDismissable?: boolean;
+    title?: string;
+    ref?: React.Ref<HTMLDivElement>;
+}
+
+export interface AbstractNotificationBannerButtonsProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}

package/src/common/ActionLink/ActionLink.tsx

@@ -1,10 +1,12 @@
+import { ActionLinkProps } from './types';
+
 const ActionLink = ({
     children,
     describedby,
     href,
     linkComponent,
     onclick
-}: SGDS.Common.ActionLink) => {
+}: ActionLinkProps) => {
     const CLASSNAME = 'ds_link';
 
     function processChildren(children: React.ReactNode) {

package/src/common/ActionLink/types.ts

@@ -0,0 +1,8 @@
+import { LinkComponent } from '../../shared-types';
+
+export interface ActionLinkProps extends React.AllHTMLAttributes<HTMLElement> {
+    describedby?: string;
+    href?: string;
+    linkComponent?: LinkComponent;
+    onclick?: React.EventHandler<React.MouseEvent>;
+}