@scottish-government/designsystem-react 1.0.0 → 1.1.0

package/.storybook/sgdsArgTypes.ts

@@ -79,7 +79,10 @@ const SGDSArgTypes = {
     errorMessage: (options?: ArgType) => {
         return Object.assign({
             description: 'Text to use for an error message',
-            type: 'string'
+            type: 'string',
+            table: {
+                type: { summary: 'string' }
+            }
         }, options) as InputType;
     },
     hasError: (options?: ArgType) => {
@@ -96,10 +99,20 @@ const SGDSArgTypes = {
             type: 'string'
         }, options) as InputType;
     },
+    hidden: (options?: ArgType) => {
+        return Object.assign({
+            table: {
+                disable: true
+            }
+        }, options) as InputType;
+    },
     hintText: (options?: ArgType) => {
         return Object.assign({
             description: 'Text to use for the field\'s hint text',
-            type: 'string'
+            type: 'string',
+            table: {
+                type: { summary: 'string' }
+            }
         }, options) as InputType;
     },
     href: (options?: ArgType) => {
@@ -190,7 +203,10 @@ const SGDSArgTypes = {
             control: { type: 'select' },
             options: params.options,
             description: params.description,
-            type: typeof params.options[0]
+            type: typeof params.options[0],
+            table: {
+                type: { summary: typeof params.options[0] }
+            }
         } as InputType;
     },
     tagColour: (options?: ArgType) => {

package/CHANGELOG.md

@@ -7,6 +7,25 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
 
 ---
 
+## [1.1.0] - 2026-06-17
+### Added
+- FileUpload component
+- Components to represent each of the notification message states
+  - Confirmation notification
+  - Error notification
+  - Information notification
+  - Warning notification
+### Changed
+- Allow hintText and errorMessage props to accept either string or React.ReactNode in: Checkbox, DatePicker, Question, Radio, Select, Textarea, TextInput
+- NotificationBanner and WarningText use updated warning icon
+- Updated to use v4.1.1 of SG Design System
+### Deprecated
+- Confirmation message is deprecated, use confirmation notification instead
+
+## [1.0.1] - 2026-04-22
+### Fixed
+- Broken paths on cookie banner and summary list
+
 ## [1.0.0] - 2026-04-21
 
 ### Added

package/README.md

@@ -7,10 +7,6 @@ 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).
@@ -29,7 +25,7 @@ Compile the source code from TypeScript/TSX into JavaScript/JSX files, located i
 `npm run test`  
 Run unit tests
 
-`npm run coverage`  
+`npm run test:coverage`  
 Run unit tests and output a coverage report, located in `/coverage`
 
 `npm run storybook`  

package/dist/common/AbstractNotificationMessage/AbstractNotificationMessage.d.ts

@@ -0,0 +1,6 @@
+import { AbstractNotificationMessageProps } from './types';
+declare const AbstractNotificationMessage: {
+    ({ ariaLive, children, className, headingLevel, icon, isDismissable, title, ...props }: AbstractNotificationMessageProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default AbstractNotificationMessage;

package/dist/common/AbstractNotificationMessage/AbstractNotificationMessage.jsx

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Icon_1 = __importDefault(require("../Icon"));
+const ScreenReaderText_1 = __importDefault(require("../ScreenReaderText"));
+const WrapperTag_1 = __importDefault(require("../WrapperTag"));
+const clsx_1 = __importDefault(require("clsx"));
+const AbstractNotificationMessage = ({ ariaLive = 'polite', children, className, headingLevel = 'h3', icon, isDismissable, title, ...props }) => {
+    return (<div aria-live={ariaLive} className={(0, clsx_1.default)([
+            'ds_notification-message',
+            className
+        ])} data-module="ds-notification-message" {...props}>
+            {icon &&
+            <Icon_1.default icon={icon} className="ds_notification-message__icon" iconSize="24"/>}
+            <WrapperTag_1.default className="ds_notification-message__title" tagName={headingLevel}>
+                {title}
+            </WrapperTag_1.default>
+
+            {children &&
+            <div className="ds_notification-message__body">
+                    {children}
+                </div>}
+
+            {isDismissable &&
+            <button type="button" className="ds_notification-message__close  js-close-notification-message">
+                    <ScreenReaderText_1.default>Close this notification</ScreenReaderText_1.default>
+                    <Icon_1.default isFilled icon="Close" aria-hidden="true"/>
+                </button>}
+        </div>);
+};
+AbstractNotificationMessage.displayName = 'AbstractNotificationMessage';
+exports.default = AbstractNotificationMessage;

package/dist/common/AbstractNotificationMessage/index.d.ts

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

package/dist/common/AbstractNotificationMessage/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AbstractNotificationMessage_1 = require("./AbstractNotificationMessage");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AbstractNotificationMessage_1).default; } });

