@scottish-government/designsystem-react 0.9.0-beta.0 → 0.10.0-beta.0

package/.storybook/main.ts

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

package/.storybook/manager.ts

@@ -0,0 +1,13 @@
+import { addons } from 'storybook/manager-api';
+import capitalize from "lodash/capitalize";
+
+import sgdsTheme from './sgdsTheme';
+
+addons.setConfig({
+    theme: sgdsTheme,
+    sidebar: {
+        renderLabel: ({ name, type }) => {
+            return capitalize(name);
+        }
+    }
+});

package/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,400italic&amp;display=swap" rel="stylesheet" type="text/css">

package/.storybook/preview.tsx

@@ -0,0 +1,56 @@
+import type { Preview } from "@storybook/react-vite";
+
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/addon-docs/blocks';
+
+import '@scottish-government/design-system/dist/css/design-system.css';
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+
+        a11y: {
+            // 'todo' - show a11y violations in the test UI only
+            // 'error' - fail CI on a11y violations
+            // 'off' - skip a11y checks entirely
+            test: "todo",
+        },
+
+        backgrounds: {
+            grid: {
+                cellSize: 8,
+                opacity: 0.25,
+                cellAmount: 8,
+                offsetX: 30, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+                offsetY: 40, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+            },
+        },
+
+        docs: {
+            page: () => (
+                <>
+                    <Title />
+                    <Subtitle />
+                    <Description />
+                    <Primary />
+                    <Controls />
+                    <Stories />
+                </>
+            )
+        },
+    },
+    tags: ['autodocs']
+};
+
+export default preview;

package/.storybook/sgdsArgTypes.ts

@@ -0,0 +1,123 @@
+const SGDSArgTypes = {
+    ariaLabel: (options?: any) => {
+        return Object.assign({
+            type: 'string'
+        }, options);
+    },
+    ariaLive: (options?: any) => {
+        return Object.assign({
+            options: ['off', 'polite', 'assertive'],
+            control: { type: 'select' },
+            type: 'string'
+        }, options);
+    },
+    children: (options?: any) => {
+        return Object.assign({
+            control: false
+        }, options);
+    },
+    countThreshold: (options?: any) => {
+        return Object.assign({
+            control: {
+                type: 'number', min: 1, max: 100, step: 1
+            },
+            description: 'Percentage threshold to show the character count at',
+            type: 'number'
+        }, options);
+    },
+    errorMessage: (options?: any) => {
+        return Object.assign({
+            description: 'Text to use for an error message',
+            type: 'string'
+        }, options);
+    },
+    hasError: (options?: any) => {
+        return Object.assign({
+            control: 'boolean',
+            description: 'Whether the field is in an error state'
+        }, options);
+    },
+    headingLevel: (options?: any) => {
+        return Object.assign({
+            description: 'Heading level for the component\'s title',
+            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            control: { type: 'select' },
+            type: 'string'
+        }, options);
+    },
+    hintText: (options?: any) => {
+        return Object.assign({
+            description: 'Text to use for the field\'s hint text',
+            type: 'string'
+        }, options);
+    },
+    id: (options?: any) => {
+        return Object.assign({
+            type: {
+                required: true,
+                name: 'string'
+            }
+        }, options);
+    },
+    inputWidth: (options?: any) => {
+        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);
+    },
+    isSmall: (options?: any) => {
+        return Object.assign({
+            control: 'boolean',
+            description: 'Whether to use the ‘small’ input control variant'
+        }, options);
+    },
+    label: (options?: any) => {
+        return Object.assign({
+            description: 'Text to use for the field\'s associated label',
+            type: {
+                required: true,
+                name: 'string'
+            }
+        }, options);
+    },
+    linkComponent: (options?: any) => {
+        return Object.assign({
+            control: false,
+            description: 'Function that returns an element, to customise the output',
+            type: 'function'
+        }, options);
+    },
+    maxlength: (options?: any) => {
+        return Object.assign({
+            description: 'Maximum number of characters permitted',
+            type: 'number'
+        }, options);
+    },
+    noBorder: (options?: any) => {
+        return Object.assign({
+            control: 'boolean',
+            description: 'Use the borderless display variant'
+        }, options);
+    },
+    onBlur: (options?: any) => {
+        return Object.assign({
+            description: 'Function to fire in response to a blur event',
+            type: 'function'
+        }, options);
+    },
+    onChange: (options?: any) => {
+        return Object.assign({
+            description: 'Function to fire in response to a change event',
+            type: 'function'
+        }, options);
+    },
+    onClick: (options?: any) => {
+        return Object.assign({
+            description: 'Function to fire in response to a click event',
+            type: 'function'
+        }, options);
+    },
+}
+
+export default SGDSArgTypes;

