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

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={

package/src/components/StructuredContent/StructuredContent.test.tsx

@@ -3,9 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import StructuredContent from "./StructuredContent";
-import { StructuredContentImagePosition } from "./StructuredContentTypes";
 
 const htmlStringBodyContent =
   "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do" +
@@ -88,11 +86,11 @@ describe("StructuredContent Accessibility", () => {
         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",
         }}
       />
@@ -108,11 +106,11 @@ describe("StructuredContent Accessibility", () => {
         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",
         }}
       />
@@ -141,11 +139,11 @@ describe("StructuredContent", () => {
         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",
         }}
       />
@@ -165,11 +163,11 @@ describe("StructuredContent", () => {
         bodyContent={htmlStringBodyContent}
         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",
         }}
       />
@@ -208,11 +206,11 @@ describe("StructuredContent", () => {
         calloutText="This is the callout text"
         headingText="Heading text"
         imageProps={{
-          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",
         }}
       />
@@ -233,11 +231,11 @@ describe("StructuredContent", () => {
         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",
         }}
       />
@@ -255,10 +253,10 @@ describe("StructuredContent", () => {
         headingText="Heading text"
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
+          aspectRatio: "original",
           credit: "Image credit",
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -277,9 +275,9 @@ describe("StructuredContent", () => {
         headingText="Heading text"
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          aspectRatio: "original",
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -300,11 +298,11 @@ describe("StructuredContent", () => {
           id="withHTMLStringContent"
           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",
           }}
         />
@@ -319,11 +317,11 @@ describe("StructuredContent", () => {
           id="withHTMLDOMContent"
           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",
           }}
         />
@@ -348,9 +346,9 @@ describe("StructuredContent", () => {
           id="withImageWithoutCaptionOrCredit"
           imageProps={{
             alt: "Image alt text",
-            aspectRatio: ImageRatios.Original,
-            position: StructuredContentImagePosition.Left,
-            size: ImageSizes.Medium,
+            aspectRatio: "original",
+            position: "left",
+            size: "medium",
             src: "https://placeimg.com/400/300/animals",
           }}
         />
@@ -364,11 +362,11 @@ describe("StructuredContent", () => {
           id="withoutHeading"
           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",
           }}
         />
@@ -391,11 +389,11 @@ describe("StructuredContent", () => {
           id="withChakraProps"
           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={htmlStringBodyContent}
@@ -412,11 +410,11 @@ describe("StructuredContent", () => {
           id="withOtherProps"
           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={htmlStringBodyContent}

package/src/components/StructuredContent/StructuredContent.tsx

@@ -2,14 +2,13 @@ import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
 import Heading from "../Heading/Heading";
-import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
-import { StructuredContentImagePosition } from "./StructuredContentTypes";
+
+export type StructuredContentImagePosition = "left" | "right" | "center";
 
 interface StructuredContentImageProps extends ComponentImageProps {
   /** Optional value to control the positioning of the internal `Image` component.
-   * Defaults to `StructuredContentImagePosition.Left`. */
+   * Defaults to `"left"`. */
   position?: StructuredContentImagePosition;
 }
 
@@ -74,12 +73,12 @@ export const StructuredContent = chakra(
       id,
       imageProps = {
         alt: "",
-        aspectRatio: ImageRatios.Square,
+        aspectRatio: "square",
         caption: undefined,
         component: undefined,
         credit: undefined,
-        position: StructuredContentImagePosition.Left,
-        size: ImageSizes.Medium,
+        position: "left",
+        size: "medium",
         src: "",
       },
       bodyContent,
@@ -111,17 +110,9 @@ export const StructuredContent = chakra(
 
     return (
       <Box id={id} className={className} __css={styles} {...rest}>
-        {headingText && (
-          <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
-            {headingText}
-          </Heading>
-        )}
+        {headingText && <Heading id={`${id}-heading`}>{headingText}</Heading>}
         {calloutText && (
-          <Heading
-            id={`${id}-callout`}
-            level={HeadingLevels.Three}
-            size={HeadingSizes.Callout}
-          >
+          <Heading id={`${id}-callout`} level="three" size="callout">
             {calloutText}
           </Heading>
         )}
@@ -136,7 +127,7 @@ export const StructuredContent = chakra(
             caption={imageProps.caption}
             credit={imageProps.credit}
             size={imageProps.size}
-            src={imageProps.src ? imageProps.src : null}
+            src={imageProps.src ? imageProps.src : undefined}
           />
         )}
         {finalBodyContent}

package/src/components/StyleGuide/Bidirectionality.stories.mdx

@@ -1,11 +1,9 @@
 import { Canvas, Meta } from "@storybook/addon-docs";
 
-import SearchBar from "../SearchBar/SearchBar";
-import Icon from "../Icons/Icon";
-import { IconNames, IconSizes, IconAlign } from "../Icons/IconTypes";
 import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import Icon from "../Icons/Icon";
+import SearchBar from "../SearchBar/SearchBar";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -37,9 +35,9 @@ components should work appropriately in RTL configurations in any browser.
 
 ## Application Implementation
 
-Components in the DS will support layout and component mirroring, but application 
-directionality should be implemented at the application level. The following are 
-general guidelines on how to set up directionality but implementation will be up 
+Components in the DS will support layout and component mirroring, but application
+directionality should be implemented at the application level. The following are
+general guidelines on how to set up directionality but implementation will be up
 to the application and its architecture.
 
 ### `dir` HTML attribute
@@ -191,26 +189,14 @@ help reduce any visual mistakes.
     <div style={{ display: "flex", flexDirection: "column" }}>
       <div style={{ width: "300px" }}>
         A regular button:
-        <Button buttonType={ButtonTypes.Primary} id="button-ex4" type="submit">
-          <Icon
-            name={IconNames.Search}
-            size={IconSizes.Small}
-            align={IconAlign.Left}
-          />
+        <Button id="button-ex4" type="submit">
+          <Icon name="search" size="small" align="left" />
           Search
         </Button>
         <div dir="rtl">
           An RTL button:
-          <Button
-            buttonType={ButtonTypes.Primary}
-            id="button-ex5"
-            type="submit"
-          >
-            <Icon
-              name={IconNames.Search}
-              size={IconSizes.Small}
-              align={IconAlign.Left}
-            />
+          <Button id="button-ex5" type="submit">
+            <Icon name="search" size="small" align="left" />
             Search
           </Button>
         </div>