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

package/src/components/Pagination/Pagination.tsx

@@ -1,31 +1,51 @@
 import Icon from "../../common/Icon";
 
-export const Page: React.FC<SGDS.Component.Pagination.Page> = ({
+export const Page = ({
     ariaLabel,
+    children,
+    className,
     current = false,
     href,
-    onClick,
-    text
-}) => {
+    linkComponent,
+    onClick
+}: SGDS.Component.Pagination.Page) => {
     function handleClick(event: React.MouseEvent) {
         if (typeof onClick === 'function') {
             onClick(event);
         }
     }
 
+    function processChildren(children: React.ReactNode) {
+        const classNames = [
+            'ds_pagination__link',
+            className,
+            current ? 'ds_current' : undefined
+        ].join(' ');
+
+        const linkProps: SGDS.LinkComponentProps = {
+            'aria-label': ariaLabel,
+            href: href,
+            onClick: handleClick
+        };
+
+        if (current) {
+            linkProps['aria-current'] = 'page';
+        }
+
+        if (linkComponent) {
+            return linkComponent({ className: classNames, children: children, ...linkProps });
+        } else if (href) {
+            return (
+                <a href={href} className={classNames} {...linkProps}>
+                    {children}
+                </a>
+            );
+        }
+    }
+
     return (
         <li className="ds_pagination__item">
-            <a aria-label={ariaLabel}
-                className={[
-                    'ds_pagination__link',
-                    current ? 'ds_current' : undefined
-                ].join(' ')}
-                href={href}
-                aria-current={current ? "page" : undefined}
-                onClick={handleClick}
-            >
-                <span className="ds_pagination__link-label">{text}</span>
-            </a>
+            {processChildren(children)}
         </li>
     );
 };
@@ -38,7 +58,7 @@ export const Ellipsis = () => {
     );
 };
 
-const Pagination: React.FC<SGDS.Component.Pagination> = ({
+const Pagination = ({
     ariaLabel = 'Pages',
     className,
     onClick,
@@ -46,8 +66,9 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
     page = 1,
     pattern = '/search?page=$1',
     totalPages,
+    linkComponent,
     ...props
-}) => {
+}: SGDS.Component.Pagination) => {
     padding = Number(padding);
     page = Number(page);
 
@@ -93,12 +114,16 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
         >
             <ul className="ds_pagination__list">
                 {page > 1 && (
-                    <li className="ds_pagination__item">
-                        <a aria-label="Previous page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page - 1))} data-search="pagination-previous" onClick={onClick}>
-                            <Icon icon="ChevronLeft" />
-                            <span className="ds_pagination__link-label">Previous</span>
-                        </a>
-                    </li>
+                    <Page
+                        ariaLabel="Previous page"
+                        className="ds_pagination__link--text  ds_pagination__link--icon"
+                        data-search="pagination-previous"
+                        href={pattern.replace('$1', String(page - 1))}
+                        onClick={onClick}
+                    >
+                        <Icon icon="ChevronLeft" />
+                        <span className="ds_pagination__link-label">Previous</span>
+                    </Page>
                 )}
 
                 {includeFirst && (
@@ -107,8 +132,10 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
                             ariaLabel="Page 1"
                             href={pattern.replace('$1', String(1))}
                             onClick={onClick}
-                            text="1"
-                        />
+                            linkComponent={linkComponent}
+                        >
+                            <span className="ds_pagination__link-label">1</span>
+                        </Page>
                         <Ellipsis/>
                     </>
                 )}
@@ -116,13 +143,15 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
                 {pages && pages.map((item, index: number) => (
                     <Page
                         ariaLabel={`Page ${item}`}
-                        current={item === page}
                         href={pattern.replace('$1', String(item))}
+                        current={item === page}
                         key={`pagination${index}`}
+                        linkComponent={linkComponent}
                         onClick={onClick}
                         pattern={pattern}
-                        text={item.toString()}
-                    />
+                    >
+                        <span className="ds_pagination__link-label">{item.toString()}</span>
+                    </Page>
                 ))}
 
                 {includeLast && (
@@ -131,20 +160,25 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
                         <Page
                             ariaLabel={`Page ${totalPages}`}
                             href={pattern.replace('$1', String(totalPages))}
+                            linkComponent={linkComponent}
                             onClick={onClick}
                             pattern={pattern}
-                            text={totalPages.toString()}
-                        />
+                        >
+                            <span className="ds_pagination__link-label">{totalPages.toString()}</span>
+                        </Page>
                     </>
                 )}
 
                 {page < totalPages && (
-                    <li className="ds_pagination__item">
-                        <a aria-label="Next page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page + 1))} data-search="pagination-next" onClick={onClick}>
-                            <span className="ds_pagination__link-label">Next</span>
-                            <Icon icon="ChevronRight" />
-                        </a>
-                    </li>
+                    <Page
+                        ariaLabel="Next page"
+                        href={pattern.replace('$1', String(page + 1))}
+                        className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon"
+                        onClick={onClick}
+                    >
+                        <span className="ds_pagination__link-label">Next</span>
+                        <Icon icon="ChevronRight" />
+                    </Page>
                 )}
 
             </ul>

package/src/components/PhaseBanner/PhaseBanner.tsx

@@ -1,12 +1,11 @@
 import Tag from "../Tag/Tag";
 
-const PhaseBanner: React.FC<SGDS.Component.PhaseBanner> = ({
+const PhaseBanner = ({
     children,
     className,
-    content,
     phaseName,
     ...props
-}) => {
+}: SGDS.Component.PhaseBanner) => {
     return (
         <div
             className={[
@@ -17,9 +16,9 @@ const PhaseBanner: React.FC<SGDS.Component.PhaseBanner> = ({
         >
             <div className="ds_wrapper">
                 <p className="ds_phase-banner__content">
-                    {phaseName && <Tag title={phaseName} className="ds_phase-banner__tag" />}
+                    {phaseName && <Tag className="ds_phase-banner__tag">{phaseName}</Tag>}
                     <span className="ds_phase-banner__text">
-                        {content ? content : children || "This is a new service"}
+                        {children || "This is a new service"}
                     </span>
                 </p>
             </div>

package/src/components/Question/Question.test.tsx

@@ -46,7 +46,7 @@ test('question with error', () => {
     const ERROR_MESSAGE_TEXT = 'My error message';
 
     render(
-        <Question error errorMessage={ERROR_MESSAGE_TEXT}>
+        <Question hasError errorMessage={ERROR_MESSAGE_TEXT}>
         </Question>
     );
 

package/src/components/Question/Question.tsx

@@ -2,29 +2,29 @@ import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import HintText from '../../common/HintText';
 import WrapperTag from '../../common/WrapperTag';
 
-const Question: React.FC<SGDS.Component.Question> = function ({
+const Question = function ({
     children,
     className,
-    error,
     errorMessage,
+    hasError,
     hintText,
     legend,
     tagName = 'div',
     ...props
-}) {
+}: SGDS.Component.Question) {
     return (
         <WrapperTag
             tagName={tagName}
             className={[
                 'ds_question',
-                error && 'ds_question--error',
+                hasError && 'ds_question--error',
                 className
             ].join(' ')}
             {...props}
         >
             {legend && <legend>{legend}</legend>}
             {hintText && <HintText text={hintText} />}
-            {error && errorMessage && <ErrorMessage text={errorMessage} />}
+            {hasError && errorMessage && <ErrorMessage text={errorMessage} />}
             {children}
         </WrapperTag>
     );

package/src/components/RadioButton/RadioButton.test.tsx

@@ -1,103 +1,10 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import RadioGroup, { Radio } from './RadioButton';
-
-test('radio 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',
-        },
-        {
-            id: 'none',
-            label: 'I do not receive any of these benefits',
-        }
-    ];
-    const GROUP_NAME = "foo"
-
-    render(
-        <RadioGroup name={GROUP_NAME} items={ITEMS} />
-    );
-
-    const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0].parentElement?.parentElement;
-    expect(radios.length).toEqual(ITEMS.length);
-    expect(groupContainer).toHaveClass('ds_radios', 'ds_field-group');
-});
-
-test('inline radio group', () => {
-    const ITEMS = [
-        {
-            id: 'radio-yes',
-            label: 'Yes'
-        },
-        {
-            id: 'radio-no',
-            label: 'No'
-        }
-    ];
-    const GROUP_NAME = "yesno"
-
-    render(
-        <RadioGroup inline name={GROUP_NAME} items={ITEMS} />
-    );
-
-
-    const radio = screen.getAllByRole('radio')[0];
-    const groupContainer = radio.parentElement?.parentElement;
-    expect(groupContainer).toHaveClass('ds_field-group--inline');
-});
-
-test('radio group passes all expected item params', () => {
-    const ONBLUR_FUNCTION = vi.fn();
-    const ONCHANGE_FUNCTION = vi.fn();
-    const GROUP_NAME = "foo"
-
-    render(
-        <RadioGroup name={GROUP_NAME} small items={[
-            {
-                checked: true,
-                exclusive: true,
-                hintText: 'hint text',
-                id: 'myid',
-                label: 'label text',
-                onBlur: {ONBLUR_FUNCTION},
-                onChange: {ONCHANGE_FUNCTION},
-                small: true
-            }
-        ]}/>
-    );
-
-    const radio = screen.getByRole('radio');
-    const radioContainer = radio.parentElement;
-    const hintText = screen.getByText('hint text');
-
-    expect(radio).toHaveAttribute('checked');
-    expect(radio).toHaveAttribute('name', GROUP_NAME);
-    expect(radio.id).toEqual('myid');
-    expect(radioContainer).toHaveClass('ds_radio--small');
-    expect(hintText).toBeInTheDocument();
-    expect(radio).toHaveAttribute('aria-describedby', hintText.id);
-
-    // fireEvent.blur(radio);
-    // expect(ONBLUR_FUNCTION).toHaveBeenCalled();
-
-    // fireEvent.click(radio);
-    // expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
-});
+import RadioButton from './RadioButton';
 
 test('individual radio renders correctly', () => {
     render(
-        <Radio name="benefitType" label="Pension Credit" id="pensioncredit" />
+        <RadioButton name="benefitType" label="Pension Credit" id="pensioncredit" />
     );
 
     const radio = screen.getByRole('radio');
@@ -117,7 +24,7 @@ test('individual radio renders correctly', () => {
 
 test('checked radio', () => {
     render(
-        <Radio name="benefitType" checked label="Pension Credit" id="pensioncredit" />
+        <RadioButton name="benefitType" checked label="Pension Credit" id="pensioncredit" />
     );
 
     const radio = screen.getByRole('radio');
@@ -129,7 +36,7 @@ test('radio with blur fn', () => {
     const ONBLUR_FUNCTION = vi.fn();
 
     render(
-        <Radio onBlur={ONBLUR_FUNCTION} name="benefitType" label="Pension Credit" id="pensioncredit" />
+        <RadioButton onBlur={ONBLUR_FUNCTION} name="benefitType" label="Pension Credit" id="pensioncredit" />
     );
 
     const radio = screen.getByRole('radio');
@@ -143,7 +50,7 @@ test('radio with change fn', () => {
     const ONCHANGE_FUNCTION = vi.fn();
 
     render(
-        <Radio onChange={ONCHANGE_FUNCTION} name="benefitType" label="Pension Credit" id="pensioncredit" />
+        <RadioButton onChange={ONCHANGE_FUNCTION} name="benefitType" label="Pension Credit" id="pensioncredit" />
     );
 
     const radio = screen.getByRole('radio');
@@ -155,7 +62,7 @@ test('radio with change fn', () => {
 
 test('radio with hint text', () => {
     render(
-        <Radio hintText="hint text" name="benefitType" label="Pension Credit" id="pensioncredit" />
+        <RadioButton hintText="hint text" name="benefitType" label="Pension Credit" id="pensioncredit" />
     );
 
     const hintText = screen.getByText('hint text');
@@ -167,7 +74,7 @@ test('radio with hint text', () => {
 
 test('small radio', () => {
     render(
-        <Radio small name="benefitType" label="Pension Credit" id="pensioncredit" />
+        <RadioButton small name="benefitType" label="Pension Credit" id="pensioncredit" />
     );
 
     const radio = screen.getByRole('radio');
@@ -175,29 +82,3 @@ test('small radio', () => {
 
     expect(radioContainer).toHaveClass('ds_radio--small');
 });
-
-test('passing additional props', () => {
-    render(
-        <RadioGroup data-test="foo" items={[{
-            id: 'universal-credit',
-            label: 'Universal Credit'
-        }]} />
-    );
-
-    const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0]?.parentElement?.parentElement;
-    expect(groupContainer?.dataset.test).toEqual('foo');
-});
-
-test('passing additional CSS classes', () => {
-    render(
-        <RadioGroup className="foo" items={[{
-            id: 'universal-credit',
-            label: 'Universal Credit'
-        }]} />
-    );
-
-    const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0]?.parentElement?.parentElement;
-    expect(groupContainer).toHaveClass('foo', 'ds_radios');
-});

package/src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,9 @@
+import { useContext } from 'react';
+
 import HintText from '../../common/HintText';
+import { CheckboxRadioContext } from '../../utils/context';
 
-export const Radio: React.FC<SGDS.Component.RadioButton> = ({
+const RadioButton = ({
     checked,
     hintText,
     id,
@@ -9,7 +12,7 @@ export const Radio: React.FC<SGDS.Component.RadioButton> = ({
     onBlur,
     onChange,
     small
-}) => {
+}: SGDS.Component.RadioButton) => {
     const hintTextId = `hint-text-${id}`;
 
     function handleBlur(event: React.FocusEvent) {
@@ -24,6 +27,9 @@ export const Radio: React.FC<SGDS.Component.RadioButton> = ({
         }
     }
 
+    small = small || useContext(CheckboxRadioContext).small;
+    name = name || useContext(CheckboxRadioContext).name;
+
     return (
         <div
             className={[
@@ -48,43 +54,6 @@ export const Radio: React.FC<SGDS.Component.RadioButton> = ({
     );
 };
 
-const RadioGroup: React.FC<SGDS.Component.RadioButton.Group> = ({
-    className,
-    inline,
-    items,
-    name,
-    small,
-    ...props
-}) => {
-    return (
-        <div
-            className={[
-                'ds_radios',
-                'ds_field-group',
-                inline && 'ds_field-group--inline',
-                className
-            ].join(' ')}
-            {...props}
-        >
-
-            {items && items.map((item, index: number) => (
-                <Radio
-                    checked={item.checked}
-                    hintText={item.hintText}
-                    id={item.id}
-                    key={'radio' + index}
-                    label={item.label}
-                    name={name}
-                    onBlur={item.onBlur}
-                    onChange={item.onChange}
-                    small={small || item.small}
-                />
-            ))}
-        </div>
-    )
-};
-
-Radio.displayName = 'Radio';
-RadioGroup.displayName = 'RadioGroup';
+RadioButton.displayName = 'RadioButton';
 
-export default RadioGroup;
+export default RadioButton;

package/src/components/RadioButton/RadioGroup.test.tsx

@@ -0,0 +1,65 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import RadioButton from './RadioButton';
+import RadioGroup from './RadioGroup';
+
+test('radio group renders correctly', () => {
+    render(
+        <RadioGroup name="foo" data-testid="radiogroup">
+            <RadioButton id="banana" label="Banana" />
+        </RadioGroup>
+    );
+    const radioGroup = screen.getByTestId('radiogroup');
+    expect(radioGroup).toHaveClass('ds_radios', 'ds_field-group');
+    expect(radioGroup).not.toHaveClass('ds_field-group--inline');
+
+    const radio = screen.getByRole('radio');
+    const radioContainer = radio.parentElement;
+    expect(radioContainer).not.toHaveClass('ds_radio--small');
+});
+
+test('radio group passes all expected item params', () => {
+    const RADIO_NAME = 'radioname';
+
+    render(
+        <RadioGroup name={RADIO_NAME} small>
+            <RadioButton id="banana" />
+            <p>foo</p>
+        </RadioGroup>
+    );
+
+    const radio = screen.getByRole('radio');
+    const radioContainer = radio.parentElement;
+    expect(radio).toHaveAttribute('name', RADIO_NAME);
+    expect(radioContainer).toHaveClass('ds_radio--small');
+});
+
+test('inline radio group', () => {
+    render(
+        <RadioGroup inline>
+            <RadioButton id="banana" />
+        </RadioGroup>
+    );
+
+    const radio = screen.getAllByRole('radio')[0];
+    const groupContainer = radio.parentElement?.parentElement;
+    expect(groupContainer).toHaveClass('ds_field-group--inline');
+});
+
+test('passing additional props', () => {
+    render(
+        <RadioGroup data-test="foo" data-testid="radiogroup"/>
+    );
+
+    const radioGroup = screen.getByTestId('radiogroup');
+    expect(radioGroup?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <RadioGroup className="foo" data-testid="radiogroup"/>
+    );
+
+    const radioGroup = screen.getByTestId('radiogroup');
+    expect(radioGroup).toHaveClass('foo');
+});

package/src/components/RadioButton/RadioGroup.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { CheckboxRadioContext } from '../../utils/context';
+
+const RadioGroup = ({
+    children,
+    className,
+    inline,
+    name,
+    small = false,
+    ...props
+}: SGDS.Component.RadioButton.Group) => {
+    return (
+        <div
+            className={[
+                'ds_radios',
+                'ds_field-group',
+                inline && 'ds_field-group--inline',
+                className
+            ].join(' ')}
+            {...props}
+        >
+            <CheckboxRadioContext value={{ small, name }}>
+                {children}
+            </CheckboxRadioContext>
+        </div>
+    );
+};
+
+RadioGroup.displayName = 'RadioGroup';
+
+export default RadioGroup;