@scottish-government/designsystem-react 0.7.1 → 0.8.0

package/dist/components/SequentialNavigation/SequentialNavigation.jsx

@@ -1,31 +1,44 @@
 "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>
+const SeqNavLink = ({ children, href, isPrev, linkComponent, textLabel }) => {
+    const LINK_CLASSES = [
+        'ds_sequential-nav__button',
+        isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'
+    ].join(' ');
+    const ITEM_CLASSES = [
+        'ds_sequential-nav__item',
+        isPrev ? 'ds_sequential-nav__item--prev' : 'ds_sequential-nav__item--next'
+    ].join(' ');
+    function processChildren(children) {
+        const linkInner = <span className="ds_sequential-nav__text" data-label={textLabel}>{children}</span>;
+        if (linkComponent) {
+            return linkComponent({ className: LINK_CLASSES, href, children: linkInner });
+        }
+        else {
+            return <a href={href} className={LINK_CLASSES}>{linkInner}</a>;
+        }
+    }
+    return (<div className={ITEM_CLASSES}>
+            {processChildren(children)}
         </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 NextLink = ({ children, href, linkComponent, textLabel = 'Next' }) => {
+    return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel}>{children}</SeqNavLink>;
+};
+const PreviousLink = ({ children, href, linkComponent, textLabel = 'Previous' }) => {
+    return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel} isPrev>{children}</SeqNavLink>;
 };
-const SequentialNavigation = ({ ariaLabel = 'Article navigation', className, next, previous, ...props }) => {
+const SequentialNavigation = ({ ariaLabel = 'Article navigation', children, className, ...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>}
+            {children}
         </nav>);
 };
 SequentialNavigation.displayName = 'SequentialNavigation';
+SequentialNavigation.Next = NextLink;
+SequentialNavigation.Previous = PreviousLink;
+NextLink.displayName = 'SequentialNavigation.Next';
+PreviousLink.displayName = 'SequentialNavigation.Previous';
 exports.default = SequentialNavigation;

package/dist/components/SideNavigation/SideNavigation.jsx

@@ -3,33 +3,32 @@ 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}/>))}
+const SideNavigationList = function ({ children, isRoot }) {
+    return (<ul className="ds_side-navigation__list" id={isRoot ? 'side-navigation-root' : undefined}>
+            {children}
         </ul>);
 };
