@hyphen/hyphen-components 2.9.0

package/src/components/CheckboxInput/CheckboxInput.stories.tsx

@@ -0,0 +1,254 @@
+import React, { ChangeEvent, useState } from 'react';
+import type { Meta } from '@storybook/react';
+import { CheckboxInput } from './CheckboxInput';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof CheckboxInput> = {
+  title: 'Components/CheckboxInput',
+  component: CheckboxInput,
+};
+
+export default meta;
+
+export const Basic = () => (
+  <CheckboxInput
+    id="example"
+    label="Checkbox with a label"
+    isChecked
+    onChange={() => {}}
+  />
+);
+
+export const Default = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <CheckboxInput
+      id="defaultStateIsUnchecked"
+      label="Label"
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+    />
+  );
+};
+
+export const States = () => (
+  <Box gap="md">
+    <CheckboxInput
+      id="statesUnchecked"
+      label="Unchecked"
+      onChange={() => {}}
+      isChecked={false}
+    />
+    <CheckboxInput
+      id="statesCHecked"
+      label="Checked"
+      onChange={() => {}}
+      isChecked={true}
+    />
+    <CheckboxInput
+      id="statesUnchecked"
+      label="Indeterminate"
+      onChange={() => {}}
+      isChecked={true}
+      isIndeterminate={true}
+    />
+  </Box>
+);
+
+export const IndeterminateCheckboxes = () => {
+  const [exampleOneChildOne, setExampleOneChildOne] = useState(false);
+  const [exampleOneChildTwo, setExampleOneChildTwo] = useState(true);
+  const handleParentChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setExampleOneChildOne(event.target.checked);
+    setExampleOneChildTwo(event.target.checked);
+  };
+  return (
+    <Box gap="md">
+      <Box display="block" fontWeight="bold">
+        Nested Checkboxes (select all)
+      </Box>
+      <Box gap="sm">
+        <CheckboxInput
+          id="statesUnchecked"
+          label="Parent"
+          onChange={handleParentChange}
+          isChecked={exampleOneChildOne || exampleOneChildTwo}
+          isIndeterminate={exampleOneChildOne !== exampleOneChildTwo}
+        />
+        <Box padding="0 0 0 sm" gap="sm">
+          <CheckboxInput
+            id="statesUnchecked"
+            label="Child One"
+            onChange={(event) => setExampleOneChildOne(event.target.checked)}
+            isChecked={exampleOneChildOne}
+          />
+          <CheckboxInput
+            id="statesUnchecked"
+            label="Child Two"
+            onChange={(event) => setExampleOneChildTwo(event.target.checked)}
+            isChecked={exampleOneChildTwo}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Required = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <CheckboxInput
+      id="requiredCheckboxIsUnchecked"
+      label="Required Checkbox"
+      isChecked={value}
+      onChange={(event) => setValue(event.target.checked)}
+      isRequired
+    />
+  );
+};
+
+export const CustomRequiredIndicator = () => {
+  const [value, setValue] = useState(false);
+  const [value2, setValue2] = useState(false);
+  return (
+    <Box gap="md">
+      <CheckboxInput
+        id="requiredCheckboxNull"
+        label="Required Without Indicator"
+        isChecked={value}
+        onChange={(event) => setValue(event.target.checked)}
+        isRequired
+        requiredIndicator={null}
+      />
+      <CheckboxInput
+        id="requiredCheckboxCustom"
+        label="Required Custom Indicator"
+        isChecked={value2}
+        onChange={(event) => setValue2(event.target.checked)}
+        isRequired
+        requiredIndicator=" (required)"
+      />
+    </Box>
+  );
+};
+
+export const Sizes = () => {
+  const [sm, setSm] = useState(false);
+  const [md, setMd] = useState(false);
+  const [lg, setLg] = useState(false);
+  const [responsive, setResponsive] = useState(false);
+  return (
+    <Box gap="md">
+      <CheckboxInput
+        id="smCheckboxInput"
+        label="Small checkbox"
+        helpText="More helpful text about this checkbox"
+        isChecked={sm}
+        onChange={(event) => setSm(event.target.checked)}
+        size="sm"
+      />
+      <CheckboxInput
+        id="mdCheckboxInput"
+        label="Medium checkbox"
+        helpText="More helpful text about this checkbox"
+        isChecked={md}
+        onChange={(event) => setMd(event.target.checked)}
+        size="md"
+      />
+      <CheckboxInput
+        id="lgCheckboxInput"
+        label="Large checkbox"
+        helpText="More helpful text about this checkbox"
+        isChecked={lg}
+        onChange={(event) => setLg(event.target.checked)}
+        size="lg"
+      />
+      <CheckboxInput
+        id="responsiveCheckboxInput"
+        label="Responsive checkbox"
+        helpText="Will change sizes depending on viewport width"
+        isChecked={responsive}
+        onChange={(event) => setResponsive(event.target.checked)}
+        size={{ base: 'sm', tablet: 'md', desktop: 'lg', hd: 'sm' }}
+      />
+    </Box>
+  );
+};
+
+export const HelpText = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <CheckboxInput
+      id="helpTextCheckbox"
+      label="Checkbox with help text"
+      helpText="More helpful text about this checkbox"
+      isChecked={value}
+      onChange={(event) => setValue(event.target.checked)}
+    />
+  );
+};
+
+export const CheckedInitialState = () => {
+  const [value, setValue] = useState(true);
+  return (
+    <CheckboxInput
+      id="initialStateChecked"
+      label="Label"
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+    />
+  );
+};
+
+export const HiddenLabel = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <CheckboxInput
+      id="hiddenLabel"
+      label="Label"
+      hideLabel
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+    />
+  );
+};
+
+export const DisabledAndUnchecked = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <CheckboxInput
+      id="disabledAndUnchecked"
+      label="Label"
+      isChecked={value}
+      onChange={(event) => setValue(event.target.checked)}
+      isDisabled
+    />
+  );
+};
+
+export const DisabledAndChecked = () => {
+  const [value, setValue] = useState(true);
+  return (
+    <CheckboxInput
+      id="disabledAndUnchecked"
+      label="Label"
+      isChecked={value}
+      onChange={(event) => setValue(event.target.checked)}
+      isDisabled
+    />
+  );
+};
+
+export const Error = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <CheckboxInput
+      id="invalidCheckbox"
+      label="Label"
+      isChecked={value}
+      onChange={(event) => setValue(event.target.checked)}
+      isRequired
+      error="You must accept the Terms and Conditions"
+    />
+  );
+};

