@hyphen/hyphen-components 2.9.0

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,145 @@
+import React, { FC, ChangeEvent, FocusEvent, ReactNode } from 'react';
+import classNames from 'classnames';
+import { Box } from '../Box/Box';
+import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
+import { RadioInput, RadioInputProps } from './RadioInput/RadioInput'; // eslint-disable-line import/no-cycle
+import styles from './RadioGroup.module.scss';
+
+export interface RadioGroupProps {
+  /**
+   * Radio group name.
+   */
+  name: string;
+  /**
+   * Callback function to call on change event.
+   */
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Options for radio group.
+   */
+  options: {
+    id: string;
+    value: string;
+    label: ReactNode;
+    disabled?: boolean | null;
+  }[];
+  /**
+   * Additional classes to add.
+   */
+  className?: string;
+  /**
+   * Description to be displayed below the title, and above the RadioGroup.
+   */
+  description?: ReactNode;
+  /**
+   * Whether the radios should be aligned in a row or in a column
+   */
+  direction?: 'row' | 'column';
+  /**
+   * Mark the radio group as invalid and display a validation message.
+   * Pass a string or node to render a validation message below the input.
+   */
+  error?: ReactNode;
+  /**
+   * If the radio group should be disabled and not focusable.
+   */
+  isDisabled?: boolean;
+  /**
+   * If the radio group is required or not
+   */
+  isRequired?: boolean;
+  /**
+   * Callback function to call on blur event.
+   */
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Callback function to call on focus event.
+   */
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Visual indicator that the field is required, that gets appended to the label
+   */
+  requiredIndicator?: React.ReactNode;
+  /**
+   * Size of the radio icons in the group.
+   */
+  size?: RadioInputProps['size'];
+  /**
+   * Title to be displayed above the RadioGroup.
+   */
+  title?: ReactNode;
+  /**
+   * The value of selected radio input.
+   */
+  value?: string;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const RadioGroup: FC<RadioGroupProps> = ({
+  name,
+  onChange,
+  options,
+  className = '',
+  description = undefined,
+  direction = 'column',
+  error = false,
+  isDisabled = false,
+  isRequired = false,
+  onBlur = undefined,
+  onFocus = undefined,
+  requiredIndicator = ' *',
+  size = 'md',
+  title = undefined,
+  value = undefined,
+  ...restProps
+}) => {
+  const groupClasses = classNames(
+    'hyphen-components__variables__form-control',
+    className,
+    {
+      [styles.loading]: error,
+    }
+  );
+
+  return (
+    <div
+      className={classNames(styles['radio-group'], groupClasses)}
+      {...restProps}
+    >
+      <fieldset className={styles.fieldset}>
+        {(title || description) && (
+          <legend className={styles.legend}>
+            {title}
+            {isRequired && <span>{requiredIndicator}</span>}
+            {description && (
+              <div className={styles.description}>{description}</div>
+            )}
+          </legend>
+        )}
+        <Box direction={direction} gap="sm" className={styles.options}>
+          {options &&
+            options.map((option) => (
+              <RadioInput
+                key={option.id}
+                name={name}
+                onChange={onChange}
+                option={option}
+                isDisabled={isDisabled || option.disabled || false}
+                isRequired={isRequired}
+                isSelected={value === option.value}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                size={size}
+              />
+            ))}
+        </Box>
+      </fieldset>
+      {error && typeof error !== 'boolean' && (
+        <InputValidationMessage>{error}</InputValidationMessage>
+      )}
+    </div>
+  );
+};

package/src/components/RadioGroup/RadioInput/RadioInput.module.scss

@@ -0,0 +1,114 @@
+@import '../../../styles/mixins';
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+$sm-dimension: 16px;
+$md-dimension: 20px;
+$lg-dimension: 24px;
+
+@mixin size-sm {
+  > :not(label) {
+    width: $sm-dimension;
+    height: $sm-dimension;
+  }
+}
+
+%size-sm {
+  @include size-sm;
+}
+.size-sm {
+  @extend %size-sm;
+}
+
+@mixin size-md {
+  > :not(label) {
+    width: $md-dimension;
+    height: $md-dimension;
+  }
+}
+
+%size-md {
+  @include size-md;
+}
+.size-md {
+  @extend %size-md;
+}
+
+@mixin size-lg {
+  > :not(label) {
+    width: $lg-dimension;
+    height: $lg-dimension;
+  }
+}
+
+%size-lg {
+  @include size-lg;
+}
+.size-lg {
+  @extend %size-lg;
+}
+
+.radio-container {
+  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)
+    );
+  }
+
+  // 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;
+  }
+
+  &.hidden {
+    @include accessible-hidden-element;
+  }
+}
+
+@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/RadioGroup/RadioInput/RadioInput.test.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { RadioInput } from './RadioInput';
+
+const mockOption = {
+  id: 'chocolate',
+  value: 'chocolate',
+  label: 'Chocolate',
+};
+
+const mockedHandleChange = jest.fn();
+
+describe('RadioInput', () => {
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test('onChange event fires callback function', () => {
+        render(
+          <RadioInput
+            size="sm"
+            name="mockName"
+            onChange={mockedHandleChange}
+            option={mockOption}
+          />
+        );
+
+        const radioInput = screen.getByLabelText('Chocolate');
+        fireEvent.click(radioInput);
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+      });
+
+      test('calls onChange and passes checked value in event', () => {
+        let value = null;
+        const mockedHandleChangeWithValue = jest.fn((event) => {
+          value = event.target.value;
+        });
+
+        render(
+          <RadioInput
+            size="sm"
+            name="mockName"
+            onChange={mockedHandleChangeWithValue}
+            option={mockOption}
+          />
+        );
+        const radioInput = screen.getByLabelText('Chocolate');
+        fireEvent.click(radioInput);
+        expect(mockedHandleChange).toBeCalledTimes(1);
+        expect(value).toBe('chocolate');
+      });
+    });
+
+    describe('onFocus', () => {
+      test('onFocus event fires callback function', () => {
+        const mockedHandleFocus = jest.fn();
+
+        render(
+          <RadioInput
+            size="sm"
+            name="mockName"
+            onChange={mockedHandleChange}
+            option={mockOption}
+            onFocus={mockedHandleFocus}
+          />
+        );
+        const radioInput = screen.getByLabelText('Chocolate');
+        fireEvent.focus(radioInput);
+        expect(mockedHandleFocus).toBeCalledTimes(1);
+      });
+    });
+
+    describe('onBlur', () => {
+      test('onBlur event fires callback function', () => {
+        const mockedHandleBlur = jest.fn();
+
+        render(
+          <RadioInput
+            size="sm"
+            name="mockName"
+            onChange={mockedHandleChange}
+            option={mockOption}
+            onBlur={mockedHandleBlur}
+          />
+        );
+        const radioInput = screen.getByLabelText('Chocolate');
+        fireEvent.blur(radioInput);
+        expect(mockedHandleBlur).toBeCalledTimes(1);
+      });
+    });
+  });
+
+  describe('States', () => {
+    describe('Default', () => {
+      test('it renders a radio input', () => {
+        render(
+          <RadioInput
+            size="sm"
+            name="mockName"
+            onChange={mockedHandleChange}
+            option={mockOption}
+          />
+        );
+
+        const radioInputElement = screen.getByRole('radio');
+        expect(radioInputElement).toBeInTheDocument();
+      });
+
+      test('it renders a label', () => {
+        render(
+          <RadioInput
+            size="sm"
+            name="mockName"
+            onChange={mockedHandleChange}
+            option={mockOption}
+          />
+        );
+
+        const radioInputLabel = screen.getByLabelText('Chocolate');
+        expect(radioInputLabel).toBeInTheDocument();
+      });
+    });
+
+    describe('Disabled', () => {
+      test('the radio input is disabled', () => {
+        render(
+          <RadioInput
+            size="sm"
+            name="mockName"
+            onChange={mockedHandleChange}
+            option={mockOption}
+            isDisabled
+          />
+        );
+
+        const radioInputElement = screen.getByRole('radio');
+        expect(radioInputElement).toBeDisabled();
+      });
+    });
+
+    describe('Hidden', () => {
+      test('the radio input is hidden', () => {
+        render(
+          <RadioInput
+            size="sm"
+            name="mockName"
+            onChange={mockedHandleChange}
+            option={mockOption}
+            isHidden
+          />
+        );
+
+        const radioInputContainer = screen.getByRole('radio').closest('div');
+        expect(radioInputContainer).toHaveClass('hidden');
+      });
+    });
+  });
+});

