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

package/src/common/AbstractNotificationBanner.tsx

@@ -1,32 +1,32 @@
-import { Children, isValidElement } from 'react';
+import { Children } from 'react';
 import Icon from './Icon';
 import ScreenReaderText from './ScreenReaderText';
 
-const Buttons: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> = ({
+const Buttons = ({
     children
-}) => {
+}: SGDS.Common.AbstractNotificationBanner.Buttons) => {
     return (<>{children}</>);
 }
 
-const AbstractNotificationBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
-    & { Buttons: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> } = ({
+const AbstractNotificationBanner = ({
     children,
     className,
     close,
+    hasColourIcon,
+    hasInverseIcon,
     icon,
-    iconColour,
-    iconInverse,
     title = 'Information',
     ...props
-}) => {
+}: SGDS.Common.AbstractNotificationBanner) => {
     let content: any[] = [];
     let buttons;
 
     Children.forEach(children, (child) => {
-        if (isValidElement(child) && child.type === Buttons) {
-            buttons = child;
+        const thisChild = child as React.ReactElement<HTMLAnchorElement>;
+        if (thisChild && thisChild.type === Buttons) {
+            buttons = thisChild;
         } else {
-            content.push(child);
+            content.push(thisChild);
         }
     });
 
@@ -52,8 +52,8 @@ const AbstractNotificationBanner: React.FC<SGDS.Common.AbstractNotificationBanne
                         <span
                         className={[
                                 'ds_notification__icon',
-                                iconInverse && 'ds_notification__icon--inverse',
-                                iconColour && 'ds_notification__icon--colour'
+                                hasInverseIcon && 'ds_notification__icon--inverse',
+                                hasColourIcon && 'ds_notification__icon--colour'
                             ].join(' ')} aria-hidden="true">
                             <Icon icon={icon} />
                         </span>
@@ -83,5 +83,6 @@ const AbstractNotificationBanner: React.FC<SGDS.Common.AbstractNotificationBanne
 
 AbstractNotificationBanner.displayName = 'AbstractNotificationBanner';
 AbstractNotificationBanner.Buttons = Buttons;
+Buttons.displayName = 'Buttons';
 
 export default AbstractNotificationBanner;

package/src/common/ActionLink.test.tsx

@@ -0,0 +1,80 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ActionLink from './ActionLink';
+
+const ONCLICK_FUNCTION = vi.fn();
+const ACTION_HREF = "#foo"
+const ACTION_ONCLICK = ONCLICK_FUNCTION;
+const ACTION_TEXT = 'Name';
+const DESCRIBEDBY_ID = 'q1-name';
+
+test('button action', () => {
+    render(
+        <ActionLink
+            describedby={DESCRIBEDBY_ID}
+            href={undefined}
+            onclick={ACTION_ONCLICK}
+        >
+            {ACTION_TEXT}
+        </ActionLink>
+    );
+
+    const action = screen.getByRole('button');
+
+    expect(action).toHaveClass('ds_link');
+    expect(action).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
+    expect(action).toHaveAttribute('type', 'button');
+    expect(action).not.toHaveAttribute('href');
+    expect(action.tagName).toEqual('BUTTON');
+    expect(action.textContent).toEqual(ACTION_TEXT);
+
+    fireEvent.click(action);
+
+    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
+});
+
+test('link action', () => {
+    render(
+        <ActionLink
+            describedby={DESCRIBEDBY_ID}
+            href={ACTION_HREF}
+            onclick={ACTION_ONCLICK}
+        >
+            {ACTION_TEXT}
+        </ActionLink >
+    );
+
+    const action = screen.getByRole('link');
+
+    expect(action).toHaveClass('ds_link');
+    expect(action).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
+    expect(action).toHaveAttribute('href', ACTION_HREF);
+    expect(action).not.toHaveAttribute('type');
+    expect(action.tagName).toEqual('A');
+    expect(action.textContent).toEqual(ACTION_TEXT);
+});
+
+test('action with custom element', () => {
+    render(
+        <ActionLink
+            describedby={DESCRIBEDBY_ID}
+            href={ACTION_HREF}
+            onclick={ACTION_ONCLICK}
+            linkComponent={
+            ({ className, ...props }) => (
+                <strong role="link" className={className} {...props}/>
+        )}>
+            {ACTION_TEXT}
+        </ActionLink>
+    );
+
+    const action = screen.getByRole('link');
+
+    expect(action).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
+    expect(action?.tagName).toEqual('STRONG');
+    expect(action?.textContent).toEqual(ACTION_TEXT);
+
+    fireEvent.click(action);
+
+    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
+});

package/src/common/ActionLink.tsx

@@ -0,0 +1,27 @@
+const ActionLink = ({
+    children,
+    describedby,
+    href,
+    linkComponent,
+    onclick
+}: SGDS.Common.ActionLink) => {
+    const CLASSNAME = 'ds_link';
+
+    function processChildren(children: React.ReactNode) {
+        if (linkComponent) {
+            return linkComponent({ className: CLASSNAME, href, children, onClick: onclick, 'aria-describedby': describedby });
+        } else if (href) {
+            return <a aria-describedby={describedby} onClick={onclick} href={href} className={CLASSNAME}>{children}</a>;
+        } else {
+            return <button type="button" aria-describedby={describedby} onClick={onclick} className={CLASSNAME}>{children}</button>;
+        }
+    }
+
+    return (
+        processChildren(children)
+    );
+};
+
+ActionLink.displayName = 'ActionLink';
+
+export default ActionLink;

package/src/common/ConditionalWrapper.tsx

@@ -1,7 +1,7 @@
 /**
  * Wraps all children in a specified HTML tag if a condition is met.
  */
-const ConditionalWrapper: React.FC<SGDS.Common.ConditionalWrapper> = ({ condition, wrapper, children }) =>
+const ConditionalWrapper = ({ condition, wrapper, children }:SGDS.Common.ConditionalWrapper) =>
     condition ? wrapper(children) : children;
 
 ConditionalWrapper.displayName = 'ConditionalWrapper';

package/src/common/FileIcon.tsx

@@ -1,22 +1,18 @@
 import React from 'react';
 import * as FileIcons from '../images/documents';
 
-const FileIcon: React.FC<SGDS.Common.FileIcon> = ({
+const FileIcon = ({
     ariaLabel = '',
     className,
     icon
-}) => {
-    const Component = React.createElement(FileIcons[icon],
-        {
-            className: className,
-            'aria-label': ariaLabel
-        }
-    );
+}: SGDS.Common.FileIcon) => {
+    const FileIconComponent = FileIcons[icon];
 
     return (
-        <>
-            {Component}
-        </>
+        <FileIconComponent
+            aria-label={ariaLabel}
+            className={className}
+        />
     );
 };
 

package/src/common/HintText.tsx

@@ -1,9 +1,9 @@
-const HintText: React.FC<SGDS.Common.HintText> = ({
+const HintText = ({
     children,
     id,
     text,
     ...props
-}) => {
+}: SGDS.Common.HintText) => {
     return (
         <p
             className="ds_hint-text"

package/src/common/Icon.tsx

@@ -1,30 +1,26 @@
 import React from 'react';
 import * as Icons from '../images/icons';
 
-const Icon: React.FC<SGDS.Common.Icon> = ({
+const Icon = ({
     ariaLabel,
     className,
     fill,
     icon,
     iconSize
-}) => {
-    const Component = React.createElement(Icons[icon],
-        {
-            'aria-hidden': ariaLabel ? undefined : true,
-            'aria-label': ariaLabel,
-            className: [
-                'ds_icon',
-                className,
-                fill && 'ds_icon--fill',
-                iconSize && `ds_icon--${iconSize}`
-            ].join(' ')
-        }
-    );
+}: SGDS.Common.Icon) => {
+    const IconComponent = Icons[icon];
 
     return (
-        <>
-            {Component}
-        </>
+        <IconComponent
+            aria-hidden={ariaLabel ? undefined : true}
+            aria-label={ariaLabel}
+            className={[
+                    'ds_icon',
+                    className,
+                    fill && 'ds_icon--fill',
+                    iconSize && `ds_icon--${iconSize}`
+            ].join(' ')}
+        />
     );
 };
 

package/src/common/ScreenReaderText.tsx

@@ -1,7 +1,7 @@
-const ScreenReaderText: React.FC<SGDS.Common.ScreenReaderText> = ({
+const ScreenReaderText = ({
     children,
     ...props
-}) => {
+}: SGDS.Common.ScreenReaderText) => {
     return (
         <span
             className="visually-hidden"

package/src/common/WrapperTag.tsx

@@ -1,11 +1,11 @@
 /**
  * Wraps all children in a specified HTML tag.
  */
-const WrapperTag: React.FC<SGDS.Common.WrapperTag> = ({
+const WrapperTag = ({
     children,
     tagName = 'div',
     ...props
-}) => {
+}: SGDS.Common.WrapperTag) => {
     const TagName = tagName;
     return <TagName {...props}>{children}</TagName>;
 };

package/src/components/Accordion/Accordion.test.tsx

@@ -32,7 +32,6 @@ test('accordion renders correctly', () => {
 
     const accordion = screen.getByTestId(ACCORDION_ID);
     const openAllButton = document.querySelector('.ds_accordion__open-all');
-    const accordionItems = document.querySelectorAll('.ds_accordion-item');
     const firstAccordionTitle = document.querySelector('.ds_accordion-item__title');
 
     expect(accordion).toHaveClass('ds_accordion');
@@ -43,8 +42,6 @@ test('accordion renders correctly', () => {
     expect(openAllButton?.textContent).toEqual('Open all sections');
     expect(openAllButton?.innerHTML).toEqual('Open all <span class="visually-hidden">sections</span>');
 
-    expect(accordionItems.length).toEqual(3);
-
     expect(firstAccordionTitle?.tagName).toEqual(DEFAULT_HEADING_LEVEL.toUpperCase());
 });
 
@@ -102,6 +99,22 @@ test('accordion with custom heading level', () => {
     expect(firstAccordionTitle?.tagName).toEqual(HEADING_LEVEL.toUpperCase());
 });
 
+test('accordion item with nonsense heading level falls back to h3', () => {
+    render(
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} headingLevel="bananas">
+            <Accordion.Item id="accordion-1" title="Healthcare for veterans">
+                <p>Veterans are entitled to the same healthcare as any citizen. And there
+                    are health care options and support available specifically for veterans.</p>
+                <p>If you have a health condition that’s related to your service, you’re
+                    entitled to priority treatment based on clinical need.</p>
+            </Accordion.Item>
+        </Accordion>
+    );
+
+    const firstAccordionTitle = document.querySelector('.ds_accordion-item__title');
+    expect(firstAccordionTitle?.tagName).toEqual('H3');
+});
+
 test('passing additional props to accordion', () => {
     render(
         <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} data-test="foo">
@@ -216,7 +229,7 @@ test('passing additional props to accordion item', () => {
     );
 
     const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
-    expect(accordionItem?.dataset.test).toEqual('foo');
+    expect(accordionItem.dataset.test).toEqual('foo');
 });
 
 test('passing additional CSS classes', () => {

package/src/components/Accordion/Accordion.tsx

@@ -1,21 +1,29 @@
-import React, { Children, useEffect, useRef } from 'react';
+import React, { createContext, useContext, useEffect, useRef } from 'react';
 import WrapperTag from '../../common/WrapperTag';
 // @ts-ignore
 import DSAccordion from '@scottish-government/design-system/src/components/accordion/accordion';
 
 let accordionItemCounter = 0;
+const AccordionHeadingLevelContext = createContext('h3');
 
-const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
+const AccordionItem = ({
     children,
     className,
-    headingLevel = 'h3',
     id: rawId,
     open = false,
     title,
     ...props
-}) => {
+}: SGDS.Component.Accordion.Item) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${accordionItemCounter}`;
+    const DEFAULT_HEADING_LEVEL = 'h3';
+
+    let headingLevel = useContext(AccordionHeadingLevelContext);
+
+    if (!['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(headingLevel)) {
+        headingLevel = DEFAULT_HEADING_LEVEL;
+    }
+
     return (
         <div
             className={[
@@ -43,7 +51,7 @@ const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
                 >
                     {title}
                 </WrapperTag>
-                <span className='ds_accordion-item__indicator' />
+                <span className="ds_accordion-item__indicator" />
                 <label
                     className="ds_accordion-item__label"
                     htmlFor={`${processedId}-control`}
@@ -58,14 +66,13 @@ const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
     );
 };
 
-const Accordion: React.FC<SGDS.Component.Accordion>
-    & { Item: React.FC<SGDS.Component.Accordion.Item> } = ({
+const Accordion = ({
     children,
     className,
     headingLevel = 'h3',
     hideOpenAll,
     ...props
-}) => {
+}: SGDS.Component.Accordion) => {
     const ref = useRef(null);
 
     useEffect(() => {
@@ -78,10 +85,6 @@ const Accordion: React.FC<SGDS.Component.Accordion>
         hideOpenAll = true;
     }
 
-    function processChild(child: any) {
-        return React.cloneElement(child, { headingLevel: headingLevel });
-    }
-
     return (
         <div
             className={[
@@ -106,13 +109,15 @@ const Accordion: React.FC<SGDS.Component.Accordion>
                 </button>
             )}
 
-            {Children.map(children, child => processChild(child))}
+            <AccordionHeadingLevelContext value={headingLevel}>
+                {children}
+            </AccordionHeadingLevelContext>
         </div>
     );
 };
 
 Accordion.displayName = 'Accordion';
-AccordionItem.displayName = 'AccordionItem';
+AccordionItem.displayName = 'Accordion.Item';
 Accordion.Item = AccordionItem;
 
 export default Accordion;

package/src/components/AspectBox/AspectBox.tsx

@@ -2,12 +2,12 @@ import React, { Children, useEffect, useRef } from 'react';
 // @ts-ignore
 import DSAspectBox from '@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback';
 
-const AspectBox: React.FC<SGDS.Component.AspectBox> = ({
+const AspectBox = ({
     children,
     className,
     ratio,
     ...props
-}) => {
+}: SGDS.Component.AspectBox) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/BackToTop/BackToTop.tsx

@@ -3,11 +3,11 @@ import Icon from '../../common/Icon';
 // @ts-ignore
 import DSBackToTop from '@scottish-government/design-system/src/components/back-to-top/back-to-top';
 
-const BackToTop: React.FC<SGDS.Component.BackToTop> = ({
+const BackToTop = ({
     className,
     href = '#page-top',
     ...props
-}) => {
+}: SGDS.Component.BackToTop) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -2,20 +2,20 @@ import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import Breadcrumbs from './Breadcrumbs';
 
-const ITEMS = [
-    { href: 'home', title: 'Home' },
-    { href: 'category', title: 'Category' },
-    { title: 'Page' }
-];
+const LINK_HREF = '#home';
+const LINK_TEXT = 'Home';
 
-test('renders correctly', () => {
+test('breadcrumbs render correctly', () => {
     render(
-        <Breadcrumbs items={ITEMS} />
+        <Breadcrumbs>
+            <Breadcrumbs.Item href="home">Home</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="category">Category</Breadcrumbs.Item>
+            <Breadcrumbs.Item>Page</Breadcrumbs.Item>
+        </Breadcrumbs>
     );
 
     const nav = screen.getByRole('navigation');
     const list = within(nav).getByRole('list');
-    const listItems = within(list).getAllByRole('listitem');
 
     // check nav
     expect(nav).toHaveAttribute('aria-label', 'Breadcrumb');
@@ -23,67 +23,98 @@ test('renders correctly', () => {
     // check list
     expect(list.tagName).toEqual('OL');
     expect(list).toHaveClass('ds_breadcrumbs');
+});
+
+test('passing additional props to breadcrumbs', () => {
+    render(
+        <Breadcrumbs data-test="foo"/>
+    );
+
+    const nav = screen.getByRole('navigation');
+    expect(nav.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes to breadcrumbs', () => {
+    render(
+        <Breadcrumbs className="foo"/>
+    );
+
+    const nav = screen.getByRole('navigation');
+    expect(nav).toHaveClass('foo');
+});
 
-    // check items
-    expect(listItems.length).toEqual(ITEMS.length);
+test('breadcrumb item with link', () => {
+    render(
+        <Breadcrumbs.Item href={LINK_HREF}>{LINK_TEXT}</Breadcrumbs.Item>
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('link');
+
+    expect(item).toHaveClass('ds_breadcrumbs__item');
+    expect(item?.tagName).toEqual('LI');
 
-    listItems.forEach((item, index) => {
-        expect(item).toHaveClass('ds_breadcrumbs__item');
+    expect(link).toHaveClass('ds_breadcrumbs__link');
+    expect(link).toHaveAttribute('href', LINK_HREF);
+    expect(link?.tagName).toEqual('A');
+    expect(link?.textContent).toEqual(LINK_TEXT);
+});
+
+test('breadcrumb item without link', () => {
+    render(
+        <Breadcrumbs.Item>{LINK_TEXT}</Breadcrumbs.Item>
+    );
 
-        const link = within(item).queryByRole('link');
+    const item = screen.getByRole('listitem');
+    const link = within(item).queryByRole('link');
 
-        if (index + 1 < listItems.length) {
-            expect(link).toBeDefined();
-            expect(link).toHaveClass('ds_breadcrumbs__link');
-        } else {
-            expect(link).toBeNull();
-        }
-    });
+    expect(item).toHaveClass('ds_breadcrumbs__item');
+    expect(item?.tagName).toEqual('LI');
+    expect(item?.textContent).toEqual(LINK_TEXT);
 
-    // check href matches correct item
-    const categoryLink = within(list).getByRole('link', { name: 'Category' });
-    expect(categoryLink).toHaveAttribute('href', 'category');
+    expect(link).not.toBeInTheDocument();
 });
 
-test('renders with last item hidden', () => {
+test('hidden breadcrumb item', () => {
     render(
-        <Breadcrumbs
-            hideLastItem
-            items={ITEMS}
-        />
+        <Breadcrumbs.Item data-testid="Breadcrumbs.Item" isHidden>{LINK_TEXT}</Breadcrumbs.Item>
     );
 
-    // check still 3 items
-    const list = screen.getByRole('list');
-    const listItems = within(list).getAllByRole('listitem');
-    expect(listItems.length).toEqual(3);
+    const item = screen.getByRole('listitem');
+    expect(item).toHaveClass('visually-hidden');
+});
+
+test('renders breadcrumb with custom element', () => {
+    render(
+        <Breadcrumbs.Item href="category" linkComponent={
+            ({ className, ...props }) => (
+                <span role="link" className={className} {...props}/>
+            )}>
+            {LINK_TEXT}
+        </Breadcrumbs.Item>
+    );
 
-    // check last item is hidden
-    const pageCrumb = within(list).getByText('Page');
-    expect(pageCrumb).toHaveClass('visually-hidden');
-    expect(pageCrumb.tagName).toEqual('LI');
+    const item = screen.getByRole('listitem');
+    const link = within(item).queryByRole('link');
+
+    expect(link?.tagName).toEqual('SPAN');
+    expect(link?.textContent).toEqual(LINK_TEXT);
 });
 
-test('passing additional props', () => {
+test('passing additional props to breadcrumb item', () => {
     render(
-        <Breadcrumbs
-            items={ITEMS}
-            data-test="foo"
-        />
+        <Breadcrumbs.Item data-test="foo"/>
     );
 
-    const nav = screen.getByRole('navigation');
+    const nav = screen.getByRole('listitem');
     expect(nav.dataset.test).toEqual('foo');
 });
 
-test('passing additional CSS classes', () => {
+test('passing additional CSS classes to breadcrumb item', () => {
     render(
-        <Breadcrumbs
-            items={ITEMS}
-            className="foo"
-        />
+        <Breadcrumbs.Item className="foo"/>
     );
 
-    const nav = screen.getByRole('navigation');
+    const nav = screen.getByRole('listitem');
     expect(nav).toHaveClass('foo');
 });