@hyphen/hyphen-components 2.9.0

package/src/components/Toggle/Toggle.test.tsx

@@ -0,0 +1,308 @@
+import { Toggle, ToggleSize } from './Toggle';
+import { fireEvent, render } from '@testing-library/react';
+
+import React from 'react';
+
+const TOGGLE_SIZES: ToggleSize[] = ['sm', 'md', 'lg'];
+
+describe('Toggle', () => {
+  test('not disabled, checked, or invalid by default', () => {
+    const { getByLabelText } = render(
+      <Toggle
+        id="testToggle"
+        label="test toggle"
+        isChecked={false}
+        onChange={() => null}
+      />
+    );
+    const toggle = getByLabelText('test toggle') as HTMLInputElement;
+
+    expect(toggle.checked).toBe(false);
+    expect(toggle.disabled).toBe(false);
+    expect(toggle.getAttribute('aria-invalid')).toBe('false');
+  });
+
+  test('input is checked when isChecked is true', () => {
+    const { getByLabelText } = render(
+      <Toggle
+        id="testToggle"
+        label="test toggle"
+        onChange={() => null}
+        isChecked
+      />
+    );
+    const toggle = getByLabelText('test toggle') as HTMLInputElement;
+    expect(toggle.checked).toEqual(true);
+  });
+
+  test('input is not checked when isChecked is false', () => {
+    const { getByLabelText } = render(
+      <Toggle
+        id="testToggle"
+        label="test toggle"
+        isChecked={false}
+        onChange={() => null}
+      />
+    );
+    const toggle = getByLabelText('test toggle') as HTMLInputElement;
+    expect(toggle.checked).toEqual(false);
+  });
+
+  test('assigns the "aria-labelledby" attribute', () => {
+    const { getByLabelText } = render(
+      <Toggle
+        isChecked={false}
+        id="testInput"
+        label="test label"
+        onChange={() => null}
+      />
+    );
+    expect(getByLabelText('test label')).toHaveAttribute(
+      'aria-labelledby',
+      'testInputLabel'
+    );
+  });
+
+  test('aria-label is assigned if label is hidden', () => {
+    const { getByLabelText } = render(
+      <Toggle
+        isChecked={false}
+        id="testInput"
+        label="hidden test label"
+        hideLabel
+        onChange={() => null}
+      />
+    );
+    expect(getByLabelText('hidden test label')).toBeInTheDocument();
+  });
+
+  test('HelpText is rendered when set', () => {
+    const { getByText } = render(
+      <Toggle
+        isChecked={false}
+        id="testInput"
+        label="test label"
+        helpText="help text"
+        onChange={() => null}
+      />
+    );
+    expect(getByText('help text')).toBeInTheDocument();
+  });
+
+  describe('error states', () => {
+    test('renders error message if error exists and is not true', () => {
+      const { getByText } = render(
+        <Toggle
+          id="testToggle"
+          label="test toggle"
+          isChecked={false}
+          onChange={() => null}
+          error="This is the error message"
+        />
+      );
+      expect(getByText('This is the error message')).toBeInTheDocument();
+    });
+  });
+
+  test('controlled - check and unchecked when clicked', () => {
+    const ControlledToggle = () => {
+      const [checked, setChecked] = React.useState(false);
+      return (
+        <Toggle
+          id="testToggle"
+          label="test toggle"
+          isChecked={checked}
+          onChange={(e) => {
+            setChecked(e.target.checked);
+          }}
+        />
+      );
+    };
+
+    const { getByLabelText, container } = render(<ControlledToggle />);
+
+    const input = container.querySelector('input');
+
+    expect(input).not.toBeChecked();
+
+    const toggle = getByLabelText('test toggle');
+    fireEvent.click(toggle);
+
+    expect(input).toBeChecked();
+
+    fireEvent.click(toggle);
+
+    expect(input).not.toBeChecked();
+  });
+
+  describe('onChange', () => {
+    test('onChange event fires callback function', () => {
+      const mockedHandleChange = jest.fn(() => null);
+
+      const { getByLabelText } = render(
+        <Toggle
+          id="testToggle"
+          label="test toggle"
+          isChecked={false}
+          onChange={mockedHandleChange}
+        />
+      );
+      const toggle = getByLabelText('test toggle');
+      fireEvent.click(toggle);
+      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(
+        <Toggle
+          id="testToggle"
+          label="test toggle"
+          onChange={mockedHandleChange}
+          isChecked={value}
+        />
+      );
+      const toggle = getByLabelText('test toggle');
+      fireEvent.click(toggle);
+      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>
+          <Toggle
+            id="testToggle"
+            label="test toggle"
+            isChecked={false}
+            onChange={() => null}
+            onFocus={mockedHandleFocus}
+            onBlur={undefined}
+          />
+        </div>
+      );
+      getByLabelText('test toggle').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>
+          <Toggle
+            id="testToggle"
+            label="test toggle"
+            isChecked={false}
+            onChange={() => null}
+            onBlur={mockedHandleBlur}
+          />
+        </div>
+      );
+      getByLabelText('test toggle').focus();
+      getByText('focus').focus();
+      expect(mockedHandleBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Sizes', () => {
+    const breakpoints = ['tablet', 'desktop', 'hd'];
+
+    TOGGLE_SIZES.forEach((size) => {
+      test(`it has a ${size} class applied to the toggle thumb and track`, () => {
+        const { getByTestId } = render(
+          <Toggle
+            id="testToggle"
+            label={`test ${size} toggle`}
+            isChecked={false}
+            onChange={() => null}
+            size={size}
+          />
+        );
+
+        expect(getByTestId('toggleTrack').getAttribute('class')).toContain(
+          `track-size-${size}`
+        );
+        expect(getByTestId('toggleThumb').getAttribute('class')).toContain(
+          `thumb-size-${size}`
+        );
+      });
+
+      breakpoints.forEach((breakpoint) => {
+        test(`it applies responsive classes for breakpoint: ${breakpoint} and size: ${size}`, () => {
+          const { getByTestId } = render(
+            <Toggle
+              id="testToggle"
+              label={`test ${size} toggle`}
+              isChecked={false}
+              onChange={() => null}
+              size={{ [breakpoint]: size }}
+            />
+          );
+
+          expect(getByTestId('toggleTrack').getAttribute('class')).toContain(
+            `track-size-${size}-${breakpoint}`
+          );
+          expect(getByTestId('toggleThumb').getAttribute('class')).toContain(
+            `thumb-size-${size}-${breakpoint}`
+          );
+        });
+      });
+    });
+
+    test('It applies responsive classes when multiple are applied', () => {
+      const { getByTestId } = render(
+        <Toggle
+          id="testToggle"
+          label={`test toggle`}
+          isChecked={false}
+          onChange={() => null}
+          size={{
+            base: 'sm',
+            tablet: 'md',
+            desktop: 'lg',
+            hd: 'sm',
+          }}
+        />
+      );
+
+      expect(getByTestId('toggleTrack').getAttribute('class')).toContain(
+        'track-size-sm'
+      );
+      expect(getByTestId('toggleTrack').getAttribute('class')).toContain(
+        'track-size-md-tablet'
+      );
+      expect(getByTestId('toggleTrack').getAttribute('class')).toContain(
+        'track-size-lg-desktop'
+      );
+      expect(getByTestId('toggleTrack').getAttribute('class')).toContain(
+        'track-size-sm-hd'
+      );
+      expect(getByTestId('toggleThumb').getAttribute('class')).toContain(
+        'thumb-size-sm'
+      );
+      expect(getByTestId('toggleThumb').getAttribute('class')).toContain(
+        'thumb-size-md-tablet'
+      );
+      expect(getByTestId('toggleThumb').getAttribute('class')).toContain(
+        'thumb-size-lg-desktop'
+      );
+      expect(getByTestId('toggleThumb').getAttribute('class')).toContain(
+        'thumb-size-sm-hd'
+      );
+    });
+  });
+});

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,184 @@
+import { Box, BoxProps } from '../Box/Box';
+import React, { ChangeEvent, FC, FocusEvent, ReactNode } from 'react';
+
+import { FormLabel } from '../FormLabel/FormLabel';
+import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
+import { ResponsiveProp } from '../../types';
+import classNames from 'classnames';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import styles from './Toggle.module.scss';
+
+export type ToggleSize = 'sm' | 'md' | 'lg';
+export interface ToggleProps {
+  /**
+   * The id attribute of the input.
+   */
+  id: string;
+  /**
+   * The toggle input "checked" attribute.
+   */
+  isChecked: boolean;
+  /**
+   * Custom content to be displayed to right of toggle.
+   */
+  label: string;
+  /**
+   * Callback function when input is changed.
+   */
+  onChange: (event: 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?: ReactNode;
+  /**
+   * Additional clarifying text to help describe the input
+   */
+  helpText?: 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;
+  /**
+   * The required and aria-required attributes on the input
+   */
+  isRequired?: boolean;
+  /**
+   * Callback function when input is blurred.
+   */
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Callback function when input is focused.
+   */
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Visual indicator that the field is required, that gets appended to the label
+   */
+  requiredIndicator?: React.ReactNode;
+  /**
+   * The size of the toggle.
+   */
+  size?: ToggleSize | ResponsiveProp<ToggleSize>;
+}
+
+export const Toggle: FC<ToggleProps> = ({
+  id,
+  isChecked,
+  label,
+  onChange,
+  className = '',
+  error = false,
+  hideLabel = false,
+  helpText,
+  isDisabled = false,
+  isRequired = false,
+  onBlur = undefined,
+  onFocus = undefined,
+  requiredIndicator = ' *',
+  size = 'md',
+}) => {
+  const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
+    if (onBlur) onBlur(event);
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    onChange(event);
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>): void => {
+    if (onFocus) onFocus(event);
+  };
+
+  const wrapperClasses = classNames(
+    'hyphen-components__variables__form-control',
+    { [styles.disabled]: isDisabled }
+  );
+  const trackClasses = classNames(
+    styles['toggle-track'],
+    ...generateResponsiveClasses('track-size', size).map((c) => styles[c]),
+    {
+      [styles.error]: error,
+    }
+  );
+  const thumbClasses = classNames(
+    styles['toggle-thumb'],
+    ...generateResponsiveClasses('thumb-size', size).map((c) => styles[c])
+  );
+
+  const inputProps = {
+    'aria-required': isRequired,
+    'aria-invalid': !!error,
+    'aria-label': label,
+    'aria-labelledby': label && !hideLabel ? `${id}Label` : undefined,
+    id,
+    checked: !!isChecked,
+    disabled: isDisabled,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    required: isRequired,
+    type: 'checkbox',
+    className: styles['toggle-input'],
+  };
+
+  const labelProps = {
+    inputId: id,
+    isDisabled,
+    display: 'flex' as BoxProps['display'],
+    direction: 'row' as BoxProps['direction'],
+    childGap: 'md' as BoxProps['childGap'],
+    alignItems: helpText ? 'flex-start' : ('center' as BoxProps['alignItems']),
+    isFieldRequired: isRequired,
+    requiredIndicator,
+  };
+
+  return (
+    <Box className={className}>
+      <Box className={wrapperClasses}>
+        <FormLabel {...labelProps}>
+          <input {...inputProps} />
+          <span
+            aria-hidden="true"
+            className={trackClasses}
+            data-testid="toggleTrack"
+          >
+            <span className={thumbClasses} data-testid="toggleThumb" />
+          </span>
+          {!hideLabel && (
+            <Box
+              gap="2xs"
+              className={
+                helpText && (size === 'md' || size === 'lg') ? 'm-top-2xs' : ''
+              }
+            >
+              {label && <div>{label}</div>}
+              {helpText && (
+                <Box
+                  as="p"
+                  display="block"
+                  fontSize="sm"
+                  fontWeight="normal"
+                  color="secondary"
+                >
+                  {helpText}
+                </Box>
+              )}
+            </Box>
+          )}
+        </FormLabel>
+      </Box>
+      {error && error !== true && (
+        <InputValidationMessage>{error}</InputValidationMessage>
+      )}
+    </Box>
+  );
+};

package/src/constants/keyCodes.ts

@@ -0,0 +1,2 @@
+export const ENTER = 13;
+export const SPACE = 32;

package/src/docs/Brands.mdx

@@ -0,0 +1,153 @@
+import { Meta } from '@storybook/blocks';
+
+import HyphenLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalRgbPositive';
+import HyphenLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalRgbNegative';
+import HyphenLogoHorizontalBlack from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalBlack';
+import HyphenLogoHorizontalWhite from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalWhite';
+import EnvLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/EnvLogoRgbPositive';
+import EnvLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/EnvLogoRgbNegative';
+import LinkLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbPositive';
+import LinkLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbNegative';
+import ToggleLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbPositive';
+import ToggleLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbNegative';
+
+import { Box } from '../components/Box/Box';
+
+<Meta title="Brands/Logos" />
+
+# Brands
+
+## Hyphen
+
+<Box direction="row">
+  <Box
+    background="secondary"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <HyphenLogoHorizontalRgbPositive width="160px" />
+  </Box>
+  <Box
+    background="inverse"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <HyphenLogoHorizontalRgbNegative width="160px" />
+  </Box>
+</Box>
+
+<Box direction="row">
+  <Box
+    background="secondary"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <HyphenLogoHorizontalBlack width="160px" />
+  </Box>
+  <Box
+    background="brand-gradient"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <HyphenLogoHorizontalWhite width="160px" />
+  </Box>
+</Box>
+
+## ENV
+
+<Box direction="row">
+  <Box
+    background="secondary"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <EnvLogoRgbPositive width="160px" />
+  </Box>
+  <Box
+    background="dark-purple"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <EnvLogoRgbNegative width="160px" />
+  </Box>
+</Box>
+
+## Link
+
+<Box direction="row">
+  <Box
+    background="secondary"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <LinkLogoRgbPositive width="160px" />
+  </Box>
+  <Box
+    background="dark-grey"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <LinkLogoRgbNegative width="160px" />
+  </Box>
+</Box>
+
+## Toggle
+
+<Box direction="row">
+  <Box
+    background="secondary"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <ToggleLogoHorizontalRgbPositive width="160px" />
+  </Box>
+  <Box
+    background="dark-purple"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <ToggleLogoHorizontalRgbNegative width="160px" />
+  </Box>
+</Box>
+
+{/* <img src={ToggleLogo} /> */}