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

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

package/src/components/SiteNavigation/SiteNavigation.tsx

@@ -1,27 +1,39 @@
-const SiteNavLink: React.FC<SGDS.Component.SiteNavigation.Link> = ({
-    current=false,
+const Item = ({
+    children,
+    current = false,
     href,
-    title
-}) => {
+    linkComponent
+}: SGDS.Component.SiteNavigation.Item) => {
+    const classNames = ['ds_site-navigation__link'];
+    let ariaCurrent: React.AriaAttributes["aria-current"];
+
+    if (current) {
+        classNames.push('ds_current');
+        ariaCurrent = 'page';
+    }
+
+    function processChildren(children: React.ReactNode) {
+        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: React.FC<SGDS.Component.SiteNavigation> = ({
+const SiteNavigation = ({
+    children,
     className,
-    items,
     ...props
-}) => {
+}: SGDS.Component.SiteNavigation) => {
     return (
         <nav
             className={[
@@ -31,14 +43,14 @@ const SiteNavigation: React.FC<SGDS.Component.SiteNavigation> = ({
             {...props}
         >
             <ul className="ds_site-navigation__list">
-                {items && items.map((item, index: number) => (
-                    <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';
 
 export default SiteNavigation;

package/src/components/SiteSearch/SiteSearch.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
 import Button from '../Button/Button';
 
-const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
+const SiteSearch = function ({
     action = '/search',
     autocompleteEndpoint,
     autocompleteSuggestionMappingFunction,
@@ -14,7 +14,7 @@ const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
     name = 'q',
     placeholder = 'Search',
     ...props
-}) {
+}: SGDS.Component.SiteSearch) {
     const ref = useRef(null);
     const hasAutocomplete = !!autocompleteEndpoint;
     let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';

package/src/components/SkipLinks/SkipLinks.test.tsx

@@ -54,23 +54,35 @@ test('custom link target', () => {
     expect(skipLinksLink).toHaveAttribute('href', `#${CUSTOM_ID}`)
 });
 
-test('additional links', () => {
-    const ITEMS = [
-        { title: 'foo', targetId: 'bar' }
-    ];
+test('explicit links', () => {
+    const LINK_ID = 'foo';
+    const LINK_TEXT = 'bar';
 
     render(
-        <SkipLinks items={ITEMS} />
+        <SkipLinks>
+            <SkipLinks.Link fragmentId={LINK_ID}>{LINK_TEXT}</SkipLinks.Link>
+        </SkipLinks>
     );
 
     const skipLinksList = screen.getByRole('list');
     const skipLinksListItems = within(skipLinksList).getAllByRole('listitem');
-    const skipLinksSecondLink = within(skipLinksList).getAllByRole('link')[1];
+    const skipLinksSecondLink = within(skipLinksList).getByRole('link');
 
-    expect(skipLinksListItems.length).toEqual(2);
-    expect(skipLinksSecondLink).toHaveAttribute('href', `#${ITEMS[0].targetId}`);
-    expect(skipLinksSecondLink.textContent).toEqual(ITEMS[0].title);
-})
+    expect(skipLinksListItems.length).toEqual(1);
+    expect(skipLinksSecondLink).toHaveAttribute('href', `#${LINK_ID}`);
+    expect(skipLinksSecondLink.textContent).toEqual(LINK_TEXT);
+});
+
+test('static skip links', () => {
+    render(
+        <SkipLinks isStatic />
+    );
+
+    const skipLinksList = screen.getByRole('list');
+    const skipLinksContainer = skipLinksList.parentElement;
+
+    expect(skipLinksContainer).toHaveClass('ds_skip-links--static');
+});
 
 test('passing additional props', () => {
     render(

package/src/components/SkipLinks/SkipLinks.tsx

@@ -1,39 +1,40 @@
-export const SkipLink: React.FC<SGDS.Component.SkipLinks.Link> = ({
-    targetId,
-    title
-}) => {
+const Link = ({
+    children,
+    fragmentId
+}: SGDS.Component.SkipLinks.Link) => {
     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>
     );
 };
 
-const SkipLinks: React.FC<SGDS.Component.SkipLinks> = ({
-    items,
+const SkipLinks = ({
+    children,
     mainContentId = 'main-content',
     mainLinkText = 'Skip to main content',
+    isStatic,
     ...props
-}) => {
+}: SGDS.Component.SkipLinks) => {
     return (
         <div
-            className="ds_skip-links"
+            className={[
+                'ds_skip-links',
+                isStatic && 'ds_skip-links--static',
+            ].join(' ')}
             {...props}
         >
             <ul className="ds_skip-links__list">
-                <SkipLink title={mainLinkText} targetId={mainContentId}/>
-
-                {items && items.map((item, index: number) => (
-                    <SkipLink title={item.title} targetId={item.targetId} key={`skiplink-${index}`}/>
-                ))}
+                {children ? children : <Link fragmentId={mainContentId}>{mainLinkText}</Link>}
             </ul>
         </div>
     );
 };
 
 SkipLinks.displayName = 'SkipLinks';
-SkipLink.displayName = 'SkipLink';
+Link.displayName = 'SkipLink';
+SkipLinks.Link = Link;
 
 export default SkipLinks;

package/src/components/SummaryCard/SummaryCard.test.tsx

@@ -30,29 +30,21 @@ const ITEMS = [
 const TITLE_TEXT = 'Joe Bloggs';
 
 test('summary card renders correctly', () => {
-    const DESCRIBEDBY_ID = 'summary-card-joe-bloggs';
-
     render(
-        <>
-            <SummaryCard
-                data-testid="foo"
-                actions={ACTIONS}
-                items={ITEMS}
-                title={TITLE_TEXT}
-            />
-
-            <SummaryList data-testid="bar" items={ITEMS}/>
-        </>
+        <SummaryCard
+            data-testid="foo"
+            title={TITLE_TEXT}
+        >
+            <SummaryCard.Action href={ACTIONS[0].href}>{ACTIONS[0].title}</SummaryCard.Action>
+            <SummaryList data-testid="bar" />
+        </SummaryCard>
     );
 
     const summaryCard = screen.getByTestId('foo');
     const title = within(summaryCard).getByRole('heading');
     const header = title.parentElement as HTMLElement;
     const content = header?.nextElementSibling as HTMLElement;
-    const actionsList = within(header).getByRole('list')
-
-    const thisList = within(content).getByRole('list');
-    const comparisonList = screen.getByTestId('bar');
+    const action = within(header).getByRole('link');
 
     expect(summaryCard).toHaveClass('ds_summary-card');
 
@@ -60,34 +52,20 @@ test('summary card renders correctly', () => {
     expect(header?.tagName).toEqual('DIV');
 
     expect(title).toHaveClass('ds_summary-card__header-title');
-    expect(title).toHaveAttribute('id', DESCRIBEDBY_ID);
     expect(title?.tagName).toEqual('H3');
     expect(title.textContent).toEqual(TITLE_TEXT);
 
-    expect(actionsList?.tagName).toEqual('UL');
-    expect(actionsList.children.length).toEqual(ACTIONS.length);
-    expect(actionsList.children[0]).toHaveClass('ds_summary-card__actions-list-item');
-    expect(actionsList.children[0].tagName).toEqual('LI');
-    expect(actionsList.children[0].innerHTML).toEqual('<a aria-describedby="summary-card-joe-bloggs" class="ds_link" href="#foo">Change</a>');
-    expect(actionsList.children[1].innerHTML).toEqual('<button aria-describedby="summary-card-joe-bloggs" class="ds_link" type="button">Delete</button>');
-
-    fireEvent.click(actionsList.children[1].children[0]);
-
-    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
+    expect(action).toHaveAttribute('aria-describedby', title.id);
 
     expect(content).toHaveClass('ds_summary-card__content');
     expect(content?.tagName).toEqual('DIV');
-
-    expect(thisList?.innerHTML).toEqual(comparisonList?.innerHTML);
 });
 
 test('custom heading level', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={ACTIONS}
             headingLevel="h2"
-            items={ITEMS}
             title={TITLE_TEXT}
         />
     );
@@ -98,12 +76,32 @@ test('custom heading level', () => {
     expect(title?.tagName).toEqual('H2');
 });
 
+test('summary card with multiple actions renders actions as a list', () => {
+    render(
+        <SummaryCard
+            data-testid="foo"
+            title={TITLE_TEXT}
+        >
+            <SummaryCard.Action href={ACTIONS[0].href}>{ACTIONS[0].title}</SummaryCard.Action>
+            <SummaryCard.Action onclick={ACTIONS[1].onclick}>{ACTIONS[1].title}</SummaryCard.Action>
+            <SummaryList data-testid="bar" />
+        </SummaryCard>
+    );
+
+    const summaryCard = screen.getByTestId('foo');
+    const title = within(summaryCard).getByRole('heading');
+    const header = title.parentElement as HTMLElement;
+    const actionsList = within(header).getByRole('list')
+
+    expect(actionsList?.tagName).toEqual('UL');
+    expect(actionsList.children[0]).toHaveClass('ds_summary-card__actions-list-item');
+    expect(actionsList.children[0].tagName).toEqual('LI');
+});
+
 test('passing additional props', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={ACTIONS}
-            items={ITEMS}
             title={TITLE_TEXT}
             data-test="foo"
         />
@@ -117,8 +115,6 @@ test('passing additional CSS classes', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={ACTIONS}
-            items={ITEMS}
             title={TITLE_TEXT}
             className="foo"
         />