@hyphen/hyphen-components 2.9.0

package/src/components/TextInputInset/TextInputInset.test.tsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { TextInputInset } from './TextInputInset';
+
+const baseProps = {
+  name: 'firstName',
+  id: 'firstName',
+  label: 'first name',
+  value: 'hello',
+  onChange: () => null,
+  onClear: undefined,
+};
+
+describe('TextInput', () => {
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test('onChange event fires callback function', () => {
+        const mockedHandleChange = jest.fn(() => null);
+
+        render(<TextInputInset {...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(
+          <TextInputInset
+            {...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(
+          <TextInputInset
+            {...baseProps}
+            value={value}
+            onChange={mockedHandleChange}
+          />
+        );
+        expect(inputElement.value).toBe('good bye');
+      });
+    });
+
+    describe('onClear', () => {
+      test('onClear prop renders clear icon when input has value', () => {
+        render(<TextInputInset {...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(<TextInputInset {...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(<TextInputInset {...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(<TextInputInset {...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(<TextInputInset {...baseProps} />);
+
+        const labelElement = screen.getByText(baseProps.label);
+
+        expect(labelElement).toBeInTheDocument();
+      });
+    });
+
+    describe('Autofocused', () => {
+      test('Input autofocuses if "autoFocus" prop is set to true', () => {
+        render(<TextInputInset {...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(<TextInputInset {...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(<TextInputInset {...baseProps} autoComplete={false} />);
+        const inputElement = screen.getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+      });
+
+      test('Input correctly assigns autocomplete specific value when provided', () => {
+        render(<TextInputInset {...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(<TextInputInset {...baseProps} isRequired />);
+
+        const inputElement = screen.getByDisplayValue('hello');
+
+        expect(inputElement).toHaveAttribute('aria-required', 'true');
+      });
+    });
+
+    describe('Error', () => {
+      test('Input correctly displays error message if provided', () => {
+        render(<TextInputInset {...baseProps} error="You silly goose" />);
+
+        const validationMessageElement = screen.getByText('You silly goose');
+
+        expect(validationMessageElement).toBeInTheDocument();
+        expect(validationMessageElement).toHaveTextContent('You silly goose');
+      });
+    });
+
+    describe('Help Text', () => {
+      test('Input renders help text', async () => {
+        const { getByText } = render(
+          <TextInputInset {...baseProps} value="" helpText="i am help text" />
+        );
+
+        expect(getByText('i am help text')).toBeDefined();
+      });
+    });
+
+    describe('Max Length', () => {
+      test('Input correctly passes maxlength property if prop is passed', async () => {
+        render(<TextInputInset {...baseProps} value="" maxLength={3} />);
+
+        const inputElement = screen.getByLabelText(baseProps.label);
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement).toHaveAttribute('maxlength');
+        expect(inputElement.getAttribute('maxlength')).toBe('3');
+      });
+    });
+
+    describe('Name', () => {
+      test('Input correctly passes name property if prop is passed', async () => {
+        render(
+          <TextInputInset {...baseProps} value="" name="test floating label" />
+        );
+
+        const inputElement = screen.getByLabelText(baseProps.label);
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement).toHaveAttribute('name');
+        expect(inputElement.getAttribute('name')).toBe('test floating label');
+      });
+    });
+
+    describe('Aria-labelledby', () => {
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        render(<TextInputInset {...baseProps} />);
+        const inputElement = screen.getByDisplayValue(baseProps.value);
+        expect(inputElement).toHaveAttribute(
+          'aria-labelledby',
+          `${baseProps.id}Label`
+        );
+        expect(document.getElementById(baseProps.id)).toBeInTheDocument();
+      });
+    });
+
+    describe('Prefix and Suffix', () => {
+      test('renders the prefix if specified', () => {
+        render(<TextInputInset {...baseProps} prefix="prefixValue" />);
+        expect(screen.getByText('prefixValue')).toBeInTheDocument();
+      });
+
+      test('renders the suffix if specified', () => {
+        render(<TextInputInset {...baseProps} suffix="suffixValue" />);
+        expect(screen.getByText('suffixValue')).toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/components/TextInputInset/TextInputInset.tsx

@@ -0,0 +1,261 @@
+import React, {
+  ChangeEvent,
+  forwardRef,
+  MouseEvent,
+  KeyboardEvent,
+  FocusEvent,
+  ForwardRefExoticComponent,
+  ReactNode,
+  HTMLProps,
+  InputHTMLAttributes,
+} 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 './TextInputInset.module.scss';
+import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
+
+export type TextInputInsetSize = 'md' | 'lg';
+export interface TextInputInsetProps {
+  /**
+   * 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;
+  /**
+   * 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?: TextInputInsetSize | ResponsiveProp<TextInputInsetSize>;
+  /**
+   * 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 TextInputInset: ForwardRefExoticComponent<TextInputInsetProps> =
+  forwardRef<HTMLDivElement, TextInputInsetProps>(
+    (
+      {
+        id,
+        label,
+        onChange,
+        value,
+        autoComplete = false,
+        autoFocus = false,
+        error = false,
+        helpText,
+        inputProps = {},
+        isDisabled = false,
+        isRequired = false,
+        maxLength = undefined,
+        name = '',
+        onBlur = undefined,
+        onClear = undefined,
+        onFocus = undefined,
+        prefix = undefined,
+        placeholder = ' ',
+        requiredIndicator = ' *',
+        suffix = undefined,
+        size = 'md',
+        type = 'text',
+      },
+      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: TextInputInsetProps['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,
+        maxLength,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        placeholder,
+        required: isRequired,
+        type,
+        value,
+        className: classNames(inputProps.className),
+      };
+
+      return (
+        <Box width="100" ref={ref}>
+          <Box direction="row" className={inputWrapperClasses}>
+            {prefix && (
+              <Box
+                color="base"
+                alignItems="center"
+                justifyContent="center"
+                background="secondary"
+                className={classNames(styles.prefix, 'ws-nowrap')}
+              >
+                {prefix}
+              </Box>
+            )}
+            <Box
+              direction="row"
+              position="relative"
+              className="label-input-wrapper"
+              flex="auto"
+            >
+              <Box as="input" {...computedInputProps} />
+              {!!onClear && !!value && renderClearIcon()}
+              <label
+                htmlFor={id}
+                className={styles['text-input-label']}
+                id={`${id}Label`}
+              >
+                {label}
+                {isRequired && requiredIndicator && (
+                  <span>{requiredIndicator}</span>
+                )}
+              </label>
+            </Box>
+            {suffix && (
+              <Box
+                color="base"
+                background="secondary"
+                className={classNames(styles.suffix, 'ws-nowrap')}
+              >
+                {suffix}
+              </Box>
+            )}
+          </Box>
+          {helpText && <HelpText>{helpText}</HelpText>}
+          {error && error !== true && (
+            <InputValidationMessage>{error}</InputValidationMessage>
+          )}
+        </Box>
+      );
+    }
+  );

package/src/components/TextareaInput/TextareaInput.mdx

@@ -0,0 +1,117 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { TextareaInput } from './TextareaInput';
+import * as Stories from './TextareaInput.stories';
+
+<Meta of={Stories} />
+
+# TextareaInput
+
+Use TextareaInput to render a multi-line text input.
+
+<Canvas isExpanded of={Stories.Basic} />
+
+## Props
+
+<ArgTypes of={TextareaInput} />
+
+## Examples
+
+All that is required to render a basic version of the TextareaInput is a unique `id`, `label`, `value`, and an onchange event handler passed to the `onChange` prop.
+The input is vertically resizable by default.
+
+<Canvas of={Stories.Default} />
+
+## 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} />
+
+## Help Text
+
+Use the `helpText` prop to add clarifying text beneath the input label.
+
+<Canvas of={Stories.HelpText} />
+## Resize
+
+The `resize` prop accepts `horizontal`, `vertical`, `both` or `none` to control the users ability to resize the input.
+
+<Canvas of={Stories.Resize} />
+
+## Sizes
+
+Set the `size` of the input to `sm`, `md` or `lg`. 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} />
+
+## Placeholder
+
+Use the `placeholder` prop to add a custom placeholder.
+
+<Canvas of={Stories.Placeholder} />
+
+## Autofocus
+
+Use the `autoFocus` prop to autofocus the input.
+
+<Canvas of={Stories.Autofocus} />
+
+## Hidden Label
+
+Use the `hideLabel` prop to not render the label.
+
+<Canvas of={Stories.HiddenLabel} />
+
+## Disabled
+
+Use the `isDisabled` prop to mark the input as disabled.
+
+<Canvas of={Stories.Disabled} />
+
+## Disabled with Value
+
+Use the `isDisabled` prop to mark the input as disabled. Disabled inputs can have values that are either preset, or entered by users.
+
+<Canvas of={Stories.DisabledWithValue} />
+
+## Disabled with Placeholder
+
+Use the `isDisabled` prop to mark the input as disabled. Disabled inputs can have placeholders.
+
+<Canvas of={Stories.DisabledWithPlaceholder} />
+
+## Max Length
+
+Use the `maxLength` prop to limit the number of characters that can be entered into an input.
+
+<Canvas of={Stories.MaxLength} />
+
+## Required with Error
+
+Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`. A `boolean` is passed in this example.
+
+<Canvas of={Stories.RequiredWithError} />
+
+## Required with Error and Validation Message
+
+Pass a `string` or `node` to the `error` prop to render a validation message.
+
+<Canvas of={Stories.RequiredWithErrorAndValidationMessage} />
+
+## Not Required with Error and Validation Message
+
+An input does not need to be marked as required to render a validation message.
+
+<Canvas of={Stories.NotRequiredWithErrorAndValidationMessage} />
+
+## Error with Hidden Label
+
+<Canvas of={Stories.ErrorWithHiddenLabel} />
+
+## 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).