@nypl/design-system-react-components 0.25.11 → 0.26.0

package/src/components/TextInput/TextInput.tsx

@@ -1,10 +1,11 @@
-import * as React from "react";
 import {
   Box,
+  chakra,
   Input as ChakraInput,
   Textarea as ChakraTextarea,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
 import {
   TextInputTypes,
@@ -15,7 +16,6 @@ import Label from "../Label/Label";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import generateUUID from "../../helpers/generateUUID";
 
 export interface InputProps {
   /** Optionally pass in additional Chakra-based styles. */
@@ -29,7 +29,7 @@ export interface InputProps {
   /** Populates the HelperErrorText for the standard state */
   helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
+  id: string;
   /** Populates the HelperErrorText for the error state */
   invalidText?: HelperErrorTextType;
   /** Adds the `disabled` and `aria-disabled` prop to the input when true */
@@ -56,17 +56,17 @@ export interface InputProps {
   /** Offers the ability to show the label onscreen or hide it. Refer to the
    * `labelText` property for more information. */
   showLabel?: boolean;
-  /** Offers the ability to show the "Required"/"Optional" label onscreen or
-   * hide it. True by default. */
-  showOptReqLabel?: 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;
-  /** FOR INTERNAL DS USE ONLY: the input variant to display. */
-  variantType?: TextInputVariants;
 }
 
 /**
@@ -80,122 +80,130 @@ export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
  * element. All types will render an accessible `Label` component and an
  * optional `HelperErrorText` component.
  */
-const TextInput = React.forwardRef<TextInputRefType, InputProps>(
-  (props, ref: React.Ref<TextInputRefType>) => {
-    const {
-      additionalStyles = {},
-      attributes = {},
-      className,
-      defaultValue,
-      helperText,
-      id = generateUUID(),
-      invalidText,
-      isDisabled = false,
-      isInvalid = false,
-      isRequired = false,
-      labelText,
-      name,
-      onChange,
-      placeholder,
-      showHelperInvalidText = true,
-      showLabel = true,
-      showOptReqLabel = true,
-      step = 1,
-      type = TextInputTypes.text,
-      value,
-      variantType = TextInputVariants.Default,
-    } = props;
-    const styles = useMultiStyleConfig("TextInput", { variant: variantType });
-    const finalStyles = { ...styles, ...additionalStyles };
-    const isTextArea = type === TextInputTypes.textarea;
-    const isHidden = type === TextInputTypes.hidden;
-    const optReqFlag = isRequired ? "Required" : "Optional";
-    const finalInvalidText = invalidText
-      ? invalidText
-      : "There is an error related to this field.";
-    let footnote: HelperErrorTextType = isInvalid
-      ? finalInvalidText
-      : helperText;
-    let fieldOutput;
-    let options;
+export const TextInput = chakra(
+  React.forwardRef<TextInputRefType, InputProps>(
+    (props, ref: React.Ref<TextInputRefType>) => {
+      const {
+        additionalStyles = {},
+        attributes = {},
+        className,
+        defaultValue,
+        helperText,
+        id,
+        invalidText,
+        isDisabled = false,
+        isInvalid = false,
+        isRequired = false,
+        labelText,
+        name,
+        onChange,
+        placeholder,
+        showHelperInvalidText = true,
+        showLabel = true,
+        showRequiredLabel = true,
+        step = 1,
+        textInputType = TextInputVariants.Default,
+        type = TextInputTypes.text,
+        value,
+        ...rest
+      } = props;
+      const styles = useMultiStyleConfig("TextInput", {
+        variant: textInputType,
+      });
+      const finalStyles = { ...styles, ...additionalStyles };
+      const isTextArea = type === TextInputTypes.textarea;
+      const isHidden = type === TextInputTypes.hidden;
+      const finalInvalidText = invalidText
+        ? invalidText
+        : "There is an error related to this field.";
+      let footnote: HelperErrorTextType = isInvalid
+        ? finalInvalidText
+        : helperText;
+      let fieldOutput;
+      let options;
 
-    if (!showLabel) {
-      attributes["aria-label"] =
-        labelText && footnote ? `${labelText} - ${footnote}` : labelText;
-    } else if (helperText) {
-      attributes["aria-describedby"] = `${id}-helperText`;
-    }
+      if (!id) {
+        console.warn(
+          "NYPL Reservoir TextInput: This component's required `id` prop was not passed."
+        );
+      }
 
-    if (
-      type === TextInputTypes.tel ||
-      type === TextInputTypes.url ||
-      type === TextInputTypes.email
-    ) {
-      const example = TextInputFormats[type];
-      footnote = (
-        <>
-          Ex: {example}
-          <br />
-          {footnote}
-        </>
-      );
-    }
+      if (!showLabel) {
+        attributes["aria-label"] =
+          labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+      } else if (helperText) {
+        attributes["aria-describedby"] = `${id}-helperText`;
+      }
 
-    // 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,
-          placeholder,
-          name,
-          onChange,
-          ref,
-          // The `step` attribute is useful for the number type.
-          step: type === TextInputTypes.number ? step : null,
-          ...attributes,
-        };
-    // 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={finalStyles.input} />;
-    } else {
-      fieldOutput = (
-        <ChakraTextarea {...options} __css={finalStyles.textarea}>
-          {value}
-        </ChakraTextarea>
-      );
-    }
+      if (
+        type === TextInputTypes.tel ||
+        type === TextInputTypes.url ||
+        type === TextInputTypes.email
+      ) {
+        const example = TextInputFormats[type];
+        footnote = (
+          <>
+            Ex: {example}
+            <br />
+            {footnote}
+          </>
+        );
+      }
 
-    return (
-      <Box __css={finalStyles} className={className}>
-        {labelText && showLabel && !isHidden && (
-          <Label
-            htmlFor={id}
-            optReqFlag={showOptReqLabel && optReqFlag}
-            id={`${id}-label`}
-          >
-            {labelText}
-          </Label>
-        )}
-        {fieldOutput}
-        {footnote && showHelperInvalidText && !isHidden && (
-          <Box __css={finalStyles.helper} aria-disabled={isDisabled}>
+      // 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,
+            placeholder,
+            name,
+            onChange,
+            ref,
+            // The `step` attribute is useful for the number type.
+            step: type === TextInputTypes.number ? step : null,
+            ...attributes,
+          };
+      // 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={finalStyles.input} />;
+      } else {
+        fieldOutput = (
+          <ChakraTextarea {...options} __css={finalStyles.textarea}>
+            {value}
+          </ChakraTextarea>
+        );
+      }
+
+      return (
+        <Box __css={finalStyles} 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>
-        )}
-      </Box>
-    );
-  }
+          )}
+        </Box>
+      );
+    }
+  )
 );
 
 export default TextInput;

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

