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

package/src/components/Card/Card.test.tsx

@@ -4,15 +4,10 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import Card, { CardHeading, CardContent, CardActions } from "./Card";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import Link from "../Link/Link";
-import { LinkTypes } from "../Link/LinkTypes";
-import { ImageRatios } from "../Image/ImageTypes";
 
 describe("Card Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -24,17 +19,12 @@ describe("Card Accessibility", () => {
           src: "https://placeimg.com/400/200/arch",
         }}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level="three" id="heading1">
           The Card Heading
         </CardHeading>
         <CardContent>middle column content</CardContent>
         <CardActions>
-          <Button
-            onClick={() => {}}
-            id="button1"
-            buttonType={ButtonTypes.Primary}
-            type="submit"
-          >
+          <Button onClick={() => {}} id="button1" type="submit">
             Example CTA
           </Button>
         </CardActions>
@@ -53,17 +43,12 @@ describe("Card Accessibility", () => {
         }}
         mainActionLink="http://nypl.org"
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level="three" id="heading1">
           The Card Heading
         </CardHeading>
         <CardContent>middle column content</CardContent>
         <CardActions>
-          <Button
-            onClick={() => {}}
-            id="button1"
-            buttonType={ButtonTypes.Primary}
-            type="submit"
-          >
+          <Button onClick={() => {}} id="button1" type="submit">
             Example CTA
           </Button>
         </CardActions>
@@ -82,17 +67,12 @@ describe("Card", () => {
         src: "https://placeimg.com/400/200/arch",
       }}
     >
-      <CardHeading level={HeadingLevels.Three} id="heading1">
+      <CardHeading level="three" id="heading1">
         The Card Heading
       </CardHeading>
       <CardContent>middle column content</CardContent>
       <CardActions>
-        <Button
-          onClick={() => {}}
-          id="button1"
-          buttonType={ButtonTypes.Primary}
-          type="submit"
-        >
+        <Button onClick={() => {}} id="button1" type="submit">
           Example CTA
         </Button>
       </CardActions>
@@ -107,7 +87,7 @@ describe("Card", () => {
         src: "https://placeimg.com/300/400/arch",
       }}
     >
-      <CardHeading id="editioncardheading1" level={HeadingLevels.Two}>
+      <CardHeading id="editioncardheading1" level="two">
         The Card Heading
       </CardHeading>
       <CardContent>
