@scottish-government/designsystem-react 0.0.2 → 0.1.0

package/dist/common/conditional-wrapper.jsx

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Wraps all children in a specified HTML tag if a condition is met.
+ */
+const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
+ConditionalWrapper.displayName = 'ConditionalWrapper';
+exports.default = ConditionalWrapper;

package/dist/common/hint-text.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const HintText = ({ children, id, text, ...props }) => {
+    return (<p className="ds_hint-text" dangerouslySetInnerHTML={text ? { __html: text } : undefined} id={id} {...props}>
+            {!text ? children : null}
+        </p>);
+};
+HintText.displayName = 'HintText';
+exports.default = HintText;

package/dist/common/icon.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Icon = ({ className, fill, icon, iconPath = './icons.stack.svg', iconSize, title }) => {
+    return (<svg aria-hidden={title ? undefined : true} aria-label={title} className={[
+            'ds_icon',
+            className,
+            fill && 'ds_icon--fill',
+            iconSize && `ds_icon--${iconSize}`
+        ].join(' ')} role="img">
+            <use xlinkHref={`${iconPath}#${icon}`}/>
+        </svg>);
+};
+Icon.displayName = 'Icon';
+exports.default = Icon;

package/dist/common/screen-reader-text.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ScreenReaderText = ({ children, ...props }) => {
+    return (<span className="visually-hidden" {...props}>
+            {children}
+        </span>);
+};
+ScreenReaderText.displayName = 'ScreenReaderText';
+exports.default = ScreenReaderText;

package/dist/common/wrapper-tag.jsx

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

package/dist/components/accordion/accordion.jsx

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

package/dist/components/aspect-box/aspect-box.jsx

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+// @ts-ignore
+const aspect_box_fallback_1 = __importDefault(require("@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback"));
+const AspectBox = ({ children, ratio, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new aspect_box_fallback_1.default(ref.current).init();
+        }
+    }, [ref]);
+    function processChild(child) {
+        if (['img', 'svg', 'picture'].includes(child.type)) {
+            return react_1.default.cloneElement(child, { className: 'ds_aspect-box__inner' });
+        }
+    }
+    let ratioClassName;
+    switch (ratio) {
+        case '1:1':
+        case 'square':
+            ratioClassName = 'ds_aspect-box--square';
+            break;
+        case '4:3':
+            ratioClassName = 'ds_aspect-box--43';
+            break;
+        case '21:9':
+            ratioClassName = 'ds_aspect-box--219';
+            break;
+        default:
+            ratioClassName = '';
+            break;
+    }
+    return (<div className={[
+            'ds_aspect-box',
+            `${ratioClassName}`
+        ].join(' ')} ref={ref} {...props}>
+            {react_1.Children.map(children, child => processChild(child))}
+        </div>);
+};
+AspectBox.displayName = 'AspectBox';
+exports.default = AspectBox;

package/dist/components/back-to-top/back-to-top.jsx

@@ -0,0 +1,24 @@
+"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");
+// @ts-ignore
+const back_to_top_1 = __importDefault(require("@scottish-government/design-system/src/components/back-to-top/back-to-top"));
+const icon_1 = __importDefault(require("../../common/icon"));
+const BackToTop = ({ href = '#page-top', ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new back_to_top_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<div className='ds_back-to-top' ref={ref} {...props}>
+            <a href={href} className="ds_back-to-top__button">Back to top
+                <icon_1.default className="ds_back-to-top__icon" icon="arrow_upward"/>
+            </a>
+       </div>);
+};
+BackToTop.displayName = 'BackToTop';
+exports.default = BackToTop;

