@nypl/design-system-react-components 0.25.4 → 0.25.8

package/src/components/SearchBar/SearchBar.Test.tsx

@@ -35,13 +35,13 @@ describe("SearchBar Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
         labelText="Searchbar"
         onSubmit={jest.fn()}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -55,11 +55,11 @@ describe("SearchBar", () => {
   it("renders the basic form", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(screen.getByRole("search")).toBeInTheDocument();
@@ -74,12 +74,12 @@ describe("SearchBar", () => {
   it("renders an optional Select component", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -89,14 +89,14 @@ describe("SearchBar", () => {
   it("renders the invalid text in the invalid state", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
+        isInvalid
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
-        isInvalid
       />
     );
     expect(screen.getByText(invalidText)).toBeInTheDocument();
@@ -106,14 +106,14 @@ describe("SearchBar", () => {
   it("does not render the default invalid text from the Select or TextInput components", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
+        isInvalid
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
-        isInvalid
       />
     );
     expect(
@@ -124,12 +124,12 @@ describe("SearchBar", () => {
   it("calls the callback function on submit ", () => {
     render(
       <SearchBar
-        labelText="searchBar"
+        helperErrorText={helperErrorText}
         id="id"
+        labelText="searchBar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(searchBarSubmit).toHaveBeenCalledTimes(0);
@@ -139,34 +139,65 @@ describe("SearchBar", () => {
     expect(buttonCallback).toHaveBeenCalledTimes(1);
   });
 
+  it("Renders 'required' in the placeholder text", () => {
+    const { rerender } = render(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        isRequired
+        labelText="searchbar"
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+
+    expect(
+      screen.getByPlaceholderText("Item Search (Required)")
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        isRequired
+        labelText="searchbar"
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(
+      screen.getByPlaceholderText("Item Search (Required)")
+    ).toBeInTheDocument();
+  });
+
   it("Renders the UI snapshot correctly", () => {
     const basic = renderer
       .create(
         <SearchBar
-          id="id"
+          helperErrorText={helperErrorText}
+          id="basic"
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
-          helperErrorText={helperErrorText}
         />
       )
       .toJSON();
     const withSelect = renderer
       .create(
         <SearchBar
-          id="id"
+          helperErrorText={helperErrorText}
+          id="withSelect"
           labelText="searchbar"
           onSubmit={jest.fn()}
           selectProps={selectProps}
           textInputProps={textInputProps}
-          helperErrorText={helperErrorText}
         />
       )
       .toJSON();
     const withoutHelperText = renderer
       .create(
         <SearchBar
-          id="id"
+          id="withoutHelperText"
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
@@ -176,22 +207,34 @@ describe("SearchBar", () => {
     const invalidState = renderer
       .create(
         <SearchBar
-          id="id"
+          id="invalidState"
+          isInvalid
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
-          isInvalid
         />
       )
       .toJSON();
     const disabledState = renderer
       .create(
         <SearchBar
-          id="id"
+          id="disabledState"
+          isDisabled
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const requiredState = renderer
+      .create(
+        <SearchBar
+          id="requiredState"
           isDisabled
+          isRequired
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
         />
       )
       .toJSON();
@@ -201,5 +244,6 @@ describe("SearchBar", () => {
     expect(withoutHelperText).toMatchSnapshot();
     expect(invalidState).toMatchSnapshot();
     expect(disabledState).toMatchSnapshot();
+    expect(requiredState).toMatchSnapshot();
   });
 });

package/src/components/SearchBar/SearchBar.stories.mdx

@@ -19,8 +19,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11689%3A423",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11689%3A423",
     },
     jest: ["SearchBar.test.tsx"],
   }}
@@ -43,7 +42,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.6`   |
 
 <Description of={SearchBar} />
 
@@ -312,7 +311,7 @@ function SearchBarValueExample() {
   };
   const onSubmit = (event) => {
     event.preventDefault();
-    console.log(`onSubmit Select value: ${event.target.searchName.value}`);
+    console.log(`onSubmit Select value: ${event.target.selectName.value}`);
     console.log(`onSubmit TextInput value ${event.target.textInputName.value}`);
   };
   return (

package/src/components/SearchBar/SearchBar.tsx

@@ -99,6 +99,9 @@ export default function SearchBar(props: SearchBarProps) {
   const ariaDescribedby = helperErrorTextID;
   const footnote = isInvalid ? invalidText : helperErrorText;
   const finalAriaLabel = footnote ? `${labelText} - ${footnote}` : labelText;
+  const textInputPlaceholder = `${textInputProps?.placeholder} ${
+    isRequired ? "(Required)" : ""
+  }`;
   // Render the `Select` component.
   const selectElem = selectProps && (
     <Select
@@ -120,7 +123,7 @@ export default function SearchBar(props: SearchBarProps) {
     <TextInput
       id={generateUUID()}
       labelText={textInputProps?.labelText}
-      placeholder={textInputProps?.placeholder}
+      placeholder={textInputPlaceholder}
       onChange={textInputProps?.onChange}
       name={textInputProps?.name}
       type={TextInputTypes.text}

package/src/components/Select/Select.stories.mdx

@@ -9,6 +9,8 @@ import { withDesign } from "storybook-addon-designs";
 
 import { VStack } from "@chakra-ui/react";
 import Select from "./Select";
+import Form from "../Form/Form";
+import Button from "../Button/Button";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -19,8 +21,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A549",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A549",
     },
     jest: ["Select.test.tsx"],
   }}
@@ -38,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Select} />
 
@@ -102,8 +103,8 @@ text within the `label` element.
   <Story name="Labelling Variations">
     <VStack align="stretch" spacing={8}>
       <Select
-        labelText="What is your favorite color?"
         helperText="Display the label"
+        labelText="What is your favorite color?"
         name="color"
       >
         <option value="red">Red</option>
@@ -113,8 +114,8 @@ text within the `label` element.
         <option value="white">White</option>
       </Select>
       <Select
-        labelText="What is your favorite color?"
         helperText="Do not display the label"
+        labelText="What is your favorite color?"
         name="color"
         showLabel={false}
       >
@@ -125,10 +126,10 @@ text within the `label` element.
         <option value="white">White</option>
       </Select>
       <Select
-        labelText="What is your favorite color?"
         helperText="Display the Required/Optional text"
-        name="color"
         isRequired
+        labelText="What is your favorite color?"
+        name="color"
       >
         <option value="red">Red</option>
         <option value="green">Green</option>
@@ -137,11 +138,11 @@ text within the `label` element.
         <option value="white">White</option>
       </Select>
       <Select
-        labelText="What is your favorite color?"
         helperText="Do not display the Required/Optional text"
+        isRequired
+        labelText="What is your favorite color?"
         name="color"
         showOptReqLabel={false}
-        isRequired
       >
         <option value="red">Red</option>
         <option value="green">Green</option>
@@ -158,11 +159,11 @@ text within the `label` element.
 <Canvas>
   <DSProvider>
     <Select
-      labelText="What is your favorite color?"
       helperText="This is the helper text."
       invalidText="This is the error text :("
-      name="color"
       isInvalid
+      labelText="What is your favorite color?"
+      name="color"
     >
       <option value="red">Red</option>
       <option value="green">Green</option>
@@ -178,11 +179,11 @@ text within the `label` element.
 <Canvas>
   <DSProvider>
     <Select
-      labelText="What is your favorite color?"
       helperText="This is the helper text."
       invalidText="This is the error text :("
-      name="color"
       isDisabled
+      labelText="What is your favorite color?"
+      name="color"
     >
       <option value="red">Red</option>
       <option value="green">Green</option>
@@ -198,57 +199,133 @@ text within the `label` element.
 ### Controlled Component using `value` and `onChange` props
 
 If your application uses controlled React components and the DS `Select`
-component must be controlled, you can control and extract the data through the
+component must be controlled, you can pass and extract the value through the
 `value` and `onChange` props. This will be called every time a new `option`
 value is selected.
 
+Try it out: open up the browser's console to see new values being logged on
+each change.
+
 ```jsx
-const value = "red";
-const onChange = (e) => {
-  // This will return the value selected through the event object.
-  console.log(e.target.value);
-};
-// ...
-
-<Select
-  labelText="What is your favorite color?"
-  helperText="This is the helper text."
-  name="color"
-  value={value}
-  onChange={onChange}
->
-  <option value="red">Red</option>
-  <option value="green">Green</option>
-  <option value="blue">Blue</option>
-  <option value="black">Black</option>
-  <option value="white">White</option>
-</Select>;
+export function SelectControlledExample() {
+  const [value, setValue] = React.useState();
+  const onChange = (e) => {
+    // This will return the value selected through the event object.
+    console.log(e.target.value);
+    setValue(e.target.value);
+  };
+  return (
+    <Select
+      helperText="This is the helper text."
+      labelText="What is your favorite color?"
+      name="color"
+      onChange={onChange}
+      value={value}
+    >
+      <option value="red">Red</option>
+      <option value="green">Green</option>
+      <option value="blue">Blue</option>
+      <option value="black">Black</option>
+      <option value="white">White</option>
+    </Select>
+  );
+}
 ```
 
+export function SelectControlledExample() {
+  const [value, setValue] = React.useState();
+  const onChange = (e) => {
+    // This will return the value selected through the event object.
+    console.log("Controlled value:", e.target.value);
+    setValue(e.target.value);
+  };
+  return (
+    <Select
+      helperText="This is the helper text."
+      labelText="What is your favorite color?"
+      name="color"
+      onChange={onChange}
+      value={value}
+    >
+      <option value="red">Red</option>
+      <option value="green">Green</option>
+      <option value="blue">Blue</option>
+      <option value="black">Black</option>
+      <option value="white">White</option>
+    </Select>
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <SelectControlledExample />
+  </DSProvider>
+</Canvas>
+
 ### Uncontrolled Component using `ref`s
 
 If your application uses uncontrolled components, you can pass a React `ref`
-prop to the DS Select component to get the selected value from the DOM.
+prop to the DS Select component to get the selected value from the DOM. Note
+that this example uses a `Form` and a `Button` to submit the form, only then
+will the value be available.
 
-```jsx
-const selectRef = React.createRef<HTMLSelectElement>();
-// ...
-<Select
-  labelText="What is your favorite color?"
-  helperText="This is the helper text."
-  name="color"
->
-  <option value="red">Red</option>
-  <option value="green">Green</option>
-  <option value="blue">Blue</option>
-  <option value="black">Black</option>
-  <option value="white">White</option>
-</Select>
+Try it out: open up the browser's console to see new values being logged on
+each change.
 
-// ...
-// Get the value through:
-const onSubmit = () => {
-  // ...
-  const selectValue = selectRef.current.value;
-};
+```jsx
+export function SelectUncontrolledExample() {
+  const selectRef = React.createRef();
+  const onSubmit = () => {
+    const selectValue = selectRef.current.value;
+    console.log("Using uncontrolled ref:", selectValue);
+  };
+  return (
+    <Form>
+      <Select
+        helperText="This is the helper text."
+        labelText="What is your favorite color?"
+        name="color"
+        ref={selectRef}
+      >
+        <option value="red">Red</option>
+        <option value="green">Green</option>
+        <option value="blue">Blue</option>
+        <option value="black">Black</option>
+        <option value="white">White</option>
+      </Select>
+      <Button onClick={onSubmit}>Submit</Button>
+    </Form>
+  );
+}
 ```
+
+export function SelectUncontrolledExample() {
+  const selectRef = React.createRef();
+  const onSubmit = () => {
+    const selectValue = selectRef.current.value;
+    console.log("Using uncontrolled ref:", selectValue);
+  };
+  return (
+    <Form>
+      <Select
+        helperText="This is the helper text."
+        labelText="What is your favorite color?"
+        name="color"
+        ref={selectRef}
+      >
+        <option value="red">Red</option>
+        <option value="green">Green</option>
+        <option value="blue">Blue</option>
+        <option value="black">Black</option>
+        <option value="white">White</option>
+      </Select>
+      <Button onClick={onSubmit}>Submit</Button>
+    </Form>
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <SelectUncontrolledExample />
+  </DSProvider>
+</Canvas>

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

@@ -198,7 +198,7 @@ describe("Select", () => {
   });
 
   it("calls the onChange callback function", () => {
-    let value = "red";
+    let value = "";
     const changeCallback = (e) => {
       value = e.target.value;
     };
@@ -208,7 +208,7 @@ describe("Select", () => {
       </Select>
     );
 
-    expect(value).toEqual("red");
+    expect(value).toEqual("");
 
     fireEvent.change(screen.getByRole("combobox"), {
       target: { value: "blue" },

package/src/components/Select/Select.tsx

@@ -38,6 +38,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 +74,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";
@@ -87,7 +90,7 @@ const Select = React.forwardRef<
   const footnote = 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,6 +129,7 @@ const Select = React.forwardRef<
         isDisabled={isDisabled}
         isInvalid={isInvalid}
         name={name}
+        placeholder={placeholder}
         ref={ref}
         {...controlledProps}
         {...ariaAttributes}

package/src/components/Slider/Slider.stories.mdx

@@ -40,7 +40,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Slider} />
 
@@ -439,7 +439,8 @@ Pass a callback function to the `onChange` prop to get the current number value
 of the `Slider` component or an array of two numbers when it is a range slider.
 Internally, the `Slider` component handles the state of the current selected
 value or values. Once the value(s) is updated, the `onChange` callback will be
-called and the values will be passed.
+called and the values will be passed. If no `onChange` callback is provided,
+you won't be able to get the updated value(s) of the `Slider` component.
 
 #### Single Slider Value
 

package/src/components/Slider/Slider.test.tsx

@@ -294,6 +294,26 @@ describe("Slider", () => {
       expect(input).toHaveValue(100);
     });
 
+    it("doesn't crash if no onChange callback function is passed", () => {
+      let currentValue = 0;
+      render(
+        <Slider
+          defaultValue={50}
+          helperText="Component helper text."
+          invalidText="Component error text :("
+          labelText="Label"
+        />
+      );
+
+      const input = screen.getByRole("spinbutton");
+      fireEvent.change(input, {
+        target: { value: "42" },
+      });
+      // While we change the slider input value, since there is no onChange
+      // function, there is no way to update this local `currentValue` variable.
+      expect(currentValue).toEqual(0);
+    });
+
     it("gets the current value through the onChange callback function", () => {
       let currentValue = 0;
       function onChange(value) {
@@ -495,6 +515,21 @@ describe("Slider", () => {
       );
     });
 
+    it("renders with min and max values as the default values if no `defaultValue` array is passed", () => {
+      render(
+        <Slider
+          helperText="Component helper text."
+          invalidText="Component error text :("
+          isRangeSlider
+          labelText="Label"
+          max={80}
+          min={30}
+        />
+      );
+      expect(screen.getByText("30")).toBeInTheDocument();
+      expect(screen.getByText("80")).toBeInTheDocument();
+    });
+
     it("renders the invalid state if the start and end values are wrong", () => {
       // The start value is bigger than the end value.
       render(

package/src/components/Slider/Slider.tsx

@@ -97,8 +97,14 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     showValues = true,
     step = 1,
   } = props;
+  // For the RangeSlider, if the defaultValue is not an array, then we set
+  // the defaultValue to an array with the min and max values.
+  const rangeSliderDefault =
+    typeof defaultValue === "number" ? [min, max] : defaultValue;
+  // We need to set the default value correctly for both types of sliders.
+  const finalDevaultValue = isRangeSlider ? rangeSliderDefault : defaultValue;
   const [currentValue, setCurrentValue] = React.useState<typeof defaultValue>(
-    defaultValue
+    finalDevaultValue
   );
   let finalIsInvalid = isInvalid;
   // In the Range Slider, if the first value is bigger than the second value,
@@ -127,7 +133,7 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     onChange: (val) => setCurrentValue(val),
     // Call the passed in `onChange` function prop to get the
     // *final* value once a user stops dragging the slider.
-    onChangeEnd: (val) => onChange(val),
+    onChangeEnd: (val) => onChange && onChange(val),
     step,
   };
   // Props that the two `TextInput` components use.