@hyphen/hyphen-components 2.9.0

package/src/components/CheckboxInput/CheckboxInput.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import classNames from 'classnames';
+import { cssShorthandToClasses } from '../../lib/cssShorthandToClasses';
+import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
+import { FormLabel } from '../FormLabel/FormLabel';
+import { Box } from '../Box/Box';
+import { Checkbox, CheckboxSize, CheckboxProps } from './components/Checkbox';
+
+const labelMarginSizeMap = {
+  sm: '2xs 0 0 0',
+  md: 'xs 0 0 0',
+  lg: 'sm 0 0 0',
+};
+
+const computedResponsiveSize = (
+  // eslint-disable-line @typescript-eslint/explicit-module-boundary-types
+  size: CheckboxInputProps['size']
+) => {
+  if (size && !(typeof size === 'string') && typeof size === 'object') {
+    return Object.entries(size).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        [key]: labelMarginSizeMap[value || 'md'],
+      }),
+      {}
+    );
+  }
+
+  return labelMarginSizeMap[size || 'md'] as string;
+};
+export interface CheckboxInputProps {
+  /**
+   * The id attribute of the input.
+   */
+  id: string;
+  /**
+   * The checkbox input "checked" attribute.
+   */
+  isChecked: boolean;
+  /**
+   * Custom content to be displayed to right of checkbox.
+   */
+  label: string;
+  /**
+   * Callback function when input is changed.
+   */
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Additional classes to add.
+   */
+  className?: string;
+  /**
+   * Mark the input field as invalid and display a validation message.
+   * Pass a string or node to render a validation message below the input.
+   */
+  error?: React.ReactNode;
+  /**
+   * Additional clarifying text to help describe the input
+   */
+  helpText?: React.ReactNode;
+  /**
+   * Determines if the label is not shown for stylistic reasons.
+   * Note the label is still a required prop and will be used as the aria-label for accessibility reasons.
+   */
+  hideLabel?: boolean;
+  /**
+   * If the input should be disabled and not focusable.
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the checkbox is rendered in an indeterminate state.
+   * NOTE: this change is only visual and it does not affect the checked or unchecked state of the checkbox.
+   */
+  isIndeterminate?: CheckboxProps['isIndeterminate'];
+  /**
+   * The required and aria-required attributes on the input
+   */
+  isRequired?: boolean;
+  /**
+   * Callback function when input is blurred.
+   */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Callback function when input is focused.
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Visual indicator that the field is required, that gets appended to the label
+   */
+  requiredIndicator?: React.ReactNode;
+  /**
+   * The size of the checkbox.
+   */
+  size?: CheckboxSize;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const CheckboxInput: React.FC<CheckboxInputProps> = ({
+  id,
+  isChecked,
+  label,
+  onChange,
+  className = '',
+  error = false,
+  hideLabel = false,
+  helpText,
+  isDisabled = false,
+  isIndeterminate = false,
+  isRequired = false,
+  onBlur = undefined,
+  onFocus = undefined,
+  requiredIndicator = ' *',
+  size = 'md',
+  ...restProps
+}) => {
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+    if (onBlur) onBlur(event);
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    onChange(event);
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>): void => {
+    if (onFocus) onFocus(event);
+  };
+
+  const checkboxProps = {
+    id,
+    isChecked: !!isChecked,
+    isDisabled,
+    isIndeterminate,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    isRequired,
+    size,
+    label,
+    className: classNames(
+      'hyphen-components__variables__form-control',
+      'm-right-md'
+    ),
+    error,
+  };
+
+  const labelProps = {
+    inputId: id,
+    helpText,
+    isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator,
+    className: classNames(
+      ...cssShorthandToClasses('m', computedResponsiveSize(size))
+    ),
+  };
+
+  return (
+    <Box className={className} {...restProps}>
+      <Box alignItems="flex-start" direction="row">
+        <Checkbox {...checkboxProps} labelledby={`${id}Label`} />
+        {label && !hideLabel && <FormLabel {...labelProps}>{label}</FormLabel>}
+      </Box>
+      {error && error !== true && (
+        <InputValidationMessage>{error}</InputValidationMessage>
+      )}
+    </Box>
+  );
+};