package/dist/components/breadcrumbs/breadcrumbs.jsx

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Breadcrumb = ({ hidden, href, title }) => {
+    return (<li className={[
+            'ds_breadcrumbs__item',
+            hidden && 'visually-hidden'
+        ].join(' ')}>
+
+            {href ? (<a className="ds_breadcrumbs__link" href={href}>
+                {title}
+            </a>) : (title)}
+        </li>);
+};
+/**
+ * @param {boolean} hideLastItem
+ * @param {Array} items
+ * @param {Object} props - Properties for the element
+ * @returns {JSX.Element} - The element
+ */
+const Breadcrumbs = ({ hideLastItem, items, ...props }) => {
+    return (<nav aria-label="Breadcrumb" {...props}>
+            <ol className="ds_breadcrumbs">
+                {items && items.map((item, index) => (<Breadcrumb title={item.title} href={item.href} hidden={(hideLastItem) && index + 1 === items.length} key={'breadcrumb' + index}/>))}
+            </ol>
+        </nav>);
+};
+Breadcrumbs.displayName = 'Breadcrumbs';
+exports.default = Breadcrumbs;

package/dist/components/button/button.jsx

@@ -0,0 +1,29 @@
+"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("../../common/icon"));
+const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
+const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
+const Button = ({ children, buttonStyle, icon, iconLeft, iconOnly = false, href, small, styleAsLink, type = 'button', width, ...props }) => {
+    // determine which HTML tag to use
+    let tagName = 'button';
+    if (href) {
+        tagName = 'a';
+    }
+    return (<wrapper_tag_1.default tagName={tagName} className={[
+            !styleAsLink ? 'ds_button' : 'ds_link',
+            width && `ds_button--${width}`,
+            buttonStyle && `ds_button--${buttonStyle}`,
+            small && 'ds_button--small',
+            (icon && !iconOnly) ? 'ds_button--has-icon' : undefined,
+            iconLeft && 'ds_button--has-icon--left'
+        ].join(' ')} href={href} {...(tagName === 'button' ? { type: type } : {})} {...props}>
+            {iconOnly ? <screen_reader_text_1.default>{children}</screen_reader_text_1.default> : children}
+
+            {icon && <icon_1.default icon={icon}/>}
+        </wrapper_tag_1.default>);
+};
+Button.displayName = 'Button';
+exports.default = Button;

package/dist/components/checkbox/checkbox.jsx

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = exports.Checkbox = void 0;
+const react_1 = require("react");
+// @ts-ignore
+const checkboxes_1 = __importDefault(require("@scottish-government/design-system/src/forms/checkbox/checkboxes"));
+const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onChange, small }) => {
+    const hintTextId = `hint-text-${id}`;
+    const behaviour = exclusive && 'exclusive';
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<>
+            {exclusive && <p className="ds_checkbox-separator">or</p>}
+            <div className={[
+            'ds_checkbox',
+            small && 'ds_checkbox--small'
+        ].join(' ')}>
+
+                <input aria-describedby={hintText ? hintTextId : undefined} className="ds_checkbox__input" data-behaviour={behaviour} defaultChecked={!!checked} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange} type="checkbox"/>
+                <label className="ds_checkbox__label" htmlFor={id}>{label}</label>
+                {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
+            </div>
+        </>);
+};
+exports.Checkbox = Checkbox;
+/**
+ * @param {Object} props - Properties for the element
+ * @param {Array} items - Checkboxes
+ * @param {boolean} small - Use the small display style for all checkboxes
+ * @returns {JSX.Element} - The element
+ */
+const CheckboxGroup = ({ items, small, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new checkboxes_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<div className="ds_checkboxes ds_field-group" data-module="ds-checkboxes" ref={ref} {...props}>
+            {items && items.map((item, index) => (<exports.Checkbox exclusive={item.exclusive} checked={item.checked} hintText={item.hintText} id={item.id} key={'checkbox' + index} label={item.label} onBlur={item.onBlur} onChange={item.onChange} small={small || item.small}/>))}
+        </div>);
+};
+exports.CheckboxGroup = CheckboxGroup;
+exports.Checkbox.displayName = 'Checkbox';
+exports.CheckboxGroup.displayName = 'CheckboxGroup';
+exports.default = exports.CheckboxGroup;

package/dist/components/confirmation-message/confirmation-message.jsx

