@scottish-government/designsystem-react 0.12.0 → 0.13.0

package/.storybook/main.ts

@@ -1,20 +1,20 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  "stories": [
+  stories: [
     "../src/**/*.mdx",
     "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
   ],
-  "addons": [
+  addons: [
     "@chromatic-com/storybook",
     "@storybook/addon-docs",
     "@storybook/addon-onboarding",
     "@storybook/addon-a11y",
     "@storybook/addon-vitest"
   ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
   }
 };
-export default config;
+export default config;

package/.storybook/sgdsArgTypes.ts

@@ -1,141 +1,182 @@
+import { InputType } from "storybook/internal/csf";
+
+type OptionsControlType = 'radio' | 'inline-radio' | 'check' | 'inline-check' | 'select' | 'multi-select';
+
+type Conditional = (
+    { arg: string; }
+    | { global: string; }) & ({ truthy?: boolean | undefined; }
+    | { exists: boolean; }
+    | { eq: () => void; }
+    | { neq: () => void; }
+);
+
+type ControlType =
+    | 'array'
+    | 'boolean'
+    | 'color'
+    | 'date'
+    | 'number'
+    | 'range'
+    | 'object'
+    | OptionsControlType
+    | 'text';
+
+interface ArgType {
+    control?: ControlType | { type: ControlType };
+    defaultValue?: string | number | boolean | object | null;
+    description?: string;
+    if?: Conditional;
+    mapping?: { [key: string]: { [option: string]: string | object } };
+    name?: string;
+    options?: string[];
+    table?: {
+        category?: string;
+        defaultValue?: { summary: string; detail?: string };
+        subcategory?: string;
+        type?: { summary?: string; detail?: string };
+        disable?: boolean;
+    };
+    type?: string | { name: string; required?: boolean };
+}
+
 const SGDSArgTypes = {
-    ariaLabel: (options?: any) => {
+    ariaLabel: (options?: ArgType) => {
         return Object.assign({
             type: 'string'
-        }, options);
+        }, options) as InputType;
     },
-    ariaLive: (options?: any) => {
+    ariaLive: (options?: ArgType) => {
         return Object.assign({
             options: ['off', 'polite', 'assertive'],
             control: { type: 'select' },
             type: 'string'
-        }, options);
+        }, options) as InputType;
     },
-    children: (options?: any) => {
+    children: (options?: ArgType) => {
         return Object.assign({
             control: false
-        }, options);
+        }, options) as InputType;
     },
-    countThreshold: (options?: any) => {
+    countThreshold: (options?: ArgType) => {
         return Object.assign({
             control: {
                 type: 'number', min: 1, max: 100, step: 1
             },
             description: 'Percentage threshold to show the character count at',
             type: 'number'
-        }, options);
+        }, options) as InputType;
     },
-    errorMessage: (options?: any) => {
+    errorMessage: (options?: ArgType) => {
         return Object.assign({
             description: 'Text to use for an error message',
             type: 'string'
-        }, options);
+        }, options) as InputType;
     },
-    hasError: (options?: any) => {
+    hasError: (options?: ArgType) => {
         return Object.assign({
             control: 'boolean',
             description: 'Whether the field is in an error state'
-        }, options);
+        }, options) as InputType;
     },
-    headingLevel: (options?: any) => {
+    headingLevel: (options?: ArgType) => {
         return Object.assign({
             description: 'Heading level for the component\'s title',
             options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
             control: { type: 'select' },
             type: 'string'
-        }, options);
+        }, options) as InputType;
     },
-    hintText: (options?: any) => {
+    hintText: (options?: ArgType) => {
         return Object.assign({
             description: 'Text to use for the field\'s hint text',
             type: 'string'
-        }, options);
+        }, options) as InputType;
     },
-    href: (options?: any) => {
+    href: (options?: ArgType) => {
         return Object.assign({
             type: 'string'
-        }, options);
+        }, options) as InputType
     },
-    id: (options?: any) => {
+    id: (options?: ArgType) => {
         return Object.assign({
             type: {
                 required: true,
                 name: 'string'
             }
-        }, options);
+        }, options) as InputType
     },
