@hyphen/hyphen-components 2.9.0

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,375 @@
+import React, { ChangeEvent, useState } from 'react';
+import { RadioGroup } from './RadioGroup';
+import type { Meta } from '@storybook/react';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const Default = () => {
+  const [value, setValue] = useState('chocolate');
+  const options = [
+    {
+      id: 'chocolate',
+      value: 'chocolate',
+      label: 'Chocolate',
+    },
+    {
+      id: 'strawberry',
+      value: 'strawberry',
+      label: 'Strawberry',
+    },
+    {
+      id: 'vanilla',
+      value: 'vanilla',
+      label: 'Vanilla',
+    },
+  ];
+  return (
+    <RadioGroup
+      name="noTitleOrDescription"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      options={options}
+    />
+  );
+};
+
+export const Title = () => {
+  const [value, setValue] = useState('purple');
+  const options = [
+    {
+      id: 'purple',
+      value: 'purple',
+      label: 'Purple',
+    },
+    {
+      id: 'green',
+      value: 'green',
+      label: 'Green',
+    },
+    {
+      id: 'blue',
+      value: 'blue',
+      label: 'Blue',
+    },
+  ];
+  return (
+    <RadioGroup
+      title="Title"
+      name="withTitle"
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      options={options}
+    />
+  );
+};
+
+export const TitleAndDescription = () => {
+  const [value, setValue] = useState('light');
+  const options = [
+    {
+      id: 'light',
+      value: 'light',
+      label: 'Light',
+    },
+    {
+      id: 'dark',
+      value: 'dark',
+      label: 'Dark',
+    },
+  ];
+  return (
+    <RadioGroup
+      title="Title"
+      description="Description"
+      name="withTitleAndDescription"
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      options={options}
+    />
+  );
+};
+
+export const Required = () => {
+  const [value, setValue] = useState('cat');
+  const options = [
+    {
+      id: 'cat',
+      value: 'cat',
+      label: 'Cat',
+    },
+    {
+      id: 'dog',
+      value: 'dog',
+      label: 'Dog',
+    },
+  ];
+  return (
+    <RadioGroup
+      title="Title"
+      name="required"
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      isRequired
+      options={options}
+    />
+  );
+};
+
+export const CustomRequiredIndicator = () => {
+  const [value, setValue] = useState<string>('');
+  const [value2, setValue2] = useState<string>('');
+  const options = [
+    {
+      id: 'cat',
+      value: 'cat',
+      label: 'Cat',
+    },
+    {
+      id: 'dog',
+      value: 'dog',
+      label: 'Dog',
+    },
+  ];
+  return (
+    <Box gap="md">
+      <RadioGroup
+        title="Required Without Indicator"
+        name="withoutIndicator"
+        onChange={(event) => setValue(event.target.value)}
+        value={value}
+        isRequired
+        options={options}
+        requiredIndicator={null}
+      />
+      <RadioGroup
+        title="Required Custom Indicator"
+        name="customIndicator"
+        onChange={(event) => setValue2(event.target.value)}
+        value={value2}
+        isRequired
+        options={options}
+        requiredIndicator=" (required)"
+      />
+    </Box>
+  );
+};
+
+export const PreSelectedOption = () => {
+  const options = [
+    {
+      id: 'car',
+      value: 'car',
+      label: 'Car',
+    },
+    {
+      id: 'truck',
+      value: 'truck',
+      label: 'Truck',
+    },
+    {
+      id: 'motorcycle',
+      value: 'motorcycle',
+      label: 'Motorcycle',
+    },
+  ];
+  const [value, setValue] = useState(options[1].value);
+  return (
+    <RadioGroup
+      title="Title"
+      name="prevalue"
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      options={options}
+    />
+  );
+};
+
+export const DisabledOption = () => {
+  const [value, setValue] = useState('short');
+  const options = [
+    {
+      id: 'short',
+      value: 'short',
+      label: 'Short',
+    },
+    {
+      id: 'tall',
+      value: 'tall',
+      label: 'Tall',
+    },
+    {
+      id: 'gigantic',
+      value: 'gigantic',
+      label: 'Gigantic',
+      disabled: true,
+    },
+  ];
+  return (
+    <RadioGroup
+      title="Title"
+      name="disabledOption"
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      options={options}
+    />
+  );
+};
+
+export const DisabledGroup = () => {
+  const [value, setValue] = useState('react');
+  const options = [
+    {
+      id: 'react',
+      value: 'react',
+      label: 'React',
+    },
+    {
+      id: 'angular',
+      value: 'angular',
+      label: 'Angular',
+    },
+    {
+      id: 'vue',
+      value: 'vue',
+      label: 'Vue',
+      disabled: true,
+    },
+  ];
+  return (
+    <RadioGroup
+      title="Title"
+      name="disabledGroup"
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      isDisabled
+      options={options}
+    />
+  );
+};
+
+export const Error = () => {
+  const [value, setValue] = useState('apple');
+  const options = [
+    {
+      id: 'apple',
+      value: 'apple',
+      label: 'Apple',
+    },
+    {
+      id: 'orange',
+      value: 'orange',
+      label: 'Orange',
+    },
+    {
+      id: 'banana',
+      value: 'banana',
+      label: 'Banana',
+      disabled: true,
+    },
+  ];
+  return (
+    <RadioGroup
+      title="Title"
+      name="error"
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      options={options}
+      isRequired
+      error="Helpful validation message"
+    />
+  );
+};
+
+export const Sizes = () => {
+  const [state, setState] = useState({
+    sm: undefined,
+    md: undefined,
+    lg: undefined,
+    responsive: undefined,
+  });
+  const options = (id: string) => [
+    { id: `purple__${id}`, value: 'purple', label: 'Purple' },
+    { id: `green__${id}`, value: 'green', label: 'Green' },
+  ];
+  const handleChange = (event: ChangeEvent<HTMLInputElement>, key: string) => {
+    const value = event.target.value;
+    setState((prevState) => ({ ...prevState, [key]: value }));
+  };
+  return (
+    <Box gap="lg">
+      <RadioGroup
+        title="Small"
+        name="smallRadio"
+        onChange={(event) => handleChange(event, 'sm')}
+        value={state.sm}
+        options={options('sm')}
+        size="sm"
+      />
+      <RadioGroup
+        title="Medium"
+        name="mediumRadio"
+        onChange={(event) => handleChange(event, 'md')}
+        value={state.md}
+        options={options('md')}
+        size="md"
+      />
+      <RadioGroup
+        title="Large"
+        name="largeRadio"
+        onChange={(event) => handleChange(event, 'lg')}
+        value={state.lg}
+        options={options('lg')}
+        size="lg"
+      />
+      <RadioGroup
+        title="Responsive"
+        name="responsiveRadio"
+        onChange={(event) => handleChange(event, 'responsive')}
+        value={state.responsive}
+        options={options('responsive')}
+        size={{ base: 'sm', tablet: 'md', desktop: 'lg', hd: 'sm' }}
+      />
+    </Box>
+  );
+};
+
+export const HorizontallyAligned = () => {
+  const [value, setValue] = useState('one');
+  const options = [
+    {
+      id: 'one',
+      value: 'one',
+      label: 'One',
+    },
+    {
+      id: 'two',
+      value: 'two',
+      label: 'Two',
+    },
+    {
+      id: 'three',
+      value: 'three',
+      label: 'Three',
+    },
+  ];
+  return (
+    <RadioGroup
+      title="Horizontal"
+      direction="row"
+      name="horizontal"
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      options={options}
+      isRequired
+    />
+  );
+};

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