package/src/components/RadioGroup/RadioInput/RadioInput.tsx

@@ -0,0 +1,148 @@
+import React, { ChangeEvent, FocusEvent, ReactNode } from 'react';
+import classNames from 'classnames';
+import { ResponsiveProp } from '../../../types';
+import { generateResponsiveClasses } from '../../../lib/generateResponsiveClasses';
+import { Box, BoxProps } from '../../Box/Box';
+import { FormLabel } from '../../FormLabel/FormLabel';
+import { RadioInputIcon } from './RadioInputIcon'; // eslint-disable-line import/no-cycle
+import styles from './RadioInput.module.scss';
+
+type BaseSize = 'sm' | 'md' | 'lg';
+export type RadioSize = BaseSize | ResponsiveProp<BaseSize>;
+
+export interface RadioInputProps {
+  /**
+   * Radio input name.
+   */
+  name: string;
+  /**
+   * Callback function to call on change event.
+   */
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Options for radio group.
+   */
+  option: {
+    id: string;
+    value: string;
+    label: ReactNode;
+    disabled?: boolean | null;
+  };
+  /**
+   * Additional classes to add.
+   */
+  className?: string;
+  /**
+   * If the radio group should be disabled and not focusable.
+   */
+  isDisabled?: boolean;
+  /**
+   * If the radio input should be hidden to make way for a custom radio.
+   */
+  isHidden?: boolean;
+  /**
+   * The required and aria-required attributes
+   */
+  isRequired?: boolean;
+  /**
+   * If the radio group should be disabled and not focusable.
+   */
+  isSelected?: boolean;
+  /**
+   * Callback function to call on blur event.
+   */
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Callback function to call on focus event.
+   */
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * The size of the radio icon.
+   */
+  size: RadioSize;
+}
+
+export const RadioInput = React.forwardRef<HTMLDivElement, RadioInputProps>(
+  (
+    {
+      name,
+      onChange,
+      option,
+      className = '',
+      isDisabled = false,
+      isHidden = false,
+      isRequired = false,
+      isSelected = false,
+      onBlur = undefined,
+      onFocus = undefined,
+      size = 'md',
+    },
+    ref
+  ) => {
+    const responsiveClasses = classNames(
+      ...generateResponsiveClasses('size', size).map((c) => styles[c])
+    );
+
+    const labelProps = {
+      inputId: option.id,
+      isDisabled,
+      display: 'flex' as BoxProps['display'],
+      isRadioInputLabel: true,
+      justifyContent: 'center' as BoxProps['justifyContent'],
+    };
+
+    const containerClasses = classNames(
+      'hyphen-components__variables__form-control',
+      className,
+      styles['radio-container'],
+      responsiveClasses,
+      { [styles.hidden]: isHidden }
+    );
+
+    return (
+      <>
+        {option && (
+          <Box
+            className={containerClasses}
+            key={option.id}
+            direction="row"
+            alignItems="center"
+            ref={ref}
+            position="relative"
+          >
+            <Box
+              aria-required={isRequired}
+              as="input"
+              id={option.id}
+              type="radio"
+              name={name}
+              value={option.value}
+              checked={isSelected}
+              onChange={onChange}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              disabled={isDisabled}
+              position="absolute"
+              required={isRequired}
+              style={{ opacity: '0' }}
+              margin={isHidden ? '0' : '0 xs 0 2xs'}
+            />
+            {!isHidden && (
+              <RadioInputIcon
+                isSelected={isSelected}
+                isDisabled={isDisabled}
+                margin={isHidden ? '0' : '0 xs 0 2xs'}
+                className={responsiveClasses}
+                background={isDisabled && !isSelected ? 'secondary' : 'primary'}
+                radius="circle"
+              />
+            )}
+            {option.label && (
+              <FormLabel {...labelProps}>{option.label}</FormLabel>
+            )}
+          </Box>
+        )}
+      </>
+    );
+  }
+);