-    inputWidth: (options?: any) => {
+    inputWidth: (options?: ArgType) => {
         return Object.assign({
             control: { type: 'select' },
             options: [undefined, 'fixed-20', 'fixed-10', 'fixed-5', 'fixed-4', 'fixed-3', 'fixed-2', 'fluid-three-quarters', 'fluid-two-thirds', 'fluid-half', 'fluid-one-third', 'fluid-one-quarter'],
             type: 'string'
-        }, options);
+        }, options) as InputType
     },
-    isCurrent: (options?: any) => {
+    isCurrent: (options?: ArgType) => {
         return Object.assign({
             control: 'boolean',
             description: 'Whether the component is for the current page'
-        }, options);
+        }, options) as InputType
     },
-    isSmall: (options?: any) => {
+    isSmall: (options?: ArgType) => {
         return Object.assign({
             control: 'boolean',
-            description: 'Whether to use the ‘small’ input control variant'
-        }, options);
+            description: 'Whether to use the \'small\' input control variant'
+        }, options) as InputType
     },
-    label: (options?: any) => {
+    label: (options?: ArgType) => {
         return Object.assign({
             description: 'Text to use for the field\'s associated label',
             type: {
                 required: true,
                 name: 'string'
             }
-        }, options);
+        }, options) as InputType;
     },
-    linkComponent: (options?: any) => {
+    linkComponent: (options?: ArgType) => {
         return Object.assign({
             control: false,
             description: 'Function that returns an element, to customise the output',
             type: 'function'
-        }, options);
+        }, options) as InputType;
     },
-    maxlength: (options?: any) => {
+    maxlength: (options?: ArgType) => {
         return Object.assign({
             description: 'Maximum number of characters permitted',
             type: 'number'
-        }, options);
+        }, options) as InputType;
     },
-    noBorder: (options?: any) => {
+    noBorder: (options?: ArgType) => {
         return Object.assign({
             control: 'boolean',
             description: 'Use the borderless display variant'
-        }, options);
+        }, options) as InputType;
     },
-    onBlur: (options?: any) => {
+    onBlur: (options?: ArgType) => {
         return Object.assign({
             description: 'Function to fire in response to a blur event',
             type: 'function'
-        }, options);
+        }, options) as InputType;
     },
-    onChange: (options?: any) => {
+    onChange: (options?: ArgType) => {
         return Object.assign({
             description: 'Function to fire in response to a change event',
             type: 'function'
-        }, options);
+        }, options) as InputType;
     },
-    onClick: (options?: any) => {
+    onClick: (options?: ArgType) => {
         return Object.assign({
             description: 'Function to fire in response to a click event',
             type: 'function'
-        }, options);
+        }, options) as InputType;
     },
-    tagColour: (options?: any) => {
+    tagColour: (options?: ArgType) => {
         return Object.assign({
             control: { type: 'select' },
             description: 'The tag colour to use',
             options: ['', 'blue', 'green', 'grey', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow'],
             type: 'string'
-        }, options);
+        }, options) as InputType;
     }
 }
 

package/CHANGELOG.md

@@ -6,12 +6,38 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
 `Removed` and `Security`.
 
 ---
+## [0.13.0] - 2025-12-19
+
+### Added
+- eslint added to build task
+### Changed
+- Types moved from .d.ts files in @types folder to types.ts files in each component's folder
+- HintText no longer allows content to be added with a 'text' prop -- use children instead
+- NotificationBanner title (visually hidden) is customisable via a 'title' prop
+### Fixed
+- Checkbox stories updated to use 'isSmall' and 'isExclusive' (see v0.10.0).
+- CookieBanner now fires the SG Design System cookie notification JS
+### Removed
+- 'SGDS' namespace no longer used for types etc
+### Security
+- Storybook version updated to address vulnerabilities
+
+## [0.12.1] - 2025-11-19
+
+### Added
+- 'Barrel' index files
+- 'main' and typings added to package.json
+### Changed
+- Move hooks and common components and to subfolders to match structure of the main components
+### Security
+- Update dependencies
+
 ## [0.12.0] - 2025-11-12
 
 ### Added
 - type definitions included in /dist
 - optional 'titleId' prop added to PageHeader
