@nypl/design-system-react-components 0.26.1 → 1.0.0

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

@@ -8,8 +8,6 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 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";
@@ -76,7 +74,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -160,10 +158,10 @@ 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 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` 
+`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`,
@@ -233,11 +231,7 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-single-default"
-      level={HeadingLevels.Four}
-      text="Default State"
-    />
+    <Heading id="heading-single-default" level="four" text="Default State" />
     <Slider
       defaultValue={50}
       helperText="Component helper text."
@@ -250,11 +244,7 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-single-errored"
-      level={HeadingLevels.Four}
-      text="Errored State"
-    />
+    <Heading id="heading-single-errored" level="four" text="Errored State" />
     <Slider
       defaultValue={50}
       helperText="Component helper text."
@@ -268,11 +258,7 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-single-required"
-      level={HeadingLevels.Four}
-      text="Required State"
-    />
+    <Heading id="heading-single-required" level="four" text="Required State" />
     <Slider
       defaultValue={50}
       helperText="Component helper text."
@@ -286,11 +272,7 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-single-disabled"
-      level={HeadingLevels.Four}
-      text="Disabled State"
-    />
+    <Heading id="heading-single-disabled" level="four" text="Disabled State" />
     <Slider
       defaultValue={50}
       helperText="Component helper text."
@@ -308,11 +290,7 @@ To enable the Range Slider, set the `isRangeSlider` prop to true.
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-range-default"
-      level={HeadingLevels.Four}
-      text="Default State"
-    />
+    <Heading id="heading-range-default" level="four" text="Default State" />
     <Slider
       defaultValue={[25, 75]}
       helperText="Component helper text."
@@ -326,12 +304,8 @@ To enable the Range Slider, set the `isRangeSlider` prop to true.
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-range-errored"
-      level={HeadingLevels.Four}
-      text="Errored State"
-    />
-    <SimpleGrid columns={1} gap={GridGaps.Large}>
+    <Heading id="heading-range-errored" level="four" text="Errored State" />
+    <SimpleGrid columns={1} gap="grid.l">
       <Slider
         defaultValue={[25, 75]}
         helperText="Component helper text."
@@ -364,11 +338,7 @@ To enable the Range Slider, set the `isRangeSlider` prop to true.
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-range-required"
-      level={HeadingLevels.Four}
-      text="Required State"
-    />
+    <Heading id="heading-range-required" level="four" text="Required State" />
     <Slider
       defaultValue={[25, 75]}
       helperText="Component helper text."
@@ -383,11 +353,7 @@ To enable the Range Slider, set the `isRangeSlider` prop to true.
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-range-disabled"
-      level={HeadingLevels.Four}
-      text="Disabled State"
-    />
+    <Heading id="heading-range-disabled" level="four" text="Disabled State" />
     <Slider
       defaultValue={[25, 75]}
       helperText="Component helper text."
@@ -409,10 +375,10 @@ input are hidden.
   <DSProvider>
     <Heading
       id="heading-single-labels"
-      level={HeadingLevels.Four}
+      level="four"
       text="With and Without Component Labels"
     />
-    <SimpleGrid columns={1} gap={GridGaps.ExtraLarge}>
+    <SimpleGrid columns={1} gap="grid.xl">
       <Slider
         defaultValue={50}
         helperText="Component helper text."
@@ -466,10 +432,10 @@ For the following examples, all labels are hidden.
   <DSProvider>
     <Heading
       id="heading-single-labels-inputs"
-      level={HeadingLevels.Four}
+      level="four"
       text="With and Without Internal Inputs and Labels"
     />
-    <SimpleGrid columns={1} gap={GridGaps.ExtraLarge}>
+    <SimpleGrid columns={1} gap="grid.xl">
       <Slider
         defaultValue={50}
         helperText="Component helper text."
@@ -516,7 +482,7 @@ In the following examples, all the labels are hidden.
 
 <Canvas>
   <DSProvider>
-    <SimpleGrid columns={1} gap={GridGaps.ExtraLarge}>
+    <SimpleGrid columns={1} gap="grid.xl">
       <Slider
         defaultValue={[15, 75]}
         helperText="Component helper text."

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

@@ -320,8 +320,8 @@ describe("Slider", () => {
 
     it("gets the current value through the onChange callback function", () => {
       let currentValue = 0;
-      function onChange(value) {
-        currentValue = value;
+      function onChange(value: number | number[]) {
+        currentValue = value as number;
       }
 
       render(

package/src/components/Slider/Slider.tsx

@@ -17,8 +17,7 @@ import Label from "../Label/Label";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import TextInput from "../TextInput/TextInput";
-import { TextInputTypes } from "../TextInput/TextInputTypes";
+import TextInput, { TextInputTypes } from "../TextInput/TextInput";
 
 export interface SliderProps {
   /** Additional class name for the Slider component. */
@@ -121,9 +120,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
   if (isRangeSlider && currentValue[0] > currentValue[1]) {
     finalIsInvalid = true;
   }
-  const footnote: HelperErrorTextType = finalIsInvalid
-    ? invalidText
-    : helperText;
+  const footnote = finalIsInvalid ? invalidText : helperText;
   const styles = useMultiStyleConfig("CustomSlider", {
     isDisabled,
     isInvalid: finalIsInvalid,
@@ -151,15 +148,16 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
   };
   // Props that the two `TextInput` components use.
   const textInputSharedProps = {
-    attributes: { max, min },
     isDisabled,
     isInvalid: finalIsInvalid,
     isRequired,
+    max,
+    min,
     // Never show the label or helper text for the `TextInput` component.
     showHelperInvalidText: false,
     showLabel: false,
     step,
-    type: TextInputTypes.number,
+    type: "number" as TextInputTypes,
   };
   /**
    * This returns either the "start" or "end" `TextInput` component. Note that
@@ -222,7 +220,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
       <TextInput
         id={`${id}-textInput-${type}`}
         labelText={updatedLabel}
-        additionalStyles={{
+        __css={{
           ...styles.textInput,
           // Specific margins for each text input to
           // push the elements inside.
@@ -244,11 +242,11 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
         aria-label={
           !showLabel
             ? [`${labelText} - start value`, `${labelText} - end value`]
-            : null
+            : undefined
         }
         // Both slider thumbs need values and should be in an array,
         // even if it's the same label.
-        aria-labelledby={showLabel ? [`${id}-label`, `${id}-label`] : null}
+        aria-labelledby={showLabel ? [`${id}-label`, `${id}-label`] : undefined}
         value={currentValue as number[]}
         // Make the thumbs larger.
         size="lg"
@@ -262,7 +260,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
       </ChakraRangeSlider>
     ) : (
       <ChakraSlider
-        aria-label={!showLabel ? labelText : null}
+        aria-label={!showLabel ? labelText : undefined}
         aria-labelledby={`${id}-label`}
         value={currentValue as number}
         // Make the thumb larger.
@@ -289,7 +287,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
           htmlFor={
             showBoxes
               ? `${id}-textInput-${isRangeSlider ? "start" : "end"}`
-              : null
+              : ""
           }
           isRequired={showRequiredLabel && isRequired}
         >

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

@@ -856,7 +856,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
 >
   <label
     className="css-1xdhyk6"
-    htmlFor={null}
+    htmlFor=""
     id="noVisibleValues-label"
   >
     Label
@@ -1139,7 +1139,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="defaultSlider-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1269,7 +1268,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="errored-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1403,7 +1401,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="required-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1537,7 +1534,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
       </div>
       <div
         aria-disabled={true}
-        aria-label={null}
         aria-labelledby="disabled-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1722,7 +1718,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
 >
   <label
     className="css-1xdhyk6"
-    htmlFor={null}
+    htmlFor=""
     id="noVisibleValues-label"
   >
     Label
@@ -1771,7 +1767,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="noVisibleValues-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1958,7 +1953,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="chakra-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -2089,7 +2083,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 9`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="props-label"
         aria-orientation="horizontal"
         aria-valuemax={100}

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

@@ -9,15 +9,8 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import StatusBadge from "./StatusBadge";
-import { StatusBadgeTypes } from "./StatusBadgeTypes";
 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")}
@@ -34,9 +27,7 @@ export const enumValues = getStorybookEnumValues(
     className: { control: false },
     id: { control: false },
     level: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "StatusBadgeTypes.Low" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "low" } },
     },
     text: {
       description: "Only used for Storybook",
@@ -49,7 +40,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.18.7`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -70,15 +61,11 @@ export const enumValues = getStorybookEnumValues(
     args={{
       className: undefined,
       id: "statusBadge-id",
-      level: "StatusBadgeTypes.Low",
+      level: "low",
       text: "Registration Required",
     }}
   >
-    {(args) => (
-      <StatusBadge level={enumValues.getValue(args.level)}>
-        {args.text}
-      </StatusBadge>
-    )}
+    {(args) => <StatusBadge level={args.level}>{args.text}</StatusBadge>}
   </Story>
 </Canvas>
 
@@ -101,10 +88,8 @@ Used in instances where the associated message is the highest barrier. Use
 <Canvas>
   <DSProvider>
     <VStack spacing="s" align="stretch">
-      <StatusBadge level={StatusBadgeTypes.High}>
-        On-Site Access Only
-      </StatusBadge>
-      <StatusBadge level={StatusBadgeTypes.Medium}>Cancelled</StatusBadge>
+      <StatusBadge level="high">On-Site Access Only</StatusBadge>
+      <StatusBadge level="medium">Cancelled</StatusBadge>
     </VStack>
   </DSProvider>
 </Canvas>

package/src/components/StatusBadge/StatusBadge.test.tsx

@@ -4,7 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import StatusBadge from "./StatusBadge";
-import { StatusBadgeTypes } from "./StatusBadgeTypes";
 
 describe("StatusBadge Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -35,14 +34,14 @@ describe("StatusBadge", () => {
       .toJSON();
     const medium = renderer
       .create(
-        <StatusBadge id="medium" level={StatusBadgeTypes.Medium}>
+        <StatusBadge id="medium" level="medium">
           Registration Required
         </StatusBadge>
       )
       .toJSON();
     const high = renderer
       .create(
-        <StatusBadge id="high" level={StatusBadgeTypes.High}>
+        <StatusBadge id="high" level="high">
           Registration Required
         </StatusBadge>
       )

package/src/components/StatusBadge/StatusBadge.tsx

@@ -1,14 +1,13 @@
 import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
-import { StatusBadgeTypes } from "./StatusBadgeTypes";
+export type StatusBadgeTypes = "low" | "medium" | "high";
 export interface StatusBadgeProps {
   /** Additional class for the component */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Level of the status badge through StatusBadgeTypes. Defaults to
-   * `StatusBadgeTypes.Low`. */
+  /** Level of the status badge. Defaults to `"low"`. */
   level?: StatusBadgeTypes;
 }
 
@@ -18,13 +17,7 @@ export interface StatusBadgeProps {
  */
 export const StatusBadge = chakra(
   (props: React.PropsWithChildren<StatusBadgeProps>) => {
-    const {
-      children,
-      className,
-      id,
-      level = StatusBadgeTypes.Low,
-      ...rest
-    } = props;
+    const { children, className, id, level = "low", ...rest } = props;
     const styles = useStyleConfig("StatusBadge", { variant: level });
 
     if (!children) {

package/src/components/StructuredContent/StructuredContent.stories.mdx

@@ -7,25 +7,9 @@ import {
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { ImageRatios, ImageSizes, ImageTypes } from "../Image/ImageTypes";
 import StructuredContent from "./StructuredContent";
-import { StructuredContentImagePosition } from "./StructuredContentTypes";
 import DSProvider from "../../theme/provider";
 import { getCategory } from "../../utils/componentCategories";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const imageAspectRatioEnumValues = getStorybookEnumValues(
-  ImageRatios,
-  "ImageRatios"
-);
-export const imagePositionEnumValues = getStorybookEnumValues(
-  StructuredContentImagePosition,
-  "StructuredContentImagePosition"
-);
-export const imageSizeEnumValues = getStorybookEnumValues(
-  ImageSizes,
-  "ImageSizes"
-);
 
 <Meta
   title={getCategory("StructuredContent")}
@@ -42,32 +26,20 @@ export const imageSizeEnumValues = getStorybookEnumValues(
     className: { control: false },
     id: { control: false },
     "imageProps.aspectRatio": {
-      control: {
-        type: "select",
-      },
       table: {
-        defaultValue: { summary: "ImageRatios.Square" },
+        defaultValue: { summary: "square" },
       },
-      options: imageAspectRatioEnumValues.options,
     },
     "imageProps.component": { control: false },
     "imageProps.position": {
-      control: {
-        type: "select",
-      },
       table: {
-        defaultValue: { summary: "StructuredContentImagePosition.Left" },
+        defaultValue: { summary: "left" },
       },
-      options: imagePositionEnumValues.options,
     },
     "imageProps.size": {
-      control: {
-        type: "select",
-      },
       table: {
-        defaultValue: { summary: "ImageSizes.Medium" },
+        defaultValue: { summary: "medium" },
       },
-      options: imageSizeEnumValues.options,
     },
   }}
 />
@@ -77,7 +49,7 @@ export const imageSizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -127,29 +99,29 @@ export const imageSizeEnumValues = getStorybookEnumValues(
       headingText: "Heading text",
       id: "structured-content",
       "imageProps.alt": "Image alt text",
-      "imageProps.aspectRatio": "ImageRatios.Square",
+      "imageProps.aspectRatio": "square",
       "imageProps.caption": "Image caption",
       "imageProps.component": undefined,
       "imageProps.credit": "Image credit",
-      "imageProps.position": "StructuredContentImagePosition.Left",
-      "imageProps.size": "ImageSizes.Medium",
+      "imageProps.position": "left",
+      "imageProps.size": "medium",
       "imageProps.src": "https://placeimg.com/400/300/animals",
     }}
   >
     {(args) => (
       <StructuredContent
-        {...args}
+        bodyContent={args.bodyContent}
+        calloutText={args.calloutText}
+        className={args.className}
+        headingText={args.headingText}
+        id={args.id}
         imageProps={{
           alt: args["imageProps.alt"],
-          aspectRatio: imageAspectRatioEnumValues.getValue(
-            args["imageProps.aspectRatio"]
-          ),
+          aspectRatio: args["imageProps.aspectRatio"],
           caption: args["imageProps.caption"],
           credit: args["imageProps.credit"],
-          position: imagePositionEnumValues.getValue(
-            args["imageProps.position"]
-          ),
-          size: imageSizeEnumValues.getValue(args["imageProps.size"]),
+          position: args["imageProps.position"],
+          size: args["imageProps.size"],
           src: args["imageProps.src"],
         }}
       />
@@ -187,11 +159,11 @@ includes HTML tags in the string.
       headingText="Heading text"
       imageProps={{
         alt: "Image alt text",
-        aspectRatio: ImageRatios.Original,
+        aspectRatio: "original",
         caption: "Image caption",
         credit: "Image credit",
-        position: StructuredContentImagePosition.Left,
-        size: ImageSizes.Medium,
+        position: "left",
+        size: "medium",
         src: "https://placeimg.com/400/300/animals",
       }}
       bodyContent={
@@ -236,11 +208,11 @@ The following content is passed as HTML DOM elements to the `bodyContent` prop.
       headingText="Heading text"
       imageProps={{
         alt: "Image alt text",
-        aspectRatio: ImageRatios.Original,
+        aspectRatio: "original",
         caption: "Image caption",
         credit: "Image credit",
-        position: StructuredContentImagePosition.Left,
-        size: ImageSizes.Medium,
+        position: "left",
+        size: "medium",
         src: "https://placeimg.com/400/300/animals",
       }}
       bodyContent={
@@ -419,11 +391,11 @@ but no callout content. The second component does not have an image.
       headingText="Heading text"
       imageProps={{
         alt: "Image alt text",
-        aspectRatio: ImageRatios.Original,
+        aspectRatio: "original",
         caption: "Image caption",
         credit: "Image credit",
-        position: StructuredContentImagePosition.Left,
-        size: ImageSizes.Medium,
+        position: "left",
+        size: "medium",
         src: "https://placeimg.com/400/300/animals",
       }}
       bodyContent={
@@ -485,11 +457,11 @@ The third one does not contain an image.
       headingText="Heading text"
       imageProps={{
         alt: "Image alt text",
-        aspectRatio: ImageRatios.Original,
+        aspectRatio: "original",
         caption: "Image caption",
         credit: "Image credit",
-        position: StructuredContentImagePosition.Left,
-        size: ImageSizes.Medium,
+        position: "left",
+        size: "medium",
         src: "https://placeimg.com/400/300/animals",
       }}
       bodyContent={
@@ -558,9 +530,9 @@ text content. The second one has a callout content and image spanning full width
       headingText="Heading text"
       imageProps={{
         alt: "Image alt text",
-        aspectRatio: ImageRatios.Original,
-        position: StructuredContentImagePosition.Center,
-        size: ImageSizes.Medium,
+        aspectRatio: "original",
+        position: "center",
+        size: "medium",
         src: "https://placeimg.com/400/300/animals",
       }}
       bodyContent={