@@ -0,0 +1,21 @@
+"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("../../common/icon"));
+const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
+const ConfirmationMessage = ({ ariaLive = 'polite', children, headerLevel = 'h3', title }) => {
+    return (<div aria-live={ariaLive} className="ds_confirmation-message">
+            <icon_1.default className="ds_confirmation-message__icon" icon="check_circle" iconSize="24"/>
+
+            <wrapper_tag_1.default className="ds_confirmation-message__title" tagName={headerLevel}>
+                {title}
+            </wrapper_tag_1.default>
+            {children && <div className="ds_confirmation-message__body">
+                {children}
+            </div>}
+        </div>);
+};
+ConfirmationMessage.displayName = 'ConfirmationMessage';
+exports.default = ConfirmationMessage;

package/dist/components/contents-nav/contents-nav.jsx

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
+const Link = ({ title, current, href }) => {
+    // determine which HTML tag to use
+    const tagName = href && !current ? 'a' : 'span';
+    return (<li aria-current={current && 'page' || undefined} className="ds_contents-nav__item">
+            <wrapper_tag_1.default tagName={tagName} className={[
+            'ds_contents-nav__link',
+            current && 'ds_current'
+        ].join(' ')} href={!current ? href : undefined}>
+                {title}
+            </wrapper_tag_1.default>
+        </li>);
+};
+exports.Link = Link;
+const ContentsNav = function ({ items, label = 'Pages in this section', title = 'Contents', ...props }) {
+    return (<nav aria-label={label} className="ds_contents-nav" {...props}>
+            <h2 className="ds_contents-nav__title">{title}</h2>
+            <ul className="ds_contents-nav__list">
+                {items && items.map((item, index) => (<exports.Link current={item.current} href={item.href} title={item.title} key={'link' + index}/>))}
+            </ul>
+        </nav>);
+};
+ContentsNav.displayName = 'ContentsNav';
+exports.default = ContentsNav;

package/dist/components/date-picker/date-picker.jsx

@@ -0,0 +1,49 @@
+"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");
+// @ts-ignore
+const date_picker_1 = __importDefault(require("@scottish-government/design-system/src/components/date-picker/date-picker"));
+const text_input_1 = __importDefault(require("../text-input/text-input"));
+const DatePicker = ({ width = 'fixed-10', disabledDates, error, errorMessage, hintText, id, iconPath = './', label, maxDate, minDate, multiple, name, onBlur, onChange, value, ...props }) => {
+    // todo: dateSelectCallback function
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new date_picker_1.default(ref.current, { imagePath: iconPath }).init();
+        }
+    }, [ref, iconPath]);
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<div className={[
+            "ds_datepicker",
+            multiple && "ds_datepicker--multiple"
+        ].join(' ')} 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>
+                    <div>
+                        <text_input_1.default className="js-datepicker-date" error={!!error} id={id + "-day"} hintText={hintText} label="Day" name={name + "-day"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[0]} width="fixed-2"/>
+                    </div>
+
+                    <div>
+                        <text_input_1.default className="js-datepicker-month" error={!!error} id={id + "-month"} hintText={hintText} label="Month" name={name + "-month"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[1]} width="fixed-2"/>
+                    </div>
+
+                    <div>
+                        <text_input_1.default className="js-datepicker-year" error={!!error} id={id + "-year"} hintText={hintText} label="Year" name={name + "-year"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[2]} width="fixed-4"/>
+                    </div>
+                </fieldset>) : (<text_input_1.default error={!!error} errorMessage={errorMessage} id={id} hasButton hintText={hintText} label={label} name={name} onBlur={handleBlur} onChange={handleChange} placeholder="dd/mm/yyyy" value={value} width={width}/>))}
+        </div>);
+};
+DatePicker.displayName = 'DatePicker';
+exports.default = DatePicker;

package/dist/components/details/details.jsx

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Details = ({ children, summary, ...props }) => {
+    return (<details className={[
+            "ds_details",
+        ].join(' ')} {...props}>
+            <summary className="ds_details__summary">
+                {summary}
+            </summary>
+            <div className="ds_details__text">
+                {children}
+            </div>
+        </details>);
+};
+Details.displayName = 'Details';
+exports.default = Details;