-## Fixed
+### Fixed
 - include SGDS 'skip-links' script in SkipLinks
 
 ## [0.11.0] - 2025-10-22

package/dist/common/AbstractNotificationBanner/AbstractNotificationBanner.d.ts

@@ -0,0 +1,9 @@
+declare const AbstractNotificationBanner: {
+    ({ children, className, hasColourIcon, hasInverseIcon, icon, isDismissable, title, ...props }: SGDS.Common.AbstractNotificationBanner): import("react").JSX.Element;
+    displayName: string;
+    Buttons: {
+        ({ children }: SGDS.Common.AbstractNotificationBanner.Buttons): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default AbstractNotificationBanner;

package/dist/common/AbstractNotificationBanner/AbstractNotificationBanner.jsx

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const Icon_1 = __importDefault(require("../Icon"));
+const ScreenReaderText_1 = __importDefault(require("../ScreenReaderText"));
+const Buttons = ({ children }) => {
+    return (<div className="ds_button-group">{children}</div>);
+};
+const AbstractNotificationBanner = ({ children, className, hasColourIcon, hasInverseIcon, icon, isDismissable, title = 'Information', ...props }) => {
+    let content = [];
+    let buttons;
+    react_1.Children.forEach(children, (child) => {
+        const thisChild = child;
+        if (thisChild && thisChild.type === Buttons) {
+            buttons = thisChild;
+        }
+        else {
+            content.push(thisChild);
+        }
+    });
+    return (<div className={[
+            'ds_notification',
+            className
+        ].join(' ')} data-module="ds-notification" {...props}>
+            <div className="ds_wrapper">
+                <div className={[
+            'ds_notification__content',
+            isDismissable && 'ds_notification__content--has-close'
+        ].join(' ')}>
+                    <h2 className="visually-hidden">{title}</h2>
+
+                    {icon &&
+            <span className={[
+                    'ds_notification__icon',
+                    hasInverseIcon && 'ds_notification__icon--inverse',
+                    hasColourIcon && 'ds_notification__icon--colour'
+                ].join(' ')} aria-hidden="true">
+                            <Icon_1.default icon={icon}/>
+                        </span>}
+
+                    <div className="ds_notification__text">
+                        {content}
+                    </div>
+
+                    {isDismissable &&
+            <button type="button" className="ds_notification__close js-close-notification">
+                            <ScreenReaderText_1.default>Close this notification</ScreenReaderText_1.default>
+                            <Icon_1.default isFilled icon="Close" aria-hidden="true"/>
+                        </button>}
+
+                    {buttons}
+                </div>
+            </div>
+        </div>);
+};
+AbstractNotificationBanner.displayName = 'AbstractNotificationBanner';
+AbstractNotificationBanner.Buttons = Buttons;
+Buttons.displayName = 'Buttons';
+exports.default = AbstractNotificationBanner;

package/dist/common/AbstractNotificationBanner/index.d.ts

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

package/dist/common/AbstractNotificationBanner/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AbstractNotificationBanner_1 = require("./AbstractNotificationBanner");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AbstractNotificationBanner_1).default; } });

package/dist/common/ActionLink/ActionLink.d.ts

@@ -0,0 +1,5 @@
+declare const ActionLink: {
+    ({ children, describedby, href, linkComponent, onclick }: SGDS.Common.ActionLink): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+    displayName: string;
+};
+export default ActionLink;

package/dist/common/ActionLink/ActionLink.jsx

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ActionLink = ({ children, describedby, href, linkComponent, onclick }) => {
+    const CLASSNAME = 'ds_link';
+    function processChildren(children) {
+        if (linkComponent) {
+            return linkComponent({ className: CLASSNAME, href, children, onClick: onclick, 'aria-describedby': describedby });
+        }
+        else if (href) {
+            return <a aria-describedby={describedby} onClick={onclick} href={href} className={CLASSNAME}>{children}</a>;
+        }
+        else {
+            return <button type="button" aria-describedby={describedby} onClick={onclick} className={CLASSNAME}>{children}</button>;
+        }
+    }
+    return (processChildren(children));
+};
+ActionLink.displayName = 'ActionLink';
+exports.default = ActionLink;

package/dist/common/ActionLink/index.d.ts

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