@@ -0,0 +1,282 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { RadioGroup } from './RadioGroup';
+
+const groupOptions = [
+  {
+    id: 'purple',
+    value: 'purple',
+    label: 'Purple',
+  },
+  {
+    id: 'green',
+    value: 'green',
+    label: 'Green',
+  },
+  {
+    id: 'blue',
+    value: 'blue',
+    label: 'Blue',
+  },
+];
+
+describe('RadioGroup', () => {
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test('onChange event fires callback function', () => {
+        const mockHandleChange = jest.fn();
+
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={mockHandleChange}
+            options={groupOptions}
+          />
+        );
+
+        const radioInput = screen.getByLabelText('Blue');
+        fireEvent.click(radioInput);
+        expect(mockHandleChange).toHaveBeenCalledTimes(1);
+      });
+
+      test('calls onChange and passes checked value in event', () => {
+        let value = null;
+        const mockedHandleChangeWithValue = jest.fn((event) => {
+          value = event.target.value;
+        });
+
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={mockedHandleChangeWithValue}
+            options={groupOptions}
+          />
+        );
+        const radioInput = screen.getByLabelText('Blue');
+        fireEvent.click(radioInput);
+        expect(mockedHandleChangeWithValue).toBeCalledTimes(1);
+        expect(value).toBe('blue');
+      });
+    });
+
+    describe('onFocus', () => {
+      test('onFocus event fires callback function', () => {
+        const mockedHandleFocus = jest.fn();
+
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            onFocus={mockedHandleFocus}
+          />
+        );
+        const radioInput = screen.getByLabelText('Blue');
+        fireEvent.focus(radioInput);
+        expect(mockedHandleFocus).toBeCalledTimes(1);
+      });
+    });
+
+    describe('onBlur', () => {
+      test('onBlur event fires callback function', () => {
+        const mockedHandleBlur = jest.fn();
+
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            onBlur={mockedHandleBlur}
+          />
+        );
+        const radioInput = screen.getByLabelText('Blue');
+        fireEvent.blur(radioInput);
+        expect(mockedHandleBlur).toBeCalledTimes(1);
+      });
+    });
+  });
+
+  describe('States', () => {
+    describe('Default', () => {
+      test('it renders 3 radio inputs', () => {
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+          />
+        );
+
+        const radioInputElements = screen.getAllByRole('radio');
+        expect(radioInputElements).toHaveLength(3);
+      });
+
+      test('it renders 3 labels', () => {
+        render(
+          <RadioGroup
+            name="mockName"
+            onChange={jest.fn()}
+            options={groupOptions}
+          />
+        );
+
+        const purpleRadioInputLabel = screen.getByLabelText('Purple');
+        const greenRadioInputLabel = screen.getByLabelText('Green');
+        const blueRadioInputLabel = screen.getByLabelText('Blue');
+
+        expect(purpleRadioInputLabel).toBeInTheDocument();
+        expect(greenRadioInputLabel).toBeInTheDocument();
+        expect(blueRadioInputLabel).toBeInTheDocument();
+      });
+    });
+
+    describe('With Title', () => {
+      test('it renders the title', () => {
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            title="Mock Title"
+          />
+        );
+
+        const title = screen.getByText('Mock Title');
+        expect(title).toBeInTheDocument();
+      });
+    });
+
+    describe('With Title and Description', () => {
+      test('it renders the title and description', () => {
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            title="Mock Title"
+            description="Mock Description"
+          />
+        );
+
+        const title = screen.getByText('Mock Title');
+        const description = screen.getByText('Mock Description');
+        expect(title).toBeInTheDocument();
+        expect(description).toBeInTheDocument();
+      });
+    });
+
+    describe('Required', () => {
+      test('it marks each radio as required', () => {
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            title="Mock Title"
+            isRequired
+          />
+        );
+
+        const purpleRadioInputLabel = screen.getByLabelText('Purple');
+        const greenRadioInputLabel = screen.getByLabelText('Green');
+        const blueRadioInputLabel = screen.getByLabelText('Blue');
+
+        expect(purpleRadioInputLabel).toHaveAttribute('aria-required', 'true');
+        expect(purpleRadioInputLabel).toHaveAttribute('required');
+        expect(greenRadioInputLabel).toHaveAttribute('aria-required', 'true');
+        expect(greenRadioInputLabel).toHaveAttribute('required');
+        expect(blueRadioInputLabel).toHaveAttribute('aria-required', 'true');
+        expect(blueRadioInputLabel).toHaveAttribute('required');
+      });
+
+      test('it renders default required indicator', () => {
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            title="Mock Title"
+            isRequired
+          />
+        );
+
+        const requiredIndicator = screen.getByText('*');
+        expect(requiredIndicator).toBeInTheDocument();
+      });
+    });
+
+    describe('Pre-Selected Option', () => {
+      test('an option is automatically selected', () => {
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            value="green"
+          />
+        );
+
+        const greenRadioInput = screen.getByLabelText('Green');
+        expect(greenRadioInput).toBeChecked();
+      });
+    });
+
+    describe('Disabled Option', () => {
+      test('the group contains a disabled option', () => {
+        const disabledOption = {
+          id: 'teal',
+          value: 'teal',
+          label: 'Teal',
+          disabled: true,
+        };
+
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={[...groupOptions, disabledOption]}
+          />
+        );
+
+        const disabledRadioInputElements = screen.getAllByRole('radio');
+        expect(disabledRadioInputElements[3]).toBeDisabled();
+      });
+    });
+
+    describe('Disabled Group', () => {
+      test('all options in the group are disabled', () => {
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            isDisabled
+          />
+        );
+
+        const disabledRadioInputElements = screen.getAllByRole('radio');
+        expect(disabledRadioInputElements[0]).toBeDisabled();
+        expect(disabledRadioInputElements[1]).toBeDisabled();
+        expect(disabledRadioInputElements[2]).toBeDisabled();
+      });
+    });
+
+    describe('Error with Validation Message', () => {
+      test('it renders a validation message', () => {
+        render(
+          <RadioGroup
+            name="testName"
+            onChange={jest.fn()}
+            options={groupOptions}
+            error="Helpful Validation Message"
+          />
+        );
+
+        const validationMessage = screen.getByText(
+          'Helpful Validation Message'
+        );
+        expect(validationMessage).toBeInTheDocument();
+      });
+    });
+  });
+});