@scottish-government/designsystem-react 0.6.0 → 0.7.0

package/dist/components/RadioButton/RadioButton.jsx

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const HintText_1 = __importDefault(require("../../common/HintText"));
+const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small }) => {
+    const hintTextId = `hint-text-${id}`;
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<div className={[
+            'ds_radio',
+            small && 'ds_radio--small'
+        ].join(' ')}>
+            <input aria-describedby={hintText ? hintTextId : undefined} className="ds_radio__input" defaultChecked={!!checked} id={id} name={name} onBlur={handleBlur} onChange={handleChange} type="radio"/>
+            <label className="ds_radio__label" htmlFor={id}>{label}</label>
+            {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
+        </div>);
+};
+exports.Radio = Radio;
+const RadioGroup = ({ className, inline, items, name, small, ...props }) => {
+    return (<div className={[
+            'ds_radios',
+            'ds_field-group',
+            inline && 'ds_field-group--inline',
+            className
+        ].join(' ')} {...props}>
+
+            {items && items.map((item, index) => (<exports.Radio checked={item.checked} hintText={item.hintText} id={item.id} key={'radio' + index} label={item.label} name={name} onBlur={item.onBlur} onChange={item.onChange} small={small || item.small}/>))}
+        </div>);
+};
+exports.Radio.displayName = 'Radio';
+RadioGroup.displayName = 'RadioGroup';
+exports.default = RadioGroup;

package/dist/components/Select/Select.jsx

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ErrorMessage_1 = __importDefault(require("../ErrorMessage/ErrorMessage"));
+const HintText_1 = __importDefault(require("../../common/HintText"));
+const Option = function ({ text, value }) {
+    return (<option value={value}>{text}</option>);
+};
+const Select = function ({ className, defaultValue, error, errorMessage, hintText, id, label, name, onBlur, onChange, options, placeholder, width, ...props }) {
+    const errorMessageId = `error-message-${id}`;
+    const hintTextId = `hint-text-${id}`;
+    const describedbys = [];
+    if (hintText) {
+        describedbys.push(hintTextId);
+    }
+    ;
+    if (errorMessage) {
+        describedbys.push(errorMessageId);
+    }
+    ;
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<>
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
+            {errorMessage && <ErrorMessage_1.default id={errorMessageId} text={errorMessage}/>}
+            <div className={[
+            "ds_select-wrapper",
+            error && 'ds_input--error',
+            width && `ds_input--${width}`,
+            className
+        ].join(' ')} {...props}>
+                <select aria-describedby={describedbys.join(' ')} aria-invalid={error} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
+                    <option value="">{placeholder}</option>
+                    {options && options.map((option, index) => (<Option value={option.value} text={option.text} key={`option-${index}`}/>))}
+                </select>
+                <span className="ds_select-arrow" aria-hidden="true"></span>
+            </div>
+        </>);
+};
+Select.displayName = 'Select';
+exports.default = Select;

package/dist/components/SequentialNavigation/SequentialNavigation.jsx

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const NextLink = ({ href, title }) => {
+    return (<div className="ds_sequential-nav__item  ds_sequential-nav__item--next">
+            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--right">
+                <span className="ds_sequential-nav__text" data-label="Next">
+                    {title}
+                </span>
+            </a>
+        </div>);
+};
+const PrevLink = ({ href, title, }) => {
+    return (<div className="ds_sequential-nav__item  ds_sequential-nav__item--prev">
+            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--left">
+                <span className="ds_sequential-nav__text" data-label="Previous">
+                    {title}
+                </span>
+            </a>
+        </div>);
+};
+const SequentialNavigation = ({ ariaLabel = 'Article navigation', className, next, previous, ...props }) => {
+    return (<nav className={[
+            'ds_sequential-nav',
+            className
+        ].join(' ')} aria-label={ariaLabel} {...props}>
+            {previous && <PrevLink href={previous.href} title={previous.title}></PrevLink>}
+            {next && <NextLink href={next.href} title={next.title}></NextLink>}
+        </nav>);
+};
+SequentialNavigation.displayName = 'SequentialNavigation';
+exports.default = SequentialNavigation;

