@scottish-government/designsystem-react 0.5.1 → 0.7.0

package/.svgrrc

@@ -1,7 +1,8 @@
 {
     "dimensions": false,
+    "filenameCase": "snake",
     "icon": true,
-    "outDir": "src/icons",
+    "outDir": "src/images/icons",
     "svgo": true,
     "svgoConfig": {
         "plugins": [

package/.svgrrc_documents

@@ -0,0 +1,15 @@
+{
+    "dimensions": false,
+    "filenameCase": "snake",
+    "outDir": "src/images/documents",
+    "svgo": true,
+    "svgoConfig": {
+        "plugins": [
+            "removeDimensions"
+        ]
+    },
+    "svgProps": {
+        "role": "img"
+    },
+    "typescript": true
+}

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

@@ -0,0 +1,7 @@
+declare namespace SGDS.Common {
+    interface FileIcon extends React.AllHTMLAttributes<SVGSVGElement> {
+        ariaLabel?: string,
+        className?: string,
+        icon: DocumentIconName
+    }
+}

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

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     namespace Accordion {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            headerLevel?: SGDS.HeaderLevel,
+            headingLevel?: SGDS.HeadingLevel,
             id: string,
             open?: boolean,
             title: string
@@ -9,7 +9,7 @@ declare namespace SGDS.Component {
     }
 
     interface Accordion extends React.AllHTMLAttributes<HTMLElement> {
-        headerLevel?: SGDS.HeaderLevel,
+        headingLevel?: SGDS.HeadingLevel,
         hideOpenAll?: boolean
     }
 }

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

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     interface ConfirmationMessage extends React.AllHTMLAttributes<HTMLElement> {
         ariaLive: AriaLive,
-        headerLevel: HeaderLevel,
+        headingLevel: HeadingLevel,
         title: string
     }
 }

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

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

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

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     interface NotificationPanel extends React.AllHTMLAttributes<HTMLDivElement> {
         ariaLive?: AriaLive,
-        headerLevel?: HeaderLevel,
+        headingLevel?: HeadingLevel,
         title: string
     }
 }

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

@@ -1,7 +1,7 @@
 declare namespace SGDS.Component {
     interface SummaryCard extends React.AllHTMLAttributes<HTMLElement> {
         actions?: SummaryList.Action[],
-        headerLevel?: SGDS.HeaderLevel,
+        headingLevel?: SGDS.HeadingLevel,
         items: SummaryList.Item[],
         title: string
     }

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

@@ -15,7 +15,7 @@ declare namespace SGDS.Component {
     interface Tabs extends React.AllHTMLAttributes<HTMLElement> {
         baseId: string,
         bordered?: boolean,
-        headerLevel?: SGDS.HeaderLevel,
+        headingLevel?: SGDS.HeadingLevel,
         manual?: boolean,
         title: string
     }

package/@types/sgds.d.ts

@@ -1,7 +1,8 @@
 declare namespace SGDS {
     type AriaLive = 'polite' | 'assertive';
-    type HeaderLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     type IconName = 'ArrowUpward' | 'CalendarToday' | 'Cancel' | 'CheckCircle' | 'ChevronLeft' | 'ChevronRight' | 'Close' | 'Description' | 'DoubleChevronLeft' | 'DoubleChevronRight' | 'Error' | 'ExpandLess' | 'ExpandMore' | 'List' | 'Menu' | 'PriorityHigh' | 'Search';
+    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';
 

package/CHANGELOG.md

@@ -0,0 +1,81 @@
+# Change log
+
+All notable changes to the Scottish Government "Design System React" repository/package will be documented in this file.
+
+Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`, 
+`Removed` and `Security`.
+
+---
+
+## [0.7.0] 
+### Changed
+- Change all component file names to Pascal case
+- Use uppercase text for const variable names
+- Nomenclature: prefer 'heading' over 'header' in variable names when referring to HTML headings (H1-H6)
+
+## [0.6.0] - 2025-07-29
+### Added
+- Add 'File download' component
+- Add 'File icon' component
+### Changed
+- Reorganise SVG icon components into subfolders
+
+## [0.5.1] - 2025-07-28
+### Changed
+- 'DisplayName' property of some compound components updated (Metadata.Item, TaskList.Item, TaskList.Group)
+
+## [0.5.0] - 2025-07-28
+### Added
+- Add 'Tabs' component
+
+## [0.4.0] - 2025-07-23
+### Added
+- Add 'Abstract notification banner' component
+- Add 'Cookie banner' component
+- Add 'Table' component
+- Add code of conduct
+### Changed
+- 'Notification banner' refactored to use AbstractNotificationBanner
+### Fixed
+- Fixed miscellaneous type warnings in unit tests
+
+## [0.3.0] - 2025-07-15
+### Added
+- Add 'Site header' component/pattern
+### Changed
+- SiteNavigation: add useRef, to support mobile navigation
+- DatePicker: add 'dateSelectCallback' prop
+
+## [0.2.0] - 2025-07-07
+### Added
+- Add 'Error summary' component
+
+## [0.1.7] - 2025-06-27
+### Added
+- Add 'Summary card' component
+- Add 'Summary list' component
+
+## [0.1.6] - 2025-06-27
+### Added
+- Add 'Hide this page' component
+
+## [0.1.5] - 2025-06-23
+### Added
+- Add 'Pagination' component
+### Changed
+- Icon: refactor to use icon components generated from DS source using SVGR
+- Add 'aria-invalid' to form fields that are in an error state
+
+## [0.1.2] - 2025-06-17
+### Added
+- Add readme file
+
+## [0.1.1] - 2025-06-13
+### Changed
+- Allow all components to have additional CSS classes passed to them
+
+## [0.1.0] - 2025-06-13
+### Added
+- Add npmignore file
+### Fixed
+- Fix broken content navigation spec

package/README.md

@@ -4,6 +4,10 @@ This repository contains a React implementation of the [Scottish Government Desi
 
 There is a documentation site showing what is in this implementation and how to use it here: https://designsystem-react.vercel.app/
 
+## 🚧 Under construction 🚧
+
+Warning: This project is in an alpha state and could potentially receive large breaking changes with little warning while it is being developed.
+
 ## Feedback, help or support
 
 If you need any help or want to give any feedback you can e-mail the Design System team at: [designsystem@gov.scot](mailto:designsystem@gov.scot).

package/dist/common/AbstractNotificationBanner.jsx

@@ -0,0 +1,63 @@
+"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 (<>{children}</>);
+};
+const AbstractNotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
+    let content = [];
+    let buttons;
+    react_1.Children.forEach(children, (child) => {
+        if ((0, react_1.isValidElement)(child) && child.type === Buttons) {
+            buttons = child;
+        }
+        else {
+            content.push(child);
+        }
+    });
+    return (<div className={[
+            'ds_notification',
+            className
+        ].join(' ')} data-module="ds-notification" {...props}>
+            <div className="ds_wrapper">
+                <div className={[
+            'ds_notification__content',
+            close && 'ds_notification__content--has-close'
+        ].join(' ')}>
+                    <h2 className="visually-hidden">{title}</h2>
+
+                    {icon &&
+            <span className={[
+                    'ds_notification__icon',
+                    iconInverse && 'ds_notification__icon--inverse',
+                    iconColour && 'ds_notification__icon--colour'
+                ].join(' ')} aria-hidden="true">
+                            <Icon_1.default icon={icon}/>
+                        </span>}
+
+                    <div className="ds_notification__text">
+                        {content}
+                    </div>
+
+                    {close &&
+            <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"/>
+                        </button>}
+
+                    {buttons &&
+            <div className="ds_button-group">
+                            {buttons}
+                        </div>}
+                </div>
+            </div>
+        </div>);
+};
+AbstractNotificationBanner.displayName = 'AbstractNotificationBanner';
+AbstractNotificationBanner.Buttons = Buttons;
+exports.default = AbstractNotificationBanner;

package/dist/common/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/FileIcon.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 FileIcons = __importStar(require("../images/documents"));
+const FileIcon = ({ ariaLabel = '', className, icon }) => {
+    const Component = react_1.default.createElement(FileIcons[icon], {
+        className: className,
+        'aria-label': ariaLabel
+    });
+    return (<>
+            {Component}
+        </>);
+};
+FileIcon.displayName = 'FileIcon';
+exports.default = FileIcon;

package/dist/common/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/Icon.jsx

@@ -0,0 +1,57 @@
+"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, fill, icon, iconSize }) => {
+    const Component = react_1.default.createElement(Icons[icon], {
+        'aria-hidden': ariaLabel ? undefined : true,
+        'aria-label': ariaLabel,
+        className: [
+            'ds_icon',
+            className,
+            fill && 'ds_icon--fill',
+            iconSize && `ds_icon--${iconSize}`
+        ].join(' ')
+    });
+    return (<>
+            {Component}
+        </>);
+};
+Icon.displayName = 'Icon';
+exports.default = Icon;

package/dist/common/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/WrapperTag.jsx

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Wraps all children in a specified HTML tag.
+ */
+const WrapperTag = ({ children, tagName = 'div', ...props }) => {
+    const TagName = tagName;
+    return <TagName {...props}>{children}</TagName>;
+};
+WrapperTag.displayName = 'WrapperTag';
+exports.default = WrapperTag;

package/dist/common/file-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 FileIcons = __importStar(require("../images/documents"));
+const FileIcon = ({ ariaLabel = '', className, icon }) => {
+    const Component = react_1.default.createElement(FileIcons[icon], {
+        className: className,
+        'aria-label': ariaLabel
+    });
+    return (<>
+            {Component}
+        </>);
+};
+FileIcon.displayName = 'FileIcon';
+exports.default = FileIcon;

package/dist/common/icon.jsx

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Icons = __importStar(require("../icons"));
+const Icons = __importStar(require("../images/icons"));
 const Icon = ({ ariaLabel, className, fill, icon, iconSize }) => {
     const Component = react_1.default.createElement(Icons[icon], {
         'aria-hidden': ariaLabel ? undefined : true,

package/dist/components/Accordion/Accordion.jsx

@@ -0,0 +1,102 @@
+"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 = __importStar(require("react"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+// @ts-ignore
+const accordion_1 = __importDefault(require("@scottish-government/design-system/src/components/accordion/accordion"));
+let accordionItemCounter = 0;
+const AccordionItem = ({ children, className, headingLevel = 'h3', id: rawId, open = false, title, ...props }) => {
+    accordionItemCounter = accordionItemCounter + 1;
+    const processedId = rawId || `accordion-item-${accordionItemCounter}`;
+    return (<div className={[
+            'ds_accordion-item',
+            className
+        ].join(' ')} id={processedId} {...props}>
+            <input aria-labelledby={`panel-${processedId}-heading`} className={[
+            'ds_accordion-item__control',
+            'visually-hidden'
+        ].join(' ')} defaultChecked={open} 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}
+                </WrapperTag_1.default>
+                <span className='ds_accordion-item__indicator'/>
+                <label className="ds_accordion-item__label" htmlFor={`${processedId}-control`}>
+                    <span className="visually-hidden">Show this section</span>
+                </label>
+            </div>
+            <div className="ds_accordion-item__body">
+                {children}
+            </div>
+        </div>);
+};
+const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new accordion_1.default(ref.current).init();
+        }
+    }, [ref]);
+    if (!children) {
+        hideOpenAll = true;
+    }
+    function processChild(child) {
+        return react_1.default.cloneElement(child, { headingLevel: headingLevel });
+    }
+    return (<div className={[
+            'ds_accordion',
+            className
+        ].join(' ')} ref={ref} {...props}>
+            {!hideOpenAll && (<button className={[
+                'ds_accordion__open-all',
+                'ds_link',
+                'js-open-all'
+            ].join(' ')} type='button'>
+                    Open all
+                    {' '}
+                    <span className="visually-hidden">sections</span>
+                </button>)}
+
+            {react_1.Children.map(children, child => processChild(child))}
+        </div>);
+};
+Accordion.displayName = 'Accordion';
+AccordionItem.displayName = 'AccordionItem';
+Accordion.Item = AccordionItem;
+exports.default = Accordion;