package/src/components/CheckboxInput/components/Checkbox.module.scss

@@ -0,0 +1,174 @@
+@import '../../../styles/mixins';
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+$sm-dimension: 20px;
+$md-dimension: 24px;
+$lg-dimension: 36px;
+
+@mixin size-sm {
+  border-radius: var(--size-border-radius-xs);
+  height: $sm-dimension;
+  font-size: var(--size-font-size-lg);
+
+  * {
+    width: $sm-dimension;
+    height: $sm-dimension;
+  }
+}
+
+%size-sm {
+  @include size-sm;
+}
+.size-sm {
+  @extend %size-sm;
+}
+
+@mixin size-md {
+  border-radius: var(--size-border-radius-sm);
+  height: $md-dimension;
+  font-size: var(--size-font-size-xl);
+
+  * {
+    width: $md-dimension;
+    height: $md-dimension;
+  }
+}
+
+%size-md {
+  @include size-md;
+}
+.size-md {
+  @extend %size-md;
+}
+
+@mixin size-lg {
+  border-radius: var(--size-border-radius-sm);
+  height: $lg-dimension;
+  font-size: var(--size-font-size-2xl);
+
+  * {
+    width: $lg-dimension;
+    height: $lg-dimension;
+  }
+}
+
+%size-lg {
+  @include size-lg;
+}
+.size-lg {
+  @extend %size-lg;
+}
+
+.checkbox {
+  &.hidden {
+    @include accessible-hidden-element;
+
+    height: 0;
+  }
+
+  input + div {
+    background: var(--form-control-background-color, var(--color-base-white));
+    color: var(--form-control-checkbox-color, var(--color-base-grey-500));
+  }
+
+  input:checked + div,
+  input:indeterminate + div {
+    color: var(
+      --form-control-checkbox-color-checked,
+      var(--color-base-primary-500)
+    );
+  }
+
+  // stylelint-disable
+  input[aria-invalid='true'] + div {
+    color: var(--form-control-font-color-error, var(--color-base-danger-500));
+  }
+  // stylelint-enable
+
+  input:focus + div {
+    outline: 0;
+    box-shadow: var(
+      --form-control-box-shadow-focus,
+      var(--INTERNAL_form-control-box-shadow-focus)
+    );
+  }
+
+  // Show focus styles on keyboard focus.
+  input:focus-visible + div {
+    outline: 0;
+    box-shadow: var(
+      --form-control-box-shadow-focus,
+      var(--INTERNAL_form-control-box-shadow-focus)
+    );
+  }
+
+  input:disabled + div {
+    background: var(
+      --form-control-background-color-disabled,
+      var(--color-base-grey-50)
+    );
+    color: var(
+      --form-control-checkbox-color-disabled,
+      var(--color-base-grey-200)
+    );
+  }
+
+  // Hide focus styles if they are not needed, for example, when an element receives focus via the mouse.
+  input:focus:not(:focus-visible) + div {
+    outline: 0;
+    box-shadow: none;
+  }
+
+  input:checked:disabled + div {
+    color: var(
+      --form-control-checkbox-color-checked-disabled,
+      var(--color-base-primary-200)
+    );
+  }
+
+  &.size-sm {
+    @extend %size-sm;
+  }
+  &.size-md {
+    @extend %size-md;
+  }
+  &.size-lg {
+    @extend %size-lg;
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &.size-sm-tablet {
+      @include size-sm;
+    }
+    &.size-md-tablet {
+      @include size-md;
+    }
+    &.size-lg-tablet {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &.size-sm-desktop {
+      @include size-sm;
+    }
+    &.size-md-desktop {
+      @include size-md;
+    }
+    &.size-lg-desktop {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &.size-sm-hd {
+      @include size-sm;
+    }
+    &.size-md-hd {
+      @include size-md;
+    }
+    &.size-lg-hd {
+      @include size-lg;
+    }
+  }
+}

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

@@ -0,0 +1,201 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  describe('Default', () => {
+    test('It renders a checkbox input and checkbox-btn svg icon element', () => {
+      render(
+        <Checkbox
+          id="testCheckbox"
+          label="test checkbox"
+          onChange={jest.fn(() => null)}
+          isChecked={false}
+        />
+      );
+
+      const input = screen.getByLabelText('test checkbox');
+      expect(input).toBeInTheDocument();
+      expect(
+        screen.getByTestId('icon-testid--checkbox-btn')
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Checked', () => {
+    test('It renders a checked checkbox input element and checkbox-btn-checked svg icon', () => {
+      render(
+        <Checkbox
+          id="testCheckbox"
+          label="test checkbox"
+          onChange={jest.fn(() => null)}
+          isChecked
+        />
+      );
+
+      const input = screen.getByLabelText('test checkbox');
+      expect(input).toHaveAttribute('checked');
+      expect(
+        screen.getByTestId('icon-testid--checkbox-btn-checked')
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Indeterminate', () => {
+    test('It renders an indeterminate icon if isIndeterminate is true and checkbox is checked', () => {
+      render(
+        <Checkbox
+          id="testCheckbox"
+          label="test checkbox"
+          onChange={jest.fn(() => null)}
+          isChecked
+          isIndeterminate
+        />
+      );
+
+      const input = screen.getByLabelText('test checkbox');
+      expect(input).toHaveAttribute('checked');
+      expect(
+        screen.getByTestId('icon-testid--checkbox-btn-indeterminate')
+      ).toBeInTheDocument();
+    });
+
+    test('It renders an indeterminate icon if isIndeterminate is true and checkbox is unchecked', () => {
+      render(
+        <Checkbox
+          id="testCheckbox"
+          label="test checkbox"
+          onChange={jest.fn(() => null)}
+          isChecked={false}
+          isIndeterminate
+        />
+      );
+
+      expect(
+        screen.getByTestId('icon-testid--checkbox-btn-indeterminate')
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Disabled', () => {
+    test('input element is disabled', () => {
+      render(
+        <Checkbox
+          isChecked={false}
+          id="testCheckbox"
+          label="test checkbox"
+          onChange={jest.fn(() => null)}
+          isDisabled
+        />
+      );
+
+      const input = screen.getByLabelText('test checkbox');
+      expect(input).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('onChange', () => {
+    test('onChange event fires callback function', () => {
+      const mockedHandleChange = jest.fn(() => null);
+
+      const { getByLabelText } = render(
+        <Checkbox
+          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(
+        <Checkbox
+          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>
+          <Checkbox
+            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>
+          <Checkbox
+            id="testCheckbox"
+            label="test checkbox"
+            isChecked={false}
+            onChange={() => null}
+            onBlur={mockedHandleBlur}
+          />
+        </div>
+      );
+      getByLabelText('test checkbox').focus();
+      getByText('focus').focus();
+      expect(mockedHandleBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Hidden', () => {
+    test('the radio input is hidden', () => {
+      const mockedHandleChange = jest.fn(() => {}); // eslint-disable-line
+
+      render(
+        <Checkbox
+          id="mockId"
+          name="mockName"
+          onChange={mockedHandleChange}
+          isHidden
+          isChecked
+          label="mockLabel"
+        />
+      );
+
+      const checkboxInputContainer = screen
+        .getByRole('checkbox')
+        .closest('div');
+      expect(checkboxInputContainer).toHaveClass('hidden');
+    });
+  });
+});

package/src/components/CheckboxInput/components/Checkbox.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ResponsiveProp } from '../../../types';
+import { generateResponsiveClasses } from '../../../lib/generateResponsiveClasses';
+import { Box, BoxProps } from '../../Box/Box';
+import { CheckboxIcon } from './CheckboxIcon'; // eslint-disable-line import/no-cycle
+import styles from './Checkbox.module.scss';
+
+type BaseSize = 'sm' | 'md' | 'lg';
+export type CheckboxSize = BaseSize | ResponsiveProp<BaseSize>;
+
+export interface CheckboxProps
+  extends Omit<BoxProps, 'radius' | 'background' | 'as' | 'height'> {
+  /**
+   * The id attribute of the input.
+   */
+  id: string;
+  /**
+   * The checkbox input "checked" attribute.
+   */
+  isChecked: boolean;
+  /**
+   * Custom content to be displayed to right of checkbox.
+   */
+  label: string;
+  /**
+   * Callback function when input is changed.
+   */
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Custom class to apply to the checkbox container.
+   */
+  className?: string;
+  /**
+   * Mark the input field as invalid and display a validation message.
+   * Pass a string or node to render a validation message below the input.
+   */
+  error?: React.ReactNode;
+  /**
+   * id of the element that labels the Checkbox
+   */
+  labelledby?: string;
+  /**
+   * If the input should be disabled and not focusable.
+   */
+  isDisabled?: boolean;
+  /**
+   * If the radio input should be hidden to make way for a custom checkbox.
+   */
+  isHidden?: boolean;
+  /**
+   * Whether the checkbox is rendered in an indeterminate state.
+   * NOTE: this change is only visual and it does not affect the checked or unchecked state of the checkbox.
+   */
+  isIndeterminate?: boolean;
+  /**
+   * The required and aria-required attributes on the input
+   */
+  isRequired?: boolean;
+  /**
+   * Callback function when input is blurred.
+   */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Callback function when input is focused.
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * The size of the checkbox.
+   */
+  size?: CheckboxSize;
+  /**
+   * Value of the checkbox input element
+   */
+  value?: string | number;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = React.forwardRef(
+  (
+    {
+      className = '',
+      display = 'inline',
+      id,
+      isChecked,
+      label,
+      labelledby,
+      onChange,
+      error = false,
+      isDisabled = false,
+      isHidden = false,
+      isIndeterminate = false,
+      isRequired = false,
+      onBlur = undefined,
+      onFocus = undefined,
+      size = 'md',
+      value = undefined,
+      ...restProps
+    },
+    ref
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    React.useEffect(() => {
+      if (inputRef?.current) {
+        inputRef.current.indeterminate = isIndeterminate;
+      }
+    }, [isIndeterminate]);
+
+    const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+      if (onBlur) onBlur(event);
+    };
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+      onChange(event);
+    };
+
+    const handleFocus = (event: React.FocusEvent<HTMLInputElement>): void => {
+      if (onFocus) onFocus(event);
+    };
+
+    const inputProps = {
+      'aria-invalid': !!error,
+      'aria-label': label,
+      'aria-labelledby': labelledby,
+      'aria-required': isRequired,
+      id,
+      checked: !!isChecked,
+      disabled: isDisabled,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      required: isRequired,
+      type: 'checkbox',
+      ref: inputRef,
+      ...(value && { value }),
+    };
+
+    const responsiveClasses = generateResponsiveClasses('size', size);
+
+    const containerClasses = classNames(
+      styles.checkbox,
+      className,
+      ...responsiveClasses.map((c) => styles[c]),
+      { [styles.hidden]: isHidden }
+    );
+
+    const iconClasses = classNames(...responsiveClasses.map((c) => styles[c]));
+
+    return (
+      <Box
+        display={display}
+        ref={ref}
+        style={{ position: 'relative' }}
+        className={containerClasses}
+        {...restProps}
+      >
+        <input
+          {...inputProps}
+          style={{
+            position: 'absolute',
+            opacity: '0',
+          }}
+        />
+        {!isHidden && (
+          <CheckboxIcon
+            isChecked={isChecked}
+            isDisabled={isDisabled}
+            isIndeterminate={isIndeterminate}
+            className={iconClasses}
+            error={error}
+          />
+        )}
+      </Box>
+    );
+  }
+);