package/dist/common/AbstractNotificationMessage/types.d.ts

@@ -0,0 +1,9 @@
+import { HeadingLevel, IconName } from '../../shared-types';
+export interface AbstractNotificationMessageProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    ariaLive?: React.AriaAttributes['aria-live'];
+    headingLevel?: HeadingLevel;
+    icon?: IconName;
+    isDismissable?: boolean;
+    title?: string;
+    ref?: React.Ref<HTMLDivElement>;
+}

package/dist/common/AbstractNotificationMessage/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/common/WrapperTag/WrapperTag.d.ts

@@ -234,18 +234,18 @@ declare const WrapperTag: {
         onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onError?: React.ReactEventHandler<HTMLElement> | undefined;

package/dist/components/ConfirmationMessage/ConfirmationMessage.d.ts

@@ -1,6 +1,22 @@
-import { ConfirmationMessageProps } from './types';
+/**
+ * @deprecated
+ *
+ * This component has been deprecated, please use ConfirmationNotification instead
+ *
+ * Before:
+ *
+ * `<ConfirmationMessage />`
+ *
+ * After:
+ *
+ * `<ConfirmationNotification />`
+ *
+ * @deprecatedSince 1.1.0
+ *
+*/
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
 declare const ConfirmationMessage: {
-    ({ ariaLive, children, className, headingLevel, title, ...props }: ConfirmationMessageProps): import("react").JSX.Element;
+    ({ ariaLive, children, className, headingLevel, isDismissable, title, ...props }: AbstractNotificationMessageProps): import("react").JSX.Element;
     displayName: string;
 };
 export default ConfirmationMessage;

package/dist/components/ConfirmationMessage/ConfirmationMessage.jsx

@@ -1,25 +1,29 @@
 "use strict";
+/**
+ * @deprecated
+ *
+ * This component has been deprecated, please use ConfirmationNotification instead
+ *
+ * Before:
+ *
+ * `<ConfirmationMessage />`
+ *
+ * After:
+ *
+ * `<ConfirmationNotification />`
+ *
+ * @deprecatedSince 1.1.0
+ *
+*/
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Icon_1 = __importDefault(require("../../common/Icon"));
-const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
-const clsx_1 = __importDefault(require("clsx"));
-const ConfirmationMessage = ({ ariaLive = 'polite', children, className, headingLevel = 'h3', title, ...props }) => {
-    return (<div aria-live={ariaLive} className={(0, clsx_1.default)([
-            'ds_confirmation-message',
-            className
-        ])} {...props}>
-            <Icon_1.default className="ds_confirmation-message__icon" icon="CheckCircle" iconSize="24"/>
-
-            <WrapperTag_1.default className="ds_confirmation-message__title" tagName={headingLevel}>
-                {title}
-            </WrapperTag_1.default>
-            {children && <div className="ds_confirmation-message__body">
-                {children}
-            </div>}
-        </div>);
+const ConfirmationNotification_1 = __importDefault(require("..//ConfirmationNotification"));
+const ConfirmationMessage = ({ ariaLive, children, className, headingLevel, isDismissable, title, ...props }) => {
+    return (<ConfirmationNotification_1.default ariaLive={ariaLive} className={className} headingLevel={headingLevel} isDismissable={isDismissable} title={title} {...props}>
+            {children}
+        </ConfirmationNotification_1.default>);
 };
 ConfirmationMessage.displayName = 'ConfirmationMessage';
 exports.default = ConfirmationMessage;

package/dist/components/ConfirmationNotification/ConfirmationNotification.d.ts

@@ -0,0 +1,6 @@
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
+declare const ConfirmationNotification: {
+    ({ ariaLive, children, className, headingLevel, isDismissable, title, ...props }: AbstractNotificationMessageProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default ConfirmationNotification;

package/dist/components/ConfirmationNotification/ConfirmationNotification.jsx

@@ -0,0 +1,26 @@
+"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 AbstractNotificationMessage_1 = __importDefault(require("../../common/AbstractNotificationMessage"));
+const notification_message_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-message/notification-message"));
+const clsx_1 = __importDefault(require("clsx"));
+const ConfirmationNotification = ({ ariaLive, children, className, headingLevel = 'h3', isDismissable, title, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new notification_message_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<AbstractNotificationMessage_1.default ariaLive={ariaLive} className={(0, clsx_1.default)([
+            'ds_notification-message--success',
+            className
+        ])} headingLevel={headingLevel} icon="CheckCircle" isDismissable={isDismissable} ref={ref} title={title} {...props}>
+            {children}
+        </AbstractNotificationMessage_1.default>);
+};
+ConfirmationNotification.displayName = 'ConfirmationNotification';
+exports.default = ConfirmationNotification;

package/dist/components/ConfirmationNotification/index.d.ts

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

package/dist/components/ConfirmationNotification/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ConfirmationNotification_1 = require("./ConfirmationNotification");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ConfirmationNotification_1).default; } });

