@scottish-government/designsystem-react 0.12.0 → 0.13.0

package/dist/images/index.js

@@ -0,0 +1,38 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.icons = exports.documents = void 0;
+exports.documents = __importStar(require("./documents"));
+exports.icons = __importStar(require("./icons"));

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,15 +1,17 @@
 {
   "name": "@scottish-government/designsystem-react",
   "description": "A React/JSX implementation of the Scottish Government Design System",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "MIT",
   "author": {
     "name": "Scottish Government Digital Design System team",
     "email": "designsystem@gov.scot",
     "url": "https://designsystem.gov.scot"
   },
+  "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",
@@ -22,29 +24,34 @@
     "@scottish-government/design-system": "^3.2.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@storybook/addon-a11y": "^9.0.15",
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/addon-onboarding": "^9.0.15",
-    "@storybook/addon-vitest": "^9.0.15",
-    "@storybook/react-vite": "^9.0.15",
+    "@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",
+    "@storybook/addon-vitest": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
     "@svgr/cli": "^8.1.0",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "22.15.19",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
-    "@vitejs/plugin-react-swc": "^3.10.0",
-    "@vitest/browser": "3.2.4",
-    "@vitest/coverage-v8": "^3.2.0",
-    "jsdom": "^26.1.0",
-    "playwright": "^1.56.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "storybook": "^9.0.15",
-    "typescript": "^5.8.3",
-    "vitest": "^3.2.0"
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "@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.1.10",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0",
+    "vitest": "^4.0.10"
   }
 }

package/src/common/{AbstractNotificationBanner.test.tsx → AbstractNotificationBanner/AbstractNotificationBanner.test.tsx}

@@ -1,7 +1,7 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import AbstractNotificationBanner from './AbstractNotificationBanner';
-import Button from '../components/Button/Button';
+import Button from '../../components/Button';
 
 const NOTIFICATION_TEXT = 'We need to tell you about something';
 

package/src/common/{AbstractNotificationBanner.tsx → AbstractNotificationBanner/AbstractNotificationBanner.tsx}

@@ -1,12 +1,13 @@
 import { Children } from 'react';
-import Icon from './Icon';
-import ScreenReaderText from './ScreenReaderText';
+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/index.ts

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

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.tsx → 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/index.ts

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

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

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

package/src/common/ConditionalWrapper/index.ts

@@ -0,0 +1 @@
+export { default } from './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.tsx → FileIcon/FileIcon.tsx}

@@ -1,11 +1,12 @@
 import React from 'react';
-import * as FileIcons from '../images/documents';
+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/index.ts

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

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.test.tsx → 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.tsx → 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/index.ts

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

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.tsx → Icon/Icon.tsx}

@@ -1,5 +1,6 @@
 import React from 'react';
-import * as Icons from '../images/icons';
+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/index.ts

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

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.tsx → 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/ScreenReaderText/index.ts

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

package/src/common/{WrapperTag.tsx → 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/index.ts

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

package/src/common/WrapperTag/types.ts

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

package/src/common/index.ts

@@ -0,0 +1,8 @@
+export { default as AbstractNotificationBanner } from "./AbstractNotificationBanner/AbstractNotificationBanner";
+export { default as ActionLink } from "./ActionLink/ActionLink";
+export { default as ConditionalWrapper } from "./ConditionalWrapper/ConditionalWrapper";
+export { default as FileIcon } from "./FileIcon/FileIcon";
+export { default as HintText } from "./HintText/HintText";
+export { default as Icon } from "./Icon/Icon";
+export { default as ScreenReaderText } from "./ScreenReaderText/ScreenReaderText";
+export { default as WrapperTag } from "./WrapperTag/WrapperTag";

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 = {

package/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 import React, { createContext, useContext, useEffect, useRef, useId } from 'react';
 import WrapperTag from '../../common/WrapperTag';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSAccordion from '@scottish-government/design-system/src/components/accordion/accordion';
+import { AccordionItemProps, AccordionProps } from './types';
 
 let accordionItemCounter = 0;
 const AccordionHeadingLevelContext = createContext('h3');
@@ -14,11 +15,11 @@ const AccordionItem = ({
     heading,
     title,
     ...props
-}: SGDS.Component.Accordion.Item) => {
+}: AccordionItemProps) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${useId()}`;
 
-    let headingLevel = useContext(AccordionHeadingLevelContext);
+    const headingLevel = useContext(AccordionHeadingLevelContext);
 
     if (title) {
         console.warn(
@@ -77,7 +78,7 @@ const Accordion = ({
     hideOpenAll,
     isSmall,
     ...props
-}: SGDS.Component.Accordion) => {
+}: AccordionProps) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/Accordion/index.ts

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

package/src/components/Accordion/types.ts

@@ -0,0 +1,13 @@
+import { HeadingLevel } from "../../shared-types";
+
+export interface AccordionItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    id?: string;
+    heading: string | React.ReactNode;
+    isOpen?: boolean;
+}
+
+export interface AccordionProps extends React.AllHTMLAttributes<HTMLElement> {
+    headingLevel?: HeadingLevel;
+    hideOpenAll?: boolean;
+    isSmall?: boolean;
+}

package/src/components/AspectBox/AspectBox.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
-
-// @ts-ignore
+// @ts-expect-error no types
 import coo from '../../../static/images/highland-cow.jpg';
 import AspectBox from './AspectBox';
 

package/src/components/AspectBox/AspectBox.tsx

@@ -1,13 +1,14 @@
 import React, { Children, useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSAspectBox from '@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback';
+import { AspectBoxProps } from './types';
 
 const AspectBox = ({
     children,
     className,
     ratio,
     ...props
-}: SGDS.Component.AspectBox) => {
+}: AspectBoxProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
@@ -16,7 +17,7 @@ const AspectBox = ({
         }
     }, [ref]);
 
-    function processChild(child: any) {
+    function processChild(child: React.JSX.Element) {
         if (['img', 'svg', 'picture'].includes(child.type)) {
             return React.cloneElement(child, { className: 'ds_aspect-box__inner' });
         }
@@ -49,7 +50,7 @@ const AspectBox = ({
             ref={ref}
             {...props}
         >
-            {Children.map(children, child => processChild(child))}
+            {Children.map(children, child => processChild(child as React.JSX.Element))}
         </div>
     );
 };

package/src/components/AspectBox/index.ts

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

package/src/components/AspectBox/types.ts

@@ -0,0 +1,3 @@
+export interface AspectBoxProps extends React.AllHTMLAttributes<HTMLElement> {
+    ratio?: 'square' | '1:1' | '4:3' | '16:9' | '21:9';
+}

package/src/components/BackToTop/BackToTop.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSBackToTop from '@scottish-government/design-system/src/components/back-to-top/back-to-top';
+import { BackToTopProps } from './types';
 
 const BackToTop = ({
     className,
     href = '#page-top',
     ...props
-}: SGDS.Component.BackToTop) => {
+}: BackToTopProps) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/BackToTop/index.ts

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

package/src/components/BackToTop/types.ts

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