@hyphen/hyphen-components 2.9.0

package/src/components/TextInput/TextInput.test.tsx

@@ -0,0 +1,231 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import React from 'react';
+import { TextInput } from './TextInput';
+
+const baseProps = {
+  name: 'firstName',
+  id: 'firstName',
+  label: 'first name',
+  value: 'hello',
+  onChange: () => null,
+  onClear: undefined,
+};
+
+function getByTextWithMarkup(text: string) {
+  // eslint-disable-next-line
+  // @ts-ignore
+  return (content, element: Element) => {
+    const hasText = (node: Element) => node.textContent === text;
+    const elementHasText = hasText(element);
+    // eslint-disable-next-line
+    // @ts-ignore
+    const childrenDontHaveText = Array.from(element.children).every(
+      (child) => !hasText(child)
+    );
+
+    return elementHasText && childrenDontHaveText;
+  };
+}
+
+describe('TextInput', () => {
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test('onChange event fires callback function', () => {
+        const mockedHandleChange = jest.fn(() => null);
+
+        render(<TextInput {...baseProps} onChange={mockedHandleChange} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+
+        fireEvent.change(inputElement, { target: { value: 'good bye' } });
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+      });
+      test('Input value is updated properly when upper state changes', () => {
+        let value = 'hello';
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.value;
+        });
+        const { rerender } = render(
+          <TextInput
+            {...baseProps}
+            value={value}
+            onChange={mockedHandleChange}
+          />
+        );
+
+        const inputElement = screen.getByDisplayValue(
+          'hello'
+        ) as HTMLInputElement;
+        expect(inputElement.value).toBe('hello');
+
+        fireEvent.change(inputElement, { target: { value: 'good bye' } });
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+
+        rerender(
+          <TextInput
+            {...baseProps}
+            value={value}
+            onChange={mockedHandleChange}
+          />
+        );
+        expect(inputElement.value).toBe('good bye');
+      });
+    });
+
+    describe('onClear', () => {
+      test('onClear prop renders clear icon when input has value', () => {
+        render(<TextInput {...baseProps} onClear={() => null} />);
+        const clearButton = screen.getByTestId('text-input-clear-button');
+        expect(clearButton).toBeInTheDocument();
+      });
+
+      test('onClear event fires callback function', () => {
+        const mockedHandleClear = jest.fn(() => null);
+
+        render(<TextInput {...baseProps} 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('onFocus', () => {
+      test('Input fires onFocus callback', () => {
+        const mockedHandleFocus = jest.fn();
+        render(<TextInput {...baseProps} onFocus={mockedHandleFocus} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        fireEvent.focus(inputElement);
+        expect(mockedHandleFocus).toBeCalledTimes(1);
+      });
+    });
+
+    describe('onBlur', () => {
+      test('Input fires onBlur callback', () => {
+        const mockedHandleBlur = jest.fn();
+        render(<TextInput {...baseProps} onBlur={mockedHandleBlur} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        fireEvent.focus(inputElement);
+        fireEvent.blur(inputElement);
+        expect(mockedHandleBlur).toBeCalledTimes(1);
+      });
+    });
+  });
+
+  describe('States', () => {
+    describe('Label', () => {
+      test('it renders a label', () => {
+        render(<TextInput {...baseProps} />);
+
+        const labelElement = screen.getByText(baseProps.label);
+
+        expect(labelElement).toBeInTheDocument();
+      });
+    });
+
+    describe('Autofocused', () => {
+      test('Input autofocuses if "autoFocus" prop is set to true', () => {
+        render(<TextInput {...baseProps} autoFocus />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        expect(document.activeElement).toEqual(inputElement);
+      });
+    });
+
+    describe('Autocomplete', () => {
+      test('Input correctly assigns autocomplete value of "on" when bool true is provided', () => {
+        render(<TextInput {...baseProps} autoComplete />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        expect(inputElement).toHaveAttribute('autocomplete', 'on');
+      });
+
+      test('Input correctly assigns autocomplete value of "off" when bool false is provided', () => {
+        render(<TextInput {...baseProps} autoComplete={false} />);
+        const inputElement = screen.getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+      });
+
+      test('Input correctly assigns autocomplete specific value when provided', () => {
+        render(<TextInput {...baseProps} autoComplete="email" />);
+        const inputElement = screen.getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'email');
+      });
+    });
+
+    describe('Required', () => {
+      test('it correctly assigns the "aria-required" attribute when "isRequired" prop is true', () => {
+        render(<TextInput {...baseProps} isRequired />);
+
+        const inputElement = screen.getByDisplayValue('hello');
+
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+      });
+
+      test("it's label renders an asterisk indicating that it's required", () => {
+        render(<TextInput {...baseProps} isRequired />);
+
+        const labelElement = screen.getByText(
+          getByTextWithMarkup(`${baseProps.label} *`) as any
+        );
+
+        expect(labelElement).toBeInTheDocument();
+      });
+    });
+
+    describe('Error', () => {
+      test('Input correctly displays error message if provided', () => {
+        render(<TextInput {...baseProps} error="You silly goose" />);
+
+        const validationMessageElement = screen.getByText('You silly goose');
+
+        expect(validationMessageElement).toBeInTheDocument();
+        expect(validationMessageElement).toHaveTextContent('You silly goose');
+      });
+    });
+
+    describe('Max Length', () => {
+      test('Input correctly passes maxlength property if prop is passed', async () => {
+        render(<TextInput {...baseProps} value="" maxLength={3} />);
+
+        const inputElement = screen.getByLabelText(baseProps.label);
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement).toHaveAttribute('maxlength');
+        expect(inputElement.getAttribute('maxlength')).toBe('3');
+      });
+    });
+
+    describe('Aria-labelledby', () => {
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        render(<TextInput {...baseProps} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          `${baseProps.id}Label`
+        );
+        expect(document.getElementById(baseProps.id)).toBeInTheDocument();
+      });
+
+      test('does not assign "aria-labelledby" attribute when a label is hidden', () => {
+        render(<TextInput {...baseProps} hideLabel />);
+        const inputElement = screen.getByLabelText(baseProps.label);
+        expect(inputElement).not.toHaveAttribute('aria-labelledby');
+      });
+
+      describe('Prefix and Suffix', () => {
+        test('renders the prefix if specified', () => {
+          render(<TextInput {...baseProps} prefix="prefixValue" />);
+          expect(screen.getByText('prefixValue')).toBeInTheDocument();
+        });
+
+        test('renders the suffix if specified', () => {
+          render(<TextInput {...baseProps} suffix="suffixValue" />);
+          expect(screen.getByText('suffixValue')).toBeInTheDocument();
+        });
+      });
+    });
+  });
+});

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,263 @@
+import { Box, BoxProps } from '../Box/Box';
+import React, {
+  ChangeEvent,
+  FocusEvent,
+  ForwardRefExoticComponent,
+  HTMLProps,
+  InputHTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  forwardRef,
+} from 'react';
+
+import { FormControl } from '../FormControl/FormControl';
+import { Icon } from '../Icon/Icon';
+import { ResponsiveProp } from '../../types';
+import classNames from 'classnames';
+
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import { getAutoCompleteValue } from '../../lib/getAutoCompleteValue';
+import styles from './TextInput.module.scss';
+
+export type TextInputSizeType = 'sm' | 'md' | 'lg';
+export interface TextInputProps {
+  /**
+   * 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;
+  /**
+   * Callback function to call on change event.
+   */
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * The text value of the input. Required since our Input is a controlled component.
+   */
+  value: InputHTMLAttributes<HTMLInputElement>['value'];
+  /**
+   * 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;
+  /**
+   * Visually hide the label.
+   */
+  hideLabel?: boolean;
+  /**
+   * 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 'maxlength' attribute.
+   * NOTE: initializing the input with a value longer than the desired maxlength will not trim this value.
+   */
+  maxLength?: number;
+  /**
+   * 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;
+  /**
+   * An input helper rendered before the input field value
+   */
+  prefix?: ReactNode;
+  /**
+   * Visual indicator that the field is required, that gets appended to the label
+   */
+  requiredIndicator?: ReactNode;
+  /**
+   * The size of the text input.
+   */
+  size?: TextInputSizeType | ResponsiveProp<TextInputSizeType>;
+  /**
+   * An input helper rendered after the input field value
+   */
+  suffix?: ReactNode;
+  /**
+   * The input 'type' value. Defaults to type 'text'.
+   */
+  type?: InputHTMLAttributes<HTMLInputElement>['type'];
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const TextInput: ForwardRefExoticComponent<TextInputProps> = forwardRef<
+  HTMLDivElement,
+  TextInputProps
+>(
+  (
+    {
+      id,
+      label,
+      onChange,
+      value,
+      autoComplete = false,
+      autoFocus = false,
+      error = false,
+      helpText,
+      hideLabel = false,
+      inputProps = {},
+      isDisabled = false,
+      isRequired = false,
+      maxLength = undefined,
+      name = '',
+      onBlur = undefined,
+      onClear = undefined,
+      onFocus = undefined,
+      prefix = undefined,
+      placeholder = '',
+      requiredIndicator = ' *',
+      suffix = undefined,
+      size = 'md',
+      type = 'text',
+      ...restProps
+    },
+    ref
+  ) => {
+    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: TextInputProps['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 && !hideLabel ? `${id}Label` : undefined,
+      autoComplete: getAutoCompleteValue(autoComplete),
+      autoFocus,
+      disabled: isDisabled,
+      id,
+      maxLength,
+      name,
+      onBlur,
+      onChange,
+      onFocus,
+      placeholder,
+      required: isRequired,
+      type,
+      value,
+      className: classNames(inputProps.className, {
+        // 'p-left-xs p-left-xs-tablet p-left-xs-desktop p-left-xs-hd': prefix,
+        // 'p-right-xs p-right-xs-tablet p-right-xs-desktop p-right-xs-hd': suffix,
+        'p-h-0': !suffix && !prefix,
+      }),
+    };
+
+    return (
+      <FormControl
+        helpText={helpText}
+        error={error}
+        label={label}
+        id={id}
+        hideLabel={hideLabel}
+        isDisabled={isDisabled}
+        isRequired={isRequired}
+        requiredIndicator={requiredIndicator}
+        ref={ref}
+        {...restProps}
+      >
+        <Box direction="row" overflow="hidden" className={inputWrapperClasses}>
+          {prefix && (
+            <Box
+              color="secondary"
+              background="secondary"
+              className={classNames(styles.prefix, 'ws-nowrap')}
+            >
+              {prefix}
+            </Box>
+          )}
+
+          <Box as="input" {...computedInputProps} />
+
+          {!!onClear && !!value && renderClearIcon()}
+          {suffix && (
+            <Box
+              color="secondary"
+              background="secondary"
+              className={classNames(styles.suffix, 'ws-nowrap')}
+            >
+              {suffix}
+            </Box>
+          )}
+        </Box>
+      </FormControl>
+    );
+  }
+);

package/src/components/TextInputInset/TextInputInset.mdx

@@ -0,0 +1,62 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { TextInputInset } from './TextInputInset';
+import * as Stories from './TextInputInset.stories';
+
+<Meta of={Stories} />
+
+# TextInputInset
+
+Use `TextInputInset` to create a floating label input field. It is a controlled component, which means that you need to provide a value and an `onChange` handler to update the value.
+
+<Canvas withSource="open" of={Stories.Default} />
+
+## Props
+
+<ArgTypes of={TextInputInset} />
+
+### Required
+
+Use the `isRequired` prop to display an `*` after the label and set the `required` and `aria-required` on the underlying input element. You can also use the `requiredIndicator` prop to customize the indicator that appears next to the label.
+
+<Canvas of={Stories.Required} />
+
+### Help Text
+
+Use `helpText` to provide additional information about the input field.
+
+<Canvas of={Stories.HelpText} />
+
+### Validation Error
+
+Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`.
+
+<Canvas of={Stories.ValidationError} />
+
+### Disabled
+
+Add `isDisabled`to give it a grayed out appearance, remove pointer events, and prevent focusing.
+
+<Canvas of={Stories.Disabled} />
+
+### Clearable
+
+Use the `onClear` prop to display a clear icon (x) when the input has a value. `onClear` will fire
+a callback function when the clear icon is clicked, which can then be handled to clear the value.
+
+<Canvas of={Stories.Clearable} />
+
+### Prefix and Suffix
+
+All that is required to render a basic version of the TextInput is a unique `id`, `label`, `value`, and an onchange event handler passed to the `onChange` prop.
+
+<Canvas of={Stories.PrefixAndSuffix} />
+
+### Sizes
+
+Two sizes, `md` and `lg` are available, with `md` being the default.
+
+<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).