package/dist/components/SideNavigation/SideNavigation.jsx

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = exports.List = void 0;
+const react_1 = require("react");
+// @ts-ignore
+const side_navigation_1 = __importDefault(require("@scottish-government/design-system/src/components/side-navigation/side-navigation"));
+const List = function ({ items, root }) {
+    return (<ul className="ds_side-navigation__list" id={root ? 'side-navigation-root' : undefined}>
+            {items && items.map((item, index) => (<exports.Link title={item.title} href={item.href} items={item.items} current={item.current} key={'sidenavitem' + index}/>))}
+        </ul>);
+};
+exports.List = List;
+const Link = function ({ current = false, href, items, title }) {
+    return (<li className={[
+            'ds_side-navigation__item',
+            items && 'ds_side-navigation__item--has-children'
+        ].join(' ')}>
+            {current ?
+            <span className="ds_side-navigation__link  ds_current">{title}</span> :
+            <a href={href} className="ds_side-navigation__link">{title}</a>}
+
+            {items && <exports.List items={items}/>}
+        </li>);
+};
+exports.Link = Link;
+const SideNavigation = function ({ children, className, items, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new side_navigation_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<nav aria-label="Sections" className={[
+            'ds_side-navigation',
+            className
+        ].join(' ')} data-module="ds-side-navigation" ref={ref} {...props}>
+            <input type="checkbox" className="fully-hidden  js-toggle-side-navigation" id="show-side-navigation" aria-controls="side-navigation-root"/>
+            <label className="ds_side-navigation__expand  ds_link" htmlFor="show-side-navigation">
+                <span className="visually-hidden">Show all</span> Pages in this section
+                <span className="ds_side-navigation__expand-indicator"></span>
+            </label>
+
+            {items && <exports.List root items={items}/>}
+        </nav>);
+};
+SideNavigation.displayName = 'SideNavigation';
+exports.Link.displayName = 'SideNavLink';
+exports.List.displayName = 'SideNavList';
+exports.default = SideNavigation;

package/dist/components/SiteHeader/SiteHeader.jsx

@@ -0,0 +1,68 @@
+'use client';
+"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("../../common/Icon"));
+const PhaseBanner_1 = __importDefault(require("../PhaseBanner/PhaseBanner"));
+const SiteNavigation_1 = __importDefault(require("../SiteNavigation/SiteNavigation"));
+const SiteSearch_1 = __importDefault(require("../SiteSearch/SiteSearch"));
+// @ts-ignore
+const site_navigation_1 = __importDefault(require("@scottish-government/design-system/src/components/site-navigation/site-navigation"));
+const SiteHeader = ({ logo = {}, navigationItems, phaseBanner, siteSearch, siteTitle, ...props }) => {
+    const mobileMenuRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (mobileMenuRef.current) {
+            new site_navigation_1.default(mobileMenuRef.current).init();
+        }
+    }, [mobileMenuRef]);
+    return (<header className="ds_site-header" {...props}>
+            <div className="ds_wrapper">
+                <div className="ds_site-header__content">
+                    <div className="ds_site-branding">
+                        {logo &&
+            <a className="ds_site-branding__logo  ds_site-branding__link" href={logo.href ? logo.href : '/'}>
+                                <img className="ds_site-branding__logo-image" src={logo.src} alt={logo.alt}/>
+                            </a>}
+
+                        {siteTitle && <div className="ds_site-branding__title">
+                            {siteTitle}
+                        </div>}
+                    </div>
+
+                    {navigationItems &&
+            <div className="ds_site-header__controls">
+                            <label aria-controls="mobile-navigation" className="ds_site-header__control  js-toggle-menu" htmlFor="menu">
+                                <span className="ds_site-header__control-text">Menu</span>
+                                <Icon_1.default fill className="ds_site-header__control-icon" icon="Menu" aria-hidden="true"/>
+                                <Icon_1.default fill className="ds_site-header__control-icon  ds_site-header__control-icon--active-icon" icon="Close" aria-hidden="true"/>
+                            </label>
+                        </div>}
+
+                    {navigationItems &&
+            <input className="ds_site-navigation__toggle" id="menu" type="checkbox"/>}
+                    {navigationItems &&
+            <SiteNavigation_1.default id="mobile-navigation" className="ds_site-navigation--mobile" items={navigationItems} ref={mobileMenuRef}/>}
+
+                    {siteSearch &&
+            <SiteSearch_1.default className="ds_site-header__search" {...siteSearch}/>}
+                </div>
+            </div>
+
+            {phaseBanner &&
+            <PhaseBanner_1.default phaseName={phaseBanner.phaseName}>
+                    {phaseBanner.content}
+                </PhaseBanner_1.default>}
+
+            {navigationItems &&
+            <div className="ds_site-header__navigation">
+                    <div className="ds_wrapper">
+                        <SiteNavigation_1.default items={navigationItems}/>
+                    </div>
+                </div>}
+        </header>);
+};
+SiteHeader.displayName = 'SiteHeader';
+exports.default = SiteHeader;

