@scottish-government/designsystem-react 0.3.0 → 0.5.0

package/@types/common/AbstractNotificationBanner.d.ts

@@ -0,0 +1,17 @@
+declare namespace SGDS.Common {
+    namespace AbstractNotificationBanner {
+        interface Buttons extends React.AllHTMLAttributes<HTMLDivElement> {
+            children: React.ReactNode
+        }
+    }
+
+    interface AbstractNotificationBanner extends React.AllHTMLAttributes<HTMLDivElement> {
+        close?: boolean,
+        hasIcon?: boolean,
+        icon?: IconName,
+        iconColour?: boolean,
+        iconInverse?: boolean,
+        title: string,
+        ref?: any
+    }
+}

package/@types/components/Table.d.ts

@@ -0,0 +1,8 @@
+declare namespace SGDS.Component {
+    type SmallScreen = 'scrolling' | 'boxes';
+
+    interface Table extends React.AllHTMLAttributes<HTMLTableElement> {
+        className?: string,
+        smallscreen?: SmallScreen
+    }
+}

package/@types/components/Tabs.d.ts

@@ -0,0 +1,22 @@
+declare namespace SGDS.Component {
+    namespace Tabs {
+        interface Item extends React.AllHTMLAttributes<HTMLElement> {
+            bordered?: boolean,
+            id: string,
+            tabLabel: string
+        }
+
+        interface TabListItem extends React.AllHTMLAttributes<HTMLLIElement> {
+            title: string,
+            href: string
+        }
+    }
+
+    interface Tabs extends React.AllHTMLAttributes<HTMLElement> {
+        baseId: string,
+        bordered?: boolean,
+        headerLevel?: SGDS.HeaderLevel,
+        manual?: boolean,
+        title: string
+    }
+}

package/@types/components/TaskList.d.ts

@@ -5,7 +5,7 @@ declare namespace SGDS.Component {
             title: string
         }
 
-        interface Task extends React.AllHTMLAttributes<HTMLElement> {
+        interface Item extends React.AllHTMLAttributes<HTMLElement> {
             href?: string,
             id?: string,
             isComplete?: boolean,

package/dist/common/abstract-notification-banner.jsx

@@ -0,0 +1,63 @@
+"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 icon_1 = __importDefault(require("./icon"));
+const screen_reader_text_1 = __importDefault(require("./screen-reader-text"));
+const Buttons = ({ children }) => {
+    return (<>{children}</>);
+};
+const AbstractNotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
+    let content = [];
+    let buttons;
+    react_1.Children.forEach(children, (child) => {
+        if ((0, react_1.isValidElement)(child) && child.type === Buttons) {
+            buttons = child;
+        }
+        else {
+            content.push(child);
+        }
+    });
+    return (<div className={[
+            'ds_notification',
+            className
+        ].join(' ')} data-module="ds-notification" {...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={icon}/>
+                        </span>}
+
+                    <div className="ds_notification__text">
+                        {content}
+                    </div>
+
+                    {close &&
+            <button type="button" 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>}
+
+                    {buttons &&
+            <div className="ds_button-group">
+                            {buttons}
+                        </div>}
+                </div>
+            </div>
+        </div>);
+};
+AbstractNotificationBanner.displayName = 'AbstractNotificationBanner';
+AbstractNotificationBanner.Buttons = Buttons;
+exports.default = AbstractNotificationBanner;

package/dist/components/accordion/accordion.jsx

@@ -36,7 +36,6 @@ 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
@@ -67,7 +66,6 @@ const AccordionItem = ({ children, className, headerLevel = 'h3', id: rawId, ope
             </div>
         </div>);
 };
-exports.AccordionItem = AccordionItem;
 const Accordion = ({ children, className, headerLevel = 'h3', hideOpenAll, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -99,5 +97,6 @@ const Accordion = ({ children, className, headerLevel = 'h3', hideOpenAll, ...pr
         </div>);
 };
 Accordion.displayName = 'Accordion';
-exports.AccordionItem.displayName = 'AccordionItem';
+AccordionItem.displayName = 'AccordionItem';
+Accordion.Item = AccordionItem;
 exports.default = Accordion;

package/dist/components/breadcrumbs/breadcrumbs.jsx

@@ -17,8 +17,8 @@ const Breadcrumb = ({ hidden, href, title }) => {
  * @param {Object} props - Properties for the element
  * @returns {JSX.Element} - The element
  */
-const Breadcrumbs = ({ className, hideLastItem, items, ...props }) => {
-    return (<nav aria-label="Breadcrumb" className={className} {...props}>
+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>

package/dist/components/cookie-banner/cookie-banner.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 abstract_notification_banner_1 = __importDefault(require("../../common/abstract-notification-banner"));
+const CookieBanner = ({ children, className, title, ...props }) => {
+    return (<>
+            <abstract_notification_banner_1.default className={[
+            'ds_notification--large',
+            'ds_notification--cookie',
+            'js-initial-cookie-content',
+            className
+        ].join(' ')} data-module="ds-cookie-notification" title={title} {...props}>
+                {children}
+            </abstract_notification_banner_1.default>
+        </>);
+};
+CookieBanner.displayName = 'CookieBanner';
+CookieBanner.Buttons = abstract_notification_banner_1.default.Buttons;
+exports.default = CookieBanner;

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

@@ -4,50 +4,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
+const abstract_notification_banner_1 = __importDefault(require("../../common/abstract-notification-banner"));
 // @ts-ignore
 const notification_banner_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-banner/notification-banner"));
-const icon_1 = __importDefault(require("../../common/icon"));
-const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
-const NotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
+const NotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title, ...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',
+    return (<abstract_notification_banner_1.default className={[
             'ds_reversed',
             className
-        ].join(' ')} 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="PriorityHigh"/>
-                        </span>}
-
-                    <div className="ds_notification__text">
-                        {children}
-                    </div>
-
-                    {close &&
-            <button type="button" 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>}
-                </div>
-            </div>
-        </div>);
+        ].join(' ')} close={close} icon={icon ? "PriorityHigh" : undefined} iconColour={iconColour} iconInverse={iconInverse} ref={ref} title="Information" {...props}>
+            {children}
+        </abstract_notification_banner_1.default>);
 };
 NotificationBanner.displayName = 'NotificationBanner';
+NotificationBanner.Buttons = abstract_notification_banner_1.default.Buttons;
 exports.default = NotificationBanner;

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

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MetadataItem = void 0;
 const MetadataItem = ({ children, className, name, ...props }) => {
     return (<div className={[
             'ds_metadata__item',
@@ -12,7 +11,6 @@ const MetadataItem = ({ children, className, name, ...props }) => {
             </dd>
         </div>);
 };
-exports.MetadataItem = MetadataItem;
 const Metadata = ({ children, className, inline, ...props }) => {
     return (<dl className={[
             'ds_metadata',
@@ -23,5 +21,6 @@ const Metadata = ({ children, className, inline, ...props }) => {
         </dl>);
 };
 Metadata.displayName = 'Metadata';
-exports.MetadataItem.displayName = 'MetadataItem';
+MetadataItem.displayName = 'MetadataItem';
+Metadata.Item = MetadataItem;
 exports.default = Metadata;

package/dist/components/table/table.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 table_1 = __importDefault(require("@scottish-government/design-system/src/components/table/table"));
+const Table = ({ children, className, smallscreen, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new table_1.default().init();
+        }
+    }, [ref]);
+    return (<table className={[
+            'ds_table',
+            className
+        ].join(' ')} data-smallscreen={smallscreen} ref={ref} {...props}>
+            {children}
+        </table>);
+};
+Table.displayName = 'Table';
+exports.default = Table;

package/dist/components/tabs/tabs.jsx

@@ -0,0 +1,99 @@
+"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"));
+const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
+// @ts-ignore
+const tabs_1 = __importDefault(require("@scottish-government/design-system/src/components/tabs/tabs"));
+const slugify_1 = __importDefault(require("../../utils/slugify"));
+const TabItem = ({ bordered, children, className, id, tabLabel, ...props }) => {
+    return (<div className={[
+            'ds_tabs__content',
+            bordered && 'ds_tabs__content--bordered',
+            className
+        ].join(' ')} id={id} {...props}>
+            {children}
+        </div>);
+};
+const TabListItem = ({ title, href }) => {
+    return (<li className="ds_tabs__tab">
+            <a className="ds_tabs__tab-link" href={href}>{title}</a>
+        </li>);
+};
+const Tabs = ({ baseId = 'tabs', bordered = true, children, className, headerLevel = 'h2', manual = false, title = 'Contents', ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    const headingId = `${baseId}-heading`;
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new tabs_1.default(ref.current).init();
+        }
+    }, [ref]);
+    const processedItems = react_1.Children.map(children, child => {
+        if ((0, react_1.isValidElement)(child) && child.type === TabItem) {
+            let thisChild = child;
+            return react_1.default.cloneElement(thisChild, {
+                bordered: bordered,
+                id: thisChild.props.id || `${baseId}-${(0, slugify_1.default)(thisChild.props.tabLabel)}`,
+            });
+        }
+    });
+    const tabListItems = react_1.Children.map(processedItems, child => {
+        if ((0, react_1.isValidElement)(child) && child.type === TabItem) {
+            return react_1.default.createElement(TabListItem, { title: child.props.tabLabel, href: `#${child.props.id}` });
+        }
+    });
+    return (<div className={[
+            'ds_tabs',
+            manual && 'ds_tabs--manual',
+            className
+        ].join(' ')} ref={ref} {...props}>
+            <wrapper_tag_1.default id={headingId} className="ds_tabs__title" tagName={headerLevel}>
+                {title}
+            </wrapper_tag_1.default>
+
+            <ul className="ds_tabs__list" aria-labelledby={headingId}>
+                {tabListItems}
+            </ul>
+
+            {processedItems}
+        </div>);
+};
+Tabs.displayName = 'Tabs';
+TabItem.displayName = 'TabItem';
+Tabs.Item = TabItem;
+exports.default = Tabs;

package/dist/components/task-list/task-list.jsx

@@ -3,13 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TaskGroup = exports.Task = void 0;
 const react_1 = require("react");
 const conditional_wrapper_1 = __importDefault(require("../../common/conditional-wrapper"));
 const hint_text_1 = __importDefault(require("../../common/hint-text"));
 const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
 const tag_1 = __importDefault(require("../tag/tag"));
-const Task = ({ children, className, href, id, isComplete = false, statusText, tagColour = 'grey', title, ...props }) => {
+const TaskItem = ({ children, className, href, id, isComplete = false, statusText, tagColour = 'grey', title, ...props }) => {
     if (isComplete) {
         tagColour = 'green';
     }
@@ -31,7 +30,6 @@ const Task = ({ children, className, href, id, isComplete = false, statusText, t
             <tag_1.default aria-hidden="true" colour={tagColour} title={statusText}/>}
         </li>);
 };
-exports.Task = Task;
 /**
  * @param {Object} props
  * @param {string} props.intro - Intro text
@@ -50,13 +48,12 @@ const TaskGroup = ({ children, className, intro, title, ...props }) => {
             </ul>
         </li>);
 };
-exports.TaskGroup = TaskGroup;
 const TaskList = ({ children, className, headingId = 'task-list', title, ...props }) => {
     let taskCount = 0;
     let incompleteTaskIds = [];
     let completedTasksCount = 0;
     function processChild(item) {
-        if (item.type.displayName === 'Task') {
+        if (item.type.displayName === 'TaskItem') {
             taskCount = taskCount + 1;
             if (item.props.isComplete) {
                 completedTasksCount = completedTasksCount + 1;
@@ -91,6 +88,8 @@ const TaskList = ({ children, className, headingId = 'task-list', title, ...prop
         </div>);
 };
 TaskList.displayName = 'TaskList';
-exports.Task.displayName = 'Task';
-exports.TaskGroup.displayName = 'TaskGroup';
+TaskItem.displayName = 'TaskItem';
+TaskGroup.displayName = 'TaskGroup';
+TaskList.Item = TaskItem;
+TaskList.Group = TaskGroup;
 exports.default = TaskList;