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

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

@@ -1,17 +1,17 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import Slider from "./Slider";
-import SimpleGrid from "../Grid/SimpleGrid";
-import { GridGaps } from "../Grid/GridTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
+import { GridGaps } from "../Grid/GridTypes";
+import SimpleGrid from "../Grid/SimpleGrid";
+import Slider from "./Slider";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -22,16 +22,52 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36889%3A25871",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36889%3A25871",
     },
     jest: ["Slider.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
-    name: { table: { disable: true } },
-    onChange: { table: { disable: true } },
+    className: { control: false },
+    defaultValue: {
+      control: false,
+      table: { defaultValue: { summary: 0 } },
+    },
+    id: { control: false },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    max: {
+      table: { defaultValue: { summary: 100 } },
+    },
+    min: {
+      table: { defaultValue: { summary: 0 } },
+    },
+    name: { control: false },
+    onChange: { control: false },
+    optReqFlag: {
+      table: { defaultValue: { summary: true } },
+    },
+    showBoxes: {
+      table: { defaultValue: { summary: true } },
+    },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: true } },
+    },
+    showValues: {
+      table: { defaultValue: { summary: true } },
+    },
+    step: {
+      table: { defaultValue: { summary: 1 } },
+    },
   }}
 />
 
@@ -40,7 +76,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Slider} />
 
@@ -49,10 +85,12 @@ For this type of component, the `value` prop must be a single number.
 
 <Canvas withToolbar>
   <Story
-    name="Slider with Props"
+    name="Slider with Controls"
     args={{
+      className: undefined,
       defaultValue: 50,
       helperText: "Pass in a value from the min 0 to the max 100 values.",
+      id: "slider-id",
       invalidText: "Oh no this is an error :(",
       isDisabled: false,
       isInvalid: false,
@@ -61,6 +99,8 @@ For this type of component, the `value` prop must be a single number.
       labelText: "Slider label",
       max: 100,
       min: 0,
+      name: undefined,
+      onChange: undefined,
       optReqFlag: true,
       showBoxes: true,
       showHelperInvalidText: true,
@@ -69,15 +109,19 @@ For this type of component, the `value` prop must be a single number.
       step: 1,
     }}
     argTypes={{
-      defaultValue: { table: { disable: true } },
-      isRangeSlider: { table: { disable: true } },
+      isRangeSlider: {
+        control: false,
+        table: {
+          defaultValue: { summary: false },
+        },
+      },
     }}
   >
     {(args) => <Slider {...args} />}
   </Story>
 </Canvas>
 
-<ArgsTable story="Slider with Props" />
+<ArgsTable story="Slider with Controls" />
 
 ### Accessibility
 
@@ -101,8 +145,10 @@ numbers. This signifies the starting and ending values of the range slider.
   <Story
     name="Range Slider with Props"
     args={{
+      className: undefined,
       defaultValue: [25, 75],
       helperText: "Pass in a value from the min 0 to the max 100 values.",
+      id: "slider-range-id",
       invalidText: "Oh no this is an error :(",
       isDisabled: false,
       isInvalid: false,
@@ -111,6 +157,8 @@ numbers. This signifies the starting and ending values of the range slider.
       labelText: "Range Slider label",
       max: 100,
       min: 0,
+      name: undefined,
+      onChange: undefined,
       optReqFlag: true,
       showBoxes: true,
       showHelperInvalidText: true,
@@ -119,16 +167,18 @@ numbers. This signifies the starting and ending values of the range slider.
       step: 1,
     }}
     argTypes={{
-      defaultValue: { table: { disable: true } },
-      isRangeSlider: { table: { disable: true } },
+      isRangeSlider: {
+        control: false,
+        table: {
+          defaultValue: { summary: false },
+        },
+      },
     }}
   >
     {(args) => <Slider {...args} />}
   </Story>
 </Canvas>
 
-<ArgsTable story="Range Slider with Props" />
-
 ### Accessibility
 
 Chakra's `RangeSlider` component is accessible and, as recommended, we pass in
@@ -439,7 +489,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

@@ -14,7 +14,9 @@ import {
 
 import generateUUID from "../../helpers/generateUUID";
 import Label from "../Label/Label";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import TextInput from "../TextInput/TextInput";
 import { TextInputTypes } from "../TextInput/TextInputTypes";
 
@@ -26,12 +28,12 @@ export interface SliderProps {
    */
   defaultValue?: number | number[];
   /** Optional string to populate the HelperErrorText for 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' state to the slider and text input(s) when true. */
   isDisabled?: boolean;
   /** Adds the 'invalid' state to the slider and text input(s) when true. */
@@ -97,9 +99,14 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     showValues = true,
     step = 1,
   } = props;
-  const [currentValue, setCurrentValue] = React.useState<typeof defaultValue>(
-    defaultValue
-  );
+  // 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>(finalDevaultValue);
   let finalIsInvalid = isInvalid;
   // In the Range Slider, if the first value is bigger than the second value,
   // then set the invalid state.
@@ -107,7 +114,9 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     finalIsInvalid = true;
   }
   const optReqText = isRequired ? "Required" : "Optional";
