@scottish-government/designsystem-react 1.0.1 → 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/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/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/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}

package/dist/images/icons/index.d.ts

@@ -11,7 +11,9 @@ export { default as DoubleChevronRight } from "./double_chevron_right";
 export { default as Error } from "./error";
 export { default as ExpandLess } from "./expand_less";
 export { default as ExpandMore } from "./expand_more";
+export { default as Info } from "./info";
 export { default as List } from "./list";
 export { default as Menu } from "./menu";
 export { default as PriorityHigh } from "./priority_high";
 export { default as Search } from "./search";
+export { default as Warning } from "./warning";

package/dist/images/icons/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Search = exports.PriorityHigh = exports.Menu = exports.List = exports.ExpandMore = exports.ExpandLess = exports.Error = exports.DoubleChevronRight = exports.DoubleChevronLeft = exports.Description = exports.Close = exports.ChevronRight = exports.ChevronLeft = exports.CheckCircle = exports.Cancel = exports.CalendarToday = exports.ArrowUpward = void 0;
+exports.Warning = exports.Search = exports.PriorityHigh = exports.Menu = exports.List = exports.Info = exports.ExpandMore = exports.ExpandLess = exports.Error = exports.DoubleChevronRight = exports.DoubleChevronLeft = exports.Description = exports.Close = exports.ChevronRight = exports.ChevronLeft = exports.CheckCircle = exports.Cancel = exports.CalendarToday = exports.ArrowUpward = void 0;
 var arrow_upward_1 = require("./arrow_upward");
 Object.defineProperty(exports, "ArrowUpward", { enumerable: true, get: function () { return __importDefault(arrow_upward_1).default; } });
 var calendar_today_1 = require("./calendar_today");
@@ -30,6 +30,8 @@ var expand_less_1 = require("./expand_less");
 Object.defineProperty(exports, "ExpandLess", { enumerable: true, get: function () { return __importDefault(expand_less_1).default; } });
 var expand_more_1 = require("./expand_more");
 Object.defineProperty(exports, "ExpandMore", { enumerable: true, get: function () { return __importDefault(expand_more_1).default; } });
+var info_1 = require("./info");
+Object.defineProperty(exports, "Info", { enumerable: true, get: function () { return __importDefault(info_1).default; } });
 var list_1 = require("./list");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return __importDefault(list_1).default; } });
 var menu_1 = require("./menu");
@@ -38,3 +40,5 @@ var priority_high_1 = require("./priority_high");
 Object.defineProperty(exports, "PriorityHigh", { enumerable: true, get: function () { return __importDefault(priority_high_1).default; } });
 var search_1 = require("./search");
 Object.defineProperty(exports, "Search", { enumerable: true, get: function () { return __importDefault(search_1).default; } });
+var warning_1 = require("./warning");
+Object.defineProperty(exports, "Warning", { enumerable: true, get: function () { return __importDefault(warning_1).default; } });

package/dist/images/icons/info.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+declare const SvgInfo: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgInfo;