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

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

@@ -50,9 +50,6 @@ import DSProvider from "../../theme/provider";
     },
     name: { control: false },
     onChange: { control: false },
-    optReqFlag: {
-      table: { defaultValue: { summary: true } },
-    },
     showBoxes: {
       table: { defaultValue: { summary: true } },
     },
@@ -62,6 +59,9 @@ import DSProvider from "../../theme/provider";
     showLabel: {
       table: { defaultValue: { summary: true } },
     },
+    showRequiredLabel: {
+      table: { defaultValue: { summary: true } },
+    },
     showValues: {
       table: { defaultValue: { summary: true } },
     },
@@ -76,7 +76,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
 
 ## Table of Contents
 
@@ -114,10 +114,10 @@ For this type of component, the `value` prop must be a single number.
       min: 0,
       name: undefined,
       onChange: undefined,
-      optReqFlag: true,
       showBoxes: true,
       showHelperInvalidText: true,
       showLabel: true,
+      showRequiredLabel: true,
       showValues: true,
       step: 1,
     }}
@@ -138,14 +138,17 @@ For this type of component, the `value` prop must be a single number.
 
 ## Accessibility
 
-- UI component should be accessible via keyboard. In addition to the text fields,
-  a keyboard user should be able to tab to the blue circle and then with left and
-  right arrows increase or decrease the value.
-- The color contrast between foreground color and background color should be
-  4.5:1 contrast ratio.
-- If text size is 200%, the button should scale with text so there is no overlap.
-- A `Slider` is an input component, so it should have a label. A `Slider` without a
-  label is ambiguous and not accessible.
+The `Slider` component is accessible via keyboard. In addition to the text fields,
+a keyboard user can tab to the blue slider thumb and then with left and right
+arrows increase or decrease the value. The color contrast between foreground
+color and background color is 4.5:1. If text size is 200%, the button scales
+with text so there is no overlap. Internally, a `Label` is associated with the
+`<input>` element.
+
+When `showLabel` is set to false, the `labelText` value will be set to the
+main `<div>`'s `aria-label` attribute. This is the same `<div>` that contains the
+`aria-valuemin`, `aria-valuemax`, `aria-orientation`, and `aria-valuenow`
+attributes.
 
 Resources:
 
@@ -157,10 +160,11 @@ Resources:
 ### Slider Accessibility Implementation
 
 Chakra's `Slider` component is accessible and, as recommended, we pass in an
-`aria-label` to their `Slider` component. On top of that, the DS `Slider`
-component's `<label>` points to the `<input>` element which shows the current
-value. This `input` element also has its own `aria-label`. When the input box
-is hidden, the `for` attribute in the `label` element is removed.
+`aria-label` to their `Slider` component. On top of that, the Reservoir Design 
+System (DS) `Slider` component's `<label>` points to the `<input>` element 
+which shows the current value. This `input` element also has its own 
+`aria-label`. When the input box is hidden, the `for` attribute in the `label` 
+element is removed.
 
 Note that Chakra handles its single slider thumb aria attributes: `aria-valuemin`,
 `aria-valuemax`, `aria-valuenow`, and `aria-orientation`.
@@ -190,10 +194,10 @@ numbers. This signifies the starting and ending values of the range slider.
       min: 0,
       name: undefined,
       onChange: undefined,
-      optReqFlag: true,
       showBoxes: true,
       showHelperInvalidText: true,
       showLabel: true,
+      showRequiredLabel: true,
       showValues: true,
       step: 1,
     }}
@@ -227,9 +231,6 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 ### Single Slider States
 
-Note: In the following examples, the "Required"/"Optional" text in the label is
-hidden by setting the `optReqFlag` prop to false.
-
 <Canvas>
   <DSProvider>
     <Heading
@@ -239,8 +240,8 @@ hidden by setting the `optReqFlag` prop to false.
     />
     <Slider
       defaultValue={50}
-      optReqFlag={false}
       helperText="Component helper text."
+      id="single-slider"
       invalidText="Component error text :("
       labelText="Label"
     />
@@ -256,8 +257,8 @@ hidden by setting the `optReqFlag` prop to false.
     />
     <Slider
       defaultValue={50}
-      optReqFlag={false}
       helperText="Component helper text."
+      id="errored-slider"
       invalidText="Component error text :("
       labelText="Label"
       isInvalid
@@ -265,6 +266,24 @@ hidden by setting the `optReqFlag` prop to false.
   </DSProvider>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading
+      id="heading-single-required"
+      level={HeadingLevels.Four}
+      text="Required State"
+    />
+    <Slider
+      defaultValue={50}
+      helperText="Component helper text."
+      id="required-slider"
+      invalidText="Component error text :("
+      labelText="Label"
+      isRequired
+    />
+  </DSProvider>
+</Canvas>
+
 <Canvas>
   <DSProvider>
     <Heading
@@ -274,8 +293,8 @@ hidden by setting the `optReqFlag` prop to false.
     />
     <Slider
       defaultValue={50}
-      optReqFlag={false}
       helperText="Component helper text."
+      id="disabled-slider"
       invalidText="Component error text :("
       labelText="Label"
       isDisabled
@@ -287,9 +306,6 @@ hidden by setting the `optReqFlag` prop to false.
 
 To enable the Range Slider, set the `isRangeSlider` prop to true.
 
-Note: In the following examples, the "Required"/"Optional" text in the label is
-hidden by setting the `optReqFlag` prop to false.
-
 <Canvas>
   <DSProvider>
     <Heading
@@ -299,8 +315,8 @@ hidden by setting the `optReqFlag` prop to false.
     />
     <Slider
       defaultValue={[25, 75]}
-      optReqFlag={false}
       helperText="Component helper text."
