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

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

@@ -250,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", () => {
@@ -336,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();
@@ -343,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,19 +1,18 @@
-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 { LayoutTypes } from "../../helpers/enums";
 import Heading from "../Heading/Heading";
 import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
 import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import useWindowSize from "../../hooks/useWindowSize";
-import generateUUID from "../../helpers/generateUUID";
-
 interface CardBaseProps {
   /** Optional value to control the alignment of the text and elements. */
   isCentered?: boolean;
@@ -51,17 +50,20 @@ interface CardImageComponentProps extends CardBaseProps, ImageProps {
 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;
+  /** 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;
 }
 
 /**
@@ -88,8 +90,8 @@ function CardImage(
   const styles = useStyleConfig("CardImage", {
     imageIsAtEnd: isAtEnd,
     isCentered,
-    size,
     layout,
+    size,
   });
   return (
     <Box __css={styles}>
@@ -107,27 +109,42 @@ function CardImage(
 }
 
 // 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, isCentered, layout, topBorder } = props;
-  const styles = useStyleConfig("CardActions", {
-    bottomBorder,
-    isCentered,
-    layout,
-    topBorder,
-  });
+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
@@ -163,14 +180,13 @@ function CardLinkOverlay({
   );
 }
 
-export default function Card(props: React.PropsWithChildren<CardProps>) {
+export const Card = chakra((props: React.PropsWithChildren<CardProps>) => {
   const {
     backgroundColor,
-    border,
     children,
     className,
     foregroundColor,
-    id = generateUUID(),
+    id,
     imageProps = {
       alt: "",
       aspectRatio: ImageRatios.Square,
@@ -181,9 +197,12 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
       size: ImageSizes.Default,
       src: "",
     },
+    isAlignedRightActions = false,
+    isBordered,
     isCentered = false,
     layout = LayoutTypes.Column,
     mainActionLink,
+    ...rest
   } = props;
   const hasImage = imageProps.src || imageProps.component;
   const [finalImageSize, setFinalImageSize] = React.useState<ImageSizes>(
@@ -194,6 +213,7 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
     : imageProps.aspectRatio;
   const customColors = {};
   const cardContents = [];
+  const cardRightContents = [];
   const windowDimensions = useWindowSize();
   let cardHeadingCount = 0;
 
@@ -221,15 +241,18 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
   foregroundColor && (customColors["color"] = foregroundColor);
 
   const styles = useMultiStyleConfig("Card", {
-    border,
     hasImage,
     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.
@@ -250,7 +273,6 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
           ...child.props.additionalStyles,
         },
         key,
-        isCentered,
         // Override the child text with the potential `CardLinkOverlay`.
         children: newChildren,
         layout,
@@ -259,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, isCentered, 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);
+      }
     }
   });
 
@@ -277,6 +307,7 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
           ...styles,
           ...customColors,
         }}
+        {...rest}
       >
         {hasImage && (
           <CardImage
@@ -294,7 +325,17 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
         <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;