package/.storybook/sgdsTheme.ts

@@ -0,0 +1,9 @@
+import { create } from 'storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Scottish Government Design System',
+  brandUrl: 'https://designsystem.gov.scot',
+  brandImage: 'static/images/scottish-government--min.svg',
+  brandTarget: '_self',
+});

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

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

@@ -6,11 +6,11 @@ declare namespace SGDS.Common {
     }
 
     interface AbstractNotificationBanner extends React.AllHTMLAttributes<HTMLDivElement> {
-        close?: boolean,
         hasIcon?: boolean,
-        icon?: IconName,
         hasColourIcon?: boolean,
         hasInverseIcon?: boolean,
+        icon?: IconName,
+        isDismissable?: boolean,
         title: string,
         ref?: any
     }

package/@types/common/ActionLink.d.ts

@@ -1,6 +1,6 @@
 declare namespace SGDS.Common {
     interface ActionLink extends React.AllHTMLAttributes<HTMLElement> {
-        describedby: string,
+        describedby?: string,
         href?: string,
         linkComponent?: SGDS.LinkComponent,
         onclick?: React.EventHandler<any>

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

@@ -2,7 +2,7 @@ declare namespace SGDS.Common {
     interface Icon extends React.AllHTMLAttributes<SVGSVGElement> {
         ariaLabel?: React.AriaAttributes['aria-label'],
         className?: string,
-        fill?: boolean,
+        isFilled?: boolean,
         icon: IconName,
         iconSize?: string
     }

package/@types/components/Accordion.d.ts

@@ -1,8 +1,8 @@
 declare namespace SGDS.Component {
     namespace Accordion {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            id: string,
-            open?: boolean,
+            id?: string,
+            isOpen?: boolean,
             title: string
         }
     }

package/@types/components/Button.d.ts

@@ -4,13 +4,13 @@ declare namespace SGDS.Component {
     type ButtonWidth = 'fluid' | 'fixed' | 'max';
 
     interface Button extends React.AllHTMLAttributes<HTMLButtonElement> {
-        icon?: IconName,
-        iconLeft?: boolean
-        iconOnly?: boolean,
+        hasLinkStyle?: boolean,
         href?: string,
-        small?: boolean,
+        icon?: IconName,
+        isIconLeft?: boolean
+        isIconOnly?: boolean,
+        isSmall?: boolean,
         buttonStyle?: ButtonStyle,
-        styleAsLink?: boolean,
         type?: ButtonType
         width?: ButtonWidth
     }

package/@types/components/CategoryItem.d.ts

@@ -0,0 +1,10 @@
+declare namespace SGDS.Component {
+    interface CategoryItem extends React.AllHTMLAttributes<HTMLElement> {
+        className?: string,
+        headingLevel?: SGDS.HeadingLevel,
+        href?: string,
+        linkComponent?: SGDS.LinkComponent
+        tagName?: string,
+        title: string,
+    }
+}

package/@types/components/CategoryList.d.ts

@@ -0,0 +1,7 @@
+declare namespace SGDS.Component {
+    interface CategoryList extends React.AllHTMLAttributes<HTMLElement> {
+        className?: string,
+        isGrid?: boolean,
+        isOrdered?: boolean
+    }
+}

package/@types/components/Checkbox.d.ts

@@ -1,11 +1,11 @@
 declare namespace SGDS.Component {
     namespace Checkbox {
         interface Group extends React.AllHTMLAttributes<HTMLElement> {
-            small?: boolean
+            isSmall?: boolean
         }
     }
 
     interface Checkbox extends CheckboxRadioBase<HTMLInputElement> {
-        exclusive?: boolean
+        isExclusive?: boolean
     }
 }

package/@types/components/ContentsNav.d.ts

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     namespace ContentsNav {
         interface ContentsNavItem extends React.AllHTMLAttributes<HTMLElement> {
-            current?: boolean,
+            isCurrent?: boolean,
             linkComponent?: SGDS.LinkComponent;
         }
     }

package/@types/components/DatePicker.d.ts

@@ -10,7 +10,7 @@ declare namespace SGDS.Component {
         label: string,
         maxDate?: string,
         minDate?: string,
-        multiple?: boolean,
+        isMultiple?: boolean,
         name?: string,
         onBlur?: React.EventHandler<any>,
         onChange?: React.EventHandler<any>,

package/@types/components/ErrorMessage.d.ts

@@ -1,6 +1,5 @@
 declare namespace SGDS.Component {
     interface ErrorMessage extends React.AllHTMLAttributes<HTMLElement> {
-        id?: string,
-        text: string | undefined
+        id?: string
     }
 }

package/@types/components/ErrorSummary.d.ts

@@ -2,7 +2,7 @@ declare namespace SGDS.Component {
     namespace ErrorSummary {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
             fragmentId: string,
-            linkComponent: SGDS.LinkComponent
+            linkComponent?: SGDS.LinkComponent
         }
     }
 

package/@types/components/FileDownload.d.ts

@@ -1,11 +1,11 @@
 declare namespace SGDS.Component {
     interface FileDownload extends React.AllHTMLAttributes<HTMLElement> {
         cover?: string,
-        icon?: DocumentIconName,
         fileSize?: string,
         fileType?: string,
         fileUrl: string,
-        highlighted?: boolean,
+        icon?: DocumentIconName,
+        isHighlighted?: boolean,
         title: string
     }
 }

package/@types/components/Metadata.d.ts

@@ -6,6 +6,6 @@ declare namespace SGDS.Component {
     }
 
     interface Metadata extends React.AllHTMLAttributes<HTMLDListElement> {
-        inline?: boolean
+        isInline?: boolean
     }
 }

package/@types/components/Pagination.d.ts

@@ -2,7 +2,7 @@ declare namespace SGDS.Component {
     namespace Pagination {
         interface Page extends React.AllHTMLAttributes<HTMLElement> {
             ariaLabel: React.AriaAttributes['aria-label'],
-            current?: boolean,
+            isCurrent?: boolean,
             href: string,
             linkComponent?: SGDS.LinkComponent,
             onClick?: React.EventHandler<any>

package/@types/components/RadioButton.d.ts

@@ -1,9 +1,9 @@
 declare namespace SGDS.Component {
     namespace RadioButton {
         interface Group extends React.AllHTMLAttributes<HTMLElement> {
-            inline?: boolean,
+            isInline?: boolean,
             name: string,
-            small?: boolean
+            isSmall?: boolean
         }
     }
 

package/@types/components/SideNavigation.d.ts

@@ -5,7 +5,7 @@ declare namespace SGDS.Component {
         }
 
         interface Item extends React.AllHTMLAttributes<HTMLLIElement> {
-            current?: boolean,
+            isCurrent?: boolean,
             href: string,
             linkComponent?: SGDS.LinkComponent,
             title: string,

package/@types/components/SiteNavigation.d.ts

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     namespace SiteNavigation {
         interface Item extends React.AllHTMLAttributes<HTMLLIElement> {
-            current?: boolean,
+            isCurrent?: boolean,
             href: string,
             linkComponent?: SGDS.LinkComponent
         }

package/@types/components/SummaryList.d.ts

@@ -9,6 +9,6 @@ declare namespace SGDS.Component {
     }
 
     interface SummaryList extends React.OlHTMLAttributes<HTMLOListElement> {
-        noBorder?: boolean
+        isBorderless?: boolean
     }
 }

package/@types/components/Tabs.d.ts

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     namespace Tabs {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            bordered?: boolean,
+            isBorderless?: boolean,
             id: string,
             tabLabel: string
         }
@@ -13,9 +13,9 @@ declare namespace SGDS.Component {
 
     interface Tabs extends React.AllHTMLAttributes<HTMLElement> {
         baseId: string,
-        bordered?: boolean,
+        isBorderless?: boolean,
         headingLevel?: SGDS.HeadingLevel,
-        manual?: boolean,
+        isManual?: boolean,
         title: string
     }
 }

package/@types/components/TextInput.d.ts

@@ -3,9 +3,9 @@ declare namespace SGDS.Component {
         buttonIcon?: IconName,
         buttonText?: string,
         className?: string,
-        currency?: boolean,
         currencySymbol?: string,
         hasButton?: boolean,
+        isCurrency?: boolean,
         type?: string,
         width?: InputWidth
     }

package/@types/sgds.d.ts

@@ -4,6 +4,7 @@ declare namespace SGDS {
     type DocumentIconName = 'Audio' | 'Csv' | 'Excel' | 'File' | 'Generic' | 'Geodata' | 'Ical' | 'Ico' | 'Image' | 'Odf' | 'Odg' | 'Odp' | 'Ods' | 'Odt' | 'Pdf' | 'Ppt' | 'Rtf' | 'Text' | 'Video' | 'Word' | 'Xml' | 'Zip';
     type InputWidth = '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 TagColour = 'grey' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
+    type TextInputType = 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 
     type LinkComponent = (linkComponent: LinkComponentProps) => React.ReactNode;
 
@@ -25,7 +26,7 @@ declare namespace SGDS {
         name?: string,
         onBlur?: React.EventHandler<any>,
         onChange?: React.EventHandler<any>,
-        small?: boolean
+        isSmall?: boolean
     }
 
     interface FormFieldBase<T> extends React.AllHTMLAttributes <T> {

package/CHANGELOG.md

@@ -7,6 +7,35 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
 
 ---
 
+## [0.9.0] - 2025-09-17
+## Added
+- Storybook now added for all components. `npm run storybook`
+- CategoryList component
+- CategoryItem component
+## Changed
+- 'text' prop removed from ErrorMessage. Use children instead.
+- Many boolean prop names updated for clarity/consistency
+  - AbstractNotificationBanner (used by NotificationBanner and CookieBanner): close -> isDismissable
+  - Accordion.Item: open -> isOpen
+  - Button: small -> isSmall
+  - Button: iconLeft -> isIconLeft
+  - Button: iconOnly -> isIconOnly
+  - Button: styleAsLink -> hasLinkStyle
+  - Checkbox: exclusive -> isExclusive
+  - CheckboxGroup: small -> isSmall
+  - ContentsNav: curent -> isCurrent
+  - DatePicker: multiple -> isMultiple
+  - FileDownload: highlighted -> isHighlighted
+  - Metadata: inline -> isInline
+  - Pagination.Item: current -> isCurrent
+  - RadioButton: inline -> isInline
+  - RadioGroup: small -> isSmall
+  - SideNavigation.Item: current -> isCurrent
+  - SiteNavigation.Item: current -> isCurrent
+  - SummaryList: noBorder -> isBorderless
+  - Tabs: bordered -> isBorderless (logic inverted), manual -> isManual
+  - TextInput: currency -> isCurrency
+
 ## [0.8.0] - 2025-08-18
 ## Added
 - ActionLink component, centralising behaviour used in actions in both SummaryCard and SummaryList

package/dist/common/AbstractNotificationBanner.jsx

@@ -9,7 +9,7 @@ const ScreenReaderText_1 = __importDefault(require("./ScreenReaderText"));
 const Buttons = ({ children }) => {
     return (<>{children}</>);
 };
-const AbstractNotificationBanner = ({ children, className, close, hasColourIcon, hasInverseIcon, icon, title = 'Information', ...props }) => {
+const AbstractNotificationBanner = ({ children, className, hasColourIcon, hasInverseIcon, icon, isDismissable, title = 'Information', ...props }) => {
     let content = [];
     let buttons;
     react_1.Children.forEach(children, (child) => {
@@ -28,7 +28,7 @@ const AbstractNotificationBanner = ({ children, className, close, hasColourIcon,
             <div className="ds_wrapper">
                 <div className={[
             'ds_notification__content',
-            close && 'ds_notification__content--has-close'
+            isDismissable && 'ds_notification__content--has-close'
         ].join(' ')}>
                     <h2 className="visually-hidden">{title}</h2>
 
@@ -45,10 +45,10 @@ const AbstractNotificationBanner = ({ children, className, close, hasColourIcon,
                         {content}
                     </div>
 
-                    {close &&
+                    {isDismissable &&
             <button type="button" className="ds_notification__close js-close-notification">
                             <ScreenReaderText_1.default>Close this notification</ScreenReaderText_1.default>
-                            <Icon_1.default fill icon="Close" aria-hidden="true"/>
+                            <Icon_1.default isFilled icon="Close" aria-hidden="true"/>
                         </button>}
 
                     {buttons &&

package/dist/common/Icon.jsx

@@ -38,12 +38,12 @@ 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 Icon = ({ ariaLabel, className, fill, icon, iconSize }) => {
+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,
-            fill && 'ds_icon--fill',
+            isFilled && 'ds_icon--fill',
             iconSize && `ds_icon--${iconSize}`
         ].join(' ')}/>);
 };

package/dist/components/Accordion/Accordion.jsx

@@ -42,14 +42,10 @@ const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
 const accordion_1 = __importDefault(require("@scottish-government/design-system/src/components/accordion/accordion"));
 let accordionItemCounter = 0;
 const AccordionHeadingLevelContext = (0, react_1.createContext)('h3');
-const AccordionItem = ({ children, className, id: rawId, open = false, title, ...props }) => {
+const AccordionItem = ({ children, className, id: rawId, isOpen = false, title, ...props }) => {
     accordionItemCounter = accordionItemCounter + 1;
-    const processedId = rawId || `accordion-item-${accordionItemCounter}`;
-    const DEFAULT_HEADING_LEVEL = 'h3';
+    const processedId = rawId || `accordion-item-${(0, react_1.useId)()}`;
     let headingLevel = (0, react_1.useContext)(AccordionHeadingLevelContext);
-    if (!['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(headingLevel)) {
-        headingLevel = DEFAULT_HEADING_LEVEL;
-    }
     return (<div className={[
             'ds_accordion-item',
             className
@@ -57,7 +53,7 @@ const AccordionItem = ({ children, className, id: rawId, open = false, title, ..
             <input aria-labelledby={`panel-${processedId}-heading`} className={[
             'ds_accordion-item__control',
             'visually-hidden'
-        ].join(' ')} defaultChecked={open} id={`${processedId}-control`} type="checkbox"/>
+        ].join(' ')} defaultChecked={isOpen} id={`${processedId}-control`} type="checkbox"/>
             <div className="ds_accordion-item__header">
                 <WrapperTag_1.default id={`panel-${processedId}-heading`} className="ds_accordion-item__title" tagName={headingLevel}>
                     {title}

package/dist/components/Button/Button.jsx

@@ -6,22 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Icon_1 = __importDefault(require("../../common/Icon"));
 const ScreenReaderText_1 = __importDefault(require("../../common/ScreenReaderText"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
-const Button = ({ buttonStyle, children, className, icon, iconLeft, iconOnly = false, href, small, styleAsLink, type = 'button', width, ...props }) => {
+const Button = ({ buttonStyle, children, className, icon, hasLinkStyle, href, isIconLeft, isIconOnly = false, isSmall, type = 'button', width, ...props }) => {
     // determine which HTML tag to use
     let tagName = 'button';
     if (href) {
         tagName = 'a';
     }
     return (<WrapperTag_1.default tagName={tagName} className={[
-            !styleAsLink ? 'ds_button' : 'ds_link',
+            !hasLinkStyle ? 'ds_button' : 'ds_link',
             width && `ds_button--${width}`,
             buttonStyle && `ds_button--${buttonStyle}`,
-            small && 'ds_button--small',
-            (icon && !iconOnly) ? 'ds_button--has-icon' : undefined,
-            iconLeft && 'ds_button--has-icon--left',
+            isSmall && 'ds_button--small',
+            (icon && !isIconOnly) ? 'ds_button--has-icon' : undefined,
+            isIconLeft && 'ds_button--has-icon--left',
             className
         ].join(' ')} href={href} {...(tagName === 'button' ? { type: type } : {})} {...props}>
-            {iconOnly ? <ScreenReaderText_1.default>{children}</ScreenReaderText_1.default> : children}
+            {isIconOnly ? <ScreenReaderText_1.default>{children}</ScreenReaderText_1.default> : children}
 
             {icon && <Icon_1.default icon={icon}/>}
         </WrapperTag_1.default>);