@scottish-government/designsystem-react 0.12.1 → 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,6 +6,32 @@ 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

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": "0.13.0",
   "license": "MIT",
   "author": {
     "name": "Scottish Government Digital Design System team",
@@ -11,7 +11,7 @@
   "typings": "dist/index.d.ts",
   "main": "dist/index.js",
   "scripts": {
-    "build": "npm run svgr && npm run tsc",
+    "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",
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
+    "@eslint/js": "^9.39.1",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",
     "@storybook/addon-onboarding": "^10.0.8",
@@ -42,11 +43,15 @@
     "@vitest/browser": "4.0.10",
     "@vitest/browser-playwright": "^4.0.10",
     "@vitest/coverage-v8": "^4.0.10",
+    "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,13 @@
 import { Children } from 'react';
 import Icon from '../Icon';
 import ScreenReaderText from '../ScreenReaderText';
+import { AbstractNotificationBannerProps, AbstractNotificationBannerButtonsProps } from './types';
 
 const Buttons = ({
     children
-}: SGDS.Common.AbstractNotificationBanner.Buttons) => {
+}: AbstractNotificationBannerButtonsProps) => {
     return (<div className="ds_button-group">{children}</div>);
-}
+};
 
 const AbstractNotificationBanner = ({
     children,
@@ -17,8 +18,8 @@ const AbstractNotificationBanner = ({
     isDismissable,
     title = 'Information',
     ...props
-}: SGDS.Common.AbstractNotificationBanner) => {
-    let content: any[] = [];
+}: AbstractNotificationBannerProps) => {
+    const content: React.ReactElement[] = [];
     let buttons;
 
     Children.forEach(children, (child) => {

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>;
+}

package/src/common/ConditionalWrapper/ConditionalWrapper.tsx

@@ -1,8 +1,16 @@
 /**
  * Wraps all children in a specified HTML tag if a condition is met.
  */
-const ConditionalWrapper = ({ condition, wrapper, children }:SGDS.Common.ConditionalWrapper) =>
-    condition ? wrapper(children) : children;
+
+import { ConditionalWrapperProps } from "./types";
+
+const ConditionalWrapper = ({
+    condition,
+    wrapper,
+    children
+}: ConditionalWrapperProps) => {
+    return condition ? wrapper(children as React.JSX.Element) : children;
+};
 
 ConditionalWrapper.displayName = 'ConditionalWrapper';
 

package/src/common/ConditionalWrapper/types.ts

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

package/src/common/FileIcon/FileIcon.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import * as FileIcons from '../../images/documents';
+import { FileIconProps } from './types';
 
 const FileIcon = ({
     ariaLabel = '',
     className,
     icon
-}: SGDS.Common.FileIcon) => {
+}: FileIconProps) => {
     const FileIconComponent = FileIcons[icon];
 
     return (

package/src/common/FileIcon/types.ts

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

package/src/common/HintText/HintText.test.tsx

@@ -9,8 +9,9 @@ test('hint test renders correctly', () => {
     render(
         <HintText data-testid="hint-text"
             id={HINT_TEXT_ID}
-            text={HINT_TEXT_CONTENT}
-        />
+        >
+            {HINT_TEXT_CONTENT}
+        </HintText>
     );
 
     const hintText = screen.getByTestId('hint-text');
@@ -20,19 +21,6 @@ test('hint test renders correctly', () => {
     expect(hintText.textContent).toEqual(HINT_TEXT_CONTENT);
 });
 
-test('hint test with children instead of text', () => {
-    render(
-        <HintText data-testid="hint-text"
-            id={HINT_TEXT_ID}
-        >
-            <span>{HINT_TEXT_CONTENT}</span>
-        </HintText>
-    );
-
-    const hintText = screen.getByTestId('hint-text');
-    expect(hintText.innerHTML).toEqual(`<span>${HINT_TEXT_CONTENT}</span>`);
-});
-
 test('passing additional props', () => {
     render(
         <HintText data-testid="hint-text"

package/src/common/HintText/HintText.tsx

@@ -1,17 +1,17 @@
+import { HintTextProps } from "./types";
+
 const HintText = ({
     children,
     id,
-    text,
     ...props
-}: SGDS.Common.HintText) => {
+}: HintTextProps) => {
     return (
         <p
             className="ds_hint-text"
-            dangerouslySetInnerHTML={text ? { __html: text } : undefined}
             id={id}
             {...props}
         >
-            {!text ? children : null}
+            {children}
         </p>
     );
 };

package/src/common/HintText/types.ts

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

package/src/common/Icon/Icon.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as Icons from '../../images/icons';
+import { IconProps } from './types';
 
 const Icon = ({
     ariaLabel,
@@ -7,7 +8,7 @@ const Icon = ({
     isFilled,
     icon,
     iconSize
-}: SGDS.Common.Icon) => {
+}: IconProps) => {
     const IconComponent = Icons[icon];
 
     return (

package/src/common/Icon/types.ts

@@ -0,0 +1,9 @@
+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/src/common/ScreenReaderText/ScreenReaderText.tsx

@@ -1,7 +1,7 @@
 const ScreenReaderText = ({
     children,
     ...props
-}: SGDS.Common.ScreenReaderText) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <span
             className="visually-hidden"

package/src/common/WrapperTag/WrapperTag.tsx

@@ -1,13 +1,15 @@
 /**
  * Wraps all children in a specified HTML tag.
  */
+import React from 'react';
+import { WrapperTagProps } from './types';
+
 const WrapperTag = ({
     children,
     tagName = 'div',
     ...props
-}: SGDS.Common.WrapperTag) => {
-    const TagName = tagName;
-    return <TagName {...props}>{children}</TagName>;
+}: WrapperTagProps) => {
+    return React.createElement(tagName, props, children);
 };
 
 WrapperTag.displayName = 'WrapperTag';

package/src/common/WrapperTag/types.ts

@@ -0,0 +1,3 @@
+export interface WrapperTagProps extends React.AllHTMLAttributes<HTMLElement> {
+    tagName?: string;
+}

package/src/components/Accordion/Accordion.Item.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Accordion from './Accordion';
 
@@ -15,9 +14,6 @@ const meta = {
                 required: true
             }
         },
-        headingLevel: argTypes.headingLevel({
-            description: 'Heading level for the component\'s heading. It is best to set this on the parent Accordion.'
-        }),
         id: {
             description: 'ID to use for the accordion item if you want to override the automatically generated default',
             type: 'string'
@@ -37,7 +33,7 @@ const meta = {
                 Veterans are entitled to the same healthcare as any citizen. And there are health care options and support available specifically for veterans.
             </p>
             <p>
-                If you have a health condition that's related to your service, you're entitled to priority treatment based on clinical need.
+                If you have a health condition that&apos;s related to your service, you&apos;re entitled to priority treatment based on clinical need.
             </p>
         </>
     }

package/src/components/Accordion/Accordion.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
         }),
         hideOpenAll: {
             control: 'boolean',
-            description: 'Do not show the ‘open all’ button',
+            description: 'Do not show the \'open all\' button',
             type: 'boolean'
         },
         children: {
@@ -26,17 +26,17 @@ const meta = {
                     Veterans are entitled to the same healthcare as any citizen. And there are health care options and support available specifically for veterans.
                 </p>
                 <p>
-                    If you have a health condition that's related to your service, you're entitled to priority treatment based on clinical need.
+                    If you have a health condition that&apos;s related to your service, you&apos;re entitled to priority treatment based on clinical need.
                 </p>
             </Accordion.Item>
             <Accordion.Item id='accordion-2' heading='Employability for veterans'>
                 <p>
-                    If you're looking for a job, there are several organisations that can help you <a href="#accordion-link">find a job or develop new skills</a>.
+                    If you&apos;re looking for a job, there are several organisations that can help you <a href="#accordion-link">find a job or develop new skills</a>.
                 </p>
             </Accordion.Item>
             <Accordion.Item id='accordion-3' heading='Housing for veterans'>
                 <p>
-                    If you need <a href="#accordion-link"> help finding a place to live</a> there's support specifically for veterans.
+                    If you need <a href="#accordion-link"> help finding a place to live</a> there&apos;s support specifically for veterans.
                 </p>
             </Accordion.Item>
         </>
@@ -53,7 +53,7 @@ export const Default: Story = {
 export const HideOpenAll: Story = {
     args: {
         hideOpenAll: true
-    },
+    }
 }
 
 export const InvalidNoChildren: Story = {