@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,240 @@
+import {
+  chakra,
+  Input as ChakraInput,
+  Textarea as ChakraTextarea,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import Label from "../Label/Label";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { getAriaAttrs } from "../../utils/utils";
+
+// HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+export type TextInputTypes =
+  | "email"
+  | "hidden"
+  | "number"
+  | "password"
+  | "text"
+  | "textarea"
+  | "tel"
+  | "url";
+
+// Only used internally.
+export const TextInputFormats = {
+  email: "jdoe@domain.com",
+  hidden: "",
+  password: "",
+  text: "",
+  tel: "(123) 123-1234",
+  textarea: "",
+  url: "https://domain.com",
+};
+
+// Only used internally in `TextInput` and `SearchBar`.
+export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
+
+export interface InputProps {
+  /** A class name for the TextInput parent div. */
+  className?: string;
+  /** The starting value of the input field. */
+  defaultValue?: string;
+  /** Populates the HelperErrorText for the standard state */
+  helperText?: HelperErrorTextType;
+  /** ID that other components can cross reference for accessibility purposes */
+  id: string;
+  /** Populates the HelperErrorText for the error state */
+  invalidText?: HelperErrorTextType;
+  /** Adds the `disabled` and `aria-disabled` prop to the input when true */
+  isDisabled?: boolean;
+  /** Adds errored styling to the input/textarea and helper text elements */
+  isInvalid?: boolean;
+  /** Will add `required` and `aria-required` props to the input/textarea elements */
+  isRequired?: boolean;
+  /** Provides text for a `Label` component if `showLabel` is set to true;
+   * populates an `aria-label` attribute if `showLabel` is set to false. */
+  labelText: string;
+  /** The max number for a `number` TextInput type. */
+  max?: number;
+  /** The max length of the input field. */
+  maxLength?: number;
+  /** The min number for a `number` TextInput type. */
+  min?: number;
+  /** Used to reference the input element in forms. */
+  name?: string;
+  /** The action to perform on the `input`/`textarea`'s onChange function  */
+  onChange?: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => void;
+  /** The action to perform on the `input`/`textarea`'s onClick function  */
+  onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+  /** The action to perform on the `input`/`textarea`'s onFocus function  */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /** Populates the placeholder for the input/textarea elements */
+  placeholder?: string;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
+  /** Offers the ability to show the label onscreen or hide it. Refer to the
+   * `labelText` property for more information. */
+  showLabel?: boolean;
+  /** Whether or not to display the "(Required)" text in the label text.
+   * True by default. */
+  showRequiredLabel?: boolean;
+  /** The amount to increase or decrease when using the number type. */
+  step?: number;
+  /** FOR INTERNAL DS USE ONLY: the input variant to display. */
+  textInputType?: TextInputVariants;
+  /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
+  type?: TextInputTypes;
+  /** Populates the value of the input/textarea elements */
+  value?: string;
+}
+
+/**
+ * The type used for `ref`s. We want to extend both `input` and `textarea`
+ * since both are available to create through `TextInput`.
+ */
+export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
+
+/**
+ * Renders either an `input` element with a specified type or a `textarea`
+ * element. All types will render an accessible `Label` component and an
+ * optional `HelperErrorText` component.
+ */
+export const TextInput = chakra(
+  React.forwardRef<TextInputRefType, InputProps>(
+    (props, ref: React.Ref<TextInputRefType>) => {
+      const {
+        className,
+        defaultValue,
+        helperText,
+        id,
+        invalidText,
+        isDisabled = false,
+        isInvalid = false,
+        isRequired = false,
+        labelText,
+        max,
+        maxLength,
+        min,
+        name,
+        onChange,
+        onClick,
+        onFocus,
+        placeholder,
+        showHelperInvalidText = true,
+        showLabel = true,
+        showRequiredLabel = true,
+        step = 1,
+        textInputType = "default",
+        type = "text",
+        value,
+        ...rest
+      } = props;
+      const styles = useMultiStyleConfig("TextInput", {
+        variant: textInputType,
+      });
+      const isTextArea = type === "textarea";
+      const isHidden = type === "hidden";
+      const finalInvalidText = invalidText
+        ? invalidText
+        : "There is an error related to this field.";
+      let footnote: HelperErrorTextType = isInvalid
+        ? finalInvalidText
+        : helperText;
+      const ariaAttributes = getAriaAttrs({
+        footnote,
+        id,
+        labelText,
+        name: "TextInput",
+        showLabel,
+      });
+      let fieldOutput;
+      let options;
+
+      if (!id) {
+        console.warn(
+          "NYPL Reservoir TextInput: This component's required `id` prop was not passed."
+        );
+      }
+
+      if (type === "tel" || type === "url" || type === "email") {
+        const example = TextInputFormats[type] || "";
+        footnote = (
+          <>
+            Ex: {example}
+            <br />
+            {footnote}
+          </>
+        );
+      }
+
+      // When the type is "hidden", the input element needs fewer attributes.
+      options = isHidden
+        ? { id, "aria-hidden": isHidden, name, onChange, ref }
+        : {
+            "aria-required": isRequired,
+            defaultValue,
+            id,
+            isDisabled,
+            isRequired,
+            isInvalid,
+            max,
+            maxLength,
+            min,
+            name,
+            onChange,
+            onClick,
+            onFocus,
+            placeholder,
+            ref,
+            // The `step` attribute is useful for the number type.
+            step: type === "number" ? step : null,
+            ...ariaAttributes,
+            ...rest,
+          };
+      // For `input` and `textarea`, all attributes are the same but `input`
+      // also needs `type` and `value` to render correctly.
+      if (!isTextArea) {
+        options = { type, value, ...options } as any;
+        fieldOutput = <ChakraInput {...options} __css={styles.input} />;
+      } else {
+        fieldOutput = (
+          <ChakraTextarea {...options} __css={styles.textarea}>
+            {value}
+          </ChakraTextarea>
+        );
+      }
+
+      return (
+        <ComponentWrapper
+          className={className}
+          helperText={helperText}
+          id={id}
+          invalidText={finalInvalidText}
+          isInvalid={isInvalid}
+          showHelperInvalidText={showHelperInvalidText && !isHidden}
+          __css={styles}
+          {...rest}
+        >
+          {labelText && showLabel && !isHidden && (
+            <Label
+              htmlFor={id}
+              id={`${id}-label`}
+              isRequired={showRequiredLabel && isRequired}
+            >
+              {labelText}
+            </Label>
+          )}
+          {fieldOutput}
+        </ComponentWrapper>
+      );
+    }
+  )
+);
+
+export default TextInput;

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

@@ -0,0 +1,274 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 1`] = `
+<div
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <span>
+       (Required)
+    </span>
+  </label>
+  <input
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 2`] = `
+<div
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+  </label>
+  <input
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={false}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 3`] = `
+<div
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
+>
+  <input
+    aria-label="Custom Input Label"
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 4`] = `
+<div
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <span>
+       (Required)
+    </span>
+  </label>
+  <input
+    aria-describedby="myTextInput-helperText"
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+  <div
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Custom helper text",
+      }
+    }
+    data-isinvalid={false}
+    id="myTextInput-helperText"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 5`] = `
+<div
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <span>
+       (Required)
+    </span>
+  </label>
+  <input
+    aria-describedby="myTextInput-helperText"
+    aria-invalid={true}
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+  <div
+    aria-atomic={true}
+    aria-live="polite"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "There is an error related to this field.",
+      }
+    }
+    data-isinvalid={true}
+    id="myTextInput-helperText"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 6`] = `
+<div
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <span>
+       (Required)
+    </span>
+  </label>
+  <input
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={true}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 7`] = `
+<div
+  className="css-1y4kn3e"
+  id="chakra-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="chakra"
+    id="chakra-label"
+  >
+    Custom Input Label
+  </label>
+  <input
+    className="chakra-input css-0"
+    disabled={false}
+    id="chakra"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={false}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 8`] = `
+<div
+  className="css-1u8qly9"
+  data-testid="props"
+  id="props-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="props"
+    id="props-label"
+  >
+    Custom Input Label
+  </label>
+  <input
+    className="chakra-input css-0"
+    data-testid="props"
+    disabled={false}
+    id="props"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={false}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the textarea UI snapshot correctly 1`] = `
+<div
+  className="css-1u8qly9"
+  id="myTextarea-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="myTextarea"
+    id="myTextarea-label"
+  >
+    Custom textarea Label
+  </label>
+  <textarea
+    className="chakra-textarea css-0"
+    disabled={false}
+    id="myTextarea"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Textarea Placeholder"
+    required={false}
+    step={null}
+  />
+</div>
+`;