@scottish-government/designsystem-react 0.7.1 → 0.8.0

package/src/components/SiteFooter/SiteFooter.tsx

@@ -0,0 +1,107 @@
+import React, { Children } from 'react';
+import ConditionalWrapper from '../../common/ConditionalWrapper';
+
+const License = ({
+    children,
+    ...props
+}: SGDS.Component.SiteFooter.License) => {
+    return (
+        <div className="ds_site-footer__copyright" {...props}>
+            {children}
+        </div>
+    );
+}
+
+const Links = ({
+    children,
+    ...props
+}: SGDS.Component.SiteFooter.Links) => {
+    return (
+        <ul className="ds_site-footer__site-items" {...props}>
+            {children}
+        </ul>
+    );
+}
+
+const Link = ({
+    children,
+    href,
+    linkComponent,
+    ...props
+}: SGDS.Component.SiteFooter.Link) => {
+    function processChildren(children: React.ReactNode) {
+        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
+}: SGDS.Component.SiteFooter.Org) => {
+    children = Children.map(children, child => {
+        let thisChild = child as React.ReactElement<HTMLElement>;
+        if (thisChild && ['img', 'svg', 'picture'].includes(thisChild.type as string)) {
+            return React.cloneElement(thisChild, { className: 'ds_site-footer__org-logo' });
+        } else {
+            return child;
+        }
+    });
+
+    return (
+        <div className="ds_site-footer__org" {...props}>
+            <ConditionalWrapper
+                condition={typeof href !== 'undefined'}
+                wrapper={(children: React.JSX.Element) => <a className="ds_site-footer__org-link" title={title} href={href}>{children}</a>}
+            >
+                {children}
+            </ConditionalWrapper>
+        </div>
+    );
+}
+
+const SiteFooter = ({
+    children,
+    className,
+    ...props
+}: SGDS.Component.SiteFooter) => {
+    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';
+
+export default SiteFooter;

package/src/components/SiteHeader/SiteHeader.test.tsx

@@ -7,25 +7,29 @@ import PhaseBanner from '../PhaseBanner/PhaseBanner';
 
 test('site header renders correctly (maximal, testing markup structure)', () => {
     render(
-        <SiteHeader
-            logo={{
-                alt: 'The Scottish Government',
-                src: './scottish-government.svg'
-            }}
-            navigationItems={[
-                { title: 'About', href: '#about' },
-                { title: 'Get started', href: '#get-started' },
-                { title: 'Styles', href: '#styles' },
-                { title: 'Components', href: '#components' },
-                { title: 'Patterns', href: '#patterns' },
-                { title: 'Guidance', href: '#guidance' },
-            ]}
-            phaseBanner={{
-                phaseName: 'Beta'
-            }}
-            siteSearch
-            siteTitle="Design System React"
-        />
+        <SiteHeader>
+            <SiteHeader.Brand homeUrl="/" siteTitle="Design System React">
+                <img src="./scottish-government.svg" alt="gov.scot" loading="lazy" width="300" height="58" />
+            </SiteHeader.Brand>
+            <SiteHeader.Navigation>
+                <SiteNavigation>
+                    <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
+                    <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
+                    <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
+                    <SiteNavigation.Item href="#components" current>Components</SiteNavigation.Item>
+                    <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
+                    <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
+                </SiteNavigation>
+            </SiteHeader.Navigation>
+            <SiteHeader.Search>
+                <SiteSearch id="site-header-search"/>
+            </SiteHeader.Search>
+            <SiteHeader.Phase>
+                <PhaseBanner phaseName="Beta">
+                    This is a new service. Your <a href="#feedback">feedback</a> will help us to improve it.
+                </PhaseBanner>
+            </SiteHeader.Phase>
+        </SiteHeader>
     );
 
     const siteHeader = screen.getByRole('banner');
@@ -37,7 +41,7 @@ test('site header renders correctly (maximal, testing markup structure)', () =>
     const siteHeaderNavigationMobile = within(siteHeader).getAllByRole('navigation')[0];
     const siteHeaderNavigationDesktop = within(siteHeader).getAllByRole('navigation')[1];
     const siteHeaderPhaseBanner = siteHeader.querySelector('.ds_phase-banner');
-    const siteHeaderSearch = within(siteHeader).getByRole('search').parentElement;
+    const siteHeaderSearch = within(siteHeader).getByRole('search').parentElement?.parentElement;
 
     expect(siteHeader).toHaveClass('ds_site-header');
     expect(siteHeaderContentWrapper).toHaveClass('ds_wrapper');
@@ -67,15 +71,12 @@ test('site header renders correctly (maximal, testing markup structure)', () =>
 });
 
 test('site header branding: logo only, default URL', () => {
-    const LOGO = {
-        alt: 'The Scottish Government',
-        src: './scottish-government.svg'
-    };
-
     render(
-        <SiteHeader
-            logo={LOGO}
-        />
+        <SiteHeader>
+            <SiteHeader.Brand>
+                <img src="./scottish-government.svg" alt="gov.scot" loading="lazy" width="300" height="58" />
+            </SiteHeader.Brand>
+        </SiteHeader>
     );
 
     const siteHeader = screen.getByRole('banner');
@@ -87,25 +88,22 @@ test('site header branding: logo only, default URL', () => {
     expect(siteHeaderLogoLink).toHaveAttribute('href', '/');
 
     expect(siteHeaderLogoImg).toHaveClass('ds_site-branding__logo-image');
-    expect(siteHeaderLogoImg).toHaveAttribute('src', LOGO.src);
-    expect(siteHeaderLogoImg).toHaveAttribute('alt', LOGO.alt);
 
     expect(siteHeaderLogoImg.parentElement).toEqual(siteHeaderLogoLink);
     expect(siteHeaderLogoLink.parentElement).toEqual(siteHeaderBranding);
+
+    expect(siteHeaderLogoImg).toHaveClass('ds_site-branding__logo-image');
 });
 
 test('site header branding: logo and site title', () => {
-    const LOGO = {
-        alt: 'The Scottish Government',
-        src: './scottish-government.svg'
-    };
     const SITE_TITLE_CONTENT = 'Design System React';
 
     render(
-        <SiteHeader
-            logo={LOGO}
-            siteTitle={SITE_TITLE_CONTENT}
-        />
+        <SiteHeader>
+            <SiteHeader.Brand homeUrl="/" siteTitle={SITE_TITLE_CONTENT}>
+                <img src="./scottish-government.svg" alt="gov.scot" loading="lazy" width="300" height="58" />
+            </SiteHeader.Brand>
+        </SiteHeader>
     );
 
     const siteHeader = screen.getByRole('banner');
@@ -120,64 +118,66 @@ test('site header branding: logo and site title', () => {
 });
 
 test('site header branding: custom link URL', () => {
-    const LOGO = {
-        alt: 'The Scottish Government',
-        href: '/home.aspx',
-        src: './scottish-government.svg'
-    };
+    const HOME_URL = '/home.aspx';
 
     render(
-        <SiteHeader
-            logo={LOGO}
-        />
+        <SiteHeader>
+            <SiteHeader.Brand homeUrl={HOME_URL}>
+                <img src="./scottish-government.svg" alt="gov.scot" loading="lazy" width="300" height="58" />
+            </SiteHeader.Brand>
+        </SiteHeader>
     );
 
     const siteHeader = screen.getByRole('banner');
     const siteHeaderLogoLink = within(siteHeader).getByRole('link');
 
-    expect(siteHeaderLogoLink).toHaveAttribute('href', LOGO.href);
+    expect(siteHeaderLogoLink).toHaveAttribute('href', HOME_URL);
 });
 
-test('site header with site search', () => {
-    const SEARCH_PROPS = {
-        action: 'apple',
-        autocompleteEndpoint: 'banana',
-        autocompleteSuggestionMappingFunction: 'cucumber',
-        className: 'durian',
-        id: 'eggplant',
-        method: 'POST',
-        name: 'guava',
-        placeholder: 'haw'
-    };
+test('site header logo link link with custom element', () => {
+    const LINK_CONTENT = <img src="./scottish-government.svg" alt="gov.scot" loading="lazy" width="300" height="58" />
 
     render(
-        <>
-            <SiteHeader siteSearch={SEARCH_PROPS} />
-            <SiteSearch data-testid="sitesearch" {...SEARCH_PROPS} />
-        </>
+        <SiteHeader>
+            <SiteHeader.Brand linkComponent={
+                ({ className, ...props }) => (
+                    <strong role="link" className={className} {...props}/>
+                )}>
+                {LINK_CONTENT}
+            </SiteHeader.Brand>
+        </SiteHeader>
     );
 
-    const siteHeader = screen.getByRole('banner');
-    const siteHeaderSearch = within(siteHeader).getByRole('search')
-    const siteSearchReference = screen.getByTestId('sitesearch');
+    const item = screen.getByRole('banner');
+    const link = within(item).getByRole('link');
 
-    expect(siteHeaderSearch.outerHTML).toEqual(siteSearchReference.innerHTML);
+    expect(link?.tagName).toEqual('STRONG');
 });
 
 test('site header with site navigation', () => {
-    const NAVIGATION_ITEMS = [
-        { title: 'About', href: '#about' },
-        { title: 'Get started', href: '#get-started' },
-        { title: 'Styles', href: '#styles' },
-        { title: 'Components', href: '#components' },
-        { title: 'Patterns', href: '#patterns' },
-        { title: 'Guidance', href: '#guidance' },
-    ];
+    const NAVIGATION_ITEMS = (
+        <>
+            <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
+            <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
+            <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
+            <SiteNavigation.Item href="#components" current>Components</SiteNavigation.Item>
+            <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
+            <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
+        </>
+    );
 
     render(
         <>
-            <SiteHeader navigationItems={NAVIGATION_ITEMS} />
-            <SiteNavigation data-testid="sitenavigation" items={NAVIGATION_ITEMS} />
+            <SiteHeader>
+                <SiteHeader.Navigation>
+                    <SiteNavigation>
+                        {NAVIGATION_ITEMS}
+                    </SiteNavigation>
+                </SiteHeader.Navigation>
+            </SiteHeader>
+            <SiteNavigation data-testid="sitenavigation">
+                {NAVIGATION_ITEMS}
+            </SiteNavigation>
         </>
     );
 
@@ -212,15 +212,23 @@ test('site header with site navigation', () => {
 });
 
 test('site header with phase banner', () => {
-    const PHASE_BANNER_PROPS = {
+    const PHASE_BANNER = {
         content: 'My content',
         phaseName: 'Beta'
     };
 
     render(
         <>
-            <SiteHeader phaseBanner={PHASE_BANNER_PROPS} />
-            <PhaseBanner data-testid="phasebanner" {...PHASE_BANNER_PROPS} />
+            <SiteHeader>
+                <SiteHeader.Phase>
+                    <PhaseBanner phaseName={PHASE_BANNER.phaseName}>
+                        {PHASE_BANNER.content}
+                    </PhaseBanner>
+                </SiteHeader.Phase>
+            </SiteHeader>
+            <PhaseBanner data-testid="phasebanner" phaseName={PHASE_BANNER.phaseName}>
+                {PHASE_BANNER.content}
+            </PhaseBanner>
         </>
     );
 

package/src/components/SiteHeader/SiteHeader.tsx

@@ -1,25 +1,94 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
-
+import React, { Children, useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
-import PhaseBanner from '../PhaseBanner/PhaseBanner';
-import SiteNavigation from "../SiteNavigation/SiteNavigation";
-import SiteSearch from "../SiteSearch/SiteSearch";
+import SiteNavigation from '../SiteNavigation/SiteNavigation';
 
 // @ts-ignore
 import DSMobileMenu from '@scottish-government/design-system/src/components/site-navigation/site-navigation';
 
-const SiteHeader: React.FC<SGDS.Component.SiteHeader> = ({
+const Brand = ({
+    children,
+    homeUrl = '/',
+    linkComponent,
+    siteTitle
+}: SGDS.Component.SiteHeader.Brand) => {
+    function processChildren(children: React.ReactNode) {
+        const image = React.cloneElement(children as React.ReactElement<HTMLImageElement>, { 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
+}: any) => {
+    return children;
+}
+
+const Phase = ({
+    children
+}: any) => {
+    return children;
+}
+
+const Search = ({
+    children
+}: any) => {
+    return children;
+}
+
+const SiteHeader = ({
+    children,
     logo = {},
     navigationItems,
     phaseBanner,
     siteSearch,
     siteTitle,
     ...props
-}) => {
+}: SGDS.Component.SiteHeader) => {
     const mobileMenuRef = useRef(null);
 
+    let branding: React.ReactNode;
+    let navigation: React.ReactNode;
+    let mobileNavigation: React.ReactNode;
+    let phase: React.ReactNode;
+    let search: React.ReactNode;
+
+    // assign to slots
+    Children.forEach(children, (child: React.ReactNode) => {
+        const thisChild = child as React.ReactElement<any>;
+        if (thisChild && thisChild.type === Brand) {
+            branding = thisChild;
+        } else if (thisChild && thisChild.type === Navigation) {
+            navigation = thisChild;
+
+            if (thisChild.props.children.type === SiteNavigation) {
+                mobileNavigation = React.cloneElement(thisChild.props.children as React.ReactElement<SGDS.Component.SiteNavigation>, { 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;
+        }
+    });
+
     useEffect(() => {
         if (mobileMenuRef.current) {
             new DSMobileMenu(mobileMenuRef.current).init();
@@ -31,50 +100,35 @@ const SiteHeader: React.FC<SGDS.Component.SiteHeader> = ({
             <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 fill className="ds_site-header__control-icon" icon="Menu" aria-hidden="true" />
-                                <Icon 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 fill className="ds_site-header__control-icon" icon="Menu" aria-hidden="true" />
+                                    <Icon 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 id="mobile-navigation" className="ds_site-navigation--mobile" items={navigationItems} ref={mobileMenuRef} />
+                            <input className="ds_site-navigation__toggle" id="menu" type="checkbox" />
+                        </>
                     }
 
-                    {siteSearch &&
-                        <SiteSearch className="ds_site-header__search" {...siteSearch} />
-                    }
+                    {mobileNavigation}
+
+                    <div className="ds_site-header__search">{search}</div>
                 </div>
             </div>
 
-            {phaseBanner &&
-                <PhaseBanner phaseName={phaseBanner.phaseName}>
-                    {phaseBanner.content}
-                </PhaseBanner>
-            }
+            {phase}
 
-            {navigationItems &&
+            {navigation &&
                 <div className="ds_site-header__navigation">
                     <div className="ds_wrapper">
-                        <SiteNavigation items={navigationItems} />
+                        {navigation}
                     </div>
                 </div>
             }
@@ -82,6 +136,15 @@ const SiteHeader: React.FC<SGDS.Component.SiteHeader> = ({
     );
 };
 
+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';
 
 export default SiteHeader;

package/src/components/SiteNavigation/SiteNavigation.test.tsx

@@ -2,23 +2,23 @@ import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import SiteNavigation from './SiteNavigation';
 
-const ITEMS = [
-    {title: 'About', href: '#about'},
-    {title: 'Get started', href: '#get-started'},
-    {title: 'Styles', href: '#styles'},
-    {title: 'Components', href: '#components'},
-    {title: 'Patterns', href: '#patterns'},
-    {title: 'Guidance', href: '#guidance'},
-]
+const LINK_HREF = '#about';
+const LINK_TEXT = 'About';
 
 test('renders correctly', () => {
     render(
-        <SiteNavigation items={ITEMS}/>
+        <SiteNavigation>
+            <SiteNavigation.Item href="#about">About</SiteNavigation.Item>
+            <SiteNavigation.Item href="#get-started">Get started</SiteNavigation.Item>
+            <SiteNavigation.Item href="#styles">Styles</SiteNavigation.Item>
+            <SiteNavigation.Item href="#components">Components</SiteNavigation.Item>
+            <SiteNavigation.Item href="#patterns">Patterns</SiteNavigation.Item>
+            <SiteNavigation.Item href="#guidance">Guidance</SiteNavigation.Item>
+        </SiteNavigation>
     );
 
     const nav = screen.getByRole('navigation');
     const list = within(nav).getByRole('list');
-    const listItems = within(list).getAllByRole('listitem');
 
     // check nav
     expect(nav).toHaveClass('ds_site-navigation');
@@ -27,25 +27,44 @@ test('renders correctly', () => {
     // check list
     expect(list.tagName).toEqual('UL');
     expect(list).toHaveClass('ds_site-navigation__list');
+});
+
+test('site navigation link renders correctly', () => {
+    render(
+        <SiteNavigation.Item href={LINK_HREF}>{LINK_TEXT}</SiteNavigation.Item>
+    );
+
+    const listItem =screen.getByRole('listitem');
+    const link = within(listItem).getByRole('link');
 
-    // check items
-    expect(listItems.length).toEqual(ITEMS.length);
+    expect(listItem).toHaveClass('ds_site-navigation__item');
 
-    listItems.forEach((item, index) => {
-        expect(item).toHaveClass('ds_site-navigation__item');
+    expect(link).toHaveClass('ds_site-navigation__link');
+    expect(link).not.toHaveClass('ds_current');
+    expect(link.textContent).toEqual(LINK_TEXT);
+    expect(link).toHaveAttribute('href', LINK_HREF)
+});
+
+test('site navigation link with custom element', () => {
+    render(
+        <SiteNavigation.Item href={LINK_HREF} linkComponent={
+            ({ className, ...props }) => (
+                <strong role="link" className={className} {...props}/>
+            )}>
+            {LINK_TEXT}
+        </SiteNavigation.Item>
+    );
 
-        const link = within(item).getByRole('link');
+    const item = screen.getByRole('listitem');
+    const link = within(item).queryByRole('link');
 
-        expect(link).toHaveClass('ds_site-navigation__link');
-        expect(link).not.toHaveClass('ds_current');
-        expect(link.textContent).toEqual(ITEMS[index].title);
-        expect(link).toHaveAttribute('href', ITEMS[index].href)
-    });
+    expect(link?.tagName).toEqual('STRONG');
+    expect(link?.textContent).toEqual(LINK_TEXT);
 });
 
 test('highlights current item', () => {
     render(
-        <SiteNavigation data-test="foo" items={[{title: 'About', href: '#about', current: true}]}/>
+        <SiteNavigation.Item href={LINK_HREF} current>{LINK_TEXT}</SiteNavigation.Item>
     );
 
     const link = screen.getByRole('link');
@@ -55,7 +74,7 @@ test('highlights current item', () => {
 
 test('passing additional props', () => {
     render(
-        <SiteNavigation data-test="foo" items={ITEMS}/>
+        <SiteNavigation data-test="foo"/>
     );
 
     const nav = screen.getByRole('navigation');
@@ -64,7 +83,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SiteNavigation className="foo" items={ITEMS}/>
+        <SiteNavigation className="foo"/>
     );
 
     const nav = screen.getByRole('navigation');