package/src/components/RadioGroup/RadioInput/RadioInputIcon.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Box, BoxProps } from '../../Box/Box';
+import { Icon } from '../../Icon/Icon';
+import { FontColor } from '../../../types';
+import { RadioInputProps } from './RadioInput'; // eslint-disable-line import/no-cycle
+import { RadioGroupProps } from '../RadioGroup'; // eslint-disable-line import/no-cycle
+
+export interface RadioIconProps extends BoxProps {
+  /**
+   * Custom className to be applied to root node of component.
+   */
+  className?: string;
+  /**
+   * Whether the input is in an error state. The icon will visually change accordingly.
+   */
+  error?: RadioGroupProps['error'];
+  /**
+   * Whether the radio is selected.
+   */
+  isSelected?: RadioInputProps['isSelected'];
+  /**
+   * If the input should be disabled and not focusable.
+   */
+  isDisabled?: RadioInputProps['isDisabled'];
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const RadioInputIcon: React.FC<RadioIconProps> = ({
+  className = undefined,
+  isSelected = false,
+  isDisabled = false,
+  error = null,
+  ...restProps
+}) => {
+  let color: FontColor = 'secondary';
+  let name: 'radio-btn-unchecked' | 'radio-btn-checked' = 'radio-btn-unchecked';
+
+  if (isSelected && isDisabled) {
+    color = 'disabled';
+    name = 'radio-btn-checked';
+  } else if (isSelected && !isDisabled) {
+    color = 'base';
+    name = 'radio-btn-checked';
+  } else if (isDisabled) {
+    color = 'disabled';
+  }
+
+  if (error) color = 'danger';
+  if (isDisabled && error) color = 'danger-disabled';
+
+  return (
+    <Box className={className} {...restProps}>
+      <Icon color={color} name={name} />
+    </Box>
+  );
+};

package/src/components/ResponsiveProvider/ResponsiveProvider.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { ResponsiveProvider } from './ResponsiveProvider';
+import * as Stories from './ResponsiveProvider.stories';
+
+<Meta of={Stories} />
+
+# ResponsiveProvider
+
+Use a `ResponsiveProvider` to provide window size context to all children components. This circumvents the need
+to set up individual resize listeners per component when detailed responsive behavior is required.
+
+This component is meant to be used in conjunction with the `useWindowSize` and `useBreakpoint` hooks provided in order to write responsive
+markup without diving into CSS.
+
+## Props
+
+<ArgTypes of={ResponsiveProvider} />
+
+## Basic Usage
+
+The `ResponsiveProvider` component can wrap any JSX component but in order to leverage the performance gains of a single context,
+it is best to use it once in an application, and placed as high as possible in the component tree (likely wrapping the App itself).
+
+The example below shows basic usage.
+
+**NOTE:** we've included hooks that work in conjuction with this component in order to get
+window size data from the provider. the example below uses `useWindowSize`.
+
+<Canvas isExpanded of={Stories.BasicUsage} />
+
+## Breakpoints
+
+Our library includes opinionated [breakpoints](?path=/story/design-tokens-design-tokens--page#breakpoints). The `useBreakpoint` hook exposes
+these to any component nested under a `ResponsiveProvider`
+
+<Canvas isExpanded of={Stories.Breakpoints} />