package/dist/components/error-message/error-message.jsx

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ErrorMessage = ({ children, id, text, ...props }) => {
+    return (<p className={[
+            'ds_question__error-message',
+        ].join(' ')} dangerouslySetInnerHTML={text ? { __html: text } : undefined} id={id} {...props}>
+            {!text ? children : null}
+        </p>);
+};
+ErrorMessage.displayName = 'ErrorMessage';
+exports.default = ErrorMessage;

package/dist/components/inset-text/inset-text.jsx

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const InsetText = ({ children, ...props }) => {
+    return (<div className="ds_inset-text" {...props}>
+            <div className="ds_inset-text__text">
+                {children}
+            </div>
+        </div>);
+};
+InsetText.displayName = 'InsetText';
+exports.default = InsetText;

package/dist/components/notification-banner/notification-banner.jsx

@@ -0,0 +1,50 @@
+"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");
+// @ts-ignore
+const notification_banner_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-banner/notification-banner"));
+const button_1 = __importDefault(require("../button/button"));
+const icon_1 = __importDefault(require("../../common/icon"));
+const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
+const NotificationBanner = ({ children, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new notification_banner_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<div className="ds_notification  ds_reversed" data-module="ds-notification" ref={ref} {...props}>
+            <div className="ds_wrapper">
+                <div className={[
+            'ds_notification__content',
+            close && 'ds_notification__content--has-close'
+        ].join(' ')}>
+                    <h2 className="visually-hidden">{title}</h2>
+
+                    {icon &&
+            <span className={[
+                    'ds_notification__icon',
+                    iconInverse && 'ds_notification__icon--inverse',
+                    iconColour && 'ds_notification__icon--colour'
+                ].join(' ')} aria-hidden="true">
+                            <icon_1.default icon="priority_high"/>
+                        </span>}
+
+                    <div className="ds_notification__text">
+                        {children}
+                    </div>
+
+                    {close &&
+            <button_1.default className="ds_notification__close js-close-notification">
+                            <screen_reader_text_1.default>Close this notification</screen_reader_text_1.default>
+                            <icon_1.default fill icon="close" aria-hidden="true"/>
+                        </button_1.default>}
+                </div>
+            </div>
+        </div>);
+};
+NotificationBanner.displayName = 'NotificationBanner';
+exports.default = NotificationBanner;

package/dist/components/notification-panel/notification-panel.jsx

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
+const NotificationPanel = function ({ ariaLive, children, headerLevel = 'h1', title, ...props }) {
+    return (<div aria-live={ariaLive} className="ds_notification-panel" {...props}>
+            <wrapper_tag_1.default className="ds_notification-panel__title" tagName={headerLevel}>
+                {title}
+            </wrapper_tag_1.default>
+            <div className="ds_notification-panel__content">
+                {children}
+            </div>
+        </div>);
+};
+NotificationPanel.displayName = 'NotificationPanel';
+exports.default = NotificationPanel;

package/dist/components/page-header/page-header.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PageHeader = ({ children, label, title, ...props }) => {
+    return (<header className="ds_page-header" {...props}>
+            {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}
+            <h1 className="ds_page-header__title">{title}</h1>
+
+            {children}
+        </header>);
+};
+PageHeader.displayName = 'PageHeader';
+exports.default = PageHeader;

package/dist/components/page-metadata/page-metadata.jsx

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetadataItem = void 0;
+const MetadataItem = ({ children, name, ...props }) => {
+    return (<div className="ds_metadata__item" {...props}>
+            <dt className="ds_metadata__key">{name}</dt>{' '}
+            <dd className="ds_metadata__value">
+                {children}
+            </dd>
+        </div>);
+};
+exports.MetadataItem = MetadataItem;
+const Metadata = ({ children, inline, ...props }) => {
+    return (<dl className={[
+            'ds_metadata',
+            inline && 'ds_metadata--inline',
+        ].join(' ')} {...props}>
+            {children}
+        </dl>);
+};
+Metadata.displayName = 'Metadata';
+exports.MetadataItem.displayName = 'MetadataItem';
+exports.default = Metadata;