@nypl/design-system-react-components 0.25.7 → 0.25.10

package/src/components/Select/Select.test.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import Select from "./Select";
 
@@ -198,7 +199,7 @@ describe("Select", () => {
   });
 
   it("calls the onChange callback function", () => {
-    let value = "red";
+    let value = "";
     const changeCallback = (e) => {
       value = e.target.value;
     };
@@ -208,7 +209,7 @@ describe("Select", () => {
       </Select>
     );
 
-    expect(value).toEqual("red");
+    expect(value).toEqual("");
 
     fireEvent.change(screen.getByRole("combobox"), {
       target: { value: "blue" },
@@ -255,4 +256,92 @@ describe("Select", () => {
       "NYPL DS recommends that <select> fields have no more than 10 options; an auto-complete text input is a good alternative for 11 or more options."
     );
   });
+
+  it("Renders the UI snapshot correctly", () => {
+    const siblings = ["Kendall", "Shiv", "Connor", "Roman", "Tom"];
+
+    const options = siblings.map((sibling) => (
+      <option key={sibling}>{sibling}</option>
+    ));
+
+    const primary = renderer
+      .create(
+        <Select
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const disabled = renderer
+      .create(
+        <Select
+          id="select"
+          isDisabled
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withInvalidText = renderer
+      .create(
+        <Select
+          id="select"
+          invalidText="Tom doesn't count as a sibling :(."
+          isInvalid
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withHelperText = renderer
+      .create(
+        <Select
+          helperText="Remember, Logan will judge you no matter who you pick."
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const required = renderer
+      .create(
+        <Select
+          id="select"
+          isRequired
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const hasOnChange = renderer
+      .create(
+        <Select
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+          onChange={jest.fn()}
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(disabled).toMatchSnapshot();
+    expect(withInvalidText).toMatchSnapshot();
+    expect(withHelperText).toMatchSnapshot();
+    expect(required).toMatchSnapshot();
+    expect(hasOnChange).toMatchSnapshot();
+  });
 });

package/src/components/Select/Select.tsx

@@ -5,23 +5,25 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
-import Label from "../Label/Label";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
-import generateUUID from "../../helpers/generateUUID";
-import { IconNames, IconSizes } from "../Icons/IconTypes";
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import Icon from "../Icons/Icon";
+import { IconNames, IconSizes } from "../Icons/IconTypes";
+import Label from "../Label/Label";
 import { SelectTypes } from "./SelectTypes";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface SelectProps {
   /** A class name for the `div` parent element. */
   className?: string;
   /** Optional string to populate the `HelperErrorText` for the standard state. */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Optional string to populate the `HelperErrorText` for the error state
    * when `isInvalid` is true. */
-  invalidText?: string;
+  invalidText?: HelperErrorTextType;
   /** Adds the `disabled` and `aria-disabled` attributes to the select when true */
   isDisabled?: boolean;
   /** Adds the `aria-invalid` attribute to the select when true. This also makes
@@ -38,6 +40,8 @@ export interface SelectProps {
   /** The callback function to get the selected value.
    * Should be passed along with `value` for controlled components. */
   onChange?: (event: React.FormEvent) => void;
+  /** Placeholder text in the select element. */
+  placeholder?: string;
   /** Offers the ability to hide the helper/invalid text. */
   showHelperInvalidText?: boolean;
   /** Offers the ability to show the select's label onscreen or hide it. Refer
@@ -72,11 +76,12 @@ const Select = React.forwardRef<
     labelText,
     name,
     onChange,
+    placeholder,
     showHelperInvalidText = true,
     showLabel = true,
     showOptReqLabel = true,
     type = SelectTypes.Default,
-    value,
+    value = "",
   } = props;
   const ariaAttributes = {};
   const optReqFlag = isRequired ? "Required" : "Optional";
@@ -84,10 +89,12 @@ const Select = React.forwardRef<
   const finalInvalidText = invalidText
     ? invalidText
     : "There is an error related to this field.";
-  const footnote = isInvalid ? finalInvalidText : helperText;
+  const footnote: HelperErrorTextType = isInvalid
+    ? finalInvalidText
+    : helperText;
   // To control the `Select` component, both `onChange` and `value`
   // must be passed.
-  const controlledProps = onChange && value ? { onChange, value } : {};
+  const controlledProps = onChange ? { onChange, value } : {};
 
   if (!showLabel) {
     ariaAttributes["aria-label"] =
@@ -126,19 +133,28 @@ const Select = React.forwardRef<
         isDisabled={isDisabled}
         isInvalid={isInvalid}
         name={name}
+        placeholder={placeholder}
         ref={ref}
         {...controlledProps}
         {...ariaAttributes}
-        icon={<Icon name={IconNames.Arrow} size={IconSizes.Medium} />}
+        icon={
+          <Icon
+            id={`${id}-icon`}
+            name={IconNames.Arrow}
+            size={IconSizes.Medium}
+          />
+        }
         __css={styles.select}
       >
         {children}
       </ChakraSelect>
       {footnote && showHelperInvalidText && (
         <Box __css={styles.helper} aria-disabled={isDisabled}>
-          <HelperErrorText isInvalid={isInvalid} id={id + `-helperText`}>
-            {footnote}
-          </HelperErrorText>
+          <HelperErrorText
+            id={`${id}-helperText`}
+            isInvalid={isInvalid}
+            text={footnote}
+          />
         </Box>
       )}
     </Box>