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

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
@@ -87,7 +89,9 @@ 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 ? { onChange, value } : {};
@@ -140,9 +144,11 @@ const Select = React.forwardRef<
       </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>

package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx

@@ -1,20 +1,30 @@
+import { action } from "@storybook/addon-actions";
 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 { action } from "@storybook/addon-actions";
 
-import { getCategory } from "../../utils/componentCategories";
+import SimpleGrid from "../Grid/SimpleGrid";
 import SkeletonLoader from "./SkeletonLoader";
 import {
-  SkeletonLoaderLayouts,
   SkeletonLoaderImageRatios,
+  SkeletonLoaderLayouts,
 } from "./SkeletonLoaderTypes";
-import SimpleGrid from "../Grid/SimpleGrid";
+import { getCategory } from "../../utils/componentCategories";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const imageRatiosEnumValues = getStorybookEnumValues(
+  SkeletonLoaderImageRatios,
+  "SkeletonLoaderImageRatios"
+);
+export const layoutsEnumValues = getStorybookEnumValues(
+  SkeletonLoaderLayouts,
+  "SkeletonLoaderLayouts"
+);
 
 <Meta
   title={getCategory("SkeletonLoader")}
@@ -23,17 +33,25 @@ import SimpleGrid from "../Grid/SimpleGrid";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17219%3A7",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17219%3A7",
     },
     jest: ["SkeletonLoader.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
+    className: { control: false },
     contentSize: { table: { defaultValue: { summary: "3" } } },
     headingSize: { table: { defaultValue: { summary: "1" } } },
-    imageAspectRatio: { table: { defaultValue: { summary: "square" } } },
-    layout: { table: { defaultValue: { summary: "column" } } },
+    imageAspectRatio: {
+      control: { type: "select" },
+      table: {
+        defaultValue: { summary: "SkeletonLoaderImageRatios.Square" },
+      },
+      options: imageRatiosEnumValues.options,
+    },
+    layout: {
+      table: { defaultValue: { summary: "SkeletonLoaderLayouts.Column" } },
+      options: layoutsEnumValues.options,
+    },
     showButton: { table: { defaultValue: { summary: "false" } } },
     showContent: { table: { defaultValue: { summary: "true" } } },
     showHeading: { table: { defaultValue: { summary: "true" } } },
@@ -58,16 +76,32 @@ to better view the example. The default value is `100%`.
 
 <Canvas withToolbar>
   <Story
-    name="Basic with Props"
+    name="SkeletonLoader with Controls"
     args={{
+      border: false,
+      className: undefined,
+      contentSize: 3,
+      headingSize: 1,
+      imageAspectRatio: "SkeletonLoaderImageRatios.Square",
+      layout: "SkeletonLoaderLayouts.Column",
+      showButton: false,
+      showContent: true,
+      showHeading: true,
+      showImage: true,
       width: "300px",
     }}
   >
-    {(args) => <SkeletonLoader {...args} />}
+    {(args) => (
+      <SkeletonLoader
+        {...args}
+        imageAspectRatio={imageRatiosEnumValues.getValue(args.imageAspectRatio)}
+        layout={layoutsEnumValues.getValue(args.layout)}
+      />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic with Props" />
+<ArgsTable story="SkeletonLoader with Controls" />
 
 # Card Placeholders in a Grid
 

package/src/components/SkeletonLoader/SkeletonLoader.tsx

@@ -15,13 +15,17 @@ export interface SkeletonLoaderProps {
   border?: boolean;
   /** Additional class name for the Skeleton component. */
   className?: string;
-  /** Optional numeric value to control the number of lines for content placeholder; default value is `3`. */
+  /** Optional numeric value to control the number of lines for content
+   * placeholder; default value is `3`. */
   contentSize?: number;
-  /** Optional numeric value to control the number of lines for heading placeholder; default value is `1`. */
+  /** Optional numeric value to control the number of lines for heading
+   * placeholder; default value is `1`. */
   headingSize?: number;
-  /** Optional value to control the aspect ratio of the image placeholder; default value is `square`. */
+  /** Optional value to control the aspect ratio of the image placeholder;
+   * default value is `SkeletonLoaderImageRatios.Square`. */
   imageAspectRatio?: SkeletonLoaderImageRatios;
-  /** Optional value to control the position of the image placeholder; default value is `column`. */
+  /** Optional value to control the position of the image placeholder;
+   * default value is `SkeletonLoaderLayouts.Column`. */
   layout?: SkeletonLoaderLayouts;
   /** Optional boolean value to control visibility of button placeholder. */
   showButton?: boolean;

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.8`   |
+| 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

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. */
@@ -103,9 +105,8 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     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
-  );
+  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.
@@ -113,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,
@@ -299,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

@@ -168,11 +168,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>
 `;
@@ -347,11 +350,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>
 `;
@@ -526,11 +532,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>
 `;
@@ -705,11 +714,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>
 `;
@@ -986,11 +998,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>
 `;
@@ -1226,11 +1241,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 +1381,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 +1521,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 +1662,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 +1882,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