+      id="range-slider"
       invalidText="Component error text :("
       labelText="Label"
       isRangeSlider
@@ -318,8 +334,8 @@ hidden by setting the `optReqFlag` prop to false.
     <SimpleGrid columns={1} gap={GridGaps.Large}>
       <Slider
         defaultValue={[25, 75]}
-        optReqFlag={false}
         helperText="Component helper text."
+        id="range-error-slider"
         invalidText="Component error text :("
         labelText="Label"
         isRangeSlider
@@ -336,8 +352,8 @@ hidden by setting the `optReqFlag` prop to false.
       </p>
       <Slider
         defaultValue={[80, 20]}
-        optReqFlag={false}
         helperText="Component helper text."
+        id="range-error-slider2"
         invalidText="Component error text :("
         labelText="Label"
         isRangeSlider
@@ -346,6 +362,25 @@ hidden by setting the `optReqFlag` prop to false.
   </DSProvider>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading
+      id="heading-range-required"
+      level={HeadingLevels.Four}
+      text="Required State"
+    />
+    <Slider
+      defaultValue={[25, 75]}
+      helperText="Component helper text."
+      id="range-required-slider"
+      invalidText="Component error text :("
+      labelText="Label"
+      isRangeSlider
+      isRequired
+    />
+  </DSProvider>
+</Canvas>
+
 <Canvas>
   <DSProvider>
     <Heading
@@ -355,8 +390,8 @@ hidden by setting the `optReqFlag` prop to false.
     />
     <Slider
       defaultValue={[25, 75]}
-      optReqFlag={false}
       helperText="Component helper text."
+      id="single-disabled-slider"
       invalidText="Component error text :("
       labelText="Label"
       isRangeSlider
@@ -381,6 +416,7 @@ input are hidden.
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="single-slider-variant-1"
         labelText="Label"
         showValues={false}
         showBoxes={false}
@@ -388,6 +424,7 @@ input are hidden.
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="single-slider-variant-2"
         labelText="Label"
         showValues={false}
         showBoxes={false}
@@ -396,16 +433,16 @@ input are hidden.
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="single-slider-variant-3"
         labelText="Label"
-        optReqFlag={false}
         showValues={false}
         showBoxes={false}
       />
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="single-slider-variant-4"
         labelText="Label"
-        optReqFlag={false}
         showHelperInvalidText={false}
         showValues={false}
         showBoxes={false}
@@ -413,8 +450,8 @@ input are hidden.
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="single-slider-variant-5"
         labelText="Label"
-        optReqFlag={false}
         showValues={false}
         showBoxes={false}
         showLabel={false}
@@ -436,6 +473,7 @@ For the following examples, all labels are hidden.
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="hidden-labels-1"
         labelText="Label"
         showHelperInvalidText={false}
         showLabel={false}
@@ -443,6 +481,7 @@ For the following examples, all labels are hidden.
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="hidden-labels-2"
         labelText="Label"
         showHelperInvalidText={false}
         showLabel={false}
@@ -451,6 +490,7 @@ For the following examples, all labels are hidden.
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="hidden-labels-3"
         labelText="Label"
         showHelperInvalidText={false}
         showLabel={false}
@@ -459,6 +499,7 @@ For the following examples, all labels are hidden.
       <Slider
         defaultValue={50}
         helperText="Component helper text."
+        id="hidden-labels-4"
         labelText="Label"
         showHelperInvalidText={false}
         showLabel={false}
@@ -479,38 +520,42 @@ In the following examples, all the labels are hidden.
       <Slider
         defaultValue={[15, 75]}
         helperText="Component helper text."
+        id="range-slider-1"
+        isRangeSlider
         labelText="Label"
         showHelperInvalidText={false}
         showLabel={false}
-        isRangeSlider
       />
       <Slider
         defaultValue={[15, 75]}
         helperText="Component helper text."
+        id="range-slider-1"
+        isRangeSlider
         labelText="Label"
+        showBoxes={false}
         showHelperInvalidText={false}
         showLabel={false}
-        showBoxes={false}
-        isRangeSlider
       />
       <Slider
         defaultValue={[15, 75]}
         helperText="Component helper text."
+        id="range-slider-3"
+        isRangeSlider
         labelText="Label"
         showHelperInvalidText={false}
         showLabel={false}
         showValues={false}
-        isRangeSlider
       />
       <Slider
         defaultValue={[15, 75]}
         helperText="Component helper text."
+        id="range-slider-4"
+        isRangeSlider
         labelText="Label"
+        showBoxes={false}
         showHelperInvalidText={false}
         showLabel={false}
         showValues={false}
-        showBoxes={false}
-        isRangeSlider
       />
     </SimpleGrid>
   </DSProvider>
@@ -539,6 +584,7 @@ function SliderExample() {
   return (
     <Slider
       helperText="Component helper text."
+      id="slider"
       labelText="Label"
       onChange={onChange}
     />
@@ -553,6 +599,7 @@ export function SliderExample() {
   return (
     <Slider
       helperText="Component helper text."
+      id="slider"
       labelText="Label"
       onChange={onChange}
     />
@@ -581,9 +628,10 @@ function RangeSliderExample() {
   return (
     <Slider
       helperText="Component helper text."
+      id="range-slider"
+      isRangeSlider
       labelText="Label"
       onChange={onChange}
-      isRangeSlider
     />
   );
 }
@@ -599,9 +647,10 @@ export function RangeSliderExample() {
     <Slider
       defaultValue={[15, 75]}
       helperText="Component helper text."
+      id="range-slider"
+      isRangeSlider
       labelText="Label"
       onChange={onChange}
-      isRangeSlider
     />
   );
 }

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(