@scottish-government/designsystem-react 0.7.0 → 0.8.0-beta.0

package/src/components/SideNavigation/SideNavigation.tsx

@@ -2,60 +2,55 @@ import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSSideNavigation from '@scottish-government/design-system/src/components/side-navigation/side-navigation';
 
-export const List: React.FC<SGDS.Component.SideNavigation.List> = function ({
-    items,
-    root
-}) {
+const SideNavigationList = function ({
+    children,
+    isRoot
+}: SGDS.Component.SideNavigation.List) {
     return (
         <ul className="ds_side-navigation__list"
-            id={root ? 'side-navigation-root' : undefined }
+            id={isRoot ? 'side-navigation-root' : undefined }
         >
-            {items && items.map((item, index: number) => (
-                <Link
-                    title={item.title}
-                    href={item.href}
-                    items={item.items}
-                    current={item.current}
-                    key={'sidenavitem' + index}
-                />
-            ))}
+            {children}
         </ul>
     );
 };
 
-export const Link: React.FC<SGDS.Component.SideNavigation.Link> = function ({
-    current = false,
+const SideNavigationItem = function ({
+    children,
     href,
-    items,
+    current = false,
+    linkComponent,
     title
-}) {
+}: SGDS.Component.SideNavigation.Item) {
+    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 && <List items={items} />}
+            {children}
         </li>
     );
 };
 
