@scottish-government/designsystem-react 0.7.0 → 0.8.0

package/src/components/SequentialNavigation/SequentialNavigation.test.tsx

@@ -2,18 +2,23 @@ import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import SequentialNavigation from './SequentialNavigation';
 
-const NEXT_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
+const NEXT_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#next' }
 const PREVIOUS_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
 
 test('sequential navigation renders correctly', () => {
     render(
-        <SequentialNavigation
-            next={NEXT_LINK_OBJECT}
-            previous={PREVIOUS_LINK_OBJECT}
-        />
+        <SequentialNavigation>
+            <SequentialNavigation.Previous href={PREVIOUS_LINK_OBJECT.href}>
+                {PREVIOUS_LINK_OBJECT.title}
+            </SequentialNavigation.Previous>
+            <SequentialNavigation.Next href={NEXT_LINK_OBJECT.href}>
+                {NEXT_LINK_OBJECT.title}
+            </SequentialNavigation.Next>
+        </SequentialNavigation>
     );
 
     const sequentialNavigation = screen.getByRole('navigation');
+
     const prevLink = screen.getAllByRole('link')[0];
     const prevLinkWrapper = prevLink.parentElement;
     const nextLink = screen.getAllByRole('link')[1];
@@ -34,18 +39,14 @@ test('sequential navigation renders correctly', () => {
     expect(nextLink.textContent).toEqual(NEXT_LINK_OBJECT.title);
     expect(nextLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--next');
     expect(nextLinkWrapper?.tagName).toEqual('DIV');
-    expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next')
+    expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next');
 });
 
 test('with custom aria label', () => {
     const ARIA_LABEL = 'My label';
 
     render(
-        <SequentialNavigation
-            ariaLabel={ARIA_LABEL}
-            next={NEXT_LINK_OBJECT}
-            previous={PREVIOUS_LINK_OBJECT}
-        />
+        <SequentialNavigation aria-label={ARIA_LABEL}/>
     );
 
     const sequentialNavigation = screen.getByRole('navigation');
@@ -53,13 +54,27 @@ test('with custom aria label', () => {
     expect(sequentialNavigation).toHaveAttribute('aria-label', ARIA_LABEL);
 });
 
+test('sequential nav links with custom element', () => {
+    render(
+        <SequentialNavigation>
+            <SequentialNavigation.Previous href={PREVIOUS_LINK_OBJECT.href} linkComponent={
+                ({ className, ...props }) => (
+                    <span role="link" className={className} {...props}/>
+                )}>
+                {PREVIOUS_LINK_OBJECT.title}
+            </SequentialNavigation.Previous>
+        </SequentialNavigation>
+    );
+
+    const link = screen.queryByRole('link');
+
+    expect(link?.tagName).toEqual('SPAN');
+    expect(link?.textContent).toEqual(PREVIOUS_LINK_OBJECT.title);
+});
+
 test('passing additional props', () => {
     render(
-        <SequentialNavigation
-            data-test="foo"
-            next={NEXT_LINK_OBJECT}
-            previous={PREVIOUS_LINK_OBJECT}
-        />
+        <SequentialNavigation data-test="foo" />
     );
 
     const sequentialNavigation = screen.getByRole('navigation');
@@ -68,11 +83,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SequentialNavigation
-            className="foo"
-            next={NEXT_LINK_OBJECT}
-            previous={PREVIOUS_LINK_OBJECT}
-        />
+        <SequentialNavigation className="foo" />
     );
 
     const sequentialNavigation = screen.getByRole('navigation');

package/src/components/SequentialNavigation/SequentialNavigation.tsx

@@ -1,44 +1,63 @@
-const NextLink: React.FC<SGDS.Component.SequentialNavigation.Link> = ({
+const SeqNavLink = ({
+    children,
     href,
-    title
-}) => {
+    isPrev,
+    linkComponent,
+    textLabel
+}: SGDS.Component.SequentialNavigation.Link) => {
+    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: React.ReactNode) {
+        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="ds_sequential-nav__item  ds_sequential-nav__item--next"
+            className={ITEM_CLASSES}
         >
-            <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>
+            {processChildren(children)}
         </div>
-    );
+    )
 };
 
-const PrevLink: React.FC<SGDS.Component.SequentialNavigation.Link> = ({
+const NextLink = ({
+    children,
     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>
-    );
+    linkComponent,
+    textLabel = 'Next'
+}: SGDS.Component.SequentialNavigation.Link) => {
+    return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel}>{children}</SeqNavLink>
+};
+
+const PreviousLink = ({
+    children,
+    href,
+    linkComponent,
+    textLabel = 'Previous'
+}: SGDS.Component.SequentialNavigation.Link) => {
+    return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel} isPrev>{children}</SeqNavLink>
 };
 
-const SequentialNavigation: React.FC<SGDS.Component.SequentialNavigation> = ({
+const SequentialNavigation = ({
     ariaLabel = 'Article navigation',
+    children,
     className,
-    next,
-    previous,
     ...props
-}) => {
+}: SGDS.Component.SequentialNavigation) => {
     return (
         <nav
             className={[
@@ -48,12 +67,15 @@ const SequentialNavigation: React.FC<SGDS.Component.SequentialNavigation> = ({
             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';
 
 export default SequentialNavigation;

package/src/components/SideNavigation/SideNavigation.test.tsx

@@ -1,49 +1,27 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import SideNavigation, { List, Link } from './SideNavigation';
-
-const ITEMS = [
-    {
-        title: 'Apples',
-        href: '#apples',
-        items: [
-            {
-                title: 'Green apples',
-                href: '#green-apples',
-                items: [
-                    {
-                        title: 'Bramley',
-                        current: true
-                    },
-                    {
-                        title: 'Granny Smith',
-                        href: '#granny-smith'
-                    }
-                ]
-            },
-            {
-                title: 'Red apples',
-                href: '#red-apples'
-            }
-        ]
-    },
-    {
-        title: 'Bananas',
-        href: '#bananas'
-    },
-    {
-        title: 'Cherries',
-        href: '#cherries'
-    },
-    {
-        title: 'Dates',
-        href: '#dates'
-    }
-];
+import SideNavigation from './SideNavigation';
 
 test('side navigation renders correctly', () => {
     render(
-        <SideNavigation items={ITEMS} />
+        <SideNavigation>
+            <SideNavigation.List isRoot>
+                <SideNavigation.Item href="#apples" title="Apples">
+                    <SideNavigation.List>
+                        <SideNavigation.Item href="#green-apples" title="Green apples">
+                            <SideNavigation.List>
+                                <SideNavigation.Item href="#bramley" title="Bramley" current/>
+                                <SideNavigation.Item href="#granny-smith" title="Granny smith"/>
+                            </SideNavigation.List>
+                        </SideNavigation.Item>
+                        <SideNavigation.Item href="#red-apples" title="Red apples"/>
+                    </SideNavigation.List>
+                </SideNavigation.Item>
+                <SideNavigation.Item href="#bananas" title="Bananas" />
+                <SideNavigation.Item href="#cherries" title="Cherries" />
+                <SideNavigation.Item href="#dates" title="Dates"/>
+            </SideNavigation.List>
+        </SideNavigation>
     );
 
     const sideNavigation = screen.getByRole('navigation');
@@ -63,16 +41,11 @@ test('side navigation renders correctly', () => {
     expect(label?.textContent).toEqual('Show all Pages in this section');
 
     expect(rootList).toHaveAttribute('id', 'side-navigation-root');
-
-    // some specifics of this case
-    expect(rootList.children.length).toEqual(4);
-    expect(document.querySelectorAll('.ds_side-navigation__link').length).toEqual(8);
-    expect(document.querySelectorAll('.ds_side-navigation__list').length).toEqual(3);
 });
 
 test('side nav link renders correctly', () => {
     render(
-        <Link title="Green apples" href="#green-apples" />
+        <SideNavigation.Item href="#green-apples" title="Green apples" />
     );
 
     const item = screen.getByRole('listitem');
@@ -87,7 +60,7 @@ test('side nav link renders correctly', () => {
 
 test('current side nav item without link renders correctly', () => {
     render(
-        <Link title="Green apples" href="#green-apples" current />
+        <SideNavigation.Item href="#green-apples" title="Green apples" current />
     );
 
     const item = screen.getByRole('listitem');
@@ -99,22 +72,18 @@ test('current side nav item without link renders correctly', () => {
 
 test('side nav link with children', () => {
     render(
-        <Link title="Green apples" href="#green-apples" items={[{
-            title: 'Bramley',
-            href: '#bramley'
-        },
-        {
-            title: 'Granny Smith',
-            href: '#granny-smith'
-        }]} />
+        <SideNavigation.Item href="#green-apples" title="Green apples">
+            <SideNavigation.List>
+                <SideNavigation.Item href="#bramley" title="Bramley" />
+            </SideNavigation.List>
+        </SideNavigation.Item>
     );
 
     const childList = screen.getByRole('list');
-    const childItem = screen.getAllByRole('listitem')[1];
+    const childItem = within(childList).getByRole('listitem');
     const childLink = within(childItem).getByRole('link');
 
     expect(childList).toHaveClass('ds_side-navigation__list');
-    expect(childList.children.length).toEqual(2);
 
     // check properties of first child link
     expect(childItem).toHaveClass('ds_side-navigation__item');
@@ -123,41 +92,26 @@ test('side nav link with children', () => {
     expect(childLink.textContent).toEqual('Bramley');
 });
 
-test('side nav list renders correctly', () => {
-    const ITEMS = [
-        {
-            title: 'Bramley',
-            href: '#bramley'
-        },
-        {
-            title: 'Granny Smith',
-            href: '#granny-smith'
-        }
-    ];
+test('side nav link with custom element', () => {
+    const LINK_TEXT = 'Green apples'
 
     render(
-        <List items={ITEMS}/>
+        <SideNavigation.Item href="#green-apples" title={LINK_TEXT} linkComponent={
+            ({ className, ...props }) => (
+                <span role="link" className={className} {...props}/>
+            )}/>
     );
 
-    const list = screen.getByRole('list');
-    const item = screen.getAllByRole('listitem')[0];
-    const link = within(item).getByRole('link');
-
-    expect(list).toHaveClass('ds_side-navigation__list');
-    expect(list.tagName).toEqual('UL');
-
-    expect(list.children.length).toEqual(ITEMS.length);
+    const item = screen.getByRole('listitem');
+    const link = within(item).queryByRole('link');
 
-    // check properties of first link
-    expect(item).toHaveClass('ds_side-navigation__item');
-    expect(link).toHaveClass('ds_side-navigation__link');
-    expect(link).toHaveAttribute('href', '#bramley');
-    expect(link.textContent).toEqual('Bramley');
+    expect(link?.tagName).toEqual('SPAN');
+    expect(link?.textContent).toEqual(LINK_TEXT);
 });
 
 test('passing additional props', () => {
     render(
-        <SideNavigation data-test="foo" items={ITEMS} />
+        <SideNavigation data-test="foo" />
     );
 
     const sideNavigation = screen.getByRole('navigation');
@@ -166,7 +120,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SideNavigation className="foo" items={ITEMS} />
+        <SideNavigation className="foo" />
     );
 
     const sideNavigation = screen.getByRole('navigation');

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