-  const footnote = finalIsInvalid ? invalidText : helperText;
+  const footnote: HelperErrorTextType = finalIsInvalid
+    ? invalidText
+    : helperText;
   const styles = useMultiStyleConfig("CustomSlider", {
     isDisabled,
     isInvalid: finalIsInvalid,
@@ -127,7 +136,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.
@@ -293,9 +302,11 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
 
       {footnote && showHelperInvalidText && (
         <Box __css={styles.helper}>
-          <HelperErrorText id={`${id}-helperText`} isInvalid={finalIsInvalid}>
-            {footnote}
-          </HelperErrorText>
+          <HelperErrorText
+            id={`${id}-helperText`}
+            isInvalid={finalIsInvalid}
+            text={footnote}
+          />
         </Box>
       )}
     </Box>

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

@@ -61,6 +61,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-defaultRangeSlider"
         style={
           Object {
@@ -168,11 +169,14 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component helper text.",
+        }
+      }
       data-isinvalid={false}
       id="defaultRangeSlider-helperText"
-    >
-      Component helper text.
-    </div>
+    />
   </div>
 </div>
 `;
@@ -239,6 +243,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-errored"
         style={
           Object {
@@ -347,11 +352,14 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
       aria-atomic={true}
       aria-live="polite"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component error text :(",
+        }
+      }
       data-isinvalid={true}
       id="errored-helperText"
-    >
-      Component error text :(
-    </div>
+    />
   </div>
 </div>
 `;
@@ -418,6 +426,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-required"
         style={
           Object {
@@ -526,11 +535,14 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component helper text.",
+        }
+      }
       data-isinvalid={false}
       id="required-helperText"
-    >
-      Component helper text.
-    </div>
+    />
   </div>
 </div>
 `;
@@ -598,6 +610,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
       <div
         className="chakra-slider__track css-0"
         data-disabled=""
+        data-testid="chakra-range-slider-track"
         id="slider-track-disabled"
         style={
           Object {
@@ -705,11 +718,14 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component helper text.",
+        }
+      }
       data-isinvalid={false}
       id="disabled-helperText"
-    >
-      Component helper text.
-    </div>
+    />
   </div>
 </div>
 `;
@@ -763,6 +779,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-noLabels"
         style={
           Object {
@@ -903,6 +920,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-noVisibleValues"
         style={
           Object {
@@ -986,11 +1004,14 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component helper text.",
+        }
+      }
       data-isinvalid={false}
       id="noVisibleValues-helperText"
-    >
-      Component helper text.
-    </div>
+    />
   </div>
 </div>
 `;
@@ -1020,6 +1041,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-onlySlider"
         style={
           Object {
@@ -1226,11 +1248,14 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component helper text.",
+        }
+      }
       data-isinvalid={false}
       id="defaultSlider-helperText"
-    >
-      Component helper text.
-    </div>
+    />
   </div>
 </div>
 `;
@@ -1363,11 +1388,14 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
       aria-atomic={true}
       aria-live="polite"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component error text :(",
+        }
+      }
       data-isinvalid={true}
       id="errored-helperText"
-    >
-      Component error text :(
-    </div>
+    />
   </div>
 </div>
 `;
@@ -1500,11 +1528,14 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component helper text.",
+        }
+      }
       data-isinvalid={false}
       id="required-helperText"
-    >
-      Component helper text.
-    </div>
+    />
   </div>
 </div>
 `;
@@ -1638,11 +1669,14 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component helper text.",
+        }
+      }
       data-isinvalid={false}
       id="disabled-helperText"
-    >
-      Component helper text.
-    </div>
+    />
   </div>
 </div>
 `;
@@ -1855,11 +1889,14 @@ exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Component helper text.",
+        }
+      }
       data-isinvalid={false}
       id="noVisibleValues-helperText"
-    >
-      Component helper text.
-    </div>
+    />
   </div>
 </div>
 `;

package/src/components/StatusBadge/StatusBadge.stories.mdx

@@ -1,18 +1,23 @@
+import { VStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { VStack } from "@chakra-ui/react";
 
 import StatusBadge from "./StatusBadge";
 import { StatusBadgeTypes } from "./StatusBadgeTypes";
-import getCSSVariable from "../../helpers/getCSSVariable";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  StatusBadgeTypes,
+  "StatusBadgeTypes"
+);
 
 <Meta
   title={getCategory("StatusBadge")}
@@ -21,19 +26,20 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11256%3A0",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11256%3A0",
     },
     jest: ["StatusBadge.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
     level: {
-      control: {
-        type: "select",
-      },
-      options: Object.values(StatusBadgeTypes).map((value) => value),
+      control: { type: "select" },
+      table: { defaultValue: { summary: "StatusBadgeTypes.Low" } },
+      options: enumValues.options,
+    },
+    text: {
+      description: "Only used for Storybook",
     },
   }}
 />
@@ -49,14 +55,23 @@ import DSProvider from "../../theme/provider";
 
 <Canvas withToolbar>
   <Story
-    name="Basic with props"
-    args={{ level: StatusBadgeTypes.Low, text: "Registration Required" }}
+    name="StatusBadge"
+    args={{
+      className: undefined,
+      id: "statusBadge-id",
+      level: "StatusBadgeTypes.Low",
+      text: "Registration Required",
+    }}
   >
-    {(args) => <StatusBadge {...args}>{args.text}</StatusBadge>}
+    {(args) => (
+      <StatusBadge level={enumValues.getValue(args.level)}>
+        {args.text}
+      </StatusBadge>
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic with props" />
+<ArgsTable story="StatusBadge" />
 
 ## Patterns
 

package/src/components/StatusBadge/StatusBadge.tsx

@@ -9,7 +9,8 @@ export interface StatusBadgeProps {
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Level of the status badge through StatusBadgeTypes. */
+  /** Level of the status badge through StatusBadgeTypes. Defaults to
+   * `StatusBadgeTypes.Low`. */
   level?: StatusBadgeTypes;
 }