package/dist/components/CookieBanner/CookieBanner.jsx

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const AbstractNotificationBanner_1 = __importDefault(require("../../common/AbstractNotificationBanner"));
-const cookie_notification_js_1 = __importDefault(require("@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js"));
+const cookie_notification_1 = __importDefault(require("@scottish-government/design-system/src/components/cookie-notification/cookie-notification"));
 const clsx_1 = __importDefault(require("clsx"));
 const CookieBanner = ({ children, className, title = 'Information', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         /* istanbul ignore else */
         if (ref.current) {
-            new cookie_notification_js_1.default(ref.current).init();
+            new cookie_notification_1.default(ref.current).init();
         }
     }, [ref]);
     return (<>

package/dist/components/ErrorNotification/ErrorNotification.d.ts

@@ -0,0 +1,6 @@
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
+declare const ErrorNotification: {
+    ({ ariaLive, children, className, headingLevel, isDismissable, title, ...props }: AbstractNotificationMessageProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default ErrorNotification;

package/dist/components/ErrorNotification/ErrorNotification.jsx

@@ -0,0 +1,26 @@
+"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 AbstractNotificationMessage_1 = __importDefault(require("../../common/AbstractNotificationMessage"));
+const notification_message_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-message/notification-message"));
+const clsx_1 = __importDefault(require("clsx"));
+const ErrorNotification = ({ ariaLive, children, className, headingLevel = 'h3', isDismissable, title, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new notification_message_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<AbstractNotificationMessage_1.default ariaLive={ariaLive} className={(0, clsx_1.default)([
+            'ds_notification-message--error',
+            className
+        ])} headingLevel={headingLevel} icon="Error" isDismissable={isDismissable} ref={ref} title={title} {...props}>
+            {children}
+        </AbstractNotificationMessage_1.default>);
+};
+ErrorNotification.displayName = 'ErrorNotification';
+exports.default = ErrorNotification;

package/dist/components/ErrorNotification/index.d.ts

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

package/dist/components/ErrorNotification/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ErrorNotification_1 = require("./ErrorNotification");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ErrorNotification_1).default; } });

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,6 @@
+import { FileUploadProps } from './types';
+declare const FileUpload: {
+    ({ accept, capture, className, errorMessage, hasError, hintText, id, isMultiple, label, name, onBlur, onChange, text, ...props }: FileUploadProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default FileUpload;

package/dist/components/FileUpload/FileUpload.jsx

@@ -0,0 +1,55 @@
+"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 ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
+const HintText_1 = __importDefault(require("../../common/HintText"));
+const file_upload_1 = __importDefault(require("@scottish-government/design-system/src/components/file-upload/file-upload"));
+const FileUpload = ({ accept, capture, className, errorMessage, hasError, hintText, id, isMultiple, label, name, onBlur, onChange, text, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    const errorMessageId = `error-message-${id}`;
+    const hintTextId = `hint-text-${id}`;
+    const describedbys = [];
+    if (hintText) {
+        describedbys.push(hintTextId);
+    }
+    ;
+    if (errorMessage) {
+        describedbys.push(errorMessageId);
+    }
+    ;
+    const options = {
+        text: text
+    };
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new file_upload_1.default(ref.current, options).init();
+        }
+    }, [ref]);
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<div className={[
+            'ds_file-upload',
+            className
+        ].join(' ')} ref={ref} {...props}>
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <HintText_1.default id={hintTextId}>{hintText}</HintText_1.default>}
+            {errorMessage && <ErrorMessage_1.default id={errorMessageId}>{errorMessage}</ErrorMessage_1.default>}
+            <input accept={accept} aria-describedby={describedbys.length ? describedbys.join(' ') : undefined} aria-invalid={hasError} capture={capture} className={[
+            'ds_file-upload__input',
+            hasError ? 'ds_file-upload__input--error' : ''
+        ].join(' ')} id={id} multiple={isMultiple} name={name || id} onBlur={handleBlur} onChange={handleChange} type="file"/>
+        </div>);
+};
+FileUpload.displayName = 'FileUpload';
+exports.default = FileUpload;

