@nypl/design-system-react-components 0.23.4 → 0.25.1

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

@@ -2,24 +2,28 @@ import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 
-import Card from "./Card";
+import Card, { CardHeading, CardContent, CardActions } from "./Card";
 import Link from "../Link/Link";
 import { LinkTypes } from "../Link/LinkTypes";
-import Heading from "../Heading/Heading";
-import Image from "../Image/Image";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
+import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
+import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
 
 describe("Card Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <Card
         id="cardID"
-        heading={<Heading level={3} id="heading1" text="Optional Header" />}
-        image={<Image src="https://placeimg.com/400/200/arch" alt="" />}
-        ctas={
+        imageSrc="https://placeimg.com/400/200/arch"
+        imageAlt="Alt text"
+      >
+        <CardHeading level={HeadingLevels.Three} id="heading1">
+          The Card Heading
+        </CardHeading>
+        <CardContent>middle column content</CardContent>
+        <CardActions>
           <Button
             onClick={function () {
               console.log(this);
@@ -30,10 +34,7 @@ describe("Card Accessibility", () => {
           >
             Example CTA
           </Button>
-        }
-        footer={<>Optional footer</>}
-      >
-        middle column content
+        </CardActions>
       </Card>
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -44,9 +45,14 @@ describe("Card", () => {
   const regularCard = (
     <Card
       id="cardID"
-      heading={<Heading level={3} id="heading1" text="Optional Header" />}
-      image={<Image src="https://placeimg.com/400/200/arch" alt="" />}
-      ctas={
+      imageSrc="https://placeimg.com/400/200/arch"
+      imageAlt="Alt text"
+    >
+      <CardHeading level={HeadingLevels.Three} id="heading1">
+        The Card Heading
+      </CardHeading>
+      <CardContent>middle column content</CardContent>
+      <CardActions>
         <Button
           onClick={function () {
             console.log(this);
@@ -57,145 +63,134 @@ describe("Card", () => {
         >
           Example CTA
         </Button>
-      }
-      footer={<>Optional footer</>}
-    >
-      middle column content
+      </CardActions>
     </Card>
   );
   const cardWithExtendedStyles = (
     <Card
       id="card#1"
       className="edition-card"
-      heading={
-        <Heading level={2} id="editioncardheading1" text="2004 Edition" />
-      }
-      image={<Image src="https://placeimg.com/300/400/arch" alt="" />}
-      ctas={
-        <div className="edition-card__ctas">
+      imageSrc="https://placeimg.com/300/400/arch"
+      imageAlt="Alt text"
+    >
+      <CardHeading level={HeadingLevels.Two} id="editioncardheading1">
+        The Card Heading
+      </CardHeading>
+      <CardContent>
+        <div>Published in New York by Random House</div>
+        <div>Written in English</div>
+        <div>
+          License: Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
+          International
+        </div>
+      </CardContent>
+      <CardActions>
+        <div className="edition-card-actions">
           <Link type={LinkTypes.Button} href="blah">
             Read Online
           </Link>
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
         </div>
-      }
-    >
-      <>
-        <div>Published in New York by Random House</div>
-        <div>Written in English</div>
-        <div>
-          License: Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
-          International
-        </div>
-      </>
+      </CardActions>
     </Card>
   );
   const cardWithNoCTAs = (
     <Card
       id="card#1"
-      image={<Image src="https://placeimg.com/300/400/arch" alt="" />}
       className="edition-card"
-      heading={
-        <Heading level={2} id="editioncardheading1" text="2004 Edition" />
-      }
+      imageSrc="https://placeimg.com/300/400/arch"
+      imageAlt="Alt text"
     >
-      <>
+      <CardHeading level={HeadingLevels.Two} id="editioncardheading1">
+        The Card Heading
+      </CardHeading>
+      <CardContent>
         <div>Published in New York by Random House</div>
         <div>Written in English</div>
         <div>Under Creative Commons License</div>
-      </>
+      </CardContent>
     </Card>
   );
   const cardWithNoContent = (
     <Card
       id="card#1"
       className="edition-card"
-      image={<Image src="https://placeimg.com/300/400/arch" alt="" />}
-      heading={
-        <Heading
-          level={2}
-          id="editioncardheading1"
-          url="#edition-link"
-          text="2004 Edition"
-        />
-      }
-      ctas={
-        <div className="edition-card__ctas">
+      imageSrc="https://placeimg.com/300/400/arch"
+      imageAlt="Alt text"
+    >
+      <CardHeading
+        level={HeadingLevels.Two}
+        id="editioncardheading1"
+        url="#edition-link"
+      >
+        The Card Heading
+      </CardHeading>
+      <CardActions>
+        <div className="edition-card-actions">
           <Link type={LinkTypes.Button} href="blah">
             Read Online
           </Link>
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
         </div>
-      }
-    ></Card>
+      </CardActions>
+    </Card>
   );
   const cardWithNoImage = (
-    <Card
-      id="card#1"
-      className="edition-card"
-      heading={
-        <Heading
-          level={2}
-          id="editioncardheading1"
-          url="#edition-link"
-          text="2004 Edition"
-        />
-      }
-      ctas={
-        <div className="edition-card__ctas">
+    <Card id="card#1" className="edition-card">
+      <CardHeading
+        level={HeadingLevels.Two}
+        id="editioncardheading1"
+        url="#edition-link"
+      >
+        The Card Heading
+      </CardHeading>
+      <CardContent>middle column content</CardContent>
+      <CardActions>
+        <div className="edition-card-actions">
           <Link type={LinkTypes.Button} href="blah">
             Read Online
           </Link>
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
         </div>
-      }
-    >
-      middle column content
+      </CardActions>
     </Card>
   );
   let container;
 
-  it("Generates a Card with a header, footer, image, middle content, and CTAs", () => {
+  it("Generates a Card with a header, image, content, and CTAs", () => {
     const utils = render(regularCard);
     container = utils.container;
-    expect(container.querySelector(".card__heading")).toBeInTheDocument();
+    expect(container.querySelector(".chakra-heading")).toBeInTheDocument();
     expect(container.querySelector(".card__image")).toBeInTheDocument();
-    expect(container.querySelector(".card__content")).toBeInTheDocument();
-    expect(container.querySelector(".card__ctas")).toBeInTheDocument();
-    expect(container.querySelector(".card__footer")).toBeInTheDocument();
+    expect(container.querySelector(".card-content")).toBeInTheDocument();
+    expect(container.querySelector(".card-actions")).toBeInTheDocument();
   });
 
   it("Generates a Card with variable data", () => {
@@ -203,7 +198,7 @@ describe("Card", () => {
     container = utils.container;
 
     expect(container.querySelector("h2")).toBeInTheDocument();
-    expect(container.querySelector(".card__content")).toBeInTheDocument();
+    expect(container.querySelector(".card-content")).toBeInTheDocument();
     expect(screen.getAllByRole("link")).toHaveLength(2);
   });
 
@@ -211,29 +206,29 @@ describe("Card", () => {
     const utils = render(cardWithNoCTAs);
     container = utils.container;
 
-    expect(container.querySelector(".card__heading")).toBeInTheDocument();
+    expect(container.querySelector(".chakra-heading")).toBeInTheDocument();
     expect(container.querySelector(".card__image")).toBeInTheDocument();
-    expect(container.querySelector(".card__content")).toBeInTheDocument();
-    expect(container.querySelector(".card__ctas")).not.toBeInTheDocument();
+    expect(container.querySelector(".card-content")).toBeInTheDocument();
+    expect(container.querySelector(".card-actions")).not.toBeInTheDocument();
   });
 
   it("Generates a card without a content block if one isn't provided", () => {
     const utils = render(cardWithNoContent);
     container = utils.container;
 
-    expect(container.querySelector(".card__heading")).toBeInTheDocument();
+    expect(container.querySelector(".chakra-heading")).toBeInTheDocument();
     expect(container.querySelector(".card__image")).toBeInTheDocument();
-    expect(container.querySelector(".card__content")).not.toBeInTheDocument();
-    expect(container.querySelector(".card__ctas")).toBeInTheDocument();
+    expect(container.querySelector(".card-content")).not.toBeInTheDocument();
+    expect(container.querySelector(".card-actions")).toBeInTheDocument();
   });
 
   it("Generates a card without an image block if no image is provided", () => {
     const utils = render(cardWithNoImage);
     container = utils.container;
 
-    expect(container.querySelector(".card__heading")).toBeInTheDocument();
+    expect(container.querySelector(".chakra-heading")).toBeInTheDocument();
     expect(container.querySelector(".card__image")).not.toBeInTheDocument();
-    expect(container.querySelector(".card__content")).toBeInTheDocument();
-    expect(container.querySelector(".card__ctas")).toBeInTheDocument();
+    expect(container.querySelector(".card-content")).toBeInTheDocument();
+    expect(container.querySelector(".card-actions")).toBeInTheDocument();
   });
 });

package/src/components/Card/Card.tsx

@@ -1,58 +1,209 @@
 import * as React from "react";
 import bem from "../../utils/bem";
 
-interface CardProps {
-  /** ClassName that appears in addition to "card" */
+import { CardImageRatios, CardImageSizes, CardLayouts } from "./CardTypes";
+import Heading from "../Heading/Heading";
+import Image from "../Image/Image";
+
+interface CardImageProps {
+  /** Text description of the image */
+  alt: string;
+  /** Custom image component used in place of DS `Image` component */
+  component?: React.ReactNode;
+  /** ClassName you can add in addition to 'image' */
+  className?: string;
+  /** Optional value to control the aspect ratio of the cartd image; default value is `square` */
+  imageAspectRatio?: CardImageRatios;
+  /** Optional value to control the size of the card image */
+  imageSize?: CardImageSizes;
+  /** The src attribute is required, and contains the path to the image you want to embed. */
+  src: string;
+}
+
+interface CardContentProps {
+  /** Optional className that would be applied to the `card-content` element */
   className?: string;
+}
+
+interface CardActionsProps {
+  /** Optional boolean value to control visibility of border on the bottom edge of the card actions element */
+  bottomBorder?: boolean;
+  /** Optional className that would be applied to the `card-actions` element */
+  className?: string;
+  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
+  modifiers?: string[];
+  /** Optional boolean value to control visibility of border on the top edge of the card actions element */
+  topBorder?: boolean;
+}
+
+export interface CardProps {
+  /** Optional hex color value used to set the card background color */
+  backgroundColor?: string;
   /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
   blockName?: string;
-  /** Calls to Action for the card, such as "download" on a card for a book */
-  ctas?: React.ReactNode;
-  /** Footer that appears within the card but below the three columns within it */
-  footer?: React.ReactNode;
-  /** Heading that appears within the card but above the three columns within it */
-  heading?: React.ReactNode;
+  /** Optional boolean value to control the visibility of a border around the card */
+  border?: boolean;
+  /** Optional boolean value to control the alignment of the text and elements within the card */
+  center?: boolean;
+  /** ClassName that appears in addition to "card" */
+  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;
-  /** First column within the card */
-  image?: React.ReactNode;
+  /** 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 card image; default value is `square` */
+  imageAspectRatio?: CardImageRatios;
+  /** Optional boolean value to control the position of the card image */
+  imageAtEnd?: boolean;
+  /** Custom image component used in place of DS `Image` component */
+  imageComponent?: React.ReactNode;
+  /** Optional value to control the size of the card image */
+  imageSize?: CardImageSizes;
+  /** The path to the image displayed with the card */
+  imageSrc?: string;
+  /** Optional value to control the position of the image placeholder; default value is `column` */
+  layout?: CardLayouts;
   /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
   modifiers?: string[];
+  /** Optional padding value.  This value should be entered with the same formatting as a CSS padding attribute (ex. `5%`, `20px`, `2rem`).  If omitted, the Card will use the default padding. */
+  padding?: string;
+}
+
+// CardImage component
+export function CardImage(props: React.PropsWithChildren<CardImageProps>) {
+  const { src, alt, className, imageAspectRatio, imageSize, component } = props;
+  const classNames = ["image-wrap"];
+  imageAspectRatio && classNames.push(`image-wrap--` + imageAspectRatio);
+  const imageModifiers = [];
+  imageSize && imageModifiers.push(imageSize);
+  return (
+    (src || component) && (
+      <>
+        <div className={bem("image", imageModifiers, "card", [])}>
+          <div className={classNames.join(" ")}>
+            <div className="image-crop">
+              {component ? (
+                component
+              ) : (
+                <Image className={className} src={src} alt={alt} />
+              )}
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  );
+}
+
+// CardHeading child-component
+export const CardHeading = (props) => <Heading {...props} />;
+
+// CardContent child-component
+export function CardContent(props: React.PropsWithChildren<CardContentProps>) {
+  const { children, className } = props;
+  return (
+    children && (
+      <div className={bem("card-content", [], "", [className])}>{children}</div>
+    )
+  );
+}
+
+// CardActions child-component
+export function CardActions(props: React.PropsWithChildren<CardActionsProps>) {
+  const {
+    bottomBorder,
+    children,
+    className,
+    modifiers = [],
+    topBorder,
+  } = props;
+
+  bottomBorder && modifiers.push("bottom-border");
+  topBorder && modifiers.push("top-border");
+
+  return (
+    children && (
+      <div className={bem("card-actions", modifiers, "", [className])}>
+        {children}
+      </div>
+    )
+  );
 }
 
 export default function Card(props: React.PropsWithChildren<CardProps>) {
   const {
+    backgroundColor,
     blockName,
+    center,
     children,
     className,
-    ctas,
-    footer,
-    heading,
+    foregroundColor,
     id,
-    image,
+    imageAtEnd,
+    layout,
+    border,
+    padding,
     modifiers = [],
+    imageAlt,
+    imageComponent,
+    imageAspectRatio,
+    imageSize,
+    imageSrc,
   } = props;
   const baseClass = "card";
 
+  const styles = {};
+  let imageCount = 0;
+  const cardContents = [];
+
+  layout && modifiers.push(layout);
+  border && modifiers.push("with-border");
+  center && modifiers.push("center");
+  (imageSrc || imageComponent) && modifiers.push("has-image");
+  imageAtEnd && modifiers.push("at-end");
+
+  padding && (styles["padding"] = padding);
+  backgroundColor && (styles["backgroundColor"] = backgroundColor);
+  foregroundColor && (styles["color"] = foregroundColor);
+
+  React.Children.map(children, (child: React.ReactElement) => {
+    if (
+      child.type === CardHeading ||
+      child.props.mdxType === "CardHeading" ||
+      child.type === CardContent ||
+      child.props.mdxType === "CardContent" ||
+      child.type === CardActions ||
+      child.props.mdxType === "CardActions"
+    ) {
+      cardContents.push(child);
+    }
+  });
+
+  if (imageCount > 1) {
+    console.error(`Only one CardIimage child component may be passed to Card.`);
+    cardContents.length = 0;
+    cardContents.push(
+      "Error: Only one CardImage child component may be passed to Card."
+    );
+  }
   return (
-    <div className={bem(baseClass, modifiers, blockName, [className])} id={id}>
-      {heading && (
-        <div className={bem("heading", modifiers, baseClass)}>{heading}</div>
-      )}
-      <div className={bem("columns", modifiers, baseClass)}>
-        {image && (
-          <div className={bem("image", modifiers, baseClass)}>{image}</div>
-        )}
-        {children && (
-          <div className={bem("content", modifiers, baseClass)}>{children}</div>
-        )}
-        {ctas && (
-          <div className={bem("ctas", modifiers, baseClass)}>{ctas}</div>
-        )}
-      </div>
-      {footer && (
-        <div className={bem("footer", modifiers, baseClass)}>{footer}</div>
+    <div
+      className={bem(baseClass, modifiers, blockName, [className])}
+      id={id}
+      style={styles}
+    >
+      {(imageSrc || imageComponent) && (
+        <CardImage
+          src={imageSrc ? imageSrc : null}
+          component={imageComponent ? imageComponent : null}
+          alt={imageAlt ? imageAlt : null}
+          imageSize={imageSize ? imageSize : null}
+          imageAspectRatio={imageAspectRatio ? imageAspectRatio : null}
+        />
       )}
+      <div className={bem("body", [], baseClass)}>{cardContents}</div>
     </div>
   );
 }

package/src/components/Card/CardTypes.tsx

@@ -0,0 +1,21 @@
+export enum CardLayouts {
+  Row = "row",
+  Column = "column",
+}
+
+export enum CardImageRatios {
+  FourByThree = "four-by-three",
+  OneByTwo = "one-by-two",
+  Original = "original",
+  SixteenByNine = "sixteen-by-nine",
+  Square = "square",
+  ThreeByFour = "three-by-four",
+  ThreeByTwo = "three-by-two",
+  TwoByOne = "two-by-one",
+}
+
+export enum CardImageSizes {
+  Large = "large",
+  Medium = "medium",
+  Small = "small",
+}