package/dist/components/SiteNavigation/SiteNavigation.jsx

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const SiteNavLink = ({ current = false, href, title }) => {
+    return (<li className="ds_site-navigation__item">
+            <a href={href} className={[
+            'ds_site-navigation__link',
+            current ? 'ds_current' : undefined
+        ].join(' ')}>{title}</a>
+        </li>);
+};
+const SiteNavigation = ({ className, items, ...props }) => {
+    return (<nav className={[
+            'ds_site-navigation',
+            className
+        ].join(' ')} {...props}>
+            <ul className="ds_site-navigation__list">
+                {items && items.map((item, index) => (<SiteNavLink current={item.current} href={item.href} title={item.title} key={`link-${index}`}/>))}
+            </ul>
+        </nav>);
+};
+SiteNavigation.displayName = 'SiteNavigation';
+exports.default = SiteNavigation;

package/dist/components/SiteSearch/SiteSearch.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");
+// @ts-ignore
+const autocomplete_1 = __importDefault(require("@scottish-government/design-system/src/components/autocomplete/autocomplete"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocompleteSuggestionMappingFunction, className, id = 'site-search', method = 'GET', minLength = 3, name = 'q', placeholder = 'Search', ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const hasAutocomplete = !!autocompleteEndpoint;
+    let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
+    (0, react_1.useEffect)(() => {
+        if (hasAutocomplete && ref.current) {
+            const options = {};
+            if (minLength) {
+                options.minLength = minLength;
+            }
+            if (autocompleteSuggestionMappingFunction) {
+                options.suggestionMappingFunction = autocompleteSuggestionMappingFunction;
+            }
+            const autocomplete = new autocomplete_1.default(document.getElementById(autocompleteId), autocompleteEndpoint, options);
+            autocomplete.init();
+        }
+    }, [ref, autocompleteEndpoint, autocompleteId, hasAutocomplete, minLength, autocompleteSuggestionMappingFunction]);
+    return (<div className={[
+            'ds_site-search', ,
+            className,
+            hasAutocomplete ? 'ds_autocomplete' : undefined
+        ].join(' ')} id={autocompleteId ? autocompleteId : undefined} ref={ref} {...props}>
+
+            <form role="search" className="ds_site-search__form" method={method} action={action}>
+                <label className="ds_label  visually-hidden" htmlFor={id} id={id + '-label'}>Search</label>
+
+                {hasAutocomplete && (<div role="status" aria-live="polite" id="autocomplete-status" className="visually-hidden"></div>)}
+
+                <div className="ds_input__wrapper  ds_input__wrapper--has-icon">
+                    <input aria-autocomplete={hasAutocomplete ? 'list' : undefined} aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined} autoComplete={hasAutocomplete ? 'off' : undefined} className={[
+            'ds_input',
+            'ds_site-search__input',
+            hasAutocomplete ? 'js-autocomplete-input' : undefined
+        ].join(' ')} id={id} name={name} placeholder={placeholder} required spellCheck="false" type="search"/>
+
+                    <Button_1.default type="submit" icon="Search" iconOnly>Search</Button_1.default>
+
+                    {hasAutocomplete && (<div id="autocomplete-suggestions" className="ds_autocomplete__suggestions">
+                            <ol className="ds_autocomplete__suggestions-list" role="listbox" aria-labelledby="site-search-label"></ol>
+                        </div>)}
+                </div>
+            </form>
+        </div>);
+};
+SiteSearch.displayName = 'SiteSearch';
+exports.default = SiteSearch;

package/dist/components/SkipLinks/SkipLinks.jsx

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkipLink = void 0;
+const SkipLink = ({ targetId, title }) => {
+    return (<li className="ds_skip-links__item">
+            <a href={`#${targetId}`} className="ds_skip-links__link">{title}</a>
+        </li>);
+};
+exports.SkipLink = SkipLink;
+const SkipLinks = ({ items, mainContentId = 'main-content', mainLinkText = 'Skip to main content', ...props }) => {
+    return (<div className="ds_skip-links" {...props}>
+            <ul className="ds_skip-links__list">
+                <exports.SkipLink title={mainLinkText} targetId={mainContentId}/>
+
+                {items && items.map((item, index) => (<exports.SkipLink title={item.title} targetId={item.targetId} key={`skiplink-${index}`}/>))}
+            </ul>
+        </div>);
+};
+SkipLinks.displayName = 'SkipLinks';
+exports.SkipLink.displayName = 'SkipLink';
+exports.default = SkipLinks;

package/dist/components/SummaryCard/SummaryCard.jsx