package/src/components/CheckboxInput/CheckboxInput.test.tsx

@@ -0,0 +1,436 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { CheckboxInput } from './CheckboxInput';
+import { FormLabel } from '../FormLabel/FormLabel';
+import { CheckboxSize } from './components/Checkbox';
+jest.mock('../FormLabel/FormLabel');
+
+describe('CheckboxInput', () => {
+  beforeEach(() => {
+    (FormLabel as jest.Mock).mockReturnValue(<div />);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('not disabled, checked, or invalid by default', () => {
+    const { getByLabelText } = render(
+      <CheckboxInput
+        id="testCheckbox"
+        label="test checkbox"
+        isChecked={false}
+        onChange={() => null}
+      />
+    );
+    const checkbox = getByLabelText('test checkbox') as HTMLInputElement;
+
+    expect(checkbox.checked).toBe(false);
+    expect(checkbox.disabled).toBe(false);
+    expect(checkbox.getAttribute('aria-invalid')).toBe('false');
+  });
+
+  test('it calls FormLabel with the correct props', () => {
+    const { getByLabelText } = render(
+      <CheckboxInput
+        id="testCheckbox"
+        label="test checkbox"
+        onChange={() => null}
+        isChecked={false}
+        helpText="i am help text"
+      />
+    );
+    expect(getByLabelText('test checkbox')).toBeDefined();
+    expect(FormLabel).toHaveBeenCalledTimes(1);
+    expect(FormLabel).toHaveBeenCalledWith(
+      {
+        inputId: 'testCheckbox',
+        helpText: 'i am help text',
+        children: 'test checkbox',
+        className: 'm-top-xs m-right-0 m-bottom-0 m-left-0',
+        isDisabled: false,
+        isFieldRequired: false,
+        requiredIndicator: ' *',
+      },
+      {}
+    );
+  });
+
+  test('it calls FormLabel with the correct props when checkbox is required', () => {
+    const { getByLabelText } = render(
+      <CheckboxInput
+        id="testCheckbox"
+        label="test checkbox"
+        onChange={() => null}
+        isChecked={false}
+        isRequired
+      />
+    );
+    expect(getByLabelText('test checkbox')).toBeDefined();
+    expect(FormLabel).toHaveBeenCalledTimes(1);
+    expect(FormLabel).toHaveBeenCalledWith(
+      {
+        inputId: 'testCheckbox',
+        helpText: undefined,
+        children: 'test checkbox',
+        className: 'm-top-xs m-right-0 m-bottom-0 m-left-0',
+        isDisabled: false,
+        isFieldRequired: true,
+        requiredIndicator: ' *',
+      },
+      {}
+    );
+  });
+
+  test('input is checked when isChecked is true', () => {
+    const { getByLabelText } = render(
+      <CheckboxInput
+        id="testCheckbox"
+        label="test checkbox"
+        onChange={() => null}
+        isChecked
+      />
+    );
+    const checkbox = getByLabelText('test checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toEqual(true);
+  });
+
+  test('input is not checked when isChecked is false', () => {
+    const { getByLabelText } = render(
+      <CheckboxInput
+        id="testCheckbox"
+        label="test checkbox"
+        isChecked={false}
+        onChange={() => null}
+      />
+    );
+    const checkbox = getByLabelText('test checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toEqual(false);
+  });
+
+  test('assigns the "aria-labelledby" attribute and calls FormLabel with expected props', () => {
+    const { getByLabelText } = render(
+      <CheckboxInput
+        isChecked={false}
+        id="testInput"
+        label="test label"
+        value="hello"
+        onChange={() => null}
+      />
+    );
+    expect(getByLabelText('test label')).toHaveAttribute(
+      'aria-labelledby',
+      'testInputLabel'
+    );
+  });
+
+  test('sets required properties when isRequired is true', () => {
+    const { getByLabelText } = render(
+      <CheckboxInput
+        isChecked={false}
+        id="testInput"
+        label="test label"
+        value="hello"
+        onChange={() => null}
+        isRequired
+      />
+    );
+    expect(getByLabelText('test label')).toHaveAttribute(
+      'aria-required',
+      'true'
+    );
+    expect(getByLabelText('test label')).toHaveAttribute('required');
+  });
+
+  describe('error states', () => {
+    test('renders error message if error exists and is not true', () => {
+      const { getByText } = render(
+        <CheckboxInput
+          id="testCheckbox"
+          label="test checkbox"
+          isChecked={false}
+          onChange={() => null}
+          error="This is the error message"
+        />
+      );
+      expect(getByText('This is the error message')).toBeInTheDocument();
+    });
+
+    test('calls FormLabel with the correct properties when error is a string', () => {
+      render(
+        <CheckboxInput
+          id="testCheckbox"
+          label="test checkbox"
+          isChecked={false}
+          onChange={() => null}
+          error="This is the error message"
+        />
+      );
+      expect(FormLabel).toHaveBeenCalledTimes(1);
+      expect(FormLabel).toHaveBeenCalledWith(
+        {
+          inputId: 'testCheckbox',
+          helpText: undefined,
+          children: 'test checkbox',
+          className: 'm-top-xs m-right-0 m-bottom-0 m-left-0',
+          isDisabled: false,
+          isFieldRequired: false,
+          requiredIndicator: ' *',
+        },
+        {}
+      );
+    });
+
+    test('calls FormLabel with the correct properties when error is a true', () => {
+      render(
+        <CheckboxInput
+          id="testCheckbox"
+          label="test checkbox"
+          isChecked={false}
+          onChange={() => null}
+          error
+        />
+      );
+      expect(FormLabel).toHaveBeenCalledTimes(1);
+      expect(FormLabel).toHaveBeenCalledWith(
+        {
+          inputId: 'testCheckbox',
+          helpText: undefined,
+          children: 'test checkbox',
+          className: 'm-top-xs m-right-0 m-bottom-0 m-left-0',
+          isDisabled: false,
+          isFieldRequired: false,
+          requiredIndicator: ' *',
+        },
+        {}
+      );
+    });
+  });
+
+  test('calls FormLabel with the correct properties when disabled', () => {
+    render(
+      <CheckboxInput
+        id="testCheckbox"
+        label="test checkbox"
+        isChecked={false}
+        onChange={() => null}
+        isDisabled
+      />
+    );
+    expect(FormLabel).toHaveBeenCalledTimes(1);
+    expect(FormLabel).toHaveBeenCalledWith(
+      {
+        inputId: 'testCheckbox',
+        helpText: undefined,
+        children: 'test checkbox',
+        className: 'm-top-xs m-right-0 m-bottom-0 m-left-0',
+        isDisabled: true,
+        isFieldRequired: false,
+        requiredIndicator: ' *',
+      },
+      {}
+    );
+  });
+
+  describe('Size', () => {
+    test('calls FormLabel with the correct properties when size is small', () => {
+      render(
+        <CheckboxInput
+          id="testCheckbox"
+          label="test checkbox"
+          isChecked={false}
+          onChange={() => null}
+          size="sm"
+        />
+      );
+      expect(FormLabel).toHaveBeenCalledTimes(1);
+      expect(FormLabel).toHaveBeenCalledWith(
+        {
+          inputId: 'testCheckbox',
+          helpText: undefined,
+          children: 'test checkbox',
+          className: 'm-top-2xs m-right-0 m-bottom-0 m-left-0',
+          isDisabled: false,
+          isFieldRequired: false,
+          requiredIndicator: ' *',
+        },
+        {}
+      );
+    });
+    test('calls FormLabel with the correct properties when size is large', () => {
+      render(
+        <CheckboxInput
+          id="testCheckbox"
+          label="test checkbox"
+          isChecked={false}
+          onChange={() => null}
+          size="lg"
+        />
+      );
+      expect(FormLabel).toHaveBeenCalledTimes(1);
+      expect(FormLabel).toHaveBeenCalledWith(
+        {
+          inputId: 'testCheckbox',
+          helpText: undefined,
+          children: 'test checkbox',
+          className: 'm-top-sm m-right-0 m-bottom-0 m-left-0',
+          isDisabled: false,
+          isFieldRequired: false,
+          requiredIndicator: ' *',
+        },
+        {}
+      );
+    });
+
+    const mockedHandleChange = jest.fn();
+    const sizes: CheckboxSize[] = ['sm', 'md', 'lg'];
+
+    const breakpoints = ['tablet', 'desktop', 'hd'];
+
+    sizes.forEach((size) => {
+      test(`it has a ${size} class applied to it`, () => {
+        render(
+          <CheckboxInput
+            isChecked={false}
+            id="testId"
+            onChange={mockedHandleChange}
+            size={size}
+            label="size test"
+          />
+        );
+        const checkbox = screen.getByLabelText('size test');
+        const checkboxParent = checkbox.closest('div');
+        expect(checkboxParent?.getAttribute('class')).toContain(size);
+      });
+
+      breakpoints.forEach((breakpoint) => {
+        test(`it applies responsive classes for breakpoint: ${breakpoint} and size: ${size}`, () => {
+          render(
+            <CheckboxInput
+              isChecked={false}
+              id="testId"
+              onChange={mockedHandleChange}
+              size={{ [breakpoint]: size }}
+              label="size test"
+            />
+          );
+          const checkbox = screen.getByLabelText('size test');
+          const checkboxParent = checkbox.closest('div');
+
+          expect(checkboxParent?.getAttribute('class')).toContain(
+            `size-${size}-${breakpoint}`
+          );
+        });
+      });
+    });
+
+    test('It applies responsive classes when multiple are applied', () => {
+      render(
+        <CheckboxInput
+          isChecked={false}
+          id="testId"
+          onChange={mockedHandleChange}
+          size={{
+            base: 'sm',
+            tablet: 'md',
+            desktop: 'lg',
+            hd: 'sm',
+          }}
+          label="size test"
+        />
+      );
+      const checkbox = screen.getByLabelText('size test');
+      const checkboxParent = checkbox.closest('div');
+
+      expect(checkboxParent?.getAttribute('class')).toContain('size-sm');
+      expect(checkboxParent?.getAttribute('class')).toContain('size-md-tablet');
+      expect(checkboxParent?.getAttribute('class')).toContain(
+        'size-lg-desktop'
+      );
+      expect(checkboxParent?.getAttribute('class')).toContain('size-sm-hd');
+    });
+  });
+
+  describe('onChange', () => {
+    test('onChange event fires callback function', () => {
+      const mockedHandleChange = jest.fn(() => null);
+
+      const { getByLabelText } = render(
+        <CheckboxInput
+          id="testCheckbox"
+          label="test checkbox"
+          isChecked={false}
+          onChange={mockedHandleChange}
+        />
+      );
+      const checkbox = getByLabelText('test checkbox');
+      fireEvent.click(checkbox);
+      expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+    });
+
+    test('calls onChange and passes checked value in event', () => {
+      let value = true;
+      const mockedHandleChange = jest.fn((event) => {
+        value = event.target.checked;
+      });
+
+      const { getByLabelText } = render(
+        <CheckboxInput
+          id="testCheckbox"
+          label="test checkbox"
+          onChange={mockedHandleChange}
+          isChecked={value}
+        />
+      );
+      const checkbox = getByLabelText('test checkbox');
+      fireEvent.click(checkbox);
+      expect(mockedHandleChange).toBeCalledTimes(1);
+      expect(value).toBe(false);
+    });
+  });
+
+  describe('onFocus', () => {
+    test('onFocus event fires callback function if defined', () => {
+      const mockedHandleFocus = jest.fn(() => null);
+
+      const { getByText, getByLabelText } = render(
+        <div>
+          <button type="button">focus</button>
+          <CheckboxInput
+            id="testCheckbox"
+            label="test checkbox"
+            isChecked={false}
+            onChange={() => null}
+            onFocus={mockedHandleFocus}
+            onBlur={undefined}
+          />
+        </div>
+      );
+      getByLabelText('test checkbox').focus();
+      getByText('focus').focus();
+      expect(mockedHandleFocus).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('onBlur', () => {
+    test('onBlur event fires callback function if defined', () => {
+      const mockedHandleBlur = jest.fn(() => null);
+
+      const { getByText, getByLabelText } = render(
+        <div>
+          <button type="button">focus</button>
+          <CheckboxInput
+            id="testCheckbox"
+            label="test checkbox"
+            isChecked={false}
+            onChange={() => null}
+            onBlur={mockedHandleBlur}
+          />
+        </div>
+      );
+      getByLabelText('test checkbox').focus();
+      getByText('focus').focus();
+      expect(mockedHandleBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+});