-const SideNavigation: React.FC<SGDS.Component.SideNavigation> = function ({
+const SideNavigation = function ({
     children,
     className,
-    items,
     ...props
-}) {
+}: SGDS.Component.SideNavigation) {
     const ref = useRef(null);
 
     useEffect(() => {
-        if (ref.current) {
+        if (ref.current && children) {
             new DSSideNavigation(ref.current).init();
         }
     }, [ref]);
@@ -77,13 +72,16 @@ const SideNavigation: React.FC<SGDS.Component.SideNavigation> = function ({
                 <span className="ds_side-navigation__expand-indicator"></span>
             </label>
 
-            {items && <List root items={items} />}
+            {children}
         </nav>
     );
 };
 
 SideNavigation.displayName = 'SideNavigation';
-Link.displayName = 'SideNavLink';
-List.displayName = 'SideNavList';
+SideNavigationItem.displayName = 'SideNavigation.Item';
+SideNavigationList.displayName = 'SideNavigation.List';
+
+SideNavigation.Item = SideNavigationItem;
+SideNavigation.List = SideNavigationList;
 
 export default SideNavigation;

package/src/components/SiteFooter/SiteFooter.test.tsx

@@ -0,0 +1,153 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import SiteFooter from './SiteFooter';
+
+const LINK_HREF = '#cookies';
+const LINK_TEXT = 'Cookies';
+
+test('site footer renders correctly', () => {
+    render(
+        <SiteFooter data-testid="sitefooter">
+            <SiteFooter.Links data-testid="sitefooterlinks" />
+            <SiteFooter.License data-testid="sitefooterlicense" />
+            <SiteFooter.Org data-testid="sitefooterorg" />
+        </SiteFooter>
+    );
+
+    const siteFooter = screen.getByTestId('sitefooter');
+    const siteFooterWrapper = siteFooter.children[0];
+    const siteFooterContent = siteFooterWrapper.children[0];
+
+    const siteFooterLinksContainer = screen.getByTestId('sitefooterlinks');
+    const siteFooterLicenseContainer = screen.getByTestId('sitefooterlicense');
+    const siteFooterOrgContainer = screen.getByTestId('sitefooterorg');
+
+    expect(siteFooter).toHaveClass('ds_site-footer');
+    expect(siteFooter.tagName).toEqual('FOOTER');
+
+    expect(siteFooterWrapper).toHaveClass('ds_wrapper');
+    expect(siteFooterWrapper.tagName).toEqual('DIV');
+
+    expect(siteFooterContent).toHaveClass('ds_site-footer__content');
+    expect(siteFooterContent.tagName).toEqual('DIV');
+
+    expect(siteFooterLinksContainer).toHaveClass('ds_site-footer__site-items');
+    expect(siteFooterLinksContainer.tagName).toEqual('UL');
+
+    expect(siteFooterLicenseContainer).toHaveClass('ds_site-footer__copyright');
+    expect(siteFooterLicenseContainer.tagName).toEqual('DIV');
+
+    expect(siteFooterOrgContainer).toHaveClass('ds_site-footer__org');
+    expect(siteFooterOrgContainer.tagName).toEqual('DIV');
+});
+
+test('site footer links render correctly', () => {
+    render(
+        <SiteFooter.Link href={LINK_HREF}>{LINK_TEXT}</SiteFooter.Link>
+    );
+
+    const listItem = screen.getByRole('listitem');
+    const link = within(listItem).getByRole('link');
+
+    expect(listItem).toHaveClass('ds_site-items__item');
+    expect(link).toHaveAttribute('href', LINK_HREF);
+    expect(link.textContent).toEqual(LINK_TEXT);
+});
+
+test('site footer links with custom element render correctly', () => {
+    render(
+        <SiteFooter.Link href={LINK_HREF} linkComponent={
+            ({ className, ...props }) => (
+                <span role="link" className={className} {...props}/>
+            )}>
+            {LINK_TEXT}
+        </SiteFooter.Link>
+    );
+
+    const listItem = screen.getByRole('listitem');
+    const link = within(listItem).getByRole('link');
+
+    expect(listItem).toHaveClass('ds_site-items__item');
+    expect(link).toHaveAttribute('href', LINK_HREF);
+    expect(link.textContent).toEqual(LINK_TEXT);
+    expect(link.tagName).toEqual('SPAN');
+});
+
+test('site footer links with no href render correctly', () => {
+    render(
+        <SiteFooter.Link>{LINK_TEXT}</SiteFooter.Link>
+    );
+
+    const listItem = screen.getByRole('listitem');
+    const link = within(listItem).queryByRole('link');
+
+    expect(listItem).toHaveClass('ds_site-items__item');
+    expect(listItem.textContent).toEqual(LINK_TEXT);
+    expect(link).not.toBeInTheDocument();
+});
+
+test('site footer org renders correctly', () => {
+    const CHILDREN = 'Foo';
+
+    render(
+        <SiteFooter.Org data-testid="sitefooterorg" title="The Scottish Government" href="https://www.gov.scot/">
+            {CHILDREN}
+        </SiteFooter.Org>
+    );
+
+    const siteFooterOrgContainer = screen.getByTestId('sitefooterorg');
+    const siteFooterOrgLink = within(siteFooterOrgContainer).getByRole('link');
+
+    expect(siteFooterOrgContainer).toHaveClass('ds_site-footer__org');
+    expect(siteFooterOrgContainer.tagName).toEqual('DIV');
+
+    expect(siteFooterOrgLink).toHaveClass('ds_site-footer__org-link');
+    expect(siteFooterOrgLink.tagName).toEqual('A');
+});
+
+test('site footer org with image renders correctly', () => {
+    const CHILDREN = <img src="foo" alt="Foo" />
+
+    render(
+        <SiteFooter.Org data-testid="sitefooterorg" title="The Scottish Government" href="https://www.gov.scot/">
+            {CHILDREN}
+        </SiteFooter.Org>
+    );
+
+    const siteFooterOrgContainer = screen.getByTestId('sitefooterorg');
+    const siteFooterOrgImage = within(siteFooterOrgContainer).getByRole('img');
+
+    expect(siteFooterOrgImage).toHaveClass('ds_site-footer__org-logo');
+});
+
+test('site footer license renders correctly', () => {
+    const CHILDREN = 'Hello';
+
+    render(
+        <SiteFooter.License data-testid="sitefooterlicense">
+            {CHILDREN}
+        </SiteFooter.License>
+    );
+
+    const siteFooterLicenseContainer = screen.getByTestId('sitefooterlicense');
+
+    expect(siteFooterLicenseContainer.innerHTML).toEqual(CHILDREN);
+});
+
+test('passing additional props', () => {
+    render(
+        <SiteFooter data-testid="sitefooter" data-test="foo" />
+    );
+
+    const siteFooter = screen.getByTestId('sitefooter');
+    expect(siteFooter?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <SiteFooter data-testid="sitefooter" className="foo" />
+    );
+
+    const siteFooter = screen.getByTestId('sitefooter');
+    expect(siteFooter).toHaveClass('foo');
+});

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>
         </>
     );