package/dist/components/FileUpload/index.d.ts

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

package/dist/components/FileUpload/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var FileUpload_1 = require("./FileUpload");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FileUpload_1).default; } });

package/dist/components/FileUpload/types.d.ts

@@ -0,0 +1,24 @@
+import { FormFieldBase } from '../../shared-types';
+type TextArgs = {
+    buttonText: string;
+    buttonTextPlural: string;
+    defaultStatusText: string;
+    defaultStatusTextPlural: string;
+    enteredDropzone: string;
+    filesAddedText: string;
+    filesListHeading: string;
+    instructionText: string;
+    instructionTextPlural: string;
+    leftDropzone: string;
+};
+export interface FileUploadProps extends FormFieldBase<HTMLElement> {
+    accept?: string;
+    capture?: boolean | 'user' | 'environment';
+    className?: string;
+    files?: File[];
+    id: string;
+    isMultiple?: boolean;
+    name?: string;
+    text?: Partial<TextArgs>;
+}
+export {};

package/dist/components/FileUpload/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/InfoNotification/InfoNotification.d.ts

@@ -0,0 +1,6 @@
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
+declare const InfoNotification: {
+    ({ ariaLive, children, className, headingLevel, isDismissable, title, ...props }: AbstractNotificationMessageProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default InfoNotification;

package/dist/components/InfoNotification/InfoNotification.jsx

@@ -0,0 +1,26 @@
+"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 AbstractNotificationMessage_1 = __importDefault(require("../../common/AbstractNotificationMessage"));
+const notification_message_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-message/notification-message"));
+const clsx_1 = __importDefault(require("clsx"));
+const InfoNotification = ({ ariaLive, children, className, headingLevel = 'h3', isDismissable, title, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new notification_message_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<AbstractNotificationMessage_1.default ariaLive={ariaLive} className={(0, clsx_1.default)([
+            'ds_notification-message--info',
+            className
+        ])} headingLevel={headingLevel} icon="Info" isDismissable={isDismissable} ref={ref} title={title} {...props}>
+            {children}
+        </AbstractNotificationMessage_1.default>);
+};
+InfoNotification.displayName = 'InfoNotification';
+exports.default = InfoNotification;

package/dist/components/InfoNotification/index.d.ts

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

package/dist/components/InfoNotification/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var InfoNotification_1 = require("./InfoNotification");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(InfoNotification_1).default; } });

