@scottish-government/designsystem-react 0.12.1 → 1.0.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,205 @@
+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) => {
+    boolean: (options?: ArgType) => {
+        return Object.assign({
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        }, options) as InputType;
+    },
+    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;
+    },
+    select: (params: {
+        default?: string,
+        description?: string,
+        options: string[] | number[]
+    }) => {
+        return {
+            defaultValue: { summary: params.default },
+            control: { type: 'select' },
+            options: params.options,
+            description: params.description,
+            type: typeof params.options[0]
+        } 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,6 +6,55 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
 `Removed` and `Security`.
 
 ---
+
+## [1.0.0] - 2026-04-21
+
+### Added
+- Card component
+- FeatureHeader component
+- NotificationTag component
+- New 'isWrap' prop added to ButtonGroup
+### Changed
+- SearchResult.Meta altered to be a clearer implementation of the Metadata component, with Metadata.Item children
+- Use the clsx package to handle className concatenation in components
+- Component updates required by SG Design System v4
+  - AspectBox: remove useEffect (an IE11 fallback)
+  - DatePicker: remove 'iconPath' prop
+  - FileDownload: add outline modifier class to cover images
+### Fixed
+- HideThisPage: pass ref.current to the function call in useEffect
+- SiteSearch: check for presence of an autocomplete element before firing the DS script
+### Security
+- Update dependencies
+
+---
+
+## [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

package/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Crown Copyright 2019
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,4 +1,7 @@
 # @scottish-government/designsystem-react
+[![NPM version](https://img.shields.io/npm/v/%40scottish-government%2Fdesignsystem-react)](https://www.npmjs.com/package/@scottish-government/designsystem-react)
+[![Tests](https://github.com/scottish-government-design-system/designsystem-react/actions/workflows/tests.yml/badge.svg)](https://github.com/scottish-government-design-system/designsystem-react/actions/workflows/tests.yml)
+[![Build](https://github.com/scottish-government-design-system/designsystem-react/actions/workflows/build.yml/badge.svg)](https://github.com/scottish-government-design-system/designsystem-react/actions/workflows/build.yml)
 
 This repository contains a React implementation of the [Scottish Government Design System](https://designsystem.gov.scot/).
 

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

@@ -1,8 +1,9 @@
+import { AbstractNotificationBannerProps, AbstractNotificationBannerButtonsProps } from './types';
 declare const AbstractNotificationBanner: {
-    ({ children, className, hasColourIcon, hasInverseIcon, icon, isDismissable, title, ...props }: SGDS.Common.AbstractNotificationBanner): import("react").JSX.Element;
+    ({ children, className, hasColourIcon, hasInverseIcon, icon, isDismissable, title, ...props }: AbstractNotificationBannerProps): import("react").JSX.Element;
     displayName: string;
     Buttons: {
-        ({ children }: SGDS.Common.AbstractNotificationBanner.Buttons): import("react").JSX.Element;
+        ({ children }: AbstractNotificationBannerButtonsProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/common/AbstractNotificationBanner/AbstractNotificationBanner.jsx

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const Icon_1 = __importDefault(require("../Icon"));
 const ScreenReaderText_1 = __importDefault(require("../ScreenReaderText"));
+const clsx_1 = __importDefault(require("clsx"));
 const Buttons = ({ children }) => {
     return (<div className="ds_button-group">{children}</div>);
 };
 const AbstractNotificationBanner = ({ children, className, hasColourIcon, hasInverseIcon, icon, isDismissable, title = 'Information', ...props }) => {
-    let content = [];
+    const content = [];
     let buttons;
     react_1.Children.forEach(children, (child) => {
         const thisChild = child;
@@ -21,23 +22,23 @@ const AbstractNotificationBanner = ({ children, className, hasColourIcon, hasInv
             content.push(thisChild);
         }
     });
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_notification',
             className
-        ].join(' ')} data-module="ds-notification" {...props}>
+        ])} data-module="ds-notification" {...props}>
             <div className="ds_wrapper">
-                <div className={[
+                <div className={(0, clsx_1.default)([
             'ds_notification__content',
             isDismissable && 'ds_notification__content--has-close'
-        ].join(' ')}>
+        ])}>
                     <h2 className="visually-hidden">{title}</h2>
 
                     {icon &&
-            <span className={[
+            <span className={(0, clsx_1.default)([
                     'ds_notification__icon',
                     hasInverseIcon && 'ds_notification__icon--inverse',
                     hasColourIcon && 'ds_notification__icon--colour'
-                ].join(' ')} aria-hidden="true">
+                ])} aria-hidden="true">
                             <Icon_1.default icon={icon}/>
                         </span>}
 

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

@@ -0,0 +1,13 @@
+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/dist/common/AbstractNotificationBanner/types.js

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

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

@@ -1,5 +1,6 @@
+import { ActionLinkProps } from './types';
 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;
+    ({ children, describedby, href, linkComponent, onclick }: ActionLinkProps): 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/types.d.ts

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

package/dist/common/ActionLink/types.js

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

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

@@ -1,8 +1,9 @@
 /**
  * Wraps all children in a specified HTML tag if a condition is met.
  */
+import { ConditionalWrapperProps } from "./types";
 declare const ConditionalWrapper: {
-    ({ condition, wrapper, children }: SGDS.Common.ConditionalWrapper): any;
+    ({ condition, wrapper, children }: ConditionalWrapperProps): 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 ConditionalWrapper;

package/dist/common/ConditionalWrapper/ConditionalWrapper.jsx

@@ -1,8 +1,10 @@
 "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;
+Object.defineProperty(exports, "__esModule", { value: true });
+const ConditionalWrapper = ({ condition, wrapper, children }) => {
+    return condition ? wrapper(children) : children;
+};
 ConditionalWrapper.displayName = 'ConditionalWrapper';
 exports.default = ConditionalWrapper;

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

@@ -0,0 +1,4 @@
+export interface ConditionalWrapperProps extends React.AllHTMLAttributes<HTMLElement> {
+    condition: boolean;
+    wrapper: (children: React.JSX.Element) => React.JSX.Element;
+}

package/dist/common/ConditionalWrapper/types.js

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

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

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

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

@@ -0,0 +1,6 @@
+import { DocumentIconName } from '../../shared-types';
+export interface FileIconProps extends React.AllHTMLAttributes<SVGSVGElement> {
+    ariaLabel?: React.AriaAttributes['aria-label'];
+    className?: string;
+    icon: DocumentIconName;
+}

package/dist/common/FileIcon/types.js

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

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

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

package/dist/common/HintText/HintText.jsx

@@ -1,8 +1,8 @@
 "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}
+const HintText = ({ children, id, ...props }) => {
+    return (<p className="ds_hint-text" id={id} {...props}>
+            {children}
         </p>);
 };
 HintText.displayName = 'HintText';

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

@@ -0,0 +1,4 @@
+export interface HintTextProps extends React.AllHTMLAttributes<HTMLElement> {
+    id?: string;
+    text?: string;
+}

package/dist/common/HintText/types.js

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

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

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

package/dist/common/Icon/Icon.jsx

@@ -38,14 +38,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const Icons = __importStar(require("../../images/icons"));
+const clsx_1 = __importDefault(require("clsx"));
 const Icon = ({ ariaLabel, className, isFilled, icon, iconSize }) => {
     const IconComponent = Icons[icon];
-    return (<IconComponent aria-hidden={ariaLabel ? undefined : true} aria-label={ariaLabel} className={[
+    return (<IconComponent aria-hidden={ariaLabel ? undefined : true} aria-label={ariaLabel} className={(0, clsx_1.default)([
             'ds_icon',
             className,
             isFilled && 'ds_icon--fill',
             iconSize && `ds_icon--${iconSize}`
-        ].join(' ')}/>);
+        ])}/>);
 };
 Icon.displayName = 'Icon';
 exports.default = Icon;

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

@@ -0,0 +1,8 @@
+import { IconName } from '../../shared-types';
+export interface IconProps extends React.AllHTMLAttributes<SVGSVGElement> {
+    ariaLabel?: React.AriaAttributes['aria-label'];
+    className?: string;
+    isFilled?: boolean;
+    icon: IconName;
+    iconSize?: string;
+}

package/dist/common/Icon/types.js

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

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

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