@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -1,435 +0,0 @@
-import * as React from "react";
-import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
-import renderer from "react-test-renderer";
-
-import StructuredContent from "./StructuredContent";
-
-const htmlStringBodyContent =
-  "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do" +
-  "eiusmod tempor incididunt ut labore et dolore magna aliqua." +
-  "Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. " +
-  "<a href='#'>Porttitor eget dolor</a> morbi non arcu risus quis varius." +
-  "Faucibus in ornare quam viverra orci sagittis.</p><p>Nisl vel pretium lectus" +
-  "quam id leo in. Etiam dignissim diam quis enim lobortis scelerisque fermentum." +
-  "Diam maecenas sed enim ut sem viverra. <b>Diam quam nulla porttitor massa" +
-  "id neque. Sed faucibus turpis in eu mi.</b></p><p>Ornare lectus sit amet est placerat" +
-  "in. Quis blandit turpis cursus in. Aliquam ut porttitor leo a diam sollicitudin" +
-  "tempor id eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras" +
-  "fermentum. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Feugiat" +
-  "nisl pretium fusce id velit ut tortor. Porttitor leo a diam sollicitudin " +
-  "tempor id eu nisl nunc.</p><ul><li>one</li><li>two</li>" +
-  "<li>three</li><li>four</li></ul><p><i>Mauris nunc congue nisi vitae suscipit" +
-  "tellus mauris a diam. Purus gravida quis blandit turpis cursus in hac." +
-  "Morbi tempus iaculis urna id volutpat. Lectus nulla at volutpat diam ut" +
-  "venenatis. Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamus" +
-  "arcu felis bibendum ut tristique. Cras semper auctor neque vitae tempus" +
-  "quam pellentesque. Placerat orci nulla pellentesque dignissim enim sit" +
-  "amet. Feugiat pretium nibh ipsum consequat. Placerat orci nulla pellentesque" +
-  "dignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisi" +
-  "est sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at risus" +
-  "viverra adipiscing at. Eu augue ut lectus arcu bibendum at varius vel" +
-  "pharetra.</i></p>";
-const htmlDOMBodyContent = (
-  <>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Pellentesque massa
-      placerat duis ultricies lacus sed turpis tincidunt.
-      <a href="http://nypl.org">Porttitor eget dolor</a> morbi non arcu risus
-      quis varius. Faucibus in ornare quam viverra orci sagittis.
-    </p>
-    <p>
-      Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis enim
-      lobortis scelerisque fermentum. Diam maecenas sed enim ut sem viverra.{" "}
-      <b>
-        Diam quam nulla porttitor massa id neque. Sed faucibus turpis in eu mi.
-      </b>
-    </p>
-    <p>
-      Ornare lectus sit amet est placerat in. Quis blandit turpis cursus in.
-      Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Pellentesque eu
-      tincidunt tortor aliquam nulla facilisi cras fermentum. Porttitor leo a
-      diam sollicitudin tempor id eu nisl nunc. Feugiat nisl pretium fusce id
-      velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl nunc.
-    </p>
-    <ul>
-      <li>one</li>
-      <li>two</li>
-      <li>three</li>
-      <li>four</li>
-    </ul>
-    <p>
-      <i>
-        Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
-        gravida quis blandit turpis cursus in hac. Morbi tempus iaculis urna id
-        volutpat. Lectus nulla at volutpat diam ut venenatis. Donec ac odio
-        tempor orci dapibus ultrices in iaculis. Dui vivamus arcu felis bibendum
-        ut tristique. Cras semper auctor neque vitae tempus quam pellentesque.
-        Placerat orci nulla pellentesque dignissim enim sit amet. Feugiat
-        pretium nibh ipsum consequat. Placerat orci nulla pellentesque
-        dignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisi
-        est sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at
-        risus 'viverra adipiscing at. Eu augue ut lectus arcu bibendum at varius
-        vel' pharetra.
-      </i>
-    </p>
-  </>
-);
-
-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"
-        imageProps={{
-          alt: "Image alt text",
-          aspectRatio: "original",
-          caption: "Image caption",
-          credit: "Image credit",
-          position: "left",
-          size: "medium",
-          src: "https://placeimg.com/400/300/animals",
-        }}
-      />
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  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"
-        imageProps={{
-          alt: "Image alt text",
-          aspectRatio: "original",
-          caption: "Image caption",
-          credit: "Image credit",
-          position: "left",
-          size: "medium",
-          src: "https://placeimg.com/400/300/animals",
-        }}
-      />
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it("passes axe accessibility without an image", async () => {
-    const { container } = render(
-      <StructuredContent
-        bodyContent={htmlStringBodyContent}
-        calloutText="This is the callout text"
-        headingText="Heading text"
-      />
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("StructuredContent", () => {
-  it("renders two headings, an image, and body text", () => {
-    render(
-      <StructuredContent
-        bodyContent={htmlStringBodyContent}
-        calloutText="This is the callout text"
-        headingText="Heading text"
-        imageProps={{
-          alt: "Image alt text",
-          aspectRatio: "original",
-          caption: "Image caption",
-          credit: "Image credit",
-          position: "left",
-          size: "medium",
-          src: "https://placeimg.com/400/300/animals",
-        }}
-      />
-    );
-    const mainHeading = screen.getByRole("heading", { level: 2 });
-    const calloutHeading = screen.getByRole("heading", { level: 3 });
-
-    expect(mainHeading).toHaveTextContent("Heading text");
-    expect(calloutHeading).toHaveTextContent("This is the callout text");
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(screen.getByText(/Lorem ipsum dolor sit amet/i)).toBeInTheDocument();
-  });
-
-  it("optionally renders without the headings", () => {
-    render(
-      <StructuredContent
-        bodyContent={htmlStringBodyContent}
-        imageProps={{
-          alt: "Image alt text",
-          aspectRatio: "original",
-          caption: "Image caption",
-          credit: "Image credit",
-          position: "left",
-          size: "medium",
-          src: "https://placeimg.com/400/300/animals",
-        }}
-      />
-    );
-    const mainHeading = screen.queryByRole("heading", { level: 2 });
-    const calloutHeading = screen.queryByRole("heading", { level: 3 });
-
-    expect(mainHeading).not.toBeInTheDocument();
-    expect(calloutHeading).not.toBeInTheDocument();
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(screen.getByText(/Lorem ipsum dolor sit amet/i)).toBeInTheDocument();
-  });
-
-  it("optionally renders without the image", () => {
-    render(
-      <StructuredContent
-        bodyContent={htmlStringBodyContent}
-        calloutText="This is the callout text"
-        headingText="Heading text"
-      />
-    );
-    const mainHeading = screen.getByRole("heading", { level: 2 });
-    const calloutHeading = screen.getByRole("heading", { level: 3 });
-
-    expect(mainHeading).toHaveTextContent("Heading text");
-    expect(calloutHeading).toHaveTextContent("This is the callout text");
-    expect(screen.queryByRole("img")).not.toBeInTheDocument();
-    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 `imageProps.alt`", () => {
-    const warn = jest.spyOn(console, "warn");
-    render(
-      <StructuredContent
-        bodyContent={htmlStringBodyContent}
-        calloutText="This is the callout text"
-        headingText="Heading text"
-        imageProps={{
-          aspectRatio: "original",
-          caption: "Image caption",
-          credit: "Image credit",
-          position: "left",
-          size: "medium",
-          src: "https://placeimg.com/400/300/animals",
-        }}
-      />
-    );
-
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir StructuredContent: The `imageProps.alt` prop is required " +
-        "when using an image."
-    );
-    expect(screen.getByRole("img")).toBeInTheDocument();
-  });
-
-  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"
-        imageProps={{
-          alt: "Image alt text",
-          aspectRatio: "original",
-          caption: "Image caption",
-          credit: "Image credit",
-          position: "left",
-          size: "medium",
-          src: "https://placeimg.com/400/300/animals",
-        }}
-      />
-    );
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(screen.getByRole("figure")).toBeInTheDocument();
-    expect(screen.getByText("Image caption")).toBeInTheDocument();
-    expect(screen.getByText("Image credit")).toBeInTheDocument();
-
-    // Not passing in the image's caption
-    rerender(
-      <StructuredContent
-        bodyContent={htmlStringBodyContent}
-        calloutText="This is the callout text"
-        headingText="Heading text"
-        imageProps={{
-          alt: "Image alt text",
-          aspectRatio: "original",
-          credit: "Image credit",
-          position: "left",
-          size: "medium",
-          src: "https://placeimg.com/400/300/animals",
-        }}
-      />
-    );
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(screen.getByRole("figure")).toBeInTheDocument();
-    expect(screen.queryByText("Image caption")).not.toBeInTheDocument();
-    expect(screen.getByText("Image credit")).toBeInTheDocument();
-  });
-
-  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"
-        imageProps={{
-          alt: "Image alt text",
-          aspectRatio: "original",
-          position: "left",
-          size: "medium",
-          src: "https://placeimg.com/400/300/animals",
-        }}
-      />
-    );
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(screen.queryByRole("figure")).not.toBeInTheDocument();
-    expect(screen.queryByText("Image caption")).not.toBeInTheDocument();
-    expect(screen.queryByText("Image credit")).not.toBeInTheDocument();
-  });
-
-  it("renders the UI snapshot", () => {
-    const withHTMLStringContent = renderer
-      .create(
-        <StructuredContent
-          bodyContent={htmlStringBodyContent}
-          calloutText="This is the callout text"
-          headingText="Heading text"
-          id="withHTMLStringContent"
-          imageProps={{
-            alt: "Image alt text",
-            aspectRatio: "original",
-            caption: "Image caption",
-            credit: "Image credit",
-            position: "left",
-            size: "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"
-          imageProps={{
-            alt: "Image alt text",
-            aspectRatio: "original",
-            caption: "Image caption",
-            credit: "Image credit",
-            position: "left",
-            size: "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"
-        />
-      )
-      .toJSON();
-    const withImageWithoutCaptionOrCredit = renderer
-      .create(
-        <StructuredContent
-          bodyContent={htmlStringBodyContent}
-          calloutText="This is the callout text"
-          headingText="Heading text"
-          id="withImageWithoutCaptionOrCredit"
-          imageProps={{
-            alt: "Image alt text",
-            aspectRatio: "original",
-            position: "left",
-            size: "medium",
-            src: "https://placeimg.com/400/300/animals",
-          }}
-        />
-      )
-      .toJSON();
-    const withoutHeading = renderer
-      .create(
-        <StructuredContent
-          bodyContent={htmlStringBodyContent}
-          calloutText="This is the callout text"
-          id="withoutHeading"
-          imageProps={{
-            alt: "Image alt text",
-            aspectRatio: "original",
-            caption: "Image caption",
-            credit: "Image credit",
-            position: "left",
-            size: "medium",
-            src: "https://placeimg.com/400/300/animals",
-          }}
-        />
-      )
-      .toJSON();
-    const withoutCalloutText = renderer
-      .create(
-        <StructuredContent
-          bodyContent={htmlStringBodyContent}
-          headingText="Heading text"
-          id="withoutCalloutText"
-        />
-      )
-      .toJSON();
-    const withChakraProps = renderer
-      .create(
-        <StructuredContent
-          calloutText="This is the callout text"
-          headingText="Heading text"
-          id="withChakraProps"
-          imageProps={{
-            alt: "Image alt text",
-            aspectRatio: "original",
-            caption: "Image caption",
-            credit: "Image credit",
-            position: "left",
-            size: "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: "original",
-            caption: "Image caption",
-            credit: "Image credit",
-            position: "left",
-            size: "medium",
-            src: "https://placeimg.com/400/300/animals",
-          }}
-          bodyContent={htmlStringBodyContent}
-          data-testid="props"
-        />
-      )
-      .toJSON();
-
-    expect(withHTMLStringContent).toMatchSnapshot();
-    expect(withHTMLDOMContent).toMatchSnapshot();
-    expect(withoutAnImage).toMatchSnapshot();
-    expect(withImageWithoutCaptionOrCredit).toMatchSnapshot();
-    expect(withoutHeading).toMatchSnapshot();
-    expect(withoutCalloutText).toMatchSnapshot();
-    expect(withChakraProps).toMatchSnapshot();
-    expect(withOtherProps).toMatchSnapshot();
-  });
-});

package/src/components/StructuredContent/StructuredContent.tsx

@@ -1,139 +0,0 @@
-import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
-import * as React from "react";
-
-import Heading from "../Heading/Heading";
-import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
-
-export type StructuredContentImagePosition = "left" | "right" | "center";
-
-interface StructuredContentImageProps extends ComponentImageProps {
-  /** Optional value to control the positioning of the internal `Image` component.
-   * Defaults to `"left"`. */
-  position?: StructuredContentImagePosition;
-}
-
-export interface StructuredContentProps {
-  /** Optional value to set the text for the callout heading text. */
-  calloutText?: string;
-  /** Additional class name for the `StructuredContent` component. */
-  className?: string;
-  /** Optional value to set the text for the main heading text. */
-  headingText?: string;
-  /** ID that other components can cross reference for accessibility purposes. */
-  id?: 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;
-}
-
-/**
- * Internal component used in the `StructuredContent` component
- * that renders the DS `Image` component.
- */
-const StructuredContentImage = chakra((props: ImageProps) => {
-  const {
-    additionalFigureStyles,
-    additionalImageStyles,
-    additionalWrapperStyles,
-    alt,
-    aspectRatio,
-    caption,
-    component,
-    credit,
-    size,
-    src,
-  } = props;
-  return (
-    <Image
-      additionalFigureStyles={additionalFigureStyles}
-      additionalImageStyles={additionalImageStyles}
-      additionalWrapperStyles={additionalWrapperStyles}
-      alt={alt}
-      component={component}
-      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 const StructuredContent = chakra(
-  (props: React.PropsWithChildren<StructuredContentProps>) => {
-    const {
-      calloutText,
-      className,
-      headingText,
-      id,
-      imageProps = {
-        alt: "",
-        aspectRatio: "square",
-        caption: undefined,
-        component: undefined,
-        credit: undefined,
-        position: "left",
-        size: "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."
-      );
-    }
-
-    return (
-      <Box id={id} className={className} __css={styles} {...rest}>
-        {headingText && <Heading id={`${id}-heading`}>{headingText}</Heading>}
-        {calloutText && (
-          <Heading id={`${id}-callout`} level="three" size="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 : undefined}
-          />
-        )}
-        {finalBodyContent}
-      </Box>
-    );
-  }
-);
-
-export default StructuredContent;