@hyphen/hyphen-components 2.9.0

package/src/components/TextareaInput/TextareaInput.test.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { TextareaInput } from './TextareaInput';
+
+const baseProps = {
+  name: 'firstName',
+  id: 'firstName',
+  label: 'first name',
+  value: 'hello',
+  onChange: () => null,
+};
+
+function getByTextWithMarkup(text: string) {
+  // eslint-disable-next-line
+  // @ts-ignore
+  return (content, 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 as Element)
+    );
+
+    return elementHasText && childrenDontHaveText;
+  };
+}
+
+describe('TextareaInput', () => {
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test('onChange event fires callback function', () => {
+        const mockedHandleChange = jest.fn(() => null);
+
+        render(<TextareaInput {...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(
+          <TextareaInput
+            {...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(
+          <TextareaInput
+            {...baseProps}
+            value={value}
+            onChange={mockedHandleChange}
+          />
+        );
+        expect(inputElement.value).toBe('good bye');
+      });
+    });
+
+    describe('onFocus', () => {
+      test('Input fires onFocus callback', () => {
+        const mockedHandleFocus = jest.fn();
+        render(<TextareaInput {...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(<TextareaInput {...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(<TextareaInput {...baseProps} />);
+
+        const labelElement = screen.getByText(baseProps.label);
+
+        expect(labelElement).toBeInTheDocument();
+      });
+    });
+
+    describe('Autofocused', () => {
+      test('Input autofocuses if "autoFocus" prop is set to true', () => {
+        render(<TextareaInput {...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(<TextareaInput {...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(<TextareaInput {...baseProps} autoComplete={false} />);
+        const inputElement = screen.getByDisplayValue('hello');
+        expect(inputElement).toHaveAttribute('autocomplete', 'off');
+      });
+
+      test('Input correctly assigns autocomplete specific value when provided', () => {
+        render(<TextareaInput {...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(<TextareaInput {...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(<TextareaInput {...baseProps} isRequired />);
+
+        const labelElement = screen.getByText(
+          getByTextWithMarkup(`${baseProps.label} *`)
+        );
+
+        expect(labelElement).toBeInTheDocument();
+      });
+    });
+
+    describe('Error', () => {
+      test('Input correctly displays error message if provided', () => {
+        render(<TextareaInput {...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(<TextareaInput {...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(<TextareaInput {...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(<TextareaInput {...baseProps} hideLabel />);
+        const inputElement = screen.getByLabelText(baseProps.label);
+        expect(inputElement).not.toHaveAttribute('aria-labelledby');
+      });
+    });
+  });
+});

package/src/components/TextareaInput/TextareaInput.tsx

@@ -0,0 +1,182 @@
+import React, { FC, ChangeEvent, FocusEvent, ReactNode } from 'react';
+import classNames from 'classnames';
+import { ResponsiveProp } from '../../types';
+import { Box, BoxProps } from '../Box/Box';
+import { FormLabel } from '../FormLabel/FormLabel';
+import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
+import { getAutoCompleteValue } from '../../lib/getAutoCompleteValue';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import styles from './TextareaInput.module.scss';
+
+export type TextareaInputSize = 'sm' | 'md' | 'lg';
+export interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
+  /**
+   * 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<HTMLTextAreaElement>) => void;
+  /**
+   * The text value of the input. Required since our Input is a controlled component.
+   */
+  value: string;
+  /**
+   * The input's 'autocomplete' attribute.
+   */
+  autoComplete?: boolean | string;
+  /**
+   * 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;
+  /**
+   * Visually hide the label.
+   */
+  hideLabel?: boolean;
+  /**
+   * 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<HTMLTextAreaElement>) => void;
+  /**
+   * Callback function to call on focus event.
+   */
+  onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+  /**
+   * The input placeholder attribute.
+   */
+  placeholder?: string;
+  /**
+   * Visual indicator that the field is required, that gets appended to the label
+   */
+  requiredIndicator?: ReactNode;
+  /**
+   * Textarea resize behavior
+   */
+  resize?: 'vertical' | 'horizontal' | 'none' | 'both';
+  /**
+   * number of visible text lines for the control.
+   */
+  rows?: number;
+  /**
+   * The size of the text input.
+   */
+  size?: TextareaInputSize | ResponsiveProp<TextareaInputSize>;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const TextareaInput: FC<TextareaInputProps> = ({
+  id,
+  label,
+  onChange,
+  value,
+  autoComplete = false,
+  autoFocus = false,
+  className = undefined,
+  error = false,
+  helpText,
+  hideLabel = false,
+  isDisabled = false,
+  isRequired = false,
+  maxLength = undefined,
+  name = undefined,
+  onBlur = undefined,
+  onFocus = undefined,
+  placeholder = '',
+  requiredIndicator = ' *',
+  resize = 'vertical',
+  rows = 3,
+  size = 'md',
+  ...restProps
+}) => {
+  const responsiveClasses = generateResponsiveClasses('size', size);
+
+  const inputWrapperClasses = classNames(
+    'hyphen-components__variables__form-control',
+    styles['textarea-input-wrapper'],
+    ...responsiveClasses.map((c) => styles[c]),
+    {
+      [styles.error]: error,
+      [styles.disabled]: isDisabled,
+    }
+  );
+
+  const inputProps = {
+    'aria-required': isRequired,
+    'aria-invalid': !!error,
+    'aria-label': label,
+    'aria-labelledby': label && !hideLabel ? `${id}Label` : undefined,
+    autoComplete: getAutoCompleteValue(autoComplete),
+    autoFocus,
+    className: classNames(styles[`textarea-resize-${resize}`]),
+    disabled: isDisabled,
+    id,
+    maxLength,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    required: isRequired,
+    rows,
+    value,
+  };
+
+  const labelProps = {
+    inputId: id,
+    helpText,
+    className: styles['textarea-input-label'],
+    isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator,
+  };
+
+  return (
+    <Box width="100%" className={className} {...restProps}>
+      {label && !hideLabel && <FormLabel {...labelProps}>{label}</FormLabel>}
+      <Box display="block" className={inputWrapperClasses}>
+        <Box as="textarea" {...inputProps} />
+      </Box>
+      {error && error !== true && (
+        <InputValidationMessage>{error}</InputValidationMessage>
+      )}
+    </Box>
+  );
+};

package/src/components/TextareaInputInset/TextareaInputInset.mdx

@@ -0,0 +1,55 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { TextareaInputInset } from './TextareaInputInset';
+import * as Stories from './TextareaInputInset.stories';
+
+<Meta of={Stories} />
+
+# TextareaInputInset
+
+Use `TextareaInputInset` 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={TextareaInputInset} />
+
+### 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} />
+
+### Sizes
+
+Two sizes, `md` and `lg` are available, with `md` being the default.
+
+<Canvas of={Stories.Sizes} />
+
+## Resize
+
+The `resize` prop accepts `horizontal`, `vertical`, `both` or `none` to control the users ability to resize the input.
+
+<Canvas of={Stories.Resize} />
+
+## 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).