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

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

@@ -19,8 +19,10 @@ describe("Card Accessibility", () => {
     const { container } = render(
       <Card
         id="cardID"
-        imageSrc="https://placeimg.com/400/200/arch"
-        imageAlt="Alt text"
+        imageProps={{
+          alt: "Alt text",
+          src: "https://placeimg.com/400/200/arch",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="heading1">
           The Card Heading
@@ -45,8 +47,10 @@ describe("Card Accessibility", () => {
     const { container } = render(
       <Card
         id="cardID"
-        imageSrc="https://placeimg.com/400/200/arch"
-        imageAlt="Alt text"
+        imageProps={{
+          alt: "Alt text",
+          src: "https://placeimg.com/400/200/arch",
+        }}
         mainActionLink="http://nypl.org"
       >
         <CardHeading level={HeadingLevels.Three} id="heading1">
@@ -73,8 +77,10 @@ describe("Card", () => {
   const regularCard = (
     <Card
       id="regularCard"
-      imageSrc="https://placeimg.com/400/200/arch"
-      imageAlt="Alt text"
+      imageProps={{
+        alt: "Alt text",
+        src: "https://placeimg.com/400/200/arch",
+      }}
     >
       <CardHeading level={HeadingLevels.Three} id="heading1">
         The Card Heading
@@ -96,8 +102,10 @@ describe("Card", () => {
     <Card
       className="edition-card"
       id="cardWithExtendedStyles"
-      imageAlt="Alt text"
-      imageSrc="https://placeimg.com/300/400/arch"
+      imageProps={{
+        alt: "Alt text",
+        src: "https://placeimg.com/300/400/arch",
+      }}
     >
       <CardHeading id="editioncardheading1" level={HeadingLevels.Two}>
         The Card Heading
@@ -130,8 +138,10 @@ describe("Card", () => {
     <Card
       className="edition-card"
       id="cardWithNoCTAs"
-      imageAlt="Alt text"
-      imageSrc="https://placeimg.com/300/400/arch"
+      imageProps={{
+        alt: "Alt text",
+        src: "https://placeimg.com/300/400/arch",
+      }}
     >
       <CardHeading id="editioncardheading1" level={HeadingLevels.Two}>
         The Card Heading
@@ -147,8 +157,10 @@ describe("Card", () => {
     <Card
       className="edition-card"
       id="cardWithNoContent"
-      imageAlt="Alt text"
-      imageSrc="https://placeimg.com/300/400/arch"
+      imageProps={{
+        alt: "Alt text",
+        src: "https://placeimg.com/300/400/arch",
+      }}
     >
       <CardHeading
         id="editioncardheading1"
@@ -202,8 +214,10 @@ describe("Card", () => {
   const cardFullClick = () => (
     <Card
       id="fullclick"
-      imageAlt="Alt text"
-      imageSrc="https://placeimg.com/400/200/arch"
+      imageProps={{
+        alt: "Alt text",
+        src: "https://placeimg.com/400/200/arch",
+      }}
       mainActionLink="http://nypl.org"
     >
       <CardHeading level={HeadingLevels.Three} id="heading1">
@@ -225,8 +239,10 @@ describe("Card", () => {
   const cardImageComponentAndRatio = () => (
     <Card
       id="fullclick"
-      imageComponent={<Image alt="" src="https://placeimg.com/400/200/arch" />}
-      imageAspectRatio={ImageRatios.ThreeByTwo}
+      imageProps={{
+        aspectRatio: ImageRatios.ThreeByTwo,
+        component: <Image alt="" src="https://placeimg.com/400/200/arch" />,
+      }}
     >
       <CardHeading level={HeadingLevels.Three} id="heading1">
         The Card Heading
@@ -234,6 +250,102 @@ describe("Card", () => {
       <CardContent>middle column content</CardContent>
     </Card>
   );
+  const cardWithRightActions = () => (
+    <Card
+      id="cardID"
+      imageProps={{
+        alt: "Alt text",
+        src: "https://placeimg.com/400/200/arch",
+      }}
+      isAlignedRightActions
+    >
+      <CardHeading level={HeadingLevels.Three} id="heading1">
+        The Card Heading
+      </CardHeading>
+      <CardContent>middle column content</CardContent>
+      <CardActions>
+        <Button
+          onClick={() => {}}
+          id="button1"
+          buttonType={ButtonTypes.Primary}
+          type="submit"
+        >
+          Example CTA
+        </Button>
+      </CardActions>
+      <CardActions>
+        <Button
+          onClick={() => {}}
+          id="button2"
+          buttonType={ButtonTypes.Primary}
+          type="submit"
+        >
+          Example CTA
+        </Button>
+      </CardActions>
+    </Card>
+  );
+  const cardWithChakraProps = (
+    <Card
+      id="chakraProps"
+      imageProps={{
+        alt: "Alt text",
+        src: "https://placeimg.com/400/200/arch",
+      }}
+      p="s"
+      color="ui.error.primary"
+    >
+      <CardHeading
+        level={HeadingLevels.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"
+        >
+          Example CTA
+        </Button>
+      </CardActions>
+    </Card>
+  );
+  const cardWithOtherProps = (
+    <Card
+      id="otherProps"
+      imageProps={{
+        alt: "Alt text",
+        src: "https://placeimg.com/400/200/arch",
+      }}
+      data-testid="card-testid"
+    >
+      <CardHeading
+        level={HeadingLevels.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"
+        >
+          Example CTA
+        </Button>
+      </CardActions>
+    </Card>
+  );
   let container;
 
   it("renders a Card with a header, image, content, and CTAs", () => {
@@ -303,11 +415,13 @@ describe("Card", () => {
     );
   });
 
-  it("Logs a warning when both `imageComponent` and `imageAspectRatio` are passed", () => {
+  it("Logs a warning when both `imageProps.component` and `imageProps.aspectRatio` are passed", () => {
     const warn = jest.spyOn(console, "warn");
     render(cardImageComponentAndRatio());
     expect(warn).toHaveBeenCalledWith(
-      "Both `imageComponent` and `imageAspectRatio` are set but `imageAspectRatio` will be ignored in favor of the aspect ratio on `imageComponent`."
+      "NYPL Reservoir Card: Both the `imageProps.component` and `imageProps.aspectRatio` " +
+        "props were set but `imageProps.aspectRatio` will be ignored in favor " +
+        "of the aspect ratio on `imageProps.component` prop."
     );
   });
 
@@ -318,6 +432,9 @@ describe("Card", () => {
     const withNoContent = renderer.create(cardWithNoContent).toJSON();
     const withNoImage = renderer.create(cardWithNoImage).toJSON();
     const withFullClick = renderer.create(cardFullClick()).toJSON();
+    const withRightActions = renderer.create(cardWithRightActions()).toJSON();
+    const withChakraProps = renderer.create(cardWithChakraProps).toJSON();
+    const withOtherProps = renderer.create(cardWithOtherProps).toJSON();
 
     expect(regular).toMatchSnapshot();
     expect(withExtendedStyles).toMatchSnapshot();
@@ -325,5 +442,8 @@ describe("Card", () => {
     expect(withNoContent).toMatchSnapshot();
     expect(withNoImage).toMatchSnapshot();
     expect(withFullClick).toMatchSnapshot();
+    expect(withRightActions).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/Card/Card.tsx

@@ -1,24 +1,24 @@
-import * as React from "react";
 import {
   Box,
+  chakra,
   LinkBox as ChakraLinkBox,
   LinkOverlay as ChakraLinkOverlay,
   useMultiStyleConfig,
   useStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
-import { CardLayouts } from "./CardTypes";
+import { LayoutTypes } from "../../helpers/enums";
 import Heading from "../Heading/Heading";
-import Image, { ImageProps } from "../Image/Image";
+import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
 import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
-import generateUUID from "../../helpers/generateUUID";
-
+import useWindowSize from "../../hooks/useWindowSize";
 interface CardBaseProps {
   /** Optional value to control the alignment of the text and elements. */
-  center?: boolean;
+  isCentered?: boolean;
   /** Optional value to render the layout in a row or column.
-   * Default is `CardLayouts.Column`. */
-  layout?: CardLayouts;
+   * Default is `LayoutTypes.Column`. */
+  layout?: LayoutTypes;
 }
 
 interface CardLinkBoxProps {
@@ -26,6 +26,12 @@ interface CardLinkBoxProps {
   mainActionLink?: string;
 }
 
+// Used internally only for the `imageProps` prop for the `Card` component.
+interface CardImageProps extends ComponentImageProps {
+  /** Optional boolean value to control the position of the `CardImage`. */
+  isAtEnd?: boolean;
+}
+
 interface CardActionsProps extends CardBaseProps {
   /** Optional boolean value to control visibility of border on the bottom edge
    * of the card actions element */
@@ -35,38 +41,29 @@ interface CardActionsProps extends CardBaseProps {
   topBorder?: boolean;
 }
 
-interface CardImageProps extends CardBaseProps, ImageProps {
+/** Used only internally for the `CardImage` component. */
+interface CardImageComponentProps extends CardBaseProps, ImageProps {
   /** Optional boolean value to control the position of the `CardImage`. */
-  imageAtEnd?: boolean;
+  isAtEnd?: boolean;
 }
 
 export interface CardProps extends CardBaseProps, CardLinkBoxProps {
   /** Optional hex color value used to set the card background color. */
   backgroundColor?: string;
-  /** Optional boolean value to control the visibility of a border around
-   * the card. */
-  border?: boolean;
   /** Optional CSS class name to add. */
   className?: string;
   /** Optional hex color value used to override the default text color. */
   foregroundColor?: string;
   /** ID that other components can cross reference for accessibility purposes. */
   id?: string;
-  /** Text description of the image; to follow best practices for accessibility,
-   * this prop should not be left blank if `imageSrc` is passed. */
-  imageAlt?: string;
-  /** Optional value to control the aspect ratio of the `CardImage`; default
-   * value is `ImageRatios.Square`. */
-  imageAspectRatio?: ImageRatios;
-  /** Optional boolean value to control the position of the `CardImage`. */
-  imageAtEnd?: boolean;
-  /** Custom image component used in place of DS `Image` component. */
-  imageComponent?: JSX.Element;
-  /** Optional value to control the size of the `CardImage`. Default value is
-   * `ImageSizes.Default`. */
-  imageSize?: ImageSizes;
-  /** The path to the image displayed within the `Card` component. */
-  imageSrc?: string;
+  /** Optional boolean value to control the visibility of a border around
+   * the card. */
+  isBordered?: boolean;
+  /** Object used to create and render the `Image` component. */
+  imageProps?: CardImageProps;
+  /** Set CardActions to the right content side. This only works in
+   * the row layout. */
+  isAlignedRightActions?: boolean;
 }
 
 /**
@@ -74,31 +71,37 @@ export interface CardProps extends CardBaseProps, CardLinkBoxProps {
  * renders an `Image` component but with overriding styles specific to the
  * `Card` component.
  */
-function CardImage(props: React.ComponentProps<"img"> & CardImageProps) {
+function CardImage(
+  props: React.ComponentProps<"img"> & CardImageComponentProps
+) {
   const {
     alt,
-    center,
+    aspectRatio,
+    caption,
     component,
-    imageSize,
-    imageAspectRatio,
-    src,
-    imageAtEnd,
+    credit,
+    isAtEnd,
+    isCentered,
     layout,
+    size,
+    src,
   } = props;
   // Additional styles to add to the `Image` component.
   const styles = useStyleConfig("CardImage", {
-    center,
-    imageAtEnd,
-    imageSize,
+    imageIsAtEnd: isAtEnd,
+    isCentered,
     layout,
+    size,
   });
   return (
     <Box __css={styles}>
       <Image
         alt={alt}
+        caption={caption}
         component={component}
-        imageAspectRatio={imageAspectRatio}
-        imageSize={imageSize}
+        credit={credit}
+        aspectRatio={aspectRatio}
+        size={size}
         src={src}
       />
     </Box>
@@ -106,27 +109,42 @@ function CardImage(props: React.ComponentProps<"img"> & CardImageProps) {
 }
 
 // CardHeading child-component
-export const CardHeading = Heading;
+export const CardHeading = chakra(Heading);
 
 // CardContent child-component
-export function CardContent(props: React.PropsWithChildren<{}>) {
-  const { children } = props;
+export const CardContent = chakra((props: React.PropsWithChildren<{}>) => {
+  const { children, ...rest } = props;
   const styles = useStyleConfig("CardContent");
-  return children && <Box __css={styles}>{children}</Box>;
-}
+  return (
+    children && (
+      <Box __css={styles} {...rest}>
+        {children}
+      </Box>
+    )
+  );
+});
 
 // CardActions child-component
-export function CardActions(props: React.PropsWithChildren<CardActionsProps>) {
-  const { bottomBorder, children, topBorder, center, layout } = props;
-  const styles = useStyleConfig("CardActions", {
-    bottomBorder,
-    topBorder,
-    center,
-    layout,
-  });
+export const CardActions = chakra(
+  (props: React.PropsWithChildren<CardActionsProps>) => {
+    const { bottomBorder, children, isCentered, layout, topBorder, ...rest } =
+      props;
+    const styles = useStyleConfig("CardActions", {
+      bottomBorder,
+      isCentered,
+      layout,
+      topBorder,
+    });
 
-  return children && <Box __css={styles}>{children}</Box>;
-}
+    return (
+      children && (
+        <Box __css={styles} {...rest}>
+          {children}
+        </Box>
+      )
+    );
+  }
+);
 
 /**
  * If `mainActionLink` is passed, then this adds Chakra's `LinkBox` wrapper
@@ -162,51 +180,79 @@ function CardLinkOverlay({
   );
 }
 
-export default function Card(props: React.PropsWithChildren<CardProps>) {
+export const Card = chakra((props: React.PropsWithChildren<CardProps>) => {
   const {
     backgroundColor,
-    border,
-    center = false,
     children,
     className,
     foregroundColor,
-    id = generateUUID(),
-    imageAlt = "",
-    imageAspectRatio = ImageRatios.Square,
-    imageAtEnd,
-    imageComponent,
-    imageSize = ImageSizes.Default,
-    imageSrc,
-    layout = CardLayouts.Column,
+    id,
+    imageProps = {
+      alt: "",
+      aspectRatio: ImageRatios.Square,
+      caption: undefined,
+      component: undefined,
+      credit: undefined,
+      isAtEnd: false,
+      size: ImageSizes.Default,
+      src: "",
+    },
+    isAlignedRightActions = false,
+    isBordered,
+    isCentered = false,
+    layout = LayoutTypes.Column,
     mainActionLink,
+    ...rest
   } = props;
-  const hasImage = imageSrc || imageComponent;
-  const finalImageAspectRatio = imageComponent
+  const hasImage = imageProps.src || imageProps.component;
+  const [finalImageSize, setFinalImageSize] = React.useState<ImageSizes>(
+    imageProps.size
+  );
+  const finalImageAspectRatio = imageProps.component
     ? ImageRatios.Original
-    : imageAspectRatio;
+    : imageProps.aspectRatio;
   const customColors = {};
   const cardContents = [];
+  const cardRightContents = [];
+  const windowDimensions = useWindowSize();
   let cardHeadingCount = 0;
 
-  if (imageComponent && imageAspectRatio !== ImageRatios.Square) {
+  if (imageProps.component && imageProps.aspectRatio !== ImageRatios.Square) {
     console.warn(
-      "Both `imageComponent` and `imageAspectRatio` are set but `imageAspectRatio` will be ignored in favor of the aspect ratio on `imageComponent`."
+      "NYPL Reservoir Card: Both the `imageProps.component` and `imageProps.aspectRatio` " +
+        "props were set but `imageProps.aspectRatio` will be ignored in favor " +
+        "of the aspect ratio on `imageProps.component` prop."
     );
   }
 
+  // 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
+  // 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);
+    } else {
+      setFinalImageSize(imageProps.size);
+    }
+  }, [windowDimensions.width, imageProps.size]);
+
   backgroundColor && (customColors["backgroundColor"] = backgroundColor);
   foregroundColor && (customColors["color"] = foregroundColor);
 
   const styles = useMultiStyleConfig("Card", {
-    border,
-    center,
     hasImage,
-    imageAtEnd,
+    imageIsAtEnd: imageProps.isAtEnd,
+    isBordered,
+    isCentered,
     layout,
     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.
@@ -227,7 +273,6 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
           ...child.props.additionalStyles,
         },
         key,
-        center,
         // Override the child text with the potential `CardLinkOverlay`.
         children: newChildren,
         layout,
@@ -236,12 +281,20 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
       cardHeadingCount++;
     } else if (
       child.type === CardContent ||
-      child.props.mdxType === "CardContent" ||
-      child.type === CardActions ||
-      child.props.mdxType === "CardActions"
+      child.props.mdxType === "CardContent"
     ) {
-      const elem = React.cloneElement(child, { key, center, layout });
+      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 {
+        cardContents.push(elem);
+      }
     }
   });
 
@@ -254,22 +307,35 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
           ...styles,
           ...customColors,
         }}
+        {...rest}
       >
         {hasImage && (
           <CardImage
-            src={imageSrc ? imageSrc : null}
-            component={imageComponent}
-            alt={imageAlt}
-            imageSize={imageSize}
-            imageAspectRatio={finalImageAspectRatio}
-            imageAtEnd={imageAtEnd}
+            alt={imageProps.alt}
+            aspectRatio={finalImageAspectRatio}
+            caption={imageProps.caption}
+            component={imageProps.component}
+            credit={imageProps.credit}
+            isAtEnd={imageProps.isAtEnd}
             layout={layout}
+            size={finalImageSize}
+            src={imageProps.src ? imageProps.src : undefined}
           />
         )}
         <Box className="card-body" __css={styles.body}>
           {cardContents}
         </Box>
+        {cardRightContents.length ? (
+          <Box
+            className="card-right"
+            __css={{ ...styles.body, ...styles.actions }}
+          >
+            {cardRightContents}
+          </Box>
+        ) : null}
       </Box>
     </CardLinkBox>
   );
-}
+});
+
+export default Card;