@hyphen/hyphen-components 2.9.0

package/src/components/SelectInputInset/SelectInputInset.test.tsx

@@ -0,0 +1,305 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { BreakpointSize } from '../../types';
+import { SelectInputInset } from './SelectInputInset';
+
+const selectOptions = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+describe('SelectInputInset', () => {
+  describe('Callback Handling', () => {
+    test('it fires onChange callback on change', async () => {
+      const mockedHandleChange = jest.fn();
+
+      const { getByLabelText } = render(
+        <SelectInputInset
+          id="testId"
+          onChange={mockedHandleChange}
+          placeholder="Test Placeholder"
+          label="onchange test"
+          options={selectOptions}
+          value={null}
+        />
+      );
+
+      await fireEvent.change(getByLabelText('onchange test'));
+
+      expect(mockedHandleChange).toBeCalledTimes(1);
+    });
+
+    test('it fires onFocus callback on focus', () => {
+      const mockedHandleChange = jest.fn();
+      const mockedHandleFocus = jest.fn();
+
+      render(
+        <SelectInputInset
+          id="testId"
+          onChange={mockedHandleChange}
+          onFocus={mockedHandleFocus}
+          placeholder="Test Placeholder"
+          options={selectOptions}
+          value={null}
+          label="onfocus test"
+        />
+      );
+      const select = screen.getByLabelText('onfocus test');
+      fireEvent.focus(select);
+
+      expect(mockedHandleFocus).toBeCalledTimes(1);
+    });
+
+    test('it fires onBlur callback on blur', () => {
+      const mockedHandleChange = jest.fn();
+      const mockedHandleBlur = jest.fn();
+
+      render(
+        <SelectInputInset
+          id="testId"
+          onChange={mockedHandleChange}
+          onBlur={mockedHandleBlur}
+          placeholder="Test Placeholder"
+          options={selectOptions}
+          value={null}
+          label="onblur test"
+        />
+      );
+
+      const select = screen.getByLabelText('onblur test');
+      fireEvent.blur(select);
+
+      expect(mockedHandleBlur).toBeCalledTimes(1);
+    });
+  });
+
+  describe('onClear', () => {
+    test('onClear prop renders clear icon when input has value', () => {
+      const mockedHandleChange = jest.fn();
+      render(
+        <SelectInputInset
+          id="testId"
+          onChange={mockedHandleChange}
+          options={selectOptions}
+          value="chocolate"
+          label="onClear test"
+          onClear={() => null}
+        />
+      );
+      const clearButton = screen.getByTestId('text-input-clear-button');
+      expect(clearButton).toBeInTheDocument();
+    });
+
+    test('onClear event fires callback function', () => {
+      const mockedHandleChange = jest.fn();
+      const mockedHandleClear = jest.fn(() => null);
+
+      render(
+        <SelectInputInset
+          id="testId"
+          onChange={mockedHandleChange}
+          options={selectOptions}
+          value="chocolate"
+          label="onClear test"
+          onClear={mockedHandleClear}
+        />
+      );
+      const clearButton = screen.getByTestId('text-input-clear-button');
+      expect(clearButton).toBeInTheDocument();
+
+      fireEvent.click(clearButton);
+      expect(mockedHandleClear).toHaveBeenCalledTimes(1);
+      fireEvent.keyUp(clearButton, { keyCode: 13 });
+      expect(mockedHandleClear).toHaveBeenCalledTimes(2);
+      fireEvent.keyUp(clearButton, { keyCode: 99 });
+      expect(mockedHandleClear).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('States', () => {
+    describe('With a label, and no custom placeholder', () => {
+      test('it renders input with a label, and with a default placeholder', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputInset
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            value={selectOptions[1].value}
+          />
+        );
+
+        expect(screen.getByLabelText('Select Label')).toBeInTheDocument();
+        expect(screen.getByText('Select...')).toBeInTheDocument();
+      });
+
+      test('assigns the "aria-labelledby" attribute and renders label correct id, when a label is provided', () => {
+        render(
+          <SelectInputInset
+            id="testInput"
+            label="test label"
+            options={selectOptions}
+            value={null}
+            onChange={() => null}
+          />
+        );
+        const inputElement = screen.getByLabelText('test label');
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          'testInputLabel'
+        );
+        expect(document.getElementById('testInputLabel')).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Required', () => {
+      test('it sets the required and aria-required properties on the input', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputInset
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Required Select"
+            options={selectOptions}
+            isRequired
+            value={selectOptions[0].value}
+          />
+        );
+
+        const inputElement = screen.getByLabelText('Required Select');
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+        expect(inputElement).toHaveAttribute('required');
+      });
+
+      test('it renders an asterisk in the label by default', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputInset
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            isRequired
+            value={selectOptions[0].value}
+          />
+        );
+
+        expect(screen.getByText('*')).toBeInTheDocument();
+      });
+    });
+
+    describe('Is Disabled', () => {
+      test('it disables the input', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputInset
+            id="testId"
+            onChange={mockedHandleChange}
+            label="disabled test"
+            options={selectOptions}
+            isDisabled
+            value={null}
+          />
+        );
+        const select = screen.getByLabelText('disabled test');
+        expect(select).toBeDisabled();
+      });
+    });
+
+    describe('Is Invalid, with a helpful message', () => {
+      test('it renders the helpful message', () => {
+        const mockedHandleChange = jest.fn();
+
+        render(
+          <SelectInputInset
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={selectOptions}
+            error="Helpful message"
+            value={null}
+          />
+        );
+
+        expect(screen.getByText('Helpful message')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Sizes', () => {
+    const mockedHandleChange = jest.fn();
+    const sizes = ['md', 'lg'] as ('md' | 'lg')[];
+
+    const breakpoints: BreakpointSize[] = ['tablet', 'desktop', 'hd'];
+
+    sizes.forEach((size) => {
+      test(`it has a ${size} class applied to it`, () => {
+        render(
+          <SelectInputInset
+            id="testId"
+            onChange={mockedHandleChange}
+            options={selectOptions}
+            value={selectOptions[0].value}
+            size={size}
+            label="size test"
+          />
+        );
+        const select = screen.getByLabelText('size test');
+        const selectParent = select.closest('div');
+        expect(selectParent?.getAttribute('class')).toContain(size);
+      });
+
+      breakpoints.forEach((breakpoint) => {
+        test(`it applies responsive classes for breakpoint: ${breakpoint} and size: ${size}`, () => {
+          render(
+            <SelectInputInset
+              id="testId"
+              onChange={mockedHandleChange}
+              options={selectOptions}
+              value={selectOptions[0].value}
+              size={{ [breakpoint]: size }}
+              label="size test"
+            />
+          );
+          const select = screen.getByLabelText('size test');
+          const selectParent = select.closest('div');
+
+          expect(selectParent?.getAttribute('class')).toContain(
+            `size-${size}-${breakpoint}`
+          );
+        });
+      });
+    });
+
+    test('It applies responsive classes when multiple are applied', () => {
+      render(
+        <SelectInputInset
+          id="testId"
+          onChange={mockedHandleChange}
+          options={selectOptions}
+          value={selectOptions[0].value}
+          size={{
+            base: 'md',
+            tablet: 'md',
+            desktop: 'lg',
+            hd: 'lg',
+          }}
+          label="size test"
+        />
+      );
+      const select = screen.getByLabelText('size test');
+      const selectParent = select.closest('div');
+
+      expect(selectParent?.getAttribute('class')).toContain('size-md');
+      expect(selectParent?.getAttribute('class')).toContain('size-md-tablet');
+      expect(selectParent?.getAttribute('class')).toContain('size-lg-desktop');
+      expect(selectParent?.getAttribute('class')).toContain('size-lg-hd');
+    });
+  });
+});

package/src/components/SelectInputInset/SelectInputInset.tsx

@@ -0,0 +1,235 @@
+import React, {
+  ChangeEvent,
+  forwardRef,
+  MouseEvent,
+  KeyboardEvent,
+  FocusEvent,
+  ForwardRefExoticComponent,
+  ReactNode,
+  HTMLProps,
+} from 'react';
+import classNames from 'classnames';
+import { ResponsiveProp } from '../../types';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+
+import { Box, BoxProps } from '../Box/Box';
+import { HelpText } from '../HelpText/HelpText';
+import { Icon } from '../Icon/Icon';
+import { getAutoCompleteValue } from '../../lib/getAutoCompleteValue';
+import styles from './SelectInputInset.module.scss';
+import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
+
+export type SelectInputInsetSize = 'md' | 'lg';
+export interface SelectInputInsetProps {
+  /**
+   * The input's id attribute. Used to programmatically tie the input with its label.
+   */
+  id: string;
+  /**
+   * Custom content to be displayed above the input. If the label is hidden, will be used to set aria-label attribute.
+   */
+  label: string;
+  /**
+   * List of options for the select input.
+   */
+  options: { value: string | number; label: string | number }[];
+  /**
+   * Callback function to call on change event.
+   */
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Value of selected option. Should match the value key in the option object.
+   */
+  value: string | number | null;
+  /**
+   * Automatically focus the input when the page is loaded.
+   */
+  autoFocus?: boolean;
+  /**
+   * Custom class to be added to standard input classes.
+   */
+  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;
+  /**
+   * Props passed directly to the input element of the component
+   */
+  inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+  /**
+   * The input's disabled attribute
+   */
+  isDisabled?: boolean;
+  /**
+   * The required and aria-required attributes on the input
+   */
+  isRequired?: boolean;
+  /**
+   * The input's 'name' attribute.
+   */
+  name?: string;
+  /**
+   * Callback function to call on blur event.
+   */
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Callback function to call when input us cleared. When this is passed,
+   * the input will display an icon on the right side, for triggering this callback.
+   */
+  onClear?: (
+    event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
+  ) => void;
+  /**
+   * Callback function to call on focus event.
+   */
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * The input placeholder attribute.
+   */
+  placeholder?: string;
+  /**
+   * Visual indicator that the field is required, that gets appended to the label
+   */
+  requiredIndicator?: ReactNode;
+  /**
+   * The size of the text input.
+   */
+  size?: SelectInputInsetSize | ResponsiveProp<SelectInputInsetSize>;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps> =
+  forwardRef<HTMLDivElement, SelectInputInsetProps>(
+    (
+      {
+        id,
+        label,
+        onChange,
+        value,
+        autoComplete = false,
+        autoFocus = false,
+        error = false,
+        helpText,
+        inputProps = {},
+        isDisabled = false,
+        isRequired = false,
+        name = '',
+        onBlur = undefined,
+        onClear = undefined,
+        onFocus = undefined,
+        options,
+        placeholder = 'Select...',
+        requiredIndicator = ' *',
+        size = 'md',
+      },
+      ref
+    ) => {
+      const placeholderOption = { value: '', label: placeholder };
+      const optionsWithPlaceholder = [{ ...placeholderOption }, ...options];
+
+      const responsiveClasses = generateResponsiveClasses('size', size);
+
+      const inputWrapperClasses = classNames(
+        'hyphen-components__variables__form-control',
+        styles['text-input-wrapper'],
+        ...responsiveClasses.map((c) => styles[c]),
+        {
+          [styles.error]: error,
+          [styles.disabled]: isDisabled,
+          [styles['is-clearable']]: onClear,
+        }
+      );
+
+      const clearBtnClasses = classNames(styles['clear-button'], styles.md);
+
+      const renderClearIcon = (): ReactNode => {
+        const handleKeyPress = (
+          event: KeyboardEvent<HTMLButtonElement>
+        ): void => {
+          if (event.keyCode === 13 && onClear) onClear(event);
+        };
+
+        return (
+          <button
+            type="button"
+            onClick={onClear}
+            onKeyUp={handleKeyPress}
+            className={clearBtnClasses}
+            data-testid="text-input-clear-button"
+            aria-label="clear input"
+          >
+            <Icon name="remove" className="display-block" />
+          </button>
+        );
+      };
+
+      const computedInputProps: SelectInputInsetProps['inputProps'] = {
+        ...inputProps, // These are spread first so that we don't have top level props overwritten by the user.
+        'aria-required': isRequired,
+        'aria-invalid': !!error,
+        'aria-label': label,
+        'aria-labelledby': label ? `${id}Label` : undefined,
+        autoComplete: getAutoCompleteValue(autoComplete),
+        autoFocus,
+        disabled: isDisabled,
+        id,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        required: isRequired,
+        value: value ?? '',
+        className: classNames(inputProps.className),
+      };
+
+      return (
+        <div ref={ref}>
+          <Box
+            direction="row"
+            flex="auto"
+            position="relative"
+            className={inputWrapperClasses}
+          >
+            <Box as="select" {...computedInputProps}>
+              {optionsWithPlaceholder.map((option) => (
+                <Box
+                  as="option"
+                  key={option.value}
+                  value={option.value}
+                  disabled={option.value === ''}
+                  hidden={option.value === ''}
+                  color={option.value === '' ? 'secondary' : 'base'}
+                >
+                  {option.label}
+                </Box>
+              ))}
+            </Box>
+            {!!onClear && !!value && renderClearIcon()}
+            <label
+              htmlFor={id}
+              className={styles['select-input-label']}
+              id={`${id}Label`}
+            >
+              {label}
+              {isRequired && requiredIndicator && (
+                <span>{requiredIndicator}</span>
+              )}
+            </label>
+          </Box>
+          {helpText && <HelpText>{helpText}</HelpText>}
+          {error && error !== true && (
+            <InputValidationMessage>{error}</InputValidationMessage>
+          )}
+        </div>
+      );
+    }
+  );

package/src/components/SelectInputNative/SelectInputNative.mdx

@@ -0,0 +1,87 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { SelectInputNative } from './SelectInputNative';
+import * as Stories from './SelectInputNative.stories';
+
+<Meta of={Stories} />
+
+# SelectInputNative
+
+Allows users to pick a value from a predefined list of options. Ideally, it should be used when there are 5 or more options, otherwise you should consider using a radio group instead.
+
+_NOTE:_ This is an alternative to the `SelectInput` component, but leveraging the native platform dropdown instead of a custom one. This is useful,
+when a custom UI is not needed for a select, or the native UI is preferred (this is recommended for most cases except multi-selects).
+
+## Props
+
+<ArgTypes of={SelectInputNative} />
+
+## Default
+
+All that is required to render a basic version of the SelectInputNative is a unique `id`, a `label`, a list of options passed to the `options` prop, a `value`, and an onchange event handler passed to the `onChange` prop.
+
+<Canvas of={Stories.Default} />
+
+## Pre-Selected
+
+Pre-select an option by passing its value to the `value` prop.
+
+<Canvas of={Stories.PreSelected} />
+
+## Help Text
+
+Use the `helpText` prop to add clarifying text beneath the input label.
+
+<Canvas of={Stories.HelpText} />
+
+## Placeholder
+
+Use the `placeholder` prop to add a custom placeholder. Note that this component automatically renders the first option
+to use as a placeholder with a value of `''`. This first option is however disabled can't be selected after a user has picked
+one of the real options.
+
+<Canvas of={Stories.Placeholder} />
+
+## Hidden Label
+
+Use the `hideLabel` prop to not render the label.
+
+<Canvas of={Stories.HiddenLabel} />
+
+## Autofocus
+
+Use the `autoFocus` prop to autofocus a SelectInput.
+
+<Canvas of={Stories.Autofocus} />
+
+## Required
+
+Use the `isRequired` prop to set the `required` and `aria-required` on the underlying input element.
+
+<Canvas of={Stories.Required} />
+
+You can remove or customize the required indicator using the `requiredIndicator` prop.
+
+<Canvas of={Stories.CustomRequiredIndicator} />
+
+## Disabled
+
+Use the `isDisabled` prop to mark the input as disabled.
+
+<Canvas of={Stories.Disabled} />
+
+## Error
+
+Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`. If either a `string` or `node` is passed, a validation message is displayed below it.
+
+<Canvas of={Stories.Error} />
+
+## Sizes
+
+Set the size of the input to `sm`, `md` or `lg`. `md` is the default size.
+The `size` prop is also a `ResponsiveProp`, so it can be sized differently at each [breakpoint](?path=/docs/design-tokens-design-tokens--page#breakpoints) by passing an object.
+
+<Canvas of={Stories.Sizes} />
+
+## Component Design Tokens
+
+This component shares component design tokens with all form controls. For a complete list of tokens, see the [Theming Form Controls documentation](/docs/theming-form-controls--custom-theme-form).