@scottish-government/designsystem-react 0.7.0 → 0.8.0

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

@@ -216,7 +216,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

@@ -5,7 +5,7 @@ import DSAccordion from '@scottish-government/design-system/src/components/accor
 
 let accordionItemCounter = 0;
 
-const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
+const AccordionItem = ({
     children,
     className,
     headingLevel = 'h3',
@@ -13,7 +13,7 @@ const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
     open = false,
     title,
     ...props
-}) => {
+}: SGDS.Component.Accordion.Item) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${accordionItemCounter}`;
     return (
@@ -43,7 +43,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 +58,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(() => {
@@ -112,7 +111,7 @@ const Accordion: React.FC<SGDS.Component.Accordion>
 };
 
 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,15 +2,16 @@ 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');
@@ -23,67 +24,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');
+});
 
-    // check items
-    expect(listItems.length).toEqual(ITEMS.length);
+test('passing additional CSS classes to breadcrumbs', () => {
+    render(
+        <Breadcrumbs className="foo"/>
+    );
+
+    const nav = screen.getByRole('navigation');
+    expect(nav).toHaveClass('foo');
+});
 
-    listItems.forEach((item, index) => {
-        expect(item).toHaveClass('ds_breadcrumbs__item');
+test('breadcrumb item with link', () => {
+    render(
+        <Breadcrumbs.Item href={LINK_HREF}>{LINK_TEXT}</Breadcrumbs.Item>
+    );
 
-        const link = within(item).queryByRole('link');
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('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');
 
-    // check href matches correct item
-    const categoryLink = within(list).getByRole('link', { name: 'Category' });
-    expect(categoryLink).toHaveAttribute('href', 'category');
+    expect(link).toHaveClass('ds_breadcrumbs__link');
+    expect(link).toHaveAttribute('href', LINK_HREF);
+    expect(link?.tagName).toEqual('A');
+    expect(link?.textContent).toEqual(LINK_TEXT);
 });
 
-test('renders with last item hidden', () => {
+test('breadcrumb item without link', () => {
     render(
-        <Breadcrumbs
-            hideLastItem
-            items={ITEMS}
-        />
+        <Breadcrumbs.Item>{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');
+    const link = within(item).queryByRole('link');
+
+    expect(item).toHaveClass('ds_breadcrumbs__item');
+    expect(item?.tagName).toEqual('LI');
+    expect(item?.textContent).toEqual(LINK_TEXT);
 
-    // check last item is hidden
-    const pageCrumb = within(list).getByText('Page');
-    expect(pageCrumb).toHaveClass('visually-hidden');
-    expect(pageCrumb.tagName).toEqual('LI');
+    expect(link).not.toBeInTheDocument();
 });
 
-test('passing additional props', () => {
+test('hidden breadcrumb item', () => {
     render(
-        <Breadcrumbs
-            items={ITEMS}
-            data-test="foo"
-        />
+        <Breadcrumbs.Item data-testid="Breadcrumbs.Item" isHidden>{LINK_TEXT}</Breadcrumbs.Item>
     );
 
-    const nav = screen.getByRole('navigation');
+    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>
+    );
+
+    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 to breadcrumb item', () => {
+    render(
+        <Breadcrumbs.Item data-test="foo"/>
+    );
+
+    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');
 });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,53 +1,53 @@
-const Breadcrumb: React.FC<SGDS.Component.Breadcrumbs.Item> = ({
-    hidden,
+const BreadcrumbItem = ({
+    children,
+    isHidden,
     href,
-    title
-}) => {
+    linkComponent,
+    ...props
+}: SGDS.Component.Breadcrumbs.Item) => {
+    const BREADCRUMB_LINK_CLASSNAME = 'ds_breadcrumbs__link';
+
+    function processChildren(children: React.ReactNode) {
+        if (linkComponent) {
+            return linkComponent({ className: BREADCRUMB_LINK_CLASSNAME, href, children });
+        } else if (href) {
+            return <a href={href} className={BREADCRUMB_LINK_CLASSNAME}>{children}</a>;
+        } else {
+            return children;
+        }
+    }
+
     return (
-        <li
-            className={[
-                'ds_breadcrumbs__item',
-                hidden && 'visually-hidden'
-            ].join(' ')}
+        <li className={[
+            'ds_breadcrumbs__item',
+            isHidden && 'visually-hidden'
+        ].join(' ')}
+            {...props}
         >
-
-            {href ? (<a className="ds_breadcrumbs__link" href={href}>
-                {title}
-            </a>) : (title)}
+            {processChildren(children)}
         </li>
     );
 };
 
-/**
- * @param {boolean} hideLastItem
- * @param {Array} items
- * @param {Object} props - Properties for the element
- * @returns {JSX.Element} - The element
- */
-const Breadcrumbs: React.FC<SGDS.Component.Breadcrumbs> = ({
-    hideLastItem,
-    items,
+const Breadcrumbs = ({
+    children,
     ...props
-}) => {
+}: SGDS.Component.Breadcrumbs & { Item: SGDS.Component.Breadcrumbs.Item }) => {
     return (
         <nav
             aria-label="Breadcrumb"
             {...props}
         >
             <ol className="ds_breadcrumbs">
-                {items && items.map((item, index: number) => (
-                    <Breadcrumb
-                        title={item.title}
-                        href={item.href}
-                        hidden={(hideLastItem) && index + 1 === items.length}
-                        key={'breadcrumb' + index}
-                    />
-                ))}
+                {children}
             </ol>
         </nav>
     );
 };
 
 Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbItem.displayName = 'Breadcrumbs.Item';
+
+Breadcrumbs.Item = BreadcrumbItem;
 
 export default Breadcrumbs;

package/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import Icon from '../../common/Icon';
 import ScreenReaderText from '../../common/ScreenReaderText';
 import WrapperTag from '../../common/WrapperTag';
 
-const Button: React.FC<SGDS.Component.Button> = ({
+const Button = ({
     buttonStyle,
     children,
     className,
@@ -15,7 +15,7 @@ const Button: React.FC<SGDS.Component.Button> = ({
     type = 'button',
     width,
     ...props
-}) => {
+}: SGDS.Component.Button) => {
     // determine which HTML tag to use
     let tagName = 'button';
     if (href) {