@@ -0,0 +1,67 @@
+"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 SummaryList_1 = __importStar(require("../SummaryList/SummaryList"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+function convertToSlug(string) {
+    return string.toLowerCase()
+        .replace(/[^\w ]+/g, "")
+        .replace(/ +/g, "-");
+}
+const SummaryCard = ({ actions, className, headingLevel = 'h3', items, title, ...props }) => {
+    const describedById = `summary-card-${convertToSlug(title)}`;
+    return (<div className={[
+            'ds_summary-card',
+            className
+        ].join(' ')} {...props}>
+            <div className="ds_summary-card__header">
+                <WrapperTag_1.default className="ds_summary-card__header-title" id={describedById} tagName={headingLevel}>{title}</WrapperTag_1.default>
+
+                <ul className="ds_summary-card__actions-list">
+                    {actions && actions.map((action, index) => (<li className="ds_summary-card__actions-list-item" key={'summarylistaction' + index}>
+                            <SummaryList_1.Action describedby={describedById} href={action.href} onclick={action.onclick} title={action.title}/>
+                        </li>))}
+                </ul>
+            </div>
+            <div className="ds_summary-card__content">
+                <SummaryList_1.default items={items}/>
+            </div>
+        </div>);
+};
+SummaryCard.displayName = 'SummaryCard';
+exports.default = SummaryCard;

package/dist/components/SummaryList/SummaryList.jsx

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = exports.Action = exports.Answer = void 0;
+const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
+const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+function escapedNewLineToLineBreakTag(string) {
+    if (typeof string === 'string') {
+        // @ts-ignore
+        return string.split('\n').map((item, index) => {
+            return (index === 0) ? item : [<br key={index}/>, item];
+        });
+    }
+}
+function convertToSlug(string) {
+    return string.toLowerCase()
+        .replace(/[^\w ]+/g, "")
+        .replace(/ +/g, "-");
+}
+const Answer = ({ value }) => {
+    const processedValue = escapedNewLineToLineBreakTag(value.toString());
+    return (<q className="ds_summary-list__answer">{processedValue}</q>);
+};
+exports.Answer = Answer;
+const Action = ({ describedby, href, onclick, title, }) => {
+    let tagName = 'button';
+    if (href) {
+        tagName = 'a';
+    }
+    return (<WrapperTag_1.default aria-describedby={describedby} className="ds_link" href={href} onClick={onclick} tagName={tagName} type={tagName === 'button' ? 'button' : undefined}>
+            {title}
+        </WrapperTag_1.default>);
+};
+exports.Action = Action;
+const Item = ({ actions, index = 1, title, value }) => {
+    let values = [];
+    if (Array.isArray(value)) {
+        values = value;
+    }
+    else {
+        values = [value || ''];
+    }
+    const describedById = `q${index + 1}-${convertToSlug(title)}`;
+    return (<li className="ds_summary-list__item">
+            <span className="ds_summary-list__key" id={describedById}>{title}</span>
+            <span className="ds_summary-list__value">
+                <ConditionalWrapper_1.default condition={values.length > 1} wrapper={(children) => <ul className="ds_no-bullets">{children}</ul>}>
+                    {values && values.map((value, index) => (<ConditionalWrapper_1.default condition={values.length > 1} wrapper={(children) => <li>{children}</li>} key={'answer' + index}>
+                            <exports.Answer value={value}/>
+                        </ConditionalWrapper_1.default>))}
+                </ConditionalWrapper_1.default>
+            </span>
+            {actions &&
+            <div className="ds_summary-list__actions">
+                    {actions && actions.map((action, index) => (<exports.Action describedby={describedById} href={action.href} onclick={action.onclick} title={action.title} key={'summarylistaction' + index}/>))}
+                </div>}
+        </li>);
+};
+exports.Item = Item;
+const SummaryList = ({ className, items, noBorder, ...props }) => {
+    return (<ol className={[
+            'ds_summary-list',
+            noBorder && 'ds_summary-list--no-border',
+            className
+        ].join(' ')} {...props}>
+            {items && items.map((item, index) => (<exports.Item actions={item.actions} title={item.title} value={item.value} index={index} key={'summarylistitem' + index}/>))}
+        </ol>);
+};
+SummaryList.displayName = 'SummaryList';
+exports.Action.displayName = 'SummaryListAction';
+exports.Answer.displayName = 'SumaryListAnswer';
+exports.Item.displayName = 'SummaryListItem';
+exports.default = SummaryList;

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 WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+// @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, headingLevel = '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}>
+            <WrapperTag_1.default id={headingId} className="ds_tabs__title" tagName={headingLevel}>
+                {title}
+            </WrapperTag_1.default>
+
+            <ul className="ds_tabs__list" aria-labelledby={headingId}>
+                {tabListItems}
+            </ul>
+
+            {processedItems}
+        </div>);
+};
+Tabs.displayName = 'Tabs';
+TabItem.displayName = 'Tabs.Item';
+Tabs.Item = TabItem;
+exports.default = Tabs;

package/dist/components/Tag/Tag.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Tag = ({ className, colour, title, ...props }) => {
+    return (<span className={[
+            'ds_tag',
+            className,
+            colour && `ds_tag--${colour}`,
+        ].join(' ')} {...props}>
+            {title}
+        </span>);
+};
+Tag.displayName = 'Tag';
+exports.default = Tag;