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

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]}

package/src/components/Toggle/Toggle.stories.mdx

@@ -11,15 +11,8 @@ import { withDesign } from "storybook-addon-designs";
 import Heading from "../Heading/Heading";
 import SimpleGrid from "../Grid/SimpleGrid";
 import Toggle from "./Toggle";
-import { ToggleSizes } from "./ToggleTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const sizeEnumValues = getStorybookEnumValues(
-  ToggleSizes,
-  "ToggleSizes"
-);
 
 <Meta
   title={getCategory("Toggle")}
@@ -33,7 +26,6 @@ export const sizeEnumValues = getStorybookEnumValues(
     jest: ["Toggle.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { control: false },
     defaultChecked: { control: false },
     id: { control: false },
     key: { table: { disable: true } },
@@ -42,9 +34,7 @@ export const sizeEnumValues = getStorybookEnumValues(
     ref: { table: { disable: true } },
     size: {
       control: {
-        type: "select",
-        table: { defaultValue: { summary: "ToggleSizes.Default" } },
-        options: sizeEnumValues.options,
+        table: { defaultValue: { summary: "default" } },
       },
     },
   }}
@@ -55,7 +45,7 @@ export const sizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.8`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -89,7 +79,6 @@ should be short and to the point, often three words or less.
   <Story
     name="Toggle"
     args={{
-      additionalStyles: undefined,
       defaultChecked: false,
       helperText: "This is the helper text!",
       id: "toggle-1",
@@ -104,7 +93,7 @@ should be short and to the point, often three words or less.
       size: "ToogleSizes.Large",
     }}
   >
-    {(args) => <Toggle {...args} size={sizeEnumValues.getValue(args.size)} />}
+    {(args) => <Toggle {...args} />}
   </Story>
 </Canvas>
 
@@ -143,10 +132,10 @@ Resources:
         <Toggle
           defaultChecked={true}
           id="small-checked"
-          size={ToggleSizes.Small}
+          size="small"
           labelText="On"
         />
-        <Toggle id="default-small" size={ToggleSizes.Small} labelText="Off" />
+        <Toggle id="default-small" size="small" labelText="Off" />
       </VStack>
     </SimpleGrid>
   </DSProvider>

package/src/components/Toggle/Toggle.test.tsx

@@ -5,7 +5,6 @@ import * as React from "react";
 import renderer from "react-test-renderer";
 
 import Toggle from "./Toggle";
-import { ToggleSizes } from "./ToggleTypes";
 
 describe("Toggle Accessibility", () => {
   it("Passes axe accessibility test", async () => {
@@ -17,7 +16,7 @@ describe("Toggle Accessibility", () => {
 });
 
 describe("Toggle", () => {
-  let changeHandler;
+  let changeHandler: jest.MockedFunction<() => void>;
 
   beforeEach(() => {
     changeHandler = jest.fn();
@@ -142,7 +141,7 @@ describe("Toggle", () => {
           id="Toggle-disabled"
           labelText="Test Label"
           isDisabled
-          size={ToggleSizes.Small}
+          size="small"
         />
       )
       .toJSON();

package/src/components/Toggle/Toggle.tsx

@@ -10,10 +10,10 @@ import * as React from "react";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import { ToggleSizes } from "./ToggleTypes";
+import { AriaAttributes } from "../../utils/interfaces";
+
+export type ToggleSizes = "default" | "small";
 export interface ToggleProps {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
   /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
    *   If true, the toggle will be initially set to the "on" position. */
   defaultChecked?: boolean;
@@ -57,7 +57,6 @@ export const onChangeDefault = () => {
 export const Toggle = chakra(
   React.forwardRef<HTMLInputElement, ToggleProps>((props, ref?) => {
     const {
-      additionalStyles = {},
       defaultChecked = false,
       helperText,
       id,
@@ -69,11 +68,11 @@ export const Toggle = chakra(
       labelText,
       name,
       onChange = onChangeDefault,
-      size = ToggleSizes.Default,
+      size = "default",
       ...rest
     } = props;
-    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
-    const ariaAttributes = {};
+    const footnote = isInvalid ? invalidText : helperText;
+    const ariaAttributes: AriaAttributes = {};
     const styles = useMultiStyleConfig("Toggle", { isDisabled, size });
     const switchStyles = useStyleConfig("Switch", { size });
     ariaAttributes["aria-label"] =
@@ -87,7 +86,7 @@ export const Toggle = chakra(
 
     return (
       <>
-        <Box __css={{ ...styles, ...additionalStyles }} {...rest}>
+        <Box __css={styles} {...rest}>
           <Switch
             id={id}
             name={name || "default"}
@@ -95,7 +94,7 @@ export const Toggle = chakra(
             isInvalid={isInvalid}
             isRequired={isRequired}
             ref={ref}
-            size={size === ToggleSizes.Default ? "lg" : "sm"}
+            size={size === "default" ? "lg" : "sm"}
             lineHeight="1.5"
             {...(isChecked !== undefined
               ? {
@@ -113,10 +112,10 @@ export const Toggle = chakra(
         </Box>
         {footnote && (
           <HelperErrorText
-            additionalStyles={styles.helperErrorText}
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
+            __css={styles.helperErrorText}
           />
         )}
       </>