@@ -119,15 +99,15 @@ describe("Card", () => {
         </div>
       </CardContent>
       <CardActions>
-        <Link id="link-online" href="online" type={LinkTypes.Button}>
+        <Link id="link-online" href="online" type="button">
           Read Online
         </Link>
-        <Link id="link-icon" href="#url" type={LinkTypes.Action}>
+        <Link id="link-icon" href="#url" type="action">
           <Icon
-            align={IconAlign.Left}
-            iconRotation={IconRotationTypes.Rotate0}
+            align="left"
+            iconRotation="rotate0"
             id="icon-cardWithExtendedStyles"
-            name={IconNames.Download}
+            name="download"
           />
           Download
         </Link>
@@ -143,7 +123,7 @@ describe("Card", () => {
         src: "https://placeimg.com/300/400/arch",
       }}
     >
-      <CardHeading id="editioncardheading1" level={HeadingLevels.Two}>
+      <CardHeading id="editioncardheading1" level="two">
         The Card Heading
       </CardHeading>
       <CardContent>
@@ -162,23 +142,19 @@ describe("Card", () => {
         src: "https://placeimg.com/300/400/arch",
       }}
     >
-      <CardHeading
-        id="editioncardheading1"
-        level={HeadingLevels.Two}
-        url="#edition-link"
-      >
+      <CardHeading id="editioncardheading1" level="two" url="#edition-link">
         The Card Heading
       </CardHeading>
       <CardActions>
-        <Link id="link-online" href="online" type={LinkTypes.Button}>
+        <Link id="link-online" href="online" type="button">
           Read Online
         </Link>
-        <Link id="link-icon" href="#url" type={LinkTypes.Action}>
+        <Link id="link-icon" href="#url" type="action">
           <Icon
-            align={IconAlign.Left}
-            iconRotation={IconRotationTypes.Rotate0}
+            align="left"
+            iconRotation="rotate0"
             id="icon-cardWithNoContent"
-            name={IconNames.Download}
+            name="download"
           />
           Download
         </Link>
@@ -187,24 +163,20 @@ describe("Card", () => {
   );
   const cardWithNoImage = (
     <Card id="cardWithNoImage" className="edition-card">
-      <CardHeading
-        id="editioncardheading1"
-        level={HeadingLevels.Two}
-        url="#edition-link"
-      >
+      <CardHeading id="editioncardheading1" level="two" url="#edition-link">
         The Card Heading
       </CardHeading>
       <CardContent>middle column content</CardContent>
       <CardActions>
-        <Link id="link-online" href="online" type={LinkTypes.Button}>
+        <Link id="link-online" href="online" type="button">
           Read Online
         </Link>
-        <Link id="link-icon" href="#url" type={LinkTypes.Action}>
+        <Link id="link-icon" href="#url" type="action">
           <Icon
-            align={IconAlign.Left}
-            iconRotation={IconRotationTypes.Rotate0}
+            align="left"
+            iconRotation="rotate0"
             id="icon-cardWithNoImage"
-            name={IconNames.Download}
+            name="download"
           />
           Download
         </Link>
@@ -220,17 +192,12 @@ describe("Card", () => {
       }}
       mainActionLink="http://nypl.org"
     >
-      <CardHeading level={HeadingLevels.Three} id="heading1">
+      <CardHeading level="three" id="heading1">
         The Card Heading
       </CardHeading>
       <CardContent>middle column content</CardContent>
       <CardActions>
-        <Button
-          buttonType={ButtonTypes.Primary}
-          id="button1"
-          onClick={() => {}}
-          type="submit"
-        >
+        <Button id="button1" onClick={() => {}} type="submit">
           Example CTA
         </Button>
       </CardActions>
@@ -240,11 +207,11 @@ describe("Card", () => {
     <Card
       id="fullclick"
       imageProps={{
-        aspectRatio: ImageRatios.ThreeByTwo,
+        aspectRatio: "threeByTwo",
         component: <Image alt="" src="https://placeimg.com/400/200/arch" />,
       }}
     >
-      <CardHeading level={HeadingLevels.Three} id="heading1">
+      <CardHeading level="three" id="heading1">
         The Card Heading
       </CardHeading>
       <CardContent>middle column content</CardContent>
@@ -259,27 +226,17 @@ describe("Card", () => {
       }}
       isAlignedRightActions
     >
-      <CardHeading level={HeadingLevels.Three} id="heading1">
+      <CardHeading level="three" id="heading1">
         The Card Heading
       </CardHeading>
       <CardContent>middle column content</CardContent>
       <CardActions>
-        <Button
-          onClick={() => {}}
-          id="button1"
-          buttonType={ButtonTypes.Primary}
-          type="submit"
-        >
+        <Button onClick={() => {}} id="button1" type="submit">
           Example CTA
         </Button>
       </CardActions>
       <CardActions>
-        <Button
-          onClick={() => {}}
-          id="button2"
-          buttonType={ButtonTypes.Primary}
-          type="submit"
-        >
+        <Button onClick={() => {}} id="button2" type="submit">
           Example CTA
         </Button>
       </CardActions>
@@ -295,21 +252,12 @@ describe("Card", () => {
       p="s"
       color="ui.error.primary"
     >
-      <CardHeading
-        level={HeadingLevels.Three}
-        id="heading1"
-        color="ui.error.secondary"
-      >
+      <CardHeading level="three" id="heading1" color="ui.error.secondary">
         The Card Heading
       </CardHeading>
       <CardContent p="20px">middle column content</CardContent>
       <CardActions m="20px">
-        <Button
-          onClick={() => {}}
-          id="button1"
-          buttonType={ButtonTypes.Primary}
-          type="submit"
-        >
+        <Button onClick={() => {}} id="button1" type="submit">
           Example CTA
         </Button>
       </CardActions>
@@ -324,23 +272,14 @@ describe("Card", () => {
       }}
       data-testid="card-testid"
     >
-      <CardHeading
-        level={HeadingLevels.Three}
-        id="heading1"
-        color="ui.error.secondary"
-      >
+      <CardHeading level="three" id="heading1" color="ui.error.secondary">
         The Card Heading
       </CardHeading>
       <CardContent data-testid="cardcontent-testid">
         middle column content
       </CardContent>
       <CardActions data-testid="cardaction-testid">
-        <Button
-          onClick={() => {}}
-          id="button1"
-          buttonType={ButtonTypes.Primary}
-          type="submit"
-        >
+        <Button onClick={() => {}} id="button1" type="submit">
           Example CTA
         </Button>
       </CardActions>

package/src/components/Card/Card.tsx

@@ -8,16 +8,25 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import { LayoutTypes } from "../../helpers/enums";
+import { LayoutTypes } from "../../helpers/types";
 import Heading from "../Heading/Heading";
-import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
+import Image, {
+  ComponentImageProps,
+  ImageProps,
+  ImageSizes,
+} from "../Image/Image";
 import useWindowSize from "../../hooks/useWindowSize";
+
+interface CustomColorProps {
+  backgroundColor?: string;
+  color?: string;
+}
+
 interface CardBaseProps {
   /** Optional value to control the alignment of the text and elements. */
   isCentered?: boolean;
   /** Optional value to render the layout in a row or column.
-   * Default is `LayoutTypes.Column`. */
+   * Default is `"column"`. */
   layout?: LayoutTypes;
 }
 
@@ -115,13 +124,11 @@ export const CardHeading = chakra(Heading);
 export const CardContent = chakra((props: React.PropsWithChildren<{}>) => {
   const { children, ...rest } = props;
   const styles = useStyleConfig("CardContent");
-  return (
-    children && (
-      <Box __css={styles} {...rest}>
-        {children}
-      </Box>
-    )
-  );
+  return children ? (
+    <Box __css={styles} {...rest}>
+      {children}
+    </Box>
+  ) : null;
 });
 
 // CardActions child-component
@@ -136,13 +143,11 @@ export const CardActions = chakra(
       topBorder,
     });
 
-    return (
-      children && (
-        <Box __css={styles} {...rest}>
-          {children}
-        </Box>
-      )
-    );
+    return children ? (
+      <Box __css={styles} {...rest}>
+        {children}
+      </Box>
+    ) : null;
   }
 );
 
@@ -189,35 +194,35 @@ export const Card = chakra((props: React.PropsWithChildren<CardProps>) => {
     id,
     imageProps = {
       alt: "",
-      aspectRatio: ImageRatios.Square,
+      aspectRatio: "square",
       caption: undefined,
       component: undefined,
       credit: undefined,
       isAtEnd: false,
-      size: ImageSizes.Default,
+      size: "default",
       src: "",
     },
     isAlignedRightActions = false,
     isBordered,
     isCentered = false,
-    layout = LayoutTypes.Column,
+    layout = "column",
     mainActionLink,
     ...rest
   } = props;
   const hasImage = imageProps.src || imageProps.component;
   const [finalImageSize, setFinalImageSize] = React.useState<ImageSizes>(
-    imageProps.size
+    imageProps.size || "default"
   );
   const finalImageAspectRatio = imageProps.component
-    ? ImageRatios.Original
+    ? "original"
     : imageProps.aspectRatio;
-  const customColors = {};
-  const cardContents = [];
-  const cardRightContents = [];
+  const customColors: CustomColorProps = {};
+  const cardContents: JSX.Element[] = [];
+  const cardRightContents: JSX.Element[] = [];
   const windowDimensions = useWindowSize();
   let cardHeadingCount = 0;
 
-  if (imageProps.component && imageProps.aspectRatio !== ImageRatios.Square) {
+  if (imageProps.component && imageProps.aspectRatio !== "square") {
     console.warn(
       "NYPL Reservoir Card: Both the `imageProps.component` and `imageProps.aspectRatio` " +
         "props were set but `imageProps.aspectRatio` will be ignored in favor " +
@@ -226,12 +231,12 @@ export const Card = chakra((props: React.PropsWithChildren<CardProps>) => {
   }
 
   // The `Card`'s image should always display as 100% width on mobile. To
-  // achieve this, we set the size to `ImageSizes.Default` only when the
+  // achieve this, we set the size to `"default"` only when the
   // viewport is less than "600px". Otherwise, we set the size to
   // the value passed in via `imageSize`.
   React.useEffect(() => {
     if (windowDimensions.width < 600) {
-      setFinalImageSize(ImageSizes.Default);
+      setFinalImageSize("default");
     } else {
       setFinalImageSize(imageProps.size);
     }
@@ -249,54 +254,53 @@ export const Card = chakra((props: React.PropsWithChildren<CardProps>) => {
     mainActionLink,
   });
 
-  React.Children.map(children, (child: React.ReactElement, key) => {
-    const isCardActions =
-      child.type === CardActions || child.props.mdxType === "CardActions";
-
-    if (child.type === CardHeading || child.props.mdxType === "CardHeading") {
-      // If the child is a `CardHeading` component, then we add the
-      // `CardLinkOverlay` inside of the `Heading` component and wrap its text.
-      // This allows other links in the `CardActions` to be clickable. This is
-      // only done for the first `CardHeading` component but does not affect
-      // the full-click feature.
-      const newChildren =
-        cardHeadingCount === 0 ? (
-          <CardLinkOverlay mainActionLink={mainActionLink}>
-            {child.props.children}
-          </CardLinkOverlay>
-        ) : (
-          child.props.children
-        );
-      const elem = React.cloneElement(child, {
-        additionalStyles: {
-          ...styles.heading,
-          ...child.props.additionalStyles,
-        },
-        key,
-        // Override the child text with the potential `CardLinkOverlay`.
-        children: newChildren,
-        layout,
-      });
-      cardContents.push(elem);
-      cardHeadingCount++;
-    } else if (
-      child.type === CardContent ||
-      child.props.mdxType === "CardContent"
-    ) {
-      const elem = React.cloneElement(child, { key });
-      cardContents.push(elem);
-    } else if (isCardActions) {
-      const elem = React.cloneElement(child, { key, isCentered, layout });
-
-      // Only allow `CardActions` to align to the right of the main
-      // `CardContent` component when in the row layout.
-      if (isAlignedRightActions && layout === LayoutTypes.Row) {
-        cardRightContents.push(elem);
-      } else {
+  React.Children.map(
+    children as JSX.Element,
+    (child: React.ReactElement, key) => {
+      const isCardActions =
+        child.type === CardActions || child.props.mdxType === "CardActions";
+      if (child.type === CardHeading || child.props.mdxType === "CardHeading") {
+        // If the child is a `CardHeading` component, then we add the
+        // `CardLinkOverlay` inside of the `Heading` component and wrap its text.
+        // This allows other links in the `CardActions` to be clickable. This is
+        // only done for the first `CardHeading` component but does not affect
+        // the full-click feature.
+        const newChildren =
+          cardHeadingCount === 0 ? (
+            <CardLinkOverlay mainActionLink={mainActionLink}>
+              {child.props.children}
+            </CardLinkOverlay>
+          ) : (
+            child.props.children
+          );
+        const elem = React.cloneElement(child, {
+          key,
+          // Override the child text with the potential `CardLinkOverlay`.
+          children: newChildren,
+          layout,
+          __css: styles.heading,
+        });
+        cardContents.push(elem);
+        cardHeadingCount++;
+      } else if (
+        child.type === CardContent ||
+        child.props.mdxType === "CardContent"
+      ) {
+        const elem = React.cloneElement(child, { key });
         cardContents.push(elem);
+      } else if (isCardActions) {
+        const elem = React.cloneElement(child, { key, isCentered, layout });
+
+        // Only allow `CardActions` to align to the right of the main
+        // `CardContent` component when in the row layout.
+        if (isAlignedRightActions && layout === "row") {
+          cardRightContents.push(elem);
+        } else {
+          cardContents.push(elem);
+        }
       }
     }
-  });
+  );
 
   return (
     <CardLinkBox mainActionLink={mainActionLink}>

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

@@ -360,7 +360,7 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
 
 exports[`Card Renders the UI snapshot correctly 6`] = `
 <div
-  className="chakra-linkbox css-10n1vic"
+  className="chakra-linkbox css-hng3kb"
 >
   <div
     className="css-1xdhyk6"

package/src/components/Chakra/Box.stories.mdx

@@ -2,10 +2,6 @@ import { Box } from "@chakra-ui/react";
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
 import VideoPlayer from "../VideoPlayer/VideoPlayer";
-import {
-  VideoPlayerAspectRatios,
-  VideoPlayerTypes,
-} from "../VideoPlayer/VideoPlayerTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -48,8 +44,8 @@ guide on the Chakra UI site.
     <Box borderWidth="3px" padding="s" borderRadius="lg" overflow="hidden">
       <VideoPlayer
         videoId="nm-dD2tx6bk"
-        videoType={VideoPlayerTypes.YouTube}
-        aspectRatio={VideoPlayerAspectRatios.SixteenByNine}
+        videoType="youTube"
+        aspectRatio="sixteenByNine"
       />
     </Box>
   </DSProvider>

package/src/components/Chakra/Center.stories.mdx

@@ -2,9 +2,7 @@ import { Box, Center, Circle, HStack, Square } from "@chakra-ui/react";
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
 import Icon from "../Icons/Icon";
-import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
 import Image from "../Image/Image";
-import { ImageSizes } from "../Image/ImageTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -54,7 +52,7 @@ guide on the Chakra UI site.
     <Center border="1px solid" borderColor="var(--nypl-colors-ui-gray-medium)">
       <Image
         alt="Centered Image"
-        size={ImageSizes.Medium}
+        size="medium"
         src="https://placeimg.com/300/400/arch"
       />
     </Center>
@@ -70,18 +68,10 @@ a circle.
   <DSProvider>
     <HStack spacing="s">
       <Circle size="50px" bg="var(--nypl-colors-brand-secondary)">
-        <Icon
-          name={IconNames.Download}
-          color={IconColors.UiWhite}
-          size={IconSizes.Large}
-        />
+        <Icon name="download" color="ui.white" size="large" />
       </Circle>
       <Circle size="50px" bg="var(--nypl-colors-ui-link-primary)">
-        <Icon
-          name={IconNames.Check}
-          color={IconColors.UiWhite}
-          size={IconSizes.Large}
-        />
+        <Icon name="check" color="ui.white" size="large" />
       </Circle>
     </HStack>
   </DSProvider>
@@ -96,18 +86,10 @@ and width.
   <DSProvider>
     <HStack spacing="s">
       <Square size="50px" bg="var(--nypl-colors-brand-secondary)">
-        <Icon
-          name={IconNames.Download}
-          color={IconColors.UiWhite}
-          size={IconSizes.Large}
-        />
+        <Icon name="download" color="ui.white" size="large" />
       </Square>
       <Square size="50px" bg="var(--nypl-colors-ui-link-primary)">
-        <Icon
-          name={IconNames.Check}
-          color={IconColors.UiWhite}
-          size={IconSizes.Large}
-        />
+        <Icon name="check" color="ui.white" size="large" />
       </Square>
     </HStack>
   </DSProvider>

package/src/components/Chakra/Flex.stories.mdx

@@ -2,9 +2,7 @@ import { Box, Flex, Spacer, VStack } from "@chakra-ui/react";
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import Link from "../Link/Link";
-import { LinkTypes } from "../Link/LinkTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -89,11 +87,11 @@ the `Spacer` component is more flexible for most situations.
 <Canvas>
   <DSProvider>
     <Flex alignItems="baseline">
-      <Heading id="row-heading" level={HeadingLevels.Three}>
+      <Heading id="row-heading" level="three">
         Heading
       </Heading>
       <Spacer />
-      <Link href="#viewmore" type={LinkTypes.Forwards}>
+      <Link href="#viewmore" type="forwards">
         View more
       </Link>
     </Flex>
@@ -102,11 +100,11 @@ the `Spacer` component is more flexible for most situations.
 
 ```jsx
 <Flex alignItems="baseline">
-  <Heading id="row-heading" level={HeadingLevels.Three}>
+  <Heading id="row-heading" level="three">
     Heading
   </Heading>
   <Spacer />
-  <Link href="#viewmore" type={LinkTypes.Forwards}>
+  <Link href="#viewmore" type="forwards">
     View more
   </Link>
 </Flex>