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

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
@@ -303,11 +319,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."
     );
   });
 

package/src/components/Card/Card.tsx

@@ -7,18 +7,19 @@ import {
   useStyleConfig,
 } from "@chakra-ui/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 useWindowSize from "../../hooks/useWindowSize";
 import generateUUID from "../../helpers/generateUUID";
 
 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 +27,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,9 +42,10 @@ 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 {
@@ -52,21 +60,8 @@ export interface CardProps extends CardBaseProps, CardLinkBoxProps {
   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;
+  /** Object used to create and render the `Image` component. */
+  imageProps?: CardImageProps;
 }
 
 /**
@@ -74,31 +69,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,
+    size,
     layout,
   });
   return (
     <Box __css={styles}>
       <Image
         alt={alt}
+        caption={caption}
         component={component}
-        imageAspectRatio={imageAspectRatio}
-        imageSize={imageSize}
+        credit={credit}
+        aspectRatio={aspectRatio}
+        size={size}
         src={src}
       />
     </Box>
@@ -117,12 +118,12 @@ export function CardContent(props: React.PropsWithChildren<{}>) {
 
 // CardActions child-component
 export function CardActions(props: React.PropsWithChildren<CardActionsProps>) {
-  const { bottomBorder, children, topBorder, center, layout } = props;
+  const { bottomBorder, children, isCentered, layout, topBorder } = props;
   const styles = useStyleConfig("CardActions", {
     bottomBorder,
-    topBorder,
-    center,
+    isCentered,
     layout,
+    topBorder,
   });
 
   return children && <Box __css={styles}>{children}</Box>;
@@ -166,42 +167,64 @@ export default function Card(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,
+    imageProps = {
+      alt: "",
+      aspectRatio: ImageRatios.Square,
+      caption: undefined,
+      component: undefined,
+      credit: undefined,
+      isAtEnd: false,
+      size: ImageSizes.Default,
+      src: "",
+    },
+    isCentered = false,
+    layout = LayoutTypes.Column,
     mainActionLink,
   } = 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 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,
+    isCentered,
     layout,
     mainActionLink,
   });
@@ -227,7 +250,7 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
           ...child.props.additionalStyles,
         },
         key,
-        center,
+        isCentered,
         // Override the child text with the potential `CardLinkOverlay`.
         children: newChildren,
         layout,
@@ -240,7 +263,7 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
       child.type === CardActions ||
       child.props.mdxType === "CardActions"
     ) {
-      const elem = React.cloneElement(child, { key, center, layout });
+      const elem = React.cloneElement(child, { key, isCentered, layout });
       cardContents.push(elem);
     }
   });
@@ -257,13 +280,15 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
       >
         {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}>

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

@@ -8,19 +8,11 @@ exports[`Card Renders the UI snapshot correctly 1`] = `
   <div
     className="css-0"
   >
-    <div
-      className="the-wrap  css-0"
-    >
-      <div
-        className="the-crop css-0"
-      >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/400/200/arch"
-        />
-      </div>
-    </div>
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/400/200/arch"
+    />
   </div>
   <div
     className="card-body css-0"
@@ -61,19 +53,11 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
   <div
     className="css-0"
   >
-    <div
-      className="the-wrap  css-0"
-    >
-      <div
-        className="the-crop css-0"
-      >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/300/400/arch"
-        />
-      </div>
-    </div>
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/300/400/arch"
+    />
   </div>
   <div
     className="card-body css-0"
@@ -163,19 +147,11 @@ exports[`Card Renders the UI snapshot correctly 3`] = `
   <div
     className="css-0"
   >
-    <div
-      className="the-wrap  css-0"
-    >
-      <div
-        className="the-crop css-0"
-      >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/300/400/arch"
-        />
-      </div>
-    </div>
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/300/400/arch"
+    />
   </div>
   <div
     className="card-body css-0"
@@ -211,19 +187,11 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
   <div
     className="css-0"
   >
-    <div
-      className="the-wrap  css-0"
-    >
-      <div
-        className="the-crop css-0"
-      >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/300/400/arch"
-        />
-      </div>
-    </div>
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/300/400/arch"
+    />
   </div>
   <div
     className="card-body css-0"
@@ -396,19 +364,11 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
     <div
       className="css-0"
     >
-      <div
-        className="the-wrap  css-0"
-      >
-        <div
-          className="the-crop css-0"
-        >
-          <img
-            alt="Alt text"
-            className="css-0"
-            src="https://placeimg.com/400/200/arch"
-          />
-        </div>
-      </div>
+      <img
+        alt="Alt text"
+        className="css-0"
+        src="https://placeimg.com/400/200/arch"
+      />
     </div>
     <div
       className="card-body css-0"

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

@@ -53,9 +53,9 @@ guide on the Chakra UI site.
   <DSProvider>
     <Center border="1px solid" borderColor="var(--nypl-colors-ui-gray-medium)">
       <Image
-        src="https://placeimg.com/300/400/arch"
         alt="Centered Image"
-        imageSize={ImageSizes.Medium}
+        size={ImageSizes.Medium}
+        src="https://placeimg.com/300/400/arch"
       />
     </Center>
   </DSProvider>

package/src/components/Checkbox/Checkbox.stories.mdx

@@ -57,7 +57,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Checkbox} />
 
@@ -177,3 +177,15 @@ now be controlled and removed by the parent component in order to remove this st
     />
   </DSProvider>
 </Canvas>
+
+## With JSX Element Label
+
+This is useful when you want to add dynamic content to the label or add
+a layout to the label. View the `CheckboxGroup` documentation for this
+usage.
+
+<Canvas>
+  <DSProvider>
+    <Checkbox labelText={<span>Arts</span>} name="jsxElementLabel" />
+  </DSProvider>
+</Canvas>

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,13 +1,15 @@
+import { Flex, Spacer } from "@chakra-ui/react";
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
-import * as generateUUID from "../../helpers/generateUUID";
+
 import Checkbox from "./Checkbox";
+import * as generateUUID from "../../helpers/generateUUID";
 
 describe("Checkbox Accessibility", () => {
-  it("Passes axe accessibility test", async () => {
+  it("passes axe accessibility test with string label", async () => {
     const { container } = render(
       <Checkbox
         id="inputID"
@@ -18,6 +20,23 @@ describe("Checkbox Accessibility", () => {
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test with jsx label", async () => {
+    const { container } = render(
+      <Checkbox
+        id="jsxLabel"
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+        value="arts"
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Checkbox", () => {
@@ -195,6 +214,27 @@ describe("Checkbox", () => {
     expect(changeHandler).toHaveBeenCalledTimes(1);
   });
 
+  it("logs a warning if `labelText` is not a string and `showLabel` is false", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Checkbox
+        value="arts"
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+        showLabel={false}
+      />
+    );
+
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Checkbox: `labelText` must be a string when `showLabel` is false."
+    );
+  });
+
   it("Renders the UI snapshot correctly", () => {
     const primary = renderer
       .create(<Checkbox id="inputID" labelText="Test Label" />)
@@ -229,6 +269,21 @@ describe("Checkbox", () => {
         <Checkbox id="checkbox-disabled" labelText="Test Label" isDisabled />
       )
       .toJSON();
+    const withJSXLabel = renderer
+      .create(
+        <Checkbox
+          id="jsxLabel"
+          labelText={
+            <Flex>
+              <span>Arts</span>
+              <Spacer />
+              <span>4</span>
+            </Flex>
+          }
+          value="arts"
+        />
+      )
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(isChecked).toMatchSnapshot();
@@ -236,5 +291,6 @@ describe("Checkbox", () => {
     expect(isRequired).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
+    expect(withJSXLabel).toMatchSnapshot();
   });
 });

package/src/components/Checkbox/Checkbox.tsx

@@ -38,7 +38,7 @@ export interface CheckboxProps {
   isRequired?: boolean;
   /** The checkbox's label. This will serve as the text content for a `<label>`
    * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
-  labelText: string;
+  labelText: string | JSX.Element;
   /** The name prop indicates into which group of checkboxes this checkbox
    * belongs. If none is specified, 'default' will be used */
   name?: string;
@@ -99,6 +99,11 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const icon = !isIndeterminate ? <CheckboxIcon /> : undefined;
 
     if (!showLabel) {
+      if (typeof labelText !== "string") {
+        console.warn(
+          "NYPL Reservoir Checkbox: `labelText` must be a string when `showLabel` is false."
+        );
+      }
       ariaAttributes["aria-label"] =
         labelText && footnote ? `${labelText} - ${footnote}` : labelText;
     } else {