package/dist/common/ActionLink/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ActionLink_1 = require("./ActionLink");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ActionLink_1).default; } });

package/dist/common/ConditionalWrapper/ConditionalWrapper.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wraps all children in a specified HTML tag if a condition is met.
+ */
+declare const ConditionalWrapper: {
+    ({ condition, wrapper, children }: SGDS.Common.ConditionalWrapper): any;
+    displayName: string;
+};
+export default ConditionalWrapper;

package/dist/common/ConditionalWrapper/ConditionalWrapper.jsx

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Wraps all children in a specified HTML tag if a condition is met.
+ */
+const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
+ConditionalWrapper.displayName = 'ConditionalWrapper';
+exports.default = ConditionalWrapper;

package/dist/common/ConditionalWrapper/index.d.ts

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

package/dist/common/ConditionalWrapper/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ConditionalWrapper_1 = require("./ConditionalWrapper");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ConditionalWrapper_1).default; } });

package/dist/common/FileIcon/FileIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const FileIcon: {
+    ({ ariaLabel, className, icon }: SGDS.Common.FileIcon): React.JSX.Element;
+    displayName: string;
+};
+export default FileIcon;

package/dist/common/FileIcon/FileIcon.jsx

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const FileIcons = __importStar(require("../../images/documents"));
+const FileIcon = ({ ariaLabel = '', className, icon }) => {
+    const FileIconComponent = FileIcons[icon];
+    return (<FileIconComponent aria-label={ariaLabel} className={className}/>);
+};
+FileIcon.displayName = 'FileIcon';
+exports.default = FileIcon;

package/dist/common/FileIcon/index.d.ts

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

package/dist/common/FileIcon/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var FileIcon_1 = require("./FileIcon");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FileIcon_1).default; } });

package/dist/common/HintText/HintText.d.ts

@@ -0,0 +1,5 @@
+declare const HintText: {
+    ({ children, id, text, ...props }: SGDS.Common.HintText): import("react").JSX.Element;
+    displayName: string;
+};
+export default HintText;

package/dist/common/HintText/HintText.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const HintText = ({ children, id, text, ...props }) => {
+    return (<p className="ds_hint-text" dangerouslySetInnerHTML={text ? { __html: text } : undefined} id={id} {...props}>
+            {!text ? children : null}
+        </p>);
+};
+HintText.displayName = 'HintText';
+exports.default = HintText;

package/dist/common/HintText/index.d.ts

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

package/dist/common/HintText/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var HintText_1 = require("./HintText");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(HintText_1).default; } });

package/dist/common/Icon/Icon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const Icon: {
+    ({ ariaLabel, className, isFilled, icon, iconSize }: SGDS.Common.Icon): React.JSX.Element;
+    displayName: string;
+};
+export default Icon;

package/dist/common/Icon/Icon.jsx

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Icons = __importStar(require("../../images/icons"));
+const Icon = ({ ariaLabel, className, isFilled, icon, iconSize }) => {
+    const IconComponent = Icons[icon];
+    return (<IconComponent aria-hidden={ariaLabel ? undefined : true} aria-label={ariaLabel} className={[
+            'ds_icon',
+            className,
+            isFilled && 'ds_icon--fill',
+            iconSize && `ds_icon--${iconSize}`
+        ].join(' ')}/>);
+};
+Icon.displayName = 'Icon';
+exports.default = Icon;

package/dist/common/Icon/index.d.ts

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

package/dist/common/Icon/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });

package/dist/common/ScreenReaderText/ScreenReaderText.d.ts

@@ -0,0 +1,5 @@
+declare const ScreenReaderText: {
+    ({ children, ...props }: SGDS.Common.ScreenReaderText): import("react").JSX.Element;
+    displayName: string;
+};
+export default ScreenReaderText;

package/dist/common/ScreenReaderText/ScreenReaderText.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ScreenReaderText = ({ children, ...props }) => {
+    return (<span className="visually-hidden" {...props}>
+            {children}
+        </span>);
+};
+ScreenReaderText.displayName = 'ScreenReaderText';
+exports.default = ScreenReaderText;

package/dist/common/ScreenReaderText/index.d.ts

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