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

package/src/components/Text/Text.tsx

@@ -1,8 +1,7 @@
 import { Text as ChakraText, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
-import { TextSizes } from "./TextTypes";
-import { getVariant } from "../../utils/utils";
+export type TextSizes = "default" | "caption" | "tag" | "mini";
 
 export interface TextProps {
   /** Additional class name to render in the `Text` component. */
@@ -24,12 +23,11 @@ export const Text = chakra((props: React.PropsWithChildren<TextProps>) => {
     isBold,
     isItalic,
     noSpace,
-    size = TextSizes.Default,
+    size = "default",
     ...rest
   } = props;
-  const variant = getVariant(size, TextSizes, TextSizes.Default);
   const styles = useStyleConfig("Text", {
-    variant,
+    variant: size,
     isBold,
     isItalic,
     noSpace,

package/src/components/TextInput/TextInput.stories.mdx

@@ -9,15 +9,8 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import TextInput from "./TextInput";
-import { TextInputTypes, TextInputVariants } from "./TextInputTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(
-  TextInputTypes,
-  "TextInputTypes"
-);
 
 <Meta
   title={getCategory("TextInput")}
@@ -31,7 +24,6 @@ export const enumValues = getStorybookEnumValues(
     jest: ["TextInput.test.tsx"],
   }}
   argTypes={{
-    attributes: { control: false },
     id: { control: false },
     isDisabled: { table: { defaultValue: { summary: false } } },
     isInvalid: { table: { defaultValue: { summary: false } } },
@@ -45,12 +37,10 @@ export const enumValues = getStorybookEnumValues(
     step: { table: { defaultValue: { summary: 1 } } },
     textInputType: {
       control: false,
-      table: { defaultValue: { summary: "TextInputVariants.Default" } },
+      table: { defaultValue: { summary: "default" } },
     },
     type: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "TextInputTypes.text" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "text" } },
     },
     value: { control: false },
   }}
@@ -61,7 +51,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -88,8 +78,6 @@ is left blank, a value will be generated for you.
   <Story
     name="TextInput with Controls"
     args={{
-      additionalStyles: undefined,
-      attributes: undefined,
       className: undefined,
       defaultValue: undefined,
       helperText: "Choose wisely.",
@@ -106,12 +94,12 @@ is left blank, a value will be generated for you.
       showLabel: true,
       showRequiredLabel: true,
       step: 1,
-      type: "TextInputTypes.text",
+      type: "text",
       value: undefined,
-      textInputType: TextInputVariants.Default,
+      textInputType: "default",
     }}
   >
-    {(args) => <TextInput {...args} type={enumValues.getValue(args.type)} />}
+    {(args) => <TextInput {...args} />}
   </Story>
 </Canvas>
 
@@ -129,7 +117,7 @@ Internally, a `Label` is associated with the `<input>` element. When `showLabel`
 is set to false, the `<input>` element's `aria-label` attribute is set to the
 required `labelText` value.
 
-When the `type` prop is set to `TextInputTypes.textarea`, the `<textarea>` element
+When the `type` prop is set to `"textarea"`, the `<textarea>` element
 is rendered instead of the `<input>` element. This element follows all the same
 accessibility rules described above.
 
@@ -251,8 +239,8 @@ helperText={<>Choose <b>wisely!</b></>}
 ## Textarea
 
 The TextInput component includes a multiline `textarea` form field. To render a
-`textarea` element, pass `TextInputTypes.textarea` for the `type` prop.
-All the variations described above are available for the `textarea` option.
+`textarea` element, pass `"textarea"` for the `type` prop. All the variations
+described above are available for the `textarea` option.
 
 <Canvas withToolbar>
   <Story
@@ -268,7 +256,7 @@ All the variations described above are available for the `textarea` option.
       placeholder: "Essay question...",
       showLabel: true,
       showRequiredLabel: true,
-      type: TextInputTypes.textarea,
+      type: "textarea",
     }}
     argTypes={{
       type: { control: false },

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

@@ -1,11 +1,10 @@
 import * as React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, RenderResult, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 import userEvent from "@testing-library/user-event";
 
 import TextInput from "./TextInput";
-import { TextInputTypes } from "./TextInputTypes";
 
 describe("TextInput Accessibility", () => {
   it("passes axe accessibility test for the input element", async () => {
@@ -16,7 +15,7 @@ describe("TextInput Accessibility", () => {
         labelText="Custom input label"
         onChange={jest.fn()}
         placeholder="Input Placeholder"
-        type={TextInputTypes.text}
+        type="text"
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -30,7 +29,7 @@ describe("TextInput Accessibility", () => {
         labelText="Custom textarea label"
         onChange={jest.fn()}
         placeholder="Input Placeholder"
-        type={TextInputTypes.textarea}
+        type="textarea"
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -38,22 +37,19 @@ describe("TextInput Accessibility", () => {
 });
 
 describe("TextInput", () => {
-  let utils;
-  let changeHandler;
-  let focusHandler;
+  let changeHandler: jest.MockedFunction<() => void>;
+  let utils: RenderResult;
 
   beforeEach(() => {
-    focusHandler = jest.fn();
     changeHandler = jest.fn();
     utils = render(
       <TextInput
-        attributes={{ onFocus: focusHandler }}
         id="myTextInput"
         isRequired
         labelText="Custom Input Label"
         onChange={changeHandler}
         placeholder="Input Placeholder"
-        type={TextInputTypes.text}
+        type="text"
       />
     );
   });
@@ -74,14 +70,13 @@ describe("TextInput", () => {
   it("does not render '(Required)' along with the label text", () => {
     utils.rerender(
       <TextInput
-        attributes={{ onFocus: focusHandler }}
         id="myTextInput"
         isRequired
         labelText="Custom Input Label"
         onChange={changeHandler}
         placeholder="Input Placeholder"
         showRequiredLabel={false}
-        type={TextInputTypes.text}
+        type="text"
       />
     );
 
@@ -108,12 +103,6 @@ describe("TextInput", () => {
     );
   });
 
-  it("allows user to pass in additional attributes", () => {
-    expect(focusHandler).toHaveBeenCalledTimes(0);
-    fireEvent.focus(screen.getByLabelText(/Custom Input Label/i));
-    expect(focusHandler).toHaveBeenCalledTimes(1);
-  });
-
   it("changing the value calls the onChange handler", () => {
     expect(changeHandler).toHaveBeenCalledTimes(0);
     userEvent.type(screen.getByLabelText(/Custom Input Label/i), "Hello");
@@ -144,7 +133,7 @@ describe("Renders TextInput with auto-generated ID, hidden label and visible hel
         labelText="Custom Input Label"
         placeholder="Input Placeholder"
         showLabel={false}
-        type={TextInputTypes.text}
+        type="text"
       />
     );
   });
@@ -170,9 +159,10 @@ describe("Renders TextInput with auto-generated ID, hidden label and visible hel
 });
 
 describe("TextInput shows error state", () => {
-  let rerender;
+  let utils: RenderResult;
+
   beforeEach(() => {
-    const utils = render(
+    utils = render(
       <TextInput
         helperText="Custom Helper Text"
         id="myTextInputError"
@@ -180,11 +170,9 @@ describe("TextInput shows error state", () => {
         isInvalid
         labelText="Custom Input Label"
         placeholder="Input Placeholder"
-        type={TextInputTypes.text}
+        type="text"
       />
     );
-
-    rerender = utils.rerender;
   });
 
   it("renders Input component", () => {
@@ -201,7 +189,7 @@ describe("TextInput shows error state", () => {
   });
 
   it("does not render the invalid text when 'showHelperInvalidText' is set to false", () => {
-    rerender(
+    utils.rerender(
       <TextInput
         helperText="Custom Helper Text"
         id="myTextInputError"
@@ -210,7 +198,7 @@ describe("TextInput shows error state", () => {
         labelText="Custom Input Label"
         placeholder="Input Placeholder"
         showHelperInvalidText={false}
-        type={TextInputTypes.text}
+        type="text"
       />
     );
     expect(screen.queryByText("Custom Helper Text")).not.toBeInTheDocument();
@@ -224,22 +212,17 @@ describe("TextInput shows error state", () => {
   });
 });
 
-describe("Renders HTML attributes passed through the `attributes` prop", () => {
+describe("Renders HTML attributes passed", () => {
   const onChangeSpy = jest.fn();
-  const onBlurSpy = jest.fn();
   beforeEach(() => {
     render(
       <TextInput
-        attributes={{
-          onChange: onChangeSpy,
-          onBlur: onBlurSpy,
-          maxLength: 10,
-          tabIndex: 0,
-        }}
         id="inputID-attributes"
         labelText="Input Label"
+        maxLength={10}
+        onChange={onChangeSpy}
         placeholder="Input Placeholder"
-        type={TextInputTypes.text}
+        type="text"
       />
     );
   });
@@ -251,24 +234,11 @@ describe("Renders HTML attributes passed through the `attributes` prop", () => {
     );
   });
 
-  it("has a tabIndex", () => {
-    expect(screen.getByLabelText(/Input Label/i)).toHaveAttribute(
-      "tabIndex",
-      "0"
-    );
-  });
-
   it("calls the onChange function", () => {
     expect(onChangeSpy).toHaveBeenCalledTimes(0);
     userEvent.type(screen.getByLabelText(/Input Label/i), "Hello");
     expect(onChangeSpy).toHaveBeenCalledTimes(5);
   });
-
-  it("calls the onBlur function", () => {
-    expect(onBlurSpy).toHaveBeenCalledTimes(0);
-    fireEvent.blur(screen.getByLabelText(/Input Label/i));
-    expect(onBlurSpy).toHaveBeenCalledTimes(1);
-  });
 });
 
 // TODO:
@@ -280,7 +250,7 @@ describe("Renders HTML attributes passed through the `attributes` prop", () => {
 //         id="inputID-attributes"
 //         labelText="Input Label"
 //         placeholder={"Input Placeholder"}
-//         type={TextInputTypes.text}
+//         type="text"
 //         ref={ref}
 //       />
 //     );
@@ -294,7 +264,7 @@ describe("Renders HTML attributes passed through the `attributes` prop", () => {
 //         id="inputID-attributes"
 //         labelText="Input Label"
 //         placeholder={"Input Placeholder"}
-//         type={TextInputTypes.textarea}
+//         type="textarea"
 //         ref={ref}
 //       />
 //     );
@@ -308,7 +278,7 @@ describe("Hidden input", () => {
       <TextInput
         id="inputID-hidden"
         labelText="Hidden Input Label"
-        type={TextInputTypes.hidden}
+        type="hidden"
         value="hidden"
       />
     );
@@ -328,7 +298,7 @@ describe("Hidden input", () => {
         helperText="Helper Text"
         id="inputID-hidden"
         labelText="Hidden Input Label"
-        type={TextInputTypes.hidden}
+        type="hidden"
         value="hidden"
       />
     );
@@ -345,7 +315,7 @@ describe("Textarea element type", () => {
         id="myTextarea"
         labelText="Custom textarea Label"
         placeholder="Textarea Placeholder"
-        type={TextInputTypes.textarea}
+        type="textarea"
       />
     );
   });
@@ -368,7 +338,7 @@ describe("UI Snapshots", () => {
           isRequired
           labelText="Custom Input Label"
           placeholder="Input Placeholder"
-          type={TextInputTypes.text}
+          type="text"
         />
       )
       .toJSON();
@@ -378,7 +348,7 @@ describe("UI Snapshots", () => {
           id="myTextInput"
           labelText="Custom Input Label"
           placeholder="Input Placeholder"
-          type={TextInputTypes.text}
+          type="text"
         />
       )
       .toJSON();
@@ -390,7 +360,7 @@ describe("UI Snapshots", () => {
           labelText="Custom Input Label"
           placeholder="Input Placeholder"
           showLabel={false}
-          type={TextInputTypes.text}
+          type="text"
         />
       )
       .toJSON();
@@ -402,7 +372,7 @@ describe("UI Snapshots", () => {
           isRequired
           labelText="Custom Input Label"
           placeholder="Input Placeholder"
-          type={TextInputTypes.text}
+          type="text"
         />
       )
       .toJSON();
@@ -414,7 +384,7 @@ describe("UI Snapshots", () => {
           isRequired
           labelText="Custom Input Label"
           placeholder="Input Placeholder"
-          type={TextInputTypes.text}
+          type="text"
         />
       )
       .toJSON();
@@ -426,7 +396,7 @@ describe("UI Snapshots", () => {
           isRequired
           labelText="Custom Input Label"
           placeholder="Input Placeholder"
-          type={TextInputTypes.text}
+          type="text"
         />
       )
       .toJSON();
@@ -436,7 +406,7 @@ describe("UI Snapshots", () => {
           id="chakra"
           labelText="Custom Input Label"
           placeholder="Input Placeholder"
-          type={TextInputTypes.text}
+          type="text"
           p="20px"
           color="ui.error.primary"
         />
@@ -448,7 +418,7 @@ describe("UI Snapshots", () => {
           id="props"
           labelText="Custom Input Label"
           placeholder="Input Placeholder"
-          type={TextInputTypes.text}
+          type="text"
           data-testid="props"
         />
       )
@@ -471,7 +441,7 @@ describe("UI Snapshots", () => {
           id="myTextarea"
           labelText="Custom textarea Label"
           placeholder="Textarea Placeholder"
-          type={TextInputTypes.textarea}
+          type="textarea"
         />
       )
       .toJSON();

package/src/components/TextInput/TextInput.tsx

@@ -7,21 +7,37 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import {
-  TextInputTypes,
-  TextInputFormats,
-  TextInputVariants,
-} from "./TextInputTypes";
 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 {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
-  /** Additional attributes to pass to the `<input>` or `<textarea>` element */
-  attributes?: { [key: string]: any };
   /** A class name for the TextInput parent div. */
   className?: string;
   /** The starting value of the input field. */
@@ -41,6 +57,12 @@ export interface InputProps {
   /** 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  */
@@ -49,6 +71,10 @@ export interface InputProps {
       | 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. */
@@ -84,8 +110,6 @@ export const TextInput = chakra(
   React.forwardRef<TextInputRefType, InputProps>(
     (props, ref: React.Ref<TextInputRefType>) => {
       const {
-        additionalStyles = {},
-        attributes = {},
         className,
         defaultValue,
         helperText,
@@ -95,30 +119,35 @@ export const TextInput = chakra(
         isInvalid = false,
         isRequired = false,
         labelText,
+        max,
+        maxLength,
+        min,
         name,
         onChange,
+        onClick,
+        onFocus,
         placeholder,
         showHelperInvalidText = true,
         showLabel = true,
         showRequiredLabel = true,
         step = 1,
-        textInputType = TextInputVariants.Default,
-        type = TextInputTypes.text,
+        textInputType = "default",
+        type = "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 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;
 
@@ -129,18 +158,14 @@ export const TextInput = chakra(
       }
 
       if (!showLabel) {
-        attributes["aria-label"] =
+        ariaAttributes["aria-label"] =
           labelText && footnote ? `${labelText} - ${footnote}` : labelText;
       } else if (helperText) {
-        attributes["aria-describedby"] = `${id}-helperText`;
+        ariaAttributes["aria-describedby"] = `${id}-helperText`;
       }
 
-      if (
-        type === TextInputTypes.tel ||
-        type === TextInputTypes.url ||
-        type === TextInputTypes.email
-      ) {
-        const example = TextInputFormats[type];
+      if (type === "tel" || type === "url" || type === "email") {
+        const example = TextInputFormats[type] || "";
         footnote = (
           <>
             Ex: {example}
@@ -160,29 +185,35 @@ export const TextInput = chakra(
             isDisabled,
             isRequired,
             isInvalid,
-            placeholder,
+            max,
+            maxLength,
+            min,
             name,
             onChange,
+            onClick,
+            onFocus,
+            placeholder,
             ref,
             // The `step` attribute is useful for the number type.
-            step: type === TextInputTypes.number ? step : null,
-            ...attributes,
+            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={finalStyles.input} />;
+        fieldOutput = <ChakraInput {...options} __css={styles.input} />;
       } else {
         fieldOutput = (
-          <ChakraTextarea {...options} __css={finalStyles.textarea}>
+          <ChakraTextarea {...options} __css={styles.textarea}>
             {value}
           </ChakraTextarea>
         );
       }
 
       return (
-        <Box __css={finalStyles} className={className} {...rest}>
+        <Box __css={styles} className={className} {...rest}>
           {labelText && showLabel && !isHidden && (
             <Label
               htmlFor={id}

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

@@ -226,6 +226,7 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 8`] = `
   </label>
   <input
     className="chakra-input css-0"
+    data-testid="props"
     disabled={false}
     id="props"
     onBlur={[Function]}