package/dist/components/NotificationBanner/NotificationBanner.jsx

@@ -18,7 +18,7 @@ const NotificationBanner = ({ children, className, hasColourIcon, hasIcon, hasIn
     return (<AbstractNotificationBanner_1.default className={(0, clsx_1.default)([
             'ds_reversed',
             className
-        ])} isDismissable={isDismissable} icon={hasIcon ? "PriorityHigh" : undefined} hasColourIcon={hasColourIcon} hasInverseIcon={hasInverseIcon} ref={ref} title={title} {...props}>
+        ])} isDismissable={isDismissable} icon={hasIcon ? "Warning" : undefined} hasColourIcon={hasColourIcon} hasInverseIcon={hasInverseIcon} ref={ref} title={title} {...props}>
             {children}
         </AbstractNotificationBanner_1.default>);
 };

package/dist/components/SummaryList/SummaryList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SummaryListItemProps, SummaryListProps } from './types';
-import { ActionLinkProps } from '@/src/common/ActionLink/types';
+import { ActionLinkProps } from '../../common/ActionLink/types';
 declare const SummaryList: {
     ({ children, className, isBorderless, ...props }: SummaryListProps): React.JSX.Element;
     Action: {

package/dist/components/WarningNotification/WarningNotification.d.ts

@@ -0,0 +1,6 @@
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
+declare const WarningNotification: {
+    ({ ariaLive, children, className, headingLevel, isDismissable, title, ...props }: AbstractNotificationMessageProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default WarningNotification;

package/dist/components/WarningNotification/WarningNotification.jsx

@@ -0,0 +1,26 @@
+"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 AbstractNotificationMessage_1 = __importDefault(require("../../common/AbstractNotificationMessage"));
+const notification_message_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-message/notification-message"));
+const clsx_1 = __importDefault(require("clsx"));
+const WarningNotification = ({ ariaLive, children, className, headingLevel = 'h3', isDismissable, title, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new notification_message_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<AbstractNotificationMessage_1.default ariaLive={ariaLive} className={(0, clsx_1.default)([
+            'ds_notification-message--warning',
+            className
+        ])} headingLevel={headingLevel} icon="Warning" isDismissable={isDismissable} ref={ref} title={title} {...props}>
+            {children}
+        </AbstractNotificationMessage_1.default>);
+};
+WarningNotification.displayName = 'WarningNotification';
+exports.default = WarningNotification;

package/dist/components/WarningNotification/index.d.ts

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

package/dist/components/WarningNotification/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var WarningNotification_1 = require("./WarningNotification");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(WarningNotification_1).default; } });

package/dist/components/WarningText/WarningText.jsx

@@ -4,12 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const clsx_1 = __importDefault(require("clsx"));
+const common_1 = require("../../common");
 const WarningText = ({ children, className, ...props }) => {
     return (<div className={(0, clsx_1.default)([
             'ds_warning-text',
             className
         ])} {...props}>
-            <strong className="ds_warning-text__icon" aria-hidden="true"></strong>
+            <strong className="ds_warning-text__icon" aria-hidden="true">
+                <common_1.Icon isFilled icon='Warning'/>
+            </strong>
             <strong className="visually-hidden">Warning</strong>
             <div className="ds_warning-text__text">
                 {children}