@scottish-government/designsystem-react 0.7.1 → 0.8.0

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,75 +1,6 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import CheckboxGroup, { Checkbox } from './Checkbox';
-
-test('checkbox group renders correct children', () => {
-    const ITEMS = [
-        {
-            id: 'universal-credit',
-            label: 'Universal Credit',
-            checked: true
-        },
-        {
-            id: 'pensioncredit',
-            label: 'Pension Credit'
-        },
-        {
-            id: 'jsa',
-            label: 'Income-based Job Seeker\'s Allowance',
-        },
-        {
-            exclusive: true,
-            id: 'none',
-            label: 'No, I do not receive any of these benefits',
-        }
-    ];
-
-    render(
-        <CheckboxGroup items={ITEMS} />
-    );
-
-    const checkboxes = screen.getAllByRole('checkbox');
-    const groupContainer = checkboxes[0].parentElement?.parentElement;
-    expect(checkboxes.length).toEqual(ITEMS.length);
-    expect(groupContainer).toHaveClass('ds_checkboxes', 'ds_field-group');
-});
-
-test('checkbox group passes all expected item params', () => {
-    const ONBLUR_FUNCTION = vi.fn();
-    const ONCHANGE_FUNCTION = vi.fn();
-
-    render(
-        <CheckboxGroup small items={[
-            {
-                checked: true,
-                exclusive: true,
-                hintText: 'hint text',
-                id: 'myid',
-                label: 'label text',
-                onBlur: {ONBLUR_FUNCTION},
-                onChange: {ONCHANGE_FUNCTION},
-                small: true
-            }
-        ]}/>
-    );
-
-    const checkbox = screen.getByRole('checkbox');
-    const checkboxContainer = checkbox.parentElement;
-    const hintText = screen.getByText('hint text');
-
-    expect(checkbox).toHaveAttribute('data-behaviour', 'exclusive');
-    expect(checkbox).toHaveAttribute('checked');
-    expect(checkbox.id).toEqual('myid');
-    expect(checkboxContainer).toHaveClass('ds_checkbox--small');
-    expect(hintText).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('aria-describedby', hintText.id);
-
-    // fireEvent.blur(checkbox);
-    // expect(ONBLUR_FUNCTION).toHaveBeenCalled();
-
-    // fireEvent.click(checkbox);
-    // expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
-});
+import Checkbox from './Checkbox';
 
 test('individual checkbox renders correctly', () => {
     render(
@@ -165,29 +96,3 @@ test('small checkbox', () => {
 
     expect(checkboxContainer).toHaveClass('ds_checkbox--small');
 });
-
-test('passing additional props', () => {
-    render(
-        <CheckboxGroup data-test="foo" items={[{
-            id: 'universal-credit',
-            label: 'Universal Credit'
-        }]} />
-    );
-
-    const checkboxes = screen.getAllByRole('checkbox');
-    const groupContainer = checkboxes[0]?.parentElement?.parentElement;
-    expect(groupContainer?.dataset.test).toEqual('foo');
-});
-
-test('passing additional CSS classes', () => {
-    render(
-        <CheckboxGroup className="foo" items={[{
-            id: 'universal-credit',
-            label: 'Universal Credit'
-        }]} />
-    );
-
-    const checkboxes = screen.getAllByRole('checkbox');
-    const groupContainer = checkboxes[0]?.parentElement?.parentElement;
-    expect(groupContainer).toHaveClass('foo', 'ds_checkboxes');
-});

package/src/components/Checkbox/Checkbox.tsx

@@ -1,9 +1,6 @@
-import { useEffect, useRef } from 'react';
-// @ts-ignore
-import DSCheckboxes from '@scottish-government/design-system/src/forms/checkbox/checkboxes'
 import HintText from '../../common/HintText';
 
-export const Checkbox: React.FC<SGDS.Component.Checkbox> = ({
+const Checkbox = ({
     checked,
     hintText,
     id,
@@ -13,7 +10,7 @@ export const Checkbox: React.FC<SGDS.Component.Checkbox> = ({
     onBlur,
     onChange,
     small
-}) => {
+}: SGDS.Component.Checkbox) => {
     const hintTextId = `hint-text-${id}`;
     const behaviour = exclusive && 'exclusive';
 
@@ -58,55 +55,6 @@ export const Checkbox: React.FC<SGDS.Component.Checkbox> = ({
     );
 };
 
-/**
- * @param {Object} props - Properties for the element
- * @param {Array} items - Checkboxes
- * @param {boolean} small - Use the small display style for all checkboxes
- * @returns {JSX.Element} - The element
- */
-export const CheckboxGroup: React.FC<SGDS.Component.Checkbox.Group> = ({
-    className,
-    items,
-    small,
-    ...props
-}) => {
-    const ref = useRef(null);
-
-    useEffect(() => {
-        if (ref.current) {
-            new DSCheckboxes(ref.current).init();
-        }
-    }, [ref]);
-
-    return (
-        <div
-            className={[
-                'ds_checkboxes',
-                'ds_field-group',
-                className
-            ].join(' ')}
-            data-module="ds-checkboxes"
-            ref={ref}
-            {...props}
-        >
-            {items && items.map((item, index: number) => (
-                <Checkbox
-                    exclusive={item.exclusive}
-                    checked={item.checked}
-                    hintText={item.hintText}
-                    id={item.id}
-                    key={'checkbox' + index}
-                    label={item.label}
-                    onBlur={item.onBlur}
-                    onChange={item.onChange}
-                    small={small || item.small}
-                />
-            ))}
-        </div>
-    )
-};
-
 Checkbox.displayName = 'Checkbox';
-CheckboxGroup.displayName = 'CheckboxGroup';
 
-export default CheckboxGroup;
+export default Checkbox;

package/src/components/Checkbox/CheckboxGroup.test.tsx

@@ -0,0 +1,37 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Checkbox from './Checkbox';
+import CheckboxGroup from './CheckboxGroup';
+
+test('checkbox group renders correctly', () => {
+    render(
+        <CheckboxGroup data-testid="checkboxgroup">
+            <Checkbox id="banana" label="Banana" />
+            Foo
+        </CheckboxGroup>
+    );
+    const checkboxGroup = screen.getByTestId('checkboxgroup');
+    expect(checkboxGroup).toHaveClass('ds_checkboxes', 'ds_field-group');
+
+    const checkbox = screen.getByRole('checkbox');
+    const checkboxContainer = checkbox.parentElement;
+    expect(checkboxContainer).not.toHaveClass('ds_checkbox--small');
+});
+
+test('passing additional props', () => {
+    render(
+        <CheckboxGroup data-testid="checkboxgroup" data-test="foo" />
+    );
+
+    const checkboxGroup = screen.getByTestId('checkboxgroup');
+    expect(checkboxGroup?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <CheckboxGroup data-testid="checkboxgroup" className="foo" />
+    );
+
+    const checkboxGroup = screen.getByTestId('checkboxgroup');
+    expect(checkboxGroup).toHaveClass('foo', 'ds_checkboxes');
+});

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,46 @@
+import React, { Children, useEffect, useRef } from 'react';
+import Checkbox from './Checkbox';
+// @ts-ignore
+import DSCheckboxes from '@scottish-government/design-system/src/forms/checkbox/checkboxes'
+
+export const CheckboxGroup = ({
+    children,
+    className,
+    small,
+    ...props
+}: SGDS.Component.Checkbox.Group) => {
+    function processChild(child: any) {
+        if (child && child.type === Checkbox) {
+            return React.cloneElement(child as React.ReactElement<SGDS.Component.Checkbox>, { small: small });
+        } else {
+            return child;
+        }
+    }
+
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSCheckboxes(ref.current).init();
+        }
+    }, [ref]);
+
+    return (
+        <div
+            className={[
+                'ds_checkboxes',
+                'ds_field-group',
+                className
+            ].join(' ')}
+            data-module="ds-checkboxes"
+            ref={ref}
+            {...props}
+        >
+            {Children.map(children, child => processChild(child))}
+        </div>
+    )
+};
+
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export default CheckboxGroup;

package/src/components/ConfirmationMessage/ConfirmationMessage.tsx

@@ -1,14 +1,14 @@
 import Icon from '../../common/Icon';
 import WrapperTag from '../../common/WrapperTag';
 
-const ConfirmationMessage: React.FC<SGDS.Component.ConfirmationMessage> = ({
+const ConfirmationMessage = ({
     ariaLive = 'polite',
     children,
     className,
     headingLevel = 'h3',
     title,
     ...props
-}) => {
+}: SGDS.Component.ConfirmationMessage) => {
     return (
         <div
             aria-live={ariaLive}

package/src/components/ContentsNav/ContentsNav.test.tsx

@@ -1,38 +1,20 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import ContentsNav, {Link} from './ContentsNav';
+import ContentsNav from './ContentsNav';
 
 const ITEM_HREF = '#foo';
 const ITEM_TITLE = 'My content';
+const LABEL_TEXT = 'Pages in this guide';
 
 test('contents nav renders correctly', () => {
-    const ITEMS = [
-        {
-            title: 'Apply for Blue Badge',
-            current: true
-        },
-        {
-            title: 'Eligibility',
-            href: '#2'
-        },
-        {
-            title: 'Using your Blue Badge',
-            href: '#3'
-        },
-        {
-            title: 'Report a lost, stolen or misuesd Blue Badge',
-            href: '#4'
-        },
-        {
-            title: 'Changing or handing back a Blue Badge',
-            href: '#5'
-        }
-    ];
-
-    const LABEL_TEXT = 'Pages in this guide';
-
     render(
-        <ContentsNav label={LABEL_TEXT} items={ITEMS} />
+        <ContentsNav ariaLabel={LABEL_TEXT}>
+            <ContentsNav.Item>Apply for Blue Badge</ContentsNav.Item>
+            <ContentsNav.Item href="#1">Eligibility</ContentsNav.Item>
+            <ContentsNav.Item href="#2">Using your Blue Badge</ContentsNav.Item>
+            <ContentsNav.Item href="#3">Report a lost, stolen or misuesd Blue Badge</ContentsNav.Item>
+            <ContentsNav.Item href="#4">Changing or handing back a Blue Badge</ContentsNav.Item>
+        </ContentsNav>
     )
 
     const contentsNav = screen.getByRole('navigation');
@@ -46,14 +28,13 @@ test('contents nav renders correctly', () => {
     expect(contentsNavTitle.textContent).toEqual('Contents');
     expect(contentsNavList).toHaveClass('ds_contents-nav__list');
     expect(contentsNavList.tagName).toEqual('UL');
-    expect(contentsNavList.children.length).toEqual(ITEMS.length);
 });
 
 test('contents nav with custom title', () => {
     const TITLE_TEXT = 'My title';
 
     render(
-        <ContentsNav title={TITLE_TEXT} items={[]} />
+        <ContentsNav title={TITLE_TEXT} />
     );
 
     const contentsNav = screen.getByRole('navigation');
@@ -63,7 +44,7 @@ test('contents nav with custom title', () => {
 
 test('contents nav item', () => {
     render(
-        <Link href={ITEM_HREF} title={ITEM_TITLE} />
+        <ContentsNav.Item href={ITEM_HREF}>{ITEM_TITLE}</ContentsNav.Item>
     );
 
     const listItem = screen.getByRole('listitem');
@@ -77,51 +58,63 @@ test('contents nav item', () => {
     expect(link).toHaveAttribute('href', ITEM_HREF);
 });
 
-test('contents nav current item with href', () => {
+test('contents nav item without href', () => {
     render(
-        <Link current href={ITEM_HREF} title={ITEM_TITLE} />
+        <ContentsNav.Item>{ITEM_TITLE}</ContentsNav.Item>
     );
 
     const listItem = screen.getByRole('listitem');
     const link = within(listItem).getByText(ITEM_TITLE);
 
-    expect(listItem.ariaCurrent).toEqual('page');
     expect(link.tagName).toEqual('SPAN');
-    expect(link).toHaveClass('ds_current');
+    expect(link).not.toHaveClass('ds_current');
 });
 
-test('contents nav current item without href', () => {
+test('current contents nav item with href', () => {
     render(
-        <Link current title={ITEM_TITLE} />
+        <ContentsNav.Item current href={ITEM_HREF}>{ITEM_TITLE}</ContentsNav.Item>
     );
 
     const listItem = screen.getByRole('listitem');
     const link = within(listItem).getByText(ITEM_TITLE);
 
-    expect(listItem.ariaCurrent).toEqual('page');
-    expect(link.tagName).toEqual('SPAN');
+    expect(link.tagName).toEqual('A');
     expect(link).toHaveClass('ds_current');
 });
 
-test('contents nav item without href', () => {
+test('current contents nav item without href', () => {
     render(
-        <Link title={ITEM_TITLE} />
+        <ContentsNav.Item current>{ITEM_TITLE}</ContentsNav.Item>
     );
 
     const listItem = screen.getByRole('listitem');
     const link = within(listItem).getByText(ITEM_TITLE);
 
     expect(link.tagName).toEqual('SPAN');
-    expect(link).not.toHaveClass('ds_current');
+    expect(link).toHaveClass('ds_current');
+});
+
+test('contents nav item with custom element', () => {
+    render(
+        <ContentsNav.Item href="category" linkComponent={
+            ({ className, ...props }) => (
+                <strong role="link" className={className} {...props}/>
+            )}>
+            {ITEM_TITLE}
+        </ContentsNav.Item>
+    );
+
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).queryByRole('link');
+
+    expect(link?.tagName).toEqual('STRONG');
+    expect(link?.textContent).toEqual(ITEM_TITLE);
 });
 
 test('passing additional props', () => {
     render(
-        <ContentsNav data-test="foo" items={[
-            {
-                title: 'Apply for Blue Badge',
-            }
-        ]} />
+        <ContentsNav data-test="foo"/>
     )
 
     const contentsNav = screen.getByRole('navigation');
@@ -130,11 +123,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <ContentsNav className="foo" items={[
-            {
-                title: 'Apply for Blue Badge',
-            }
-        ]} />
+        <ContentsNav className="foo"/>
     )
 
     const contentsNav = screen.getByRole('navigation');

package/src/components/ContentsNav/ContentsNav.tsx

@@ -1,42 +1,48 @@
-import WrapperTag from '../../common/WrapperTag';
+import React from 'react';
 
-export const Link: React.FC<SGDS.Component.ContentsNav.Link> = ({
+const ContentsNavItem = ({
+    children,
     current,
     href,
-    title
-}) => {
-    // determine which HTML tag to use
-    const tagName = href && !current ? 'a' : 'span';
+    linkComponent
+}: SGDS.Component.ContentsNav.ContentsNavItem) => {
+    const classNames = ['ds_contents-nav__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>;
+        } else {
+            return <span aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</span>;
+        }
+    }
 
     return (
         <li
-            aria-current={current && 'page' || undefined}
             className="ds_contents-nav__item"
         >
-            <WrapperTag
-                tagName={tagName}
-                className={[
-                    'ds_contents-nav__link',
-                    current && 'ds_current'
-                ].join(' ')}
-                href={!current ? href : undefined}
-            >
-                {title}
-            </WrapperTag>
+            {processChildren(children)}
         </li>
     );
 };
 
-const ContentsNav: React.FC<SGDS.Component.ContentsNav> = function ({
+const ContentsNav = ({
+    ariaLabel = 'Pages in this section',
+    children,
     className,
-    items,
-    label = 'Pages in this section',
     title = 'Contents',
     ...props
-}) {
+}: SGDS.Component.ContentsNav) => {
     return (
         <nav
-            aria-label={label}
+            aria-label={ariaLabel}
             className={[
                 'ds_contents-nav',
                 className
@@ -44,15 +50,16 @@ const ContentsNav: React.FC<SGDS.Component.ContentsNav> = function ({
             {...props}
         >
             <h2 className="ds_contents-nav__title">{title}</h2>
+
             <ul className="ds_contents-nav__list">
-                {items && items.map((item, index: number) => (
-                    <Link current={item.current} href={item.href} title={item.title} key={'link' + index} />
-                ))}
+                {children}
             </ul>
         </nav>
     );
 };
 
 ContentsNav.displayName = 'ContentsNav';
+ContentsNavItem.displayName = 'ContentsNav.Item';
+ContentsNav.Item = ContentsNavItem;
 
 export default ContentsNav;

package/src/components/CookieBanner/CookieBanner.tsx

@@ -3,13 +3,12 @@ import AbstractNotificationBanner from '../../common/AbstractNotificationBanner'
 // @ts-ignore
 import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';
 
-const CookieBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
-    & { Buttons?: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> } = ({
+const CookieBanner = ({
     children,
     className,
     title,
     ...props
-    }) => {
+}: SGDS.Common.AbstractNotificationBanner) => {
 
     return (
         <>
@@ -32,5 +31,6 @@ const CookieBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
 
 CookieBanner.displayName = 'CookieBanner';
 CookieBanner.Buttons = AbstractNotificationBanner.Buttons;
+CookieBanner.Buttons.displayName = 'CookieBanner.Buttons';
 
 export default CookieBanner;

package/src/components/DatePicker/DatePicker.test.tsx

@@ -211,8 +211,8 @@ test('date picker with error message', () => {
         <DatePicker
             id={DATE_PICKER_ID}
             label={LABEL_TEXT}
-            error
             errorMessage={ERROR_MESSAGE_TEXT}
+            hasError
         />
     );
 

package/src/components/DatePicker/DatePicker.tsx

@@ -4,12 +4,12 @@ import DSDatePicker from '@scottish-government/design-system/src/components/date
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import TextInput from '../TextInput/TextInput';
 
-const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
+const DatePicker = ({
     className,
     dateSelectCallback,
     disabledDates,
-    error,
     errorMessage,
+    hasError,
     hintText,
     id,
     iconPath = './',
@@ -23,7 +23,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
     value,
     width = 'fixed-10',
     ...props
-}) => {
+}: SGDS.Component.DatePicker) => {
     const ref = useRef(null);
 
     useEffect(() => {
@@ -68,7 +68,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
                     <div>
                         <TextInput
                             className="js-datepicker-date"
-                            error={!!error}
+                            hasError={!!hasError}
                             id={id + "-day"}
                             hintText={hintText}
                             label="Day"
@@ -83,7 +83,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
                     <div>
                         <TextInput
                             className="js-datepicker-month"
-                            error={!!error}
+                            hasError={!!hasError}
                             id={id + "-month"}
                             hintText={hintText}
                             label="Month"
@@ -98,7 +98,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
                     <div>
                         <TextInput
                             className="js-datepicker-year"
-                            error={!!error}
+                            hasError={!!hasError}
                             id={id + "-year"}
                             hintText={hintText}
                             label="Year"
@@ -112,7 +112,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
                 </fieldset>
             ) : (
                 <TextInput
-                    error={!!error}
+                    hasError={!!hasError}
                     errorMessage={errorMessage}
                     id={id}
                     hasButton

package/src/components/Details/Details.tsx

@@ -1,9 +1,9 @@
-const Details: React.FC<SGDS.Component.Details> = ({
+const Details = ({
     children,
     className,
     summary,
     ...props
-}) => {
+}: SGDS.Component.Details) => {
     return (
         <details
             className={[

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,10 +1,10 @@
-const ErrorMessage: React.FC<SGDS.Component.ErrorMessage> = ({
+const ErrorMessage = ({
     children,
     className,
     id,
     text,
     ...props
-}) => {
+}: SGDS.Component.ErrorMessage) => {
     return (
         <p
             className={[