@scottish-government/designsystem-react 0.13.0 → 1.0.0

package/.storybook/sgdsArgTypes.ts

@@ -52,6 +52,16 @@ const SGDSArgTypes = {
             type: 'string'
         }, options) as InputType;
     },
+    boolean: (options?: ArgType) => {
+        return Object.assign({
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        }, options) as InputType;
+    },
     children: (options?: ArgType) => {
         return Object.assign({
             control: false
@@ -170,6 +180,19 @@ const SGDSArgTypes = {
             type: 'function'
         }, 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?: ArgType) => {
         return Object.assign({
             control: { type: 'select' },

package/CHANGELOG.md

@@ -6,6 +6,29 @@ 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

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;