-exports.List = List;
-const Link = function ({ current = false, href, items, title }) {
+const SideNavigationItem = function ({ children, href, current = false, linkComponent, title }) {
+    const LINK_CLASS = 'ds_side-navigation__link';
     return (<li className={[
             'ds_side-navigation__item',
-            items && 'ds_side-navigation__item--has-children'
+            children && '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>}
+            <span className={LINK_CLASS + ' ds_current'}>{title}</span> :
+            linkComponent ? linkComponent({ className: LINK_CLASS, href, children: title }) :
+                <a href={href} className={LINK_CLASS}>{title}</a>}
 
-            {items && <exports.List items={items}/>}
+            {children}
         </li>);
 };
-exports.Link = Link;
-const SideNavigation = function ({ children, className, items, ...props }) {
+const SideNavigation = function ({ children, className, ...props }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        if (ref.current) {
+        if (ref.current && children) {
             new side_navigation_1.default(ref.current).init();
         }
     }, [ref]);
@@ -43,10 +42,12 @@ const SideNavigation = function ({ children, className, items, ...props }) {
                 <span className="ds_side-navigation__expand-indicator"></span>
             </label>
 
-            {items && <exports.List root items={items}/>}
+            {children}
         </nav>);
 };
 SideNavigation.displayName = 'SideNavigation';
-exports.Link.displayName = 'SideNavLink';
-exports.List.displayName = 'SideNavList';
+SideNavigationItem.displayName = 'SideNavigation.Item';
+SideNavigationList.displayName = 'SideNavigation.List';
+SideNavigation.Item = SideNavigationItem;
+SideNavigation.List = SideNavigationList;
 exports.default = SideNavigation;

package/dist/components/SiteFooter/SiteFooter.jsx

@@ -0,0 +1,104 @@
+"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 ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
+const License = ({ children, ...props }) => {
+    return (<div className="ds_site-footer__copyright" {...props}>
+            {children}
+        </div>);
+};
+const Links = ({ children, ...props }) => {
+    return (<ul className="ds_site-footer__site-items" {...props}>
+            {children}
+        </ul>);
+};
+const Link = ({ children, href, linkComponent, ...props }) => {
+    function processChildren(children) {
+        if (linkComponent) {
+            return linkComponent({ href, children });
+        }
+        else if (href) {
+            return <a href={href}>{children}</a>;
+        }
+        else {
+            return children;
+        }
+    }
+    return <li className="ds_site-items__item" {...props}>
+        {processChildren(children)}
+    </li>;
+};
+const Org = ({ href, title, children, ...props }) => {
+    children = react_1.Children.map(children, child => {
+        let thisChild = child;
+        if (thisChild && ['img', 'svg', 'picture'].includes(thisChild.type)) {
+            return react_1.default.cloneElement(thisChild, { className: 'ds_site-footer__org-logo' });
+        }
+        else {
+            return child;
+        }
+    });
+    return (<div className="ds_site-footer__org" {...props}>
+            <ConditionalWrapper_1.default condition={typeof href !== 'undefined'} wrapper={(children) => <a className="ds_site-footer__org-link" title={title} href={href}>{children}</a>}>
+                {children}
+            </ConditionalWrapper_1.default>
+        </div>);
+};
+const SiteFooter = ({ children, className, ...props }) => {
+    return (<footer className={[
+            "ds_site-footer",
+            className
+        ].join(' ')} {...props}>
+            <div className="ds_wrapper">
+                <div className="ds_site-footer__content">
+                    {children}
+                </div>
+            </div>
+        </footer>);
+};
+SiteFooter.Links = Links;
+SiteFooter.Link = Link;
+SiteFooter.License = License;
+SiteFooter.Org = Org;
+SiteFooter.displayName = 'SiteFooter';
+Links.displayName = 'SiteFooter.Links';
+Link.displayName = 'SiteFooter.Link';
+License.displayName = 'SiteFooter.License';
+Org.displayName = 'SiteFooter.Org';
+exports.default = SiteFooter;

package/dist/components/SiteHeader/SiteHeader.jsx

@@ -1,18 +1,101 @@
 'use client';
 "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 = require("react");
+const react_1 = __importStar(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 Brand = ({ children, homeUrl = '/', linkComponent, siteTitle }) => {
+    function processChildren(children) {
+        const image = react_1.default.cloneElement(children, { className: 'ds_site-branding__logo-image' });
+        if (linkComponent) {
+            return linkComponent({ className: 'ds_site-branding__logo  ds_site-branding__link', href: homeUrl, children: image });
+        }
+        else if (homeUrl) {
+            return <a href={homeUrl} className="ds_site-branding__logo  ds_site-branding__link">{image}</a>;
+        }
+    }
+    return (<>
+            {processChildren(children)}
+
+            {siteTitle &&
+            <div className="ds_site-branding__title">
+                    {siteTitle}
+                </div>}
+        </>);
+};
+const Navigation = ({ children }) => {
+    return children;
+};
+const Phase = ({ children }) => {
+    return children;
+};
+const Search = ({ children }) => {
+    return children;
+};
+const SiteHeader = ({ children, logo = {}, navigationItems, phaseBanner, siteSearch, siteTitle, ...props }) => {
     const mobileMenuRef = (0, react_1.useRef)(null);
+    let branding;
+    let navigation;
+    let mobileNavigation;
+    let phase;
+    let search;
+    // assign to slots
+    react_1.Children.forEach(children, (child) => {
+        const thisChild = child;
+        if (thisChild && thisChild.type === Brand) {
+            branding = thisChild;
+        }
+        else if (thisChild && thisChild.type === Navigation) {
+            navigation = thisChild;
+            if (thisChild.props.children.type === SiteNavigation_1.default) {
+                mobileNavigation = react_1.default.cloneElement(thisChild.props.children, { className: 'ds_site-navigation--mobile', id: 'mobile-navigation', ref: mobileMenuRef });
+            }
+        }
+        else if (thisChild && thisChild.type === Phase) {
+            phase = thisChild;
+        }
+        else if (thisChild && thisChild.type === Search) {
+            search = thisChild;
+        }
+    });
     (0, react_1.useEffect)(() => {
         if (mobileMenuRef.current) {
             new site_navigation_1.default(mobileMenuRef.current).init();
@@ -22,47 +105,45 @@ const SiteHeader = ({ logo = {}, navigationItems, phaseBanner, siteSearch, siteT
             <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>}
+                        {branding}
                     </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>}
+                    {mobileNavigation &&
+            <>
+                            <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>
+
+                            <input className="ds_site-navigation__toggle" id="menu" type="checkbox"/>
+                        </>}
 
-                    {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}/>}
+                    {mobileNavigation}
 
-                    {siteSearch &&
-            <SiteSearch_1.default className="ds_site-header__search" {...siteSearch}/>}
+                    <div className="ds_site-header__search">{search}</div>
                 </div>
             </div>
 
-            {phaseBanner &&
-            <PhaseBanner_1.default phaseName={phaseBanner.phaseName}>
-                    {phaseBanner.content}
-                </PhaseBanner_1.default>}
+            {phase}
 
-            {navigationItems &&
+            {navigation &&
             <div className="ds_site-header__navigation">
                     <div className="ds_wrapper">
-                        <SiteNavigation_1.default items={navigationItems}/>
+                        {navigation}
                     </div>
                 </div>}
         </header>);
 };
+SiteHeader.Brand = Brand;
+SiteHeader.Navigation = Navigation;
+SiteHeader.Phase = Phase;
+SiteHeader.Search = Search;
 SiteHeader.displayName = 'SiteHeader';
+Brand.displayName = 'SiteHeader.Brand';
+Navigation.displayName = 'SiteHeader.Navigation';
+Phase.displayName = 'SiteHeader.Phase';
+Search.displayName = 'SiteHeader.Search';
 exports.default = SiteHeader;

package/dist/components/SiteNavigation/SiteNavigation.jsx

@@ -1,22 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const SiteNavLink = ({ current = false, href, title }) => {
+const Item = ({ children, current = false, href, linkComponent }) => {
+    const classNames = ['ds_site-navigation__link'];
+    let ariaCurrent;
+    if (current) {
+        classNames.push('ds_current');
+        ariaCurrent = 'page';
+    }
+    function processChildren(children) {
+        if (linkComponent) {
+            return linkComponent({ className: classNames.join(' '), href, children });
+        }
+        else if (href) {
+            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</a>;
+        }
+    }
     return (<li className="ds_site-navigation__item">
-            <a href={href} className={[
-            'ds_site-navigation__link',
-            current ? 'ds_current' : undefined
-        ].join(' ')}>{title}</a>
+            {processChildren(children)}
         </li>);
 };
-const SiteNavigation = ({ className, items, ...props }) => {
+const SiteNavigation = ({ children, className, ...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}`}/>))}
+                {children}
             </ul>
         </nav>);
 };
 SiteNavigation.displayName = 'SiteNavigation';
+SiteNavigation.Item = Item;
+Item.displayName = 'SiteNavigation.Item';
 exports.default = SiteNavigation;

package/dist/components/SkipLinks/SkipLinks.jsx

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkipLink = void 0;
-const SkipLink = ({ targetId, title }) => {
+const Link = ({ children, fragmentId }) => {
     return (<li className="ds_skip-links__item">
-            <a href={`#${targetId}`} className="ds_skip-links__link">{title}</a>
+            <a href={`#${fragmentId}`} className="ds_skip-links__link">{children}</a>
         </li>);
 };
-exports.SkipLink = SkipLink;
-const SkipLinks = ({ items, mainContentId = 'main-content', mainLinkText = 'Skip to main content', ...props }) => {
-    return (<div className="ds_skip-links" {...props}>
+const SkipLinks = ({ children, mainContentId = 'main-content', mainLinkText = 'Skip to main content', isStatic, ...props }) => {
+    return (<div className={[
+            'ds_skip-links',
+            isStatic && 'ds_skip-links--static',
+        ].join(' ')} {...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}`}/>))}
+                {children ? children : <Link fragmentId={mainContentId}>{mainLinkText}</Link>}
             </ul>
         </div>);
 };
 SkipLinks.displayName = 'SkipLinks';
-exports.SkipLink.displayName = 'SkipLink';
+Link.displayName = 'SkipLink';
+SkipLinks.Link = Link;
 exports.default = SkipLinks;

package/dist/components/SummaryCard/SummaryCard.jsx

@@ -36,15 +36,23 @@ 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 react_1 = __importStar(require("react"));
+const ActionLink_1 = __importDefault(require("../../common/ActionLink"));
+const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
 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)}`;
+const SummaryCard = ({ children, className, headingLevel = 'h3', title, ...props }) => {
+    let actions = [];
+    let remainingChildren = [];
+    const describedById = (0, react_1.useId)();
+    react_1.Children.forEach(children, (child) => {
+        const thisChild = child;
+        if (thisChild && thisChild.type === ActionLink_1.default) {
+            actions.push(react_1.default.cloneElement(thisChild, { describedby: describedById }));
+        }
+        else {
+            remainingChildren.push(thisChild);
+        }
+    });
     return (<div className={[
             'ds_summary-card',
             className
@@ -52,16 +60,19 @@ const SummaryCard = ({ actions, className, headingLevel = 'h3', items, title, ..
             <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>
+                {actions &&
+            <ConditionalWrapper_1.default condition={actions.length > 1} wrapper={(children) => <ul className="ds_summary-card__actions-list">{children}</ul>}>
+                        {actions && actions.map((action, index) => (<ConditionalWrapper_1.default condition={actions.length > 1} wrapper={(children) => <li className="ds_summary-card__actions-list-item">{children}</li>} key={'action' + index}>
+                                {action}
+                            </ConditionalWrapper_1.default>))}
+                    </ConditionalWrapper_1.default>}
             </div>
             <div className="ds_summary-card__content">
-                <SummaryList_1.default items={items}/>
+                {remainingChildren}
             </div>
         </div>);
 };
 SummaryCard.displayName = 'SummaryCard';
+SummaryCard.Action = ActionLink_1.default;
+SummaryCard.Action.displayName = 'SummaryCard.Action';
 exports.default = SummaryCard;