@@ -2,19 +2,17 @@
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="myTextInput"
     id="myTextInput-label"
   >
     Custom Input Label
-    <div
-      className="css-0"
-    >
-      Required
-    </div>
+    <span>
+       (Required)
+    </span>
   </label>
   <input
     aria-required={true}
@@ -33,19 +31,14 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 1`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="myTextInput"
     id="myTextInput-label"
   >
     Custom Input Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <input
     className="chakra-input css-0"
@@ -63,7 +56,7 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 2`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <input
     aria-label="Custom Input Label"
@@ -83,19 +76,17 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 3`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="myTextInput"
     id="myTextInput-label"
   >
     Custom Input Label
-    <div
-      className="css-0"
-    >
-      Required
-    </div>
+    <span>
+       (Required)
+    </span>
   </label>
   <input
     aria-describedby="myTextInput-helperText"
@@ -111,40 +102,33 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 4`] = `
     type="text"
   />
   <div
-    aria-disabled={false}
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Custom helper text",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Custom helper text",
       }
-      data-isinvalid={false}
-      id="myTextInput-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="myTextInput-helperText"
+  />
 </div>
 `;
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 5`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="myTextInput"
     id="myTextInput-label"
   >
     Custom Input Label
-    <div
-      className="css-0"
-    >
-      Required
-    </div>
+    <span>
+       (Required)
+    </span>
   </label>
   <input
     aria-invalid={true}
@@ -160,40 +144,33 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 5`] = `
     type="text"
   />
   <div
-    aria-disabled={false}
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="polite"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "There is an error related to this field.",
-        }
+    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>
+    }
+    data-isinvalid={true}
+    id="myTextInput-helperText"
+  />
 </div>
 `;
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 6`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="myTextInput"
     id="myTextInput-label"
   >
     Custom Input Label
-    <div
-      className="css-0"
-    >
-      Required
-    </div>
+    <span>
+       (Required)
+    </span>
   </label>
   <input
     aria-required={true}
@@ -210,21 +187,67 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 6`] = `
 </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"
+    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-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="myTextarea"
     id="myTextarea-label"
   >
     Custom textarea Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <textarea
     className="chakra-textarea css-0"