@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

package/src/components/TextInput/TextInput.tsx

@@ -1,240 +0,0 @@
-import {
-  Box,
-  chakra,
-  Input as ChakraInput,
-  Textarea as ChakraTextarea,
-  useMultiStyleConfig,
-} from "@chakra-ui/react";
-import * as React from "react";
-
-import Label from "../Label/Label";
-import HelperErrorText, {
-  HelperErrorTextType,
-} from "../HelperErrorText/HelperErrorText";
-
-// 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;
-      let ariaAttributes = {};
-      let fieldOutput;
-      let options;
-
-      if (!id) {
-        console.warn(
-          "NYPL Reservoir TextInput: This component's required `id` prop was not passed."
-        );
-      }
-
-      if (!showLabel) {
-        ariaAttributes["aria-label"] =
-          labelText && footnote ? `${labelText} - ${footnote}` : labelText;
-      } else if (helperText) {
-        ariaAttributes["aria-describedby"] = `${id}-helperText`;
-      }
-
-      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 (
-        <Box __css={styles} className={className} {...rest}>
-          {labelText && showLabel && !isHidden && (
-            <Label
-              htmlFor={id}
-              id={`${id}-label`}
-              isRequired={showRequiredLabel && isRequired}
-            >
-              {labelText}
-            </Label>
-          )}
-          {fieldOutput}
-          {footnote && showHelperInvalidText && !isHidden && (
-            <HelperErrorText
-              id={`${id}-helperText`}
-              isInvalid={isInvalid}
-              text={footnote}
-            />
-          )}
-        </Box>
-      );
-    }
-  )
-);
-
-export default TextInput;

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

@@ -1,264 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UI Snapshots renders the text input UI snapshot correctly 1`] = `
-<div
-  className="css-1xdhyk6"
->
-  <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-1xdhyk6"
->
-  <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-1xdhyk6"
->
-  <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-1xdhyk6"
->
-  <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-1xdhyk6"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="myTextInput"
-    id="myTextInput-label"
-  >
-    Custom Input Label
-    <span>
-       (Required)
-    </span>
-  </label>
-  <input
-    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-1xdhyk6"
->
-  <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-kle7zy"
->
-  <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-1xdhyk6"
-  data-testid="props"
->
-  <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-1xdhyk6"
->
-  <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>
-`;