@scottish-government/designsystem-react 0.7.0 → 0.8.0

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,6 @@
 import HintText from '../../common/HintText';
 
-export const Radio: React.FC<SGDS.Component.RadioButton> = ({
+const RadioButton = ({
     checked,
     hintText,
     id,
@@ -9,7 +9,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) {
@@ -48,43 +48,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,38 @@
+import React, { Children } from 'react';
+import RadioButton from './RadioButton';
+
+const RadioGroup = ({
+    children,
+    className,
+    inline,
+    name,
+    small,
+    ...props
+}: SGDS.Component.RadioButton.Group) => {
+    function processChild(child: any) {
+        if (child && child.type === RadioButton) {
+            return React.cloneElement(child as React.ReactElement<SGDS.Component.RadioButton>, { small: small, name: name });
+        } else {
+            return child;
+        }
+    }
+
+    return (
+        <div
+            className={[
+                'ds_radios',
+                'ds_field-group',
+                inline && 'ds_field-group--inline',
+                className
+            ].join(' ')}
+            {...props}
+        >
+
+            {Children.map(children, child => processChild(child))}
+        </div>
+    );
+};
+
+RadioGroup.displayName = 'RadioGroup';
+
+export default RadioGroup;

package/src/components/Select/Select.test.tsx

@@ -4,28 +4,20 @@ import Select from './Select';
 
 const SELECT_ID = 'select-component';
 const LABEL_TEXT = 'choose a component';
-const OPTIONS = [
-    {
-        text: 'Accordion',
-        value: 'accordion'
-    },
-    {
-        text: 'Breadcrumbs',
-        value: 'breadcrumbs'
-    },
-    {
-        text: 'Button',
-        value: 'button'
-    }
-];
+const OPTIONS = <>
+    <option value="accordion">Accordion</option>
+    <option value="breadcrumbs">Breadcrumbs</option>
+    <option value="button">Button</option>
+</>;
 
 test('select renders correctly', () => {
     render(
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -55,9 +47,10 @@ test('select with width', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             width={SELECTWIDTH}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const selectWrapper = screen.getByRole('combobox').parentElement;
@@ -71,9 +64,10 @@ test('select with hint text', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             hintText={HINT_TEXT}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const hintTextEl = screen.getByText(HINT_TEXT);
@@ -90,9 +84,10 @@ test('select with custom name', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             name={SELECT_NAME}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -106,9 +101,10 @@ test('select with blur function', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             onBlur={ONBLUR_FUNCTION}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -125,9 +121,10 @@ test('select with change function', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             onChange={ONCHANGE_FUNCTION}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -144,9 +141,10 @@ test('select with placeholder option', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             placeholder={PLACEHOLDER_TEXT}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -162,9 +160,10 @@ test('select with initial value', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             defaultValue={INITIAL_VALUE}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -179,10 +178,11 @@ test('select with error message', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
-            error
             errorMessage={ERROR_MESSAGE_TEXT}
-        />
+            hasError
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -201,9 +201,10 @@ test('passing additional props', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             data-test="foo"
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -216,9 +217,10 @@ test('passing additional CSS classes', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             className="foo"
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');

package/src/components/Select/Select.tsx

@@ -1,31 +1,22 @@
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import HintText from '../../common/HintText';
 
-const Option: React.FC<SGDS.Component.Select.Option> = function ({
-    text,
-    value
-}) {
-    return (
-        <option value={value}>{text}</option>
-    );
-};
-
-const Select: React.FC<SGDS.Component.Select> = function ({
+const Select = function ({
+    children,
     className,
     defaultValue,
-    error,
     errorMessage,
+    hasError,
     hintText,
     id,
     label,
     name,
     onBlur,
     onChange,
-    options,
     placeholder,
     width,
     ...props
-}) {
+}: SGDS.Component.Select) {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const describedbys: string[] = [];
@@ -53,7 +44,7 @@ const Select: React.FC<SGDS.Component.Select> = function ({
             <div
                 className={[
                     "ds_select-wrapper",
-                    error && 'ds_input--error',
+                    hasError && 'ds_input--error',
                     width && `ds_input--${width}`,
                     className
                 ].join(' ')}
@@ -61,7 +52,7 @@ const Select: React.FC<SGDS.Component.Select> = function ({
             >
                 <select
                     aria-describedby={describedbys.join(' ')}
-                    aria-invalid={error}
+                    aria-invalid={hasError}
                     className="ds_select"
                     defaultValue={defaultValue}
                     id={id}
@@ -70,13 +61,7 @@ const Select: React.FC<SGDS.Component.Select> = function ({
                     onChange={handleChange}
                 >
                     <option value="">{placeholder}</option>
-                    {options && options.map((option, index: number) => (
-                        <Option
-                            value={option.value}
-                            text={option.text}
-                            key={`option-${index}`}
-                        />
-                    ))}
+                    {children}
                 </select>
                 <span className="ds_select-arrow" aria-hidden="true"></span>
             </div>