@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
+import { DatePickerProps } from './types';
 declare const DatePicker: {
-    ({ className, dateSelectCallback, disabledDates, errorMessage, hasError, hintText, id, iconPath, label, maxDate, minDate, multiple, name, onBlur, onChange, value, width, ...props }: SGDS.Component.DatePicker): import("react").JSX.Element;
+    ({ className, dateSelectCallback, disabledDates, errorMessage, hasError, hintText, id, label, maxDate, minDate, multiple, name, onBlur, onChange, value, width, ...props }: DatePickerProps): import("react").JSX.Element;
     displayName: string;
 };
 export default DatePicker;

package/dist/components/DatePicker/DatePicker.jsx

@@ -4,20 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// @ts-ignore
 const date_picker_1 = __importDefault(require("@scottish-government/design-system/src/components/date-picker/date-picker"));
 const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
 const TextInput_1 = __importDefault(require("../TextInput"));
-const DatePicker = ({ className, dateSelectCallback, disabledDates, errorMessage, hasError, hintText, id, iconPath = './', label, maxDate, minDate, multiple, name, onBlur, onChange, value, width = 'fixed-10', ...props }) => {
+const clsx_1 = __importDefault(require("clsx"));
+const DatePicker = ({ className, dateSelectCallback, disabledDates, errorMessage, hasError, hintText, id, label, maxDate, minDate, multiple, name, onBlur, onChange, value, width = 'fixed-10', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new date_picker_1.default(ref.current, {
-                dateSelectCallback,
-                imagePath: iconPath
+                dateSelectCallback
             }).init();
         }
-    }, [ref, dateSelectCallback, iconPath]);
+    }, [ref, dateSelectCallback]);
     function handleBlur(event) {
         if (typeof onBlur === 'function') {
             onBlur(event);
@@ -28,11 +28,11 @@ const DatePicker = ({ className, dateSelectCallback, disabledDates, errorMessage
             onChange(event);
         }
     }
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             "ds_datepicker",
             multiple && "ds_datepicker--multiple",
             className
-        ].join(' ')} data-disableddates={disabledDates} data-maxdate={maxDate} data-mindate={minDate} data-module="ds-datepicker" ref={ref} {...props}>
+        ])} data-disableddates={disabledDates} data-maxdate={maxDate} data-mindate={minDate} data-module="ds-datepicker" ref={ref} {...props}>
             {(multiple ? (<fieldset className="ds_datepicker__input-wrapper">
                     <legend>{label}</legend>
                     {errorMessage && <ErrorMessage_1.default>{errorMessage}</ErrorMessage_1.default>}

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

@@ -0,0 +1,18 @@
+import { InputWidth } from "../../shared-types";
+export interface DatePickerProps extends React.AllHTMLAttributes<HTMLElement> {
+    dateSelectCallback?: (date: Date) => void;
+    disabledDates?: string;
+    hasError?: boolean;
+    errorMessage?: string | React.ReactNode;
+    id: string;
+    hintText?: string | React.ReactNode;
+    label: string;
+    maxDate?: string;
+    minDate?: string;
+    isMultiple?: boolean;
+    name?: string;
+    onBlur?: React.EventHandler<React.FocusEvent>;
+    onChange?: React.EventHandler<React.FormEvent>;
+    value?: string;
+    width?: InputWidth;
+}

package/dist/components/DatePicker/types.js

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

package/dist/components/Details/Details.d.ts

@@ -1,5 +1,6 @@
+import { DetailsProps } from "./types";
 declare const Details: {
-    ({ children, className, summary, ...props }: SGDS.Component.Details): import("react").JSX.Element;
+    ({ children, className, summary, ...props }: DetailsProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Details;

package/dist/components/Details/Details.jsx

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
 const Details = ({ children, className, summary, ...props }) => {
-    return (<details className={[
+    return (<details className={(0, clsx_1.default)([
             "ds_details",
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <summary className="ds_details__summary">
                 {summary}
             </summary>

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

@@ -0,0 +1,4 @@
+export interface DetailsProps extends React.AllHTMLAttributes<HTMLDetailsElement> {
+    title?: string;
+    summary: string;
+}

package/dist/components/Details/types.js

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

package/dist/components/ErrorMessage/ErrorMessage.d.ts

@@ -1,5 +1,6 @@
+import { ErrorMessageProps } from "./types";
 declare const ErrorMessage: {
-    ({ children, className, id, ...props }: SGDS.Component.ErrorMessage): import("react").JSX.Element;
+    ({ children, className, id, ...props }: ErrorMessageProps): import("react").JSX.Element;
     displayName: string;
 };
 export default ErrorMessage;

package/dist/components/ErrorMessage/ErrorMessage.jsx

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
 const ErrorMessage = ({ children, className, id, ...props }) => {
-    return (<p className={[
+    return (<p className={(0, clsx_1.default)([
             'ds_question__error-message',
             className
-        ].join(' ')} id={id} {...props}>
+        ])} id={id} {...props}>
             {children}
         </p>);
 };

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

@@ -0,0 +1,3 @@
+export interface ErrorMessageProps extends React.AllHTMLAttributes<HTMLElement> {
+    id?: string;
+}

package/dist/components/ErrorMessage/types.js

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

package/dist/components/ErrorSummary/ErrorSummary.d.ts

@@ -1,8 +1,9 @@
+import { ErrorSummaryItemProps, ErrorSummaryProps } from './types';
 declare const ErrorSummary: {
-    ({ children, className, title, ...props }: SGDS.Component.ErrorSummary): import("react").JSX.Element;
+    ({ children, className, title, ...props }: ErrorSummaryProps): import("react").JSX.Element;
     displayName: string;
     Item: {
-        ({ children, fragmentId, linkComponent }: SGDS.Component.ErrorSummary.Item): import("react").JSX.Element;
+        ({ children, fragmentId, linkComponent }: ErrorSummaryItemProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/ErrorSummary/ErrorSummary.jsx

@@ -1,6 +1,10 @@
 "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 clsx_1 = __importDefault(require("clsx"));
 const ErrorSummaryItem = ({ children, fragmentId, linkComponent }) => {
     const HREF = '#' + fragmentId;
     function processChildren(children) {
@@ -20,10 +24,10 @@ const ErrorSummaryItem = ({ children, fragmentId, linkComponent }) => {
 };
 const ErrorSummary = ({ children, className, title = 'There is a problem', ...props }) => {
     const summaryTitleId = (0, react_1.useId)();
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_error-summary',
             className
-        ].join(' ')} aria-labelledby={summaryTitleId} role="alert" {...props}>
+        ])} aria-labelledby={summaryTitleId} role="alert" {...props}>
             <h2 className="ds_error-summary__title" id={summaryTitleId}>{title}</h2>
 
             <ul className="ds_error-summary__list">

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

@@ -0,0 +1,8 @@
+import { LinkComponent } from '../../shared-types';
+export interface ErrorSummaryItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    fragmentId: string;
+    linkComponent?: LinkComponent;
+}
+export interface ErrorSummaryProps extends React.AllHTMLAttributes<HTMLElement> {
+    title: string;
+}

package/dist/components/ErrorSummary/types.js

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

package/dist/components/FeatureHeader/FeatureHeader.d.ts

@@ -1,12 +1,14 @@
+import React from 'react';
+import { FeatureHeaderProps, FeatureHeaderPrimaryProps } from './types';
 declare const FeatureHeader: {
-    ({ backgroundColour, children, className, isFullWidth, isTopAligned, isWideText, ...props }: any): import("react").JSX.Element;
+    ({ backgroundColor, children, className, hasCoverImage, hasNoImagePadding, id, isFullWidth, isWideText, isTopAlignImage, tagName, ...props }: FeatureHeaderProps): React.JSX.Element;
     displayName: string;
-    Content: {
-        ({ children, className, ...props }: any): import("react").JSX.Element;
+    Primary: {
+        ({ children, title, ...props }: FeatureHeaderPrimaryProps): React.JSX.Element;
         displayName: string;
     };
-    Media: {
-        ({ children, className, isCover, noPadding, ...props }: any): import("react").JSX.Element;
+    Secondary: {
+        ({ children, ...props }: React.AllHTMLAttributes<HTMLDivElement>): React.JSX.Element;
         displayName: string;
     };
 };

package/dist/components/FeatureHeader/FeatureHeader.jsx

@@ -1,70 +1,107 @@
 "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 ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
-const Content = ({ children, className, ...props } /* SGDS.Component.FeatureHeader.Primary*/) => {
-    return (<div className={['ds_feature-header__primary', className].join(' ')} {...props}>
+const react_1 = __importStar(require("react"));
+const common_1 = require("../../common");
+const clsx_1 = __importDefault(require("clsx"));
+const FeatureHeaderSettingsContext = (0, react_1.createContext)({
+    hasCoverImage: undefined,
+    hasNoImagePadding: undefined
+});
+const Primary = ({ children, title, ...props }) => {
+    return (<div className="ds_feature-header__primary" {...props}>
+            <h1 className="ds_feature-header__title">
+                {title}
+            </h1>
             {children}
         </div>);
 };
-const Media = ({ children, className, isCover, noPadding, ...props } /* SGDS.Component.FeatureHeader.Secondary*/) => {
-    return (<div className={[
+const Secondary = ({ children, ...props }) => {
+    const hasCoverImage = (0, react_1.useContext)(FeatureHeaderSettingsContext).hasCoverImage;
+    const hasNoImagePadding = (0, react_1.useContext)(FeatureHeaderSettingsContext).hasNoImagePadding;
+    children = react_1.Children.map(children, child => {
+        const thisChild = child;
+        if (thisChild && ['img', 'svg', 'picture'].includes(thisChild.type)) {
+            return react_1.default.cloneElement(thisChild, { className: 'ds_feature-header__image' });
+        }
+        else {
+            return child;
+        }
+    });
+    return (<div className={(0, clsx_1.default)([
             'ds_feature-header__secondary',
-            isCover && 'ds_feature-header__secondary--cover',
-            noPadding && 'ds_feature-header__secondary--no-padding',
-            className
-        ].join(' ')} {...props}>
+            hasCoverImage && 'ds_feature-header__secondary--cover',
+            hasNoImagePadding && 'ds_feature-header__secondary--no-padding'
+        ])} {...props}>
             {children}
         </div>);
 };
-const FeatureHeader = ({ backgroundColour = 'NONE', children, className, isFullWidth, isTopAligned, isWideText, ...props } /* SGDS.Component.FeatureHeader*/) => {
-    let backgroundColorClass = '';
-    switch (backgroundColour) {
-        case 'BRAND':
-            backgroundColorClass = 'ds_feature-header--background';
-            break;
-        case 'SECONDARY':
-            backgroundColorClass = 'ds_feature-header--background-secondary';
-            break;
-        case 'TERTIARY':
-            backgroundColorClass = 'ds_feature-header--background-tertiary';
-            break;
-        case 'NONE':
-            break;
-        default:
-            backgroundColorClass = '';
-            break;
+const FeatureHeader = ({ backgroundColor, children, className, hasCoverImage, hasNoImagePadding, id, isFullWidth, isWideText, isTopAlignImage, tagName = 'div', ...props }) => {
+    let backgroundColorClassName;
+    if (backgroundColor === 'secondary') {
+        backgroundColorClassName = 'ds_feature-header--background-secondary';
+    }
+    else if (backgroundColor === 'tertiary') {
+        backgroundColorClassName = 'ds_feature-header--background-tertiary';
+    }
+    else if (backgroundColor === 'brand') {
+        backgroundColorClassName = 'ds_feature-header--background';
     }
-    return (<header className={[
+    return (<common_1.WrapperTag className={(0, clsx_1.default)([
             'ds_feature-header',
             isFullWidth && 'ds_feature-header--fullwidth',
-            isTopAligned && 'ds_feature-header--top',
             isWideText && 'ds_feature-header--wide',
-            backgroundColorClass,
+            isTopAlignImage && 'ds_feature-header--top',
+            backgroundColorClassName && backgroundColorClassName,
             className
-        ].join(' ')} {...props}>
-            <ConditionalWrapper_1.default condition={isFullWidth} wrapper={(children) => <div className="ds_wrapper">{children}</div>}>
-                {children}
-            </ConditionalWrapper_1.default>
-        </header>);
+        ])} id={id} tagName={tagName} {...props}>
+            <common_1.ConditionalWrapper condition={!!isFullWidth} wrapper={(children) => <div className="ds_wrapper">{children}</div>}>
+                <FeatureHeaderSettingsContext value={{
+            hasCoverImage, hasNoImagePadding
+        }}>
+                    {children}
+                </FeatureHeaderSettingsContext>
+            </common_1.ConditionalWrapper>
+        </common_1.WrapperTag>);
 };
 FeatureHeader.displayName = 'FeatureHeader';
-Content.displayName = 'FeatureHeader.Content';
-Media.displayName = 'FeatureHeader.Media';
-FeatureHeader.Content = Content;
-FeatureHeader.Media = Media;
+Primary.displayName = 'FeatureHeader.Primary';
+Secondary.displayName = 'FeatureHeader.Secondary';
+FeatureHeader.Primary = Primary;
+FeatureHeader.Secondary = Secondary;
 exports.default = FeatureHeader;
-/*
-
-<FeatureHeader backgroundColour="NONE/BRAND/SECONDARY/TERTIARY" isFullWidth isWideText isTopAligned>
-    <FeatureHeader.Content>
-        {children}
-    </FeatureHeader.Content>
-    <FeatureHeader.Media noPadding isCover>
-        {children}
-    </FeatureHeader.Media>
-</FeatureHeader>
-
-*/

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

@@ -0,0 +1,12 @@
+export interface FeatureHeaderPrimaryProps extends React.AllHTMLAttributes<HTMLElement> {
+    title: string;
+}
+export interface FeatureHeaderProps extends React.AllHTMLAttributes<HTMLElement> {
+    backgroundColor?: 'secondary' | 'tertiary' | 'brand';
+    hasCoverImage?: boolean;
+    hasNoImagePadding?: boolean;
+    isFullWidth?: boolean;
+    isWideText?: boolean;
+    isTopAlignImage?: boolean;
+    tagName?: 'div' | 'header';
+}

package/dist/components/FeatureHeader/types.js

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

package/dist/components/FileDownload/FileDownload.d.ts

@@ -1,5 +1,6 @@
+import { FileDownloadProps } from './types';
 declare const FileDownload: {
-    ({ className, cover, icon, isHighlighted, fileSize, fileType, fileUrl, title, ...props }: SGDS.Component.FileDownload): import("react").JSX.Element;
+    ({ className, cover, icon, isHighlighted, fileSize, fileType, fileUrl, title, ...props }: FileDownloadProps): import("react").JSX.Element;
     displayName: string;
 };
 export default FileDownload;

package/dist/components/FileDownload/FileDownload.jsx

@@ -5,18 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const FileIcon_1 = __importDefault(require("../../common/FileIcon"));
+const clsx_1 = __importDefault(require("clsx"));
 const FileDownload = ({ className, cover, icon = 'Generic', isHighlighted, fileSize, fileType, fileUrl, title, ...props }) => {
     const hasMetadata = !!fileType || !!fileSize;
     const metaContainerId = `file-download-${(0, react_1.useId)()}`;
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_file-download',
             isHighlighted && 'ds_file-download--highlighted',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <div className="ds_file-download__thumbnail">
                 <a className="ds_file-download__thumbnail-link" aria-hidden="true" tabIndex={-1} href={fileUrl}>
                     {cover ?
-            <img alt="" className="ds_file-download__thumbnail-image" src={cover}/>
+            <img alt="" className="ds_file-download__thumbnail-image  ds_file-download__thumbnail-image--outlined" src={cover}/>
             :
                 <FileIcon_1.default ariaLabel="" className="ds_file-download__thumbnail-image" icon={icon}/>}
                 </a>

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

@@ -0,0 +1,10 @@
+import { DocumentIconName } from '../../shared-types';
+export interface FileDownloadProps extends React.AllHTMLAttributes<HTMLElement> {
+    cover?: string;
+    fileSize?: string;
+    fileType?: string;
+    fileUrl: string;
+    icon?: DocumentIconName;
+    isHighlighted?: boolean;
+    title: string;
+}

package/dist/components/FileDownload/types.js

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

package/dist/components/HideThisPage/HideThisPage.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { HideThisPageProps } from './types';
 declare const HideThisPage: {
-    ({ className, escapeUrl, ...props }: SGDS.Component.HideThisPage): React.JSX.Element;
+    ({ className, escapeUrl, ...props }: HideThisPageProps): React.JSX.Element;
     displayName: string;
 };
 export default HideThisPage;

package/dist/components/HideThisPage/HideThisPage.jsx

@@ -37,13 +37,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-// @ts-ignore
 const hide_this_page_1 = __importDefault(require("@scottish-government/design-system/src/components/hide-this-page/hide-this-page"));
+const clsx_1 = __importDefault(require("clsx"));
 const HideThisPage = ({ className, escapeUrl = 'https://www.bbc.co.uk/weather', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (ref.current) {
-            new hide_this_page_1.default().init();
+            new hide_this_page_1.default(ref.current).init();
             const HIDE_THIS_PAGE_DIV_ID = 'hide-this-page-instruction';
             if (!document.getElementById(HIDE_THIS_PAGE_DIV_ID)) {
                 const htpDiv = document.createElement('div');
@@ -56,10 +57,10 @@ const HideThisPage = ({ className, escapeUrl = 'https://www.bbc.co.uk/weather',
             document.body.classList.add('ds_has-hide-page');
         }
     }, [ref]);
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_hide-page',
             className
-        ].join(' ')} ref={ref} {...props}>
+        ])} ref={ref} {...props}>
             <a href={escapeUrl} className="ds_hide-page__button  ds_button  js-hide-page">
                 <strong>Hide this page</strong>
                 <span className="visually-hidden  js-enabled-text">Or press escape key to hide this page</span>

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

@@ -0,0 +1,3 @@
+export interface HideThisPageProps extends React.AllHTMLAttributes<HTMLElement> {
+    escapeUrl?: string;
+}

package/dist/components/HideThisPage/types.js

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

package/dist/components/InsetText/InsetText.d.ts

@@ -1,5 +1,5 @@
 declare const InsetText: {
-    ({ children, className, ...props }: SGDS.Component.InsetText): import("react").JSX.Element;
+    ({ children, className, ...props }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
 };
 export default InsetText;

package/dist/components/InsetText/InsetText.jsx

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
 const InsetText = ({ children, className, ...props }) => {
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_inset-text',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <div className="ds_inset-text__text">
                 {children}
             </div>

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -1,8 +1,9 @@
+import { AbstractNotificationBannerProps } from '../../common/AbstractNotificationBanner/types';
 declare const NotificationBanner: {
-    ({ children, className, hasColourIcon, hasIcon, hasInverseIcon, isDismissable, title, ...props }: SGDS.Common.AbstractNotificationBanner): import("react").JSX.Element;
+    ({ children, className, hasColourIcon, hasIcon, hasInverseIcon, isDismissable, title, ...props }: AbstractNotificationBannerProps): import("react").JSX.Element;
     displayName: string;
     Buttons: {
-        ({ children }: SGDS.Common.AbstractNotificationBanner.Buttons): import("react").JSX.Element;
+        ({ children }: import("../../common/AbstractNotificationBanner/types").AbstractNotificationBannerButtonsProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/NotificationBanner/NotificationBanner.jsx

@@ -5,19 +5,20 @@ 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"));
-// @ts-ignore
 const notification_banner_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-banner/notification-banner"));
-const NotificationBanner = ({ children, className, hasColourIcon, hasIcon, hasInverseIcon, isDismissable, title, ...props }) => {
+const clsx_1 = __importDefault(require("clsx"));
+const NotificationBanner = ({ children, className, hasColourIcon, hasIcon, hasInverseIcon, isDismissable, title = 'Information', ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new notification_banner_1.default(ref.current).init();
         }
     }, [ref]);
-    return (<AbstractNotificationBanner_1.default className={[
+    return (<AbstractNotificationBanner_1.default className={(0, clsx_1.default)([
             'ds_reversed',
             className
-        ].join(' ')} isDismissable={isDismissable} icon={hasIcon ? "PriorityHigh" : undefined} hasColourIcon={hasColourIcon} hasInverseIcon={hasInverseIcon} ref={ref} title="Information" {...props}>
+        ])} isDismissable={isDismissable} icon={hasIcon ? "PriorityHigh" : undefined} hasColourIcon={hasColourIcon} hasInverseIcon={hasInverseIcon} ref={ref} title={title} {...props}>
             {children}
         </AbstractNotificationBanner_1.default>);
 };

package/dist/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,5 +1,6 @@
+import { NotificationPanelProps } from './types';
 declare const NotificationPanel: {
-    ({ ariaLive, children, className, headingLevel, title, ...props }: SGDS.Component.NotificationPanel): import("react").JSX.Element;
+    ({ ariaLive, children, className, headingLevel, title, ...props }: NotificationPanelProps): import("react").JSX.Element;
     displayName: string;
 };
 export default NotificationPanel;

package/dist/components/NotificationPanel/NotificationPanel.jsx

@@ -4,11 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const clsx_1 = __importDefault(require("clsx"));
 const NotificationPanel = function ({ ariaLive, children, className, headingLevel = 'h1', title, ...props }) {
-    return (<div aria-live={ariaLive} className={[
+    return (<div aria-live={ariaLive} className={(0, clsx_1.default)([
             'ds_notification-panel',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <WrapperTag_1.default className="ds_notification-panel__title" tagName={headingLevel}>
                 {title}
             </WrapperTag_1.default>

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

@@ -0,0 +1,6 @@
+import { HeadingLevel } from '../../shared-types';
+export interface NotificationPanelProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    ariaLive?: React.AriaAttributes['aria-live'];
+    headingLevel?: HeadingLevel;
+    title: string;
+}

package/dist/components/NotificationPanel/types.js

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

package/dist/components/NotificationTag/NotificationTag.d.ts

@@ -0,0 +1,6 @@
+import { NotificationTagProps } from "./types";
+declare const NotificationTag: {
+    ({ children, className, description, isHidden, label, ...props }: NotificationTagProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default NotificationTag;

package/dist/components/NotificationTag/NotificationTag.jsx

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
+const NotificationTag = ({ children, className, description, isHidden, label, ...props }) => {
+    return (<span className="ds_notification-tag__wrapper">
+            {children}
+            <span aria-hidden={isHidden ? "true" : undefined} className={(0, clsx_1.default)([
+            'ds_notification-tag',
+            !label && 'ds_notification-tag--dot',
+            className
+        ])} {...props}>
+                {label} {description && <span className="visually-hidden">{description}</span>}
+            </span>
+        </span>);
+};
+NotificationTag.displayName = 'NotificationTag';
+exports.default = NotificationTag;