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

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

@@ -10,6 +10,7 @@ describe("Slider Accessibility", () => {
     it("passes axe accessibility test", async () => {
       const { container } = render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -21,6 +22,7 @@ describe("Slider Accessibility", () => {
     it("passes axe accessibility test without a label", async () => {
       const { container } = render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -33,6 +35,7 @@ describe("Slider Accessibility", () => {
     it("passes axe accessibility test without visible values", async () => {
       const { container } = render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -49,6 +52,7 @@ describe("Slider Accessibility", () => {
     it("passes axe accessibility test", async () => {
       const { container } = render(
         <Slider
+          id="slider"
           defaultValue={[25, 75]}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -61,6 +65,7 @@ describe("Slider Accessibility", () => {
     it("passes axe accessibility test without a label", async () => {
       const { container } = render(
         <Slider
+          id="slider"
           defaultValue={[25, 75]}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -74,6 +79,7 @@ describe("Slider Accessibility", () => {
     it("passes axe accessibility test without visible values", async () => {
       const { container } = render(
         <Slider
+          id="slider"
           defaultValue={[25, 75]}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -93,6 +99,7 @@ describe("Slider", () => {
     it("renders a label, two static values, text input, and helper text", () => {
       render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -100,7 +107,6 @@ describe("Slider", () => {
         />
       );
       expect(screen.getByText(/Label/i)).toBeInTheDocument();
-      expect(screen.getByText(/Optional/i)).toBeInTheDocument();
       expect(screen.getByRole("slider")).toBeInTheDocument();
       // default min and max values
       expect(screen.getByText("0")).toBeInTheDocument();
@@ -128,20 +134,10 @@ describe("Slider", () => {
       expect(slider).toHaveAttribute("aria-labelledBy", "sliderId-label");
     });
 
-    it("renders the 'required' text in the label or hides it", () => {
+    it("renders the '(Required)' text in the label or hides it", () => {
       const { rerender } = render(
         <Slider
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-        />
-      );
-      // "Optional" by default.
-      expect(screen.getByText(/Optional/i)).toBeInTheDocument();
-
-      rerender(
-        <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -149,26 +145,26 @@ describe("Slider", () => {
           isRequired
         />
       );
-      expect(screen.queryByText(/Optional/i)).not.toBeInTheDocument();
       expect(screen.getByText(/Required/i)).toBeInTheDocument();
 
       rerender(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
           labelText="Label"
           isRequired
-          optReqFlag={false}
+          showRequiredLabel={false}
         />
       );
-      expect(screen.queryByText(/Optional/i)).not.toBeInTheDocument();
       expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
     });
 
     it("hides the label but adds it as an aria-label attribute", () => {
       render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -184,6 +180,7 @@ describe("Slider", () => {
     it("hides the min/max static values", () => {
       const { rerender } = render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -197,6 +194,7 @@ describe("Slider", () => {
 
       rerender(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -213,6 +211,7 @@ describe("Slider", () => {
     it("hides the current value input box", () => {
       const { rerender } = render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -224,6 +223,7 @@ describe("Slider", () => {
 
       rerender(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -237,6 +237,7 @@ describe("Slider", () => {
     it("renders the invalid state", () => {
       render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -258,6 +259,7 @@ describe("Slider", () => {
     it("renders the disabled state", () => {
       render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -274,6 +276,7 @@ describe("Slider", () => {
     it("updates the value through the text input", () => {
       render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -298,6 +301,7 @@ describe("Slider", () => {
       let currentValue = 0;
       render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -322,6 +326,7 @@ describe("Slider", () => {
 
       render(
         <Slider
+          id="slider"
           defaultValue={50}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -431,6 +436,31 @@ describe("Slider", () => {
           />
         )
         .toJSON();
+      const withChakraProps = renderer
+        .create(
+          <Slider
+            id="chakra"
+            defaultValue={50}
+            helperText="Component helper text."
+            invalidText="Component error text :("
+            labelText="Label"
+            p="20px"
+            color="ui.error.primary"
+          />
+        )
+        .toJSON();
+      const withOtherProps = renderer
+        .create(
+          <Slider
+            id="props"
+            defaultValue={50}
+            helperText="Component helper text."
+            invalidText="Component error text :("
+            labelText="Label"
+            data-testid="props"
+          />
+        )
+        .toJSON();
 
       expect(defaultSlider).toMatchSnapshot();
       expect(errored).toMatchSnapshot();
@@ -439,6 +469,8 @@ describe("Slider", () => {
       expect(noLabels).toMatchSnapshot();
       expect(noVisibleValues).toMatchSnapshot();
       expect(onlySlider).toMatchSnapshot();
+      expect(withChakraProps).toMatchSnapshot();
+      expect(withOtherProps).toMatchSnapshot();
     });
   });
 
@@ -446,6 +478,7 @@ describe("Slider", () => {
     it("renders everything from the single but also two text input fields", () => {
       render(
         <Slider
+          id="slider"
           defaultValue={[25, 75]}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -454,7 +487,6 @@ describe("Slider", () => {
         />
       );
       expect(screen.getByText(/Label/i)).toBeInTheDocument();
-      expect(screen.getByText(/Optional/i)).toBeInTheDocument();
       // The range slider has two sliders!
       expect(screen.getAllByRole("slider")).toHaveLength(2);
       // default min and max values
@@ -495,6 +527,7 @@ describe("Slider", () => {
     it("hides the label but adds it as an aria-label attribute", () => {
       render(
         <Slider
+          id="slider"
           defaultValue={[25, 75]}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -518,6 +551,7 @@ describe("Slider", () => {
     it("renders with min and max values as the default values if no `defaultValue` array is passed", () => {
       render(
         <Slider
+          id="slider"
           helperText="Component helper text."
           invalidText="Component error text :("
           isRangeSlider
@@ -534,6 +568,7 @@ describe("Slider", () => {
       // The start value is bigger than the end value.
       render(
         <Slider
+          id="slider"
           defaultValue={[75, 25]}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -559,6 +594,7 @@ describe("Slider", () => {
     it("updates the value through the text input", () => {
       render(
         <Slider
+          id="slider"
           defaultValue={[25, 75]}
           helperText="Component helper text."
           invalidText="Component error text :("
@@ -579,6 +615,18 @@ describe("Slider", () => {
       expect(endingInput).toHaveValue(79);
     });
 
+    it("logs a warning when there is no `id` passed", () => {
+      const warn = jest.spyOn(console, "warn");
+      render(
+        // @ts-ignore: Typescript complains when a required prop is not passed, but
+        // here we don't want to pass the required prop to make sure the warning appears.
+        <Slider labelText="Label" />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir Slider: This component's required `id` prop was not passed."
+      );
+    });
+
     it("renders the UI snapshot correctly", () => {
       const defaultRangeSlider = renderer
         .create(

package/src/components/Slider/Slider.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import {
   Box,
+  chakra,
   RangeSlider as ChakraRangeSlider,
   RangeSliderTrack as ChakraRangeSliderTrack,
   RangeSliderFilledTrack as ChakraRangeSliderFilledTrack,
@@ -11,8 +11,8 @@ import {
   SliderThumb as ChakraSliderThumb,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
-import generateUUID from "../../helpers/generateUUID";
 import Label from "../Label/Label";
 import HelperErrorText, {
   HelperErrorTextType,
@@ -30,7 +30,7 @@ export interface SliderProps {
   /** Optional string to populate the HelperErrorText for standard state */
   helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes. */
-  id?: string;
+  id: string;
   /** Optional string to populate the `HelperErrorText` for the error state
    * when `isInvalid` is true. */
   invalidText?: HelperErrorTextType;
@@ -56,8 +56,6 @@ export interface SliderProps {
   name?: string;
   /** Callback function that gets the value(s) selected. */
   onChange?: (val: number | number[]) => void;
-  /** Whether or not to display the "Required"/"Optional" text in the label text. */
-  optReqFlag?: boolean;
   /** Offers the ability to hide the `TextInput` boxes. */
   showBoxes?: boolean;
   /** Offers the ability to hide the helper/invalid text. */
@@ -65,6 +63,9 @@ export interface SliderProps {
   /** Offers the ability to show the label onscreen or hide it. Refer
    * to the `labelText` property for more information. */
   showLabel?: boolean;
+  /** Whether or not to display the "(Required)" text in the label text.
+   * True by default. */
+  showRequiredLabel?: boolean;
   /** Offers the ability to hide the static min/max values. */
   showValues?: boolean;
   /** The amount to increase or decrease when using the slider thumb(s). */
@@ -76,12 +77,12 @@ export interface SliderProps {
  * with a min and max value. The value(s) can be updated through the slider
  * thumb(s) or through the text input(s) elements.
  */
-export default function Slider(props: React.PropsWithChildren<SliderProps>) {
+export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
   const {
     className,
     defaultValue = 0,
     helperText,
-    id = generateUUID(),
+    id,
     invalidText,
     isDisabled = false,
     isInvalid = false,
@@ -92,13 +93,20 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     min = 0,
     name,
     onChange,
-    optReqFlag = true,
     showBoxes = true,
     showHelperInvalidText = true,
     showLabel = true,
+    showRequiredLabel = true,
     showValues = true,
     step = 1,
+    ...rest
   } = props;
+
+  if (!id) {
+    console.warn(
+      "NYPL Reservoir Slider: This component's required `id` prop was not passed."
+    );
+  }
   // 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 =
@@ -113,15 +121,14 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
   if (isRangeSlider && currentValue[0] > currentValue[1]) {
     finalIsInvalid = true;
   }
-  const optReqText = isRequired ? "Required" : "Optional";
   const footnote: HelperErrorTextType = finalIsInvalid
     ? invalidText
     : helperText;
   const styles = useMultiStyleConfig("CustomSlider", {
     isDisabled,
     isInvalid: finalIsInvalid,
-    isRangeSlider,
     showBoxes,
+    showValues,
   });
   // Props that the `Slider` and `RangeSlider` Chakra
   // components both use.
@@ -133,11 +140,14 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     max,
     min,
     name,
-    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 && onChange(val),
+    onChange: (val) => {
+      setCurrentValue(val);
+      onChange && onChange(val);
+    },
     step,
+    // Additional margins so slider thumbs don't overflow past the
+    // edge when the value boxes or min/max values are hidden.
+    sx: styles.sliderContainer,
   };
   // Props that the two `TextInput` components use.
   const textInputSharedProps = {
@@ -268,7 +278,7 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
   };
 
   return (
-    <Box className={className} __css={styles}>
+    <Box className={className} __css={styles} {...rest}>
       {showLabel && (
         <Label
           id={`${id}-label`}
@@ -281,7 +291,7 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
               ? `${id}-textInput-${isRangeSlider ? "start" : "end"}`
               : null
           }
-          optReqFlag={optReqFlag && optReqText}
+          isRequired={showRequiredLabel && isRequired}
         >
           {labelText}
         </Label>
@@ -301,14 +311,14 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
       </Box>
 
       {footnote && showHelperInvalidText && (
-        <Box __css={styles.helper}>
-          <HelperErrorText
-            id={`${id}-helperText`}
-            isInvalid={finalIsInvalid}
-            text={footnote}
-          />
-        </Box>
+        <HelperErrorText
+          id={`${id}-helperText`}
+          isInvalid={finalIsInvalid}
+          text={footnote}
+        />
       )}
     </Box>
   );
-}
+});
+
+export default Slider;