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

package/src/components/StructuredContent/StructuredContent.test.tsx

@@ -83,16 +83,18 @@ describe("StructuredContent Accessibility", () => {
   it("passes axe accessibility for HTML string text content", async () => {
     const { container } = render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -101,16 +103,18 @@ describe("StructuredContent Accessibility", () => {
   it("passes axe accessibility for HTML DOM text content", async () => {
     const { container } = render(
       <StructuredContent
+        bodyContent={htmlDOMBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlDOMBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -119,9 +123,9 @@ describe("StructuredContent Accessibility", () => {
   it("passes axe accessibility without an image", async () => {
     const { container } = render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        bodyContent={htmlStringBodyContent}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -132,16 +136,18 @@ describe("StructuredContent", () => {
   it("renders two headings, an image, and body text", () => {
     render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     const mainHeading = screen.getByRole("heading", { level: 2 });
@@ -156,14 +162,16 @@ describe("StructuredContent", () => {
   it("optionally renders without the headings", () => {
     render(
       <StructuredContent
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
         bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     const mainHeading = screen.queryByRole("heading", { level: 2 });
@@ -178,9 +186,9 @@ describe("StructuredContent", () => {
   it("optionally renders without the image", () => {
     render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        bodyContent={htmlStringBodyContent}
       />
     );
     const mainHeading = screen.getByRole("heading", { level: 2 });
@@ -192,24 +200,27 @@ describe("StructuredContent", () => {
     expect(screen.getByText(/Lorem ipsum dolor sit amet/i)).toBeInTheDocument();
   });
 
-  it("logs a warning when an image is used but no alt text is passed to `imageAlt`", () => {
+  it("logs a warning when an image is used but no alt text is passed to `imageProps.alt`", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
 
     expect(warn).toHaveBeenCalledWith(
-      "StructuredContent: `imageAlt` prop is required when using an image."
+      "NYPL Reservoir StructuredContent: The `imageProps.alt` prop is required " +
+        "when using an image."
     );
     expect(screen.getByRole("img")).toBeInTheDocument();
   });
@@ -217,16 +228,18 @@ describe("StructuredContent", () => {
   it("renders an image wrapped in figure when provided an image caption or credit", () => {
     const { rerender } = render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(screen.getByRole("img")).toBeInTheDocument();
@@ -237,15 +250,17 @@ describe("StructuredContent", () => {
     // Not passing in the image's caption
     rerender(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(screen.getByRole("img")).toBeInTheDocument();
@@ -257,14 +272,16 @@ describe("StructuredContent", () => {
   it("renders a simple image element when no image caption or credit are provided", () => {
     render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(screen.getByRole("img")).toBeInTheDocument();
@@ -277,91 +294,133 @@ describe("StructuredContent", () => {
     const withHTMLStringContent = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           calloutText="This is the callout text"
           headingText="Heading text"
           id="withHTMLStringContent"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imageCaption="Image caption"
-          imageCredit="Image credit"
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlStringBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();
     const withHTMLDOMContent = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlDOMBodyContent}
           calloutText="This is the callout text"
           headingText="Heading text"
           id="withHTMLDOMContent"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imageCaption="Image caption"
-          imageCredit="Image credit"
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlDOMBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();
     const withoutAnImage = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           calloutText="This is the callout text"
           headingText="Heading text"
           id="withoutAnImage"
-          bodyContent={htmlStringBodyContent}
         />
       )
       .toJSON();
     const withImageWithoutCaptionOrCredit = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           calloutText="This is the callout text"
           headingText="Heading text"
           id="withImageWithoutCaptionOrCredit"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlStringBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();
     const withoutHeading = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           calloutText="This is the callout text"
           id="withoutHeading"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imageCaption="Image caption"
-          imageCredit="Image credit"
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlStringBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();
     const withoutCalloutText = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           headingText="Heading text"
           id="withoutCalloutText"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imageCaption="Image caption"
-          imageCredit="Image credit"
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
+        />
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <StructuredContent
+          calloutText="This is the callout text"
+          headingText="Heading text"
+          id="withChakraProps"
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
+          bodyContent={htmlStringBodyContent}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <StructuredContent
+          calloutText="This is the callout text"
+          headingText="Heading text"
+          id="withOtherProps"
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
           bodyContent={htmlStringBodyContent}
+          data-testid="props"
         />
       )
       .toJSON();
@@ -372,5 +431,7 @@ describe("StructuredContent", () => {
     expect(withImageWithoutCaptionOrCredit).toMatchSnapshot();
     expect(withoutHeading).toMatchSnapshot();
     expect(withoutCalloutText).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/StructuredContent/StructuredContent.tsx

@@ -1,12 +1,17 @@
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 import Heading from "../Heading/Heading";
-import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
-import Image, { ImageProps } from "../Image/Image";
+import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
+import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
 import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import { StructuredContentImagePosition } from "./StructuredContentTypes";
-import generateUUID from "../../helpers/generateUUID";
+
+interface StructuredContentImageProps extends ComponentImageProps {
+  /** Optional value to control the positioning of the internal `Image` component.
+   * Defaults to `StructuredContentImagePosition.Left`. */
+  position?: StructuredContentImagePosition;
+}
 
 export interface StructuredContentProps {
   /** Optional value to set the text for the callout heading text. */
@@ -17,27 +22,8 @@ export interface StructuredContentProps {
   headingText?: string;
   /** ID that other components can cross reference for accessibility purposes. */
   id?: string;
-  /** String value used to populate the `alt` attribute of the internal `Image`
-   * component's `img` element. @NOTE if an image is used, this value must be passed. */
-  imageAlt?: string;
-  /** Optional value to control the aspect ratio of the internal `Image` component.
-   * Defaults to `ImageRatios.Square`. */
-  imageAspectRatio?: ImageRatios;
-  /** Optional value to render as a caption for the internal `Image` component. */
-  imageCaption?: string;
-  /** Optional DOM element to use instead of the DS `Image` component. */
-  imageComponent?: JSX.Element;
-  /** Optional value to render as a credit for the internal `Image` component. */
-  imageCredit?: string;
-  /** Optional value to control the positioning of the internal `Image` component.
-   * Defaults to `StructuredContentImagePosition.Left`. */
-  imagePosition?: StructuredContentImagePosition;
-  /** Optional value to control the size of the internal `Image` component.
-   * Defaults to `ImageSizes.Medium`. */
-  imageSize?: ImageSizes;
-  /** Optional value that contains the path to an image. If omitted, the internal
-   * DS `Image` component will not render. */
-  imageSrc?: string;
+  /** Object used to create and render the `Image` component. */
+  imageProps?: StructuredContentImageProps;
   /** Required value to set the text for the body content. */
   bodyContent: string | JSX.Element;
 }
@@ -46,17 +32,17 @@ export interface StructuredContentProps {
  * Internal component used in the `StructuredContent` component
  * that renders the DS `Image` component.
  */
-function StructuredContentImage(props: ImageProps) {
+const StructuredContentImage = chakra((props: ImageProps) => {
   const {
     additionalFigureStyles,
     additionalImageStyles,
     additionalWrapperStyles,
     alt,
+    aspectRatio,
+    caption,
     component,
-    imageAspectRatio,
-    imageCaption,
-    imageCredit,
-    imageSize,
+    credit,
+    size,
     src,
   } = props;
   return (
@@ -66,88 +52,97 @@ function StructuredContentImage(props: ImageProps) {
       additionalWrapperStyles={additionalWrapperStyles}
       alt={alt}
       component={component}
-      imageAspectRatio={imageAspectRatio}
-      imageSize={imageSize}
-      imageCaption={imageCaption}
-      imageCredit={imageCredit}
+      aspectRatio={aspectRatio}
+      size={size}
+      caption={caption}
+      credit={credit}
       src={src}
     />
   );
-}
+});
 
 /**
  * The `StructuredContent` component that displays a heading, callout content,
  * an image, and body content. All are optional except for body content.
  */
-export default function StructuredContent(
-  props: React.PropsWithChildren<StructuredContentProps>
-) {
-  const {
-    calloutText,
-    className,
-    headingText,
-    id = generateUUID(),
-    imageAlt = "",
-    imageAspectRatio = ImageRatios.Square,
-    imageCaption,
-    imageComponent,
-    imageCredit,
-    imagePosition = StructuredContentImagePosition.Left,
-    imageSize = ImageSizes.Medium,
-    imageSrc,
-    bodyContent,
-  } = props;
-  const hasImage = imageSrc || imageComponent;
-  const hasFigureImage = imageCaption || imageCredit;
-  const styles = useMultiStyleConfig("StructuredContent", {
-    hasFigureImage,
-    imageAspectRatio,
-    imagePosition,
-  });
-  const finalBodyContent =
-    typeof bodyContent === "string" ? (
-      <div dangerouslySetInnerHTML={{ __html: bodyContent }} />
-    ) : (
-      <Box>{bodyContent}</Box>
-    );
+export const StructuredContent = chakra(
+  (props: React.PropsWithChildren<StructuredContentProps>) => {
+    const {
+      calloutText,
+      className,
+      headingText,
+      id,
+      imageProps = {
+        alt: "",
+        aspectRatio: ImageRatios.Square,
+        caption: undefined,
+        component: undefined,
+        credit: undefined,
+        position: StructuredContentImagePosition.Left,
+        size: ImageSizes.Medium,
+        src: "",
+      },
+      bodyContent,
+      ...rest
+    } = props;
+    const hasImage = imageProps.src || imageProps.component;
+    const hasFigureImage = imageProps.caption || imageProps.credit;
+    const styles = useMultiStyleConfig("StructuredContent", {
+      hasFigureImage,
+      imageAspectRatio: imageProps.aspectRatio,
+      imagePosition: imageProps.position,
+    });
+    const finalBodyContent =
+      typeof bodyContent === "string" ? (
+        <div
+          className="structuredcontent-body"
+          dangerouslySetInnerHTML={{ __html: bodyContent }}
+        />
+      ) : (
+        <Box className="structuredcontent-body">{bodyContent}</Box>
+      );
+
+    if (hasImage && !imageProps.alt) {
+      console.warn(
+        "NYPL Reservoir StructuredContent: The `imageProps.alt` prop is required " +
+          "when using an image."
+      );
+    }
 
-  if (hasImage && !imageAlt) {
-    console.warn(
-      "StructuredContent: `imageAlt` prop is required when using an image."
+    return (
+      <Box id={id} className={className} __css={styles} {...rest}>
+        {headingText && (
+          <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
+            {headingText}
+          </Heading>
+        )}
+        {calloutText && (
+          <Heading
+            id={`${id}-callout`}
+            level={HeadingLevels.Three}
+            size={HeadingSizes.Callout}
+          >
+            {calloutText}
+          </Heading>
+        )}
+        {hasImage && (
+          <StructuredContentImage
+            additionalFigureStyles={styles.imageFigure}
+            additionalImageStyles={styles.image}
+            additionalWrapperStyles={styles.imageWrapper}
+            alt={imageProps.alt}
+            component={imageProps.component}
+            aspectRatio={imageProps.aspectRatio}
+            caption={imageProps.caption}
+            credit={imageProps.credit}
+            size={imageProps.size}
+            src={imageProps.src ? imageProps.src : null}
+          />
+        )}
+        {finalBodyContent}
+      </Box>
     );
   }
+);
 
-  return (
-    <Box id={id} className={className} __css={styles}>
-      {headingText && (
-        <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
-          {headingText}
-        </Heading>
-      )}
-      {calloutText && (
-        <Heading
-          displaySize={HeadingDisplaySizes.Callout}
-          id={`${id}-callout`}
-          level={HeadingLevels.Three}
-        >
-          {calloutText}
-        </Heading>
-      )}
-      {hasImage && (
-        <StructuredContentImage
-          additionalFigureStyles={styles.imageFigure}
-          additionalImageStyles={styles.image}
-          additionalWrapperStyles={styles.imageWrapper}
-          alt={imageAlt}
-          component={imageComponent}
-          imageAspectRatio={imageAspectRatio}
-          imageCaption={imageCaption}
-          imageCredit={imageCredit}
-          imageSize={imageSize}
-          src={imageSrc ? imageSrc : null}
-        />
-      )}
-      {finalBodyContent}
-    </Box>
-  );
-}
+export default StructuredContent;