@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/Image/Image.test.tsx

@@ -1,45 +1,55 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import Image from "./Image";
+import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 
 describe("Image Accessibility", () => {
-  it("passes axe accessibility test", async () => {
-    const { container } = render(<Image src="test.png" alt={""} />);
+  it("passes axe accessibility for regular img element", async () => {
+    const { container } = render(<Image src="test.png" alt="" />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility for figure element wrapper", async () => {
+    const { container } = render(
+      <Image src="test.png" alt="" imageCaption="This is a caption" />
+    );
     expect(await axe(container)).toHaveNoViolations();
   });
 });
 
 describe("Image", () => {
   const tooManyChars =
-    "UNwbNIp1GFehVO1LBBIFYF6Nv5IhHeCPgW5JHet2VRuuKnKlGxSgjbFcfCbcttVTkxbE7ItibBIuG9cTA9HGntZSKv31u7egV88bIg7DGDHmi2nKq3ssZkBDl7oWfYpyjWbfV4kZx9EDPsKHUTKb2xIKZWSbRMuTUtsJWonQyfitDp8ui1P7QR80LA236yE5fCkRImbltEsqJWEYxyotQpLjFbruJsPcGSCp6ET6DCrNQeWFsRVaM2Co99ewZjLuY42kdpBEXjcw9HPcTjKKZw141sKBNOoFfNMueYaHtNjNI";
-  it("Shows Image", () => {
-    const utils = render(<Image src="test.png" alt="" />);
-    expect(utils.container.querySelector(".image")).toBeInTheDocument();
-    expect(utils.container.querySelector(".figure")).not.toBeInTheDocument();
+    "UNwbNIp1GFehVO1LBBIFYF6Nv5IhHeCPgW5JHet2VRuuKnKlGxSgjbFcfCbcttVTkxbE7I" +
+    "tibBIuG9cTA9HGntZSKv31u7egV88bIg7DGDHmi2nKq3ssZkBDl7oWfYpyjWbfV4kZx9EDP" +
+    "sKHUTKb2xIKZWSbRMuTUtsJWonQyfitDp8ui1P7QR80LA236yE5fCkRImbltEsqJWEYxyot" +
+    "QpLjFbruJsPcGSCp6ET6DCrNQeWFsRVaM2Co99ewZjLuY42kdpBEXjcw9HPcTjKKZw141sK" +
+    "BNOoFfNMueYaHtNjNI";
+
+  it("renders a simple image not wrapped in a figure element", () => {
+    render(<Image src="test.png" alt="" />);
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.queryByRole("figure")).not.toBeInTheDocument();
   });
 
-  it("Shows Image wrapped in figure when provided ImageCaption", () => {
-    const utils = render(
-      <Image src="test.png" imageCaption="caption" alt="" />
-    );
+  it("renders an image wrapped in figure when provided a caption", () => {
+    render(<Image src="test.png" imageCaption="caption" alt="" />);
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getByRole("figure")).toBeInTheDocument();
     expect(screen.getByText("caption")).toBeInTheDocument();
-    expect(utils.container.querySelector(".figure")).toBeInTheDocument();
   });
 
-  it("Shows Image wrapped in figure when provided ImageCredit", () => {
-    const utils = render(<Image src="test.png" imageCredit="credit" alt="" />);
-
+  it("renders an image wrapped in figure when provided an image credit", () => {
+    render(<Image src="test.png" imageCredit="credit" alt="" />);
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getByRole("figure")).toBeInTheDocument();
     expect(screen.getByText("credit")).toBeInTheDocument();
-    expect(utils.container.querySelector(".figure")).toBeInTheDocument();
-    expect(
-      utils.container.querySelector(".figcaption__credit")
-    ).toBeInTheDocument();
   });
 
-  it("Shows Image wrapped in figure with credit and caption when provided ImageCredit and ImageCaption", () => {
-    const utils = render(
+  it("renders an image wrapped in figure with credit and caption", () => {
+    render(
       <Image
         src="test.png"
         imageCaption="caption"
@@ -47,20 +57,112 @@ describe("Image", () => {
         alt=""
       />
     );
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getByRole("figure")).toBeInTheDocument();
     expect(screen.getByText("caption")).toBeInTheDocument();
     expect(screen.getByText("credit")).toBeInTheDocument();
-    expect(utils.container.querySelector(".figure")).toBeInTheDocument();
-    expect(
-      utils.container.querySelector(".figcaption__credit")
-    ).toBeInTheDocument();
-    expect(
-      utils.container.querySelector(".figcaption__caption")
-    ).toBeInTheDocument();
   });
 
-  it("Throws error when alt text is too long", () => {
+  it("throws error when alt text is too long", () => {
     expect(() =>
       render(<Image src="test.png" alt={tooManyChars} />)
     ).toThrowError("Alt Text must be less than 300 characters");
   });
+
+  it("Renders the UI snapshot correctly", () => {
+    const basic = renderer.create(<Image src="test.png" alt="" />).toJSON();
+    const figCaption = renderer
+      .create(<Image src="test.png" alt="" imageCaption="Caption" />)
+      .toJSON();
+    const sizeSmall = renderer
+      .create(<Image src="test.png" alt="" imageSize={ImageSizes.Small} />)
+      .toJSON();
+    const sizeMedium = renderer
+      .create(<Image src="test.png" alt="" imageSize={ImageSizes.Medium} />)
+      .toJSON();
+    const sizeLarge = renderer
+      .create(<Image src="test.png" alt="" imageSize={ImageSizes.Large} />)
+      .toJSON();
+    const ratioFourByThree = renderer
+      .create(
+        <Image
+          src="test.png"
+          alt=""
+          imageAspectRatio={ImageRatios.FourByThree}
+        />
+      )
+      .toJSON();
+    const ratioOneByTwo = renderer
+      .create(
+        <Image src="test.png" alt="" imageAspectRatio={ImageRatios.OneByTwo} />
+      )
+      .toJSON();
+    const ratioOriginal = renderer
+      .create(
+        <Image src="test.png" alt="" imageAspectRatio={ImageRatios.Original} />
+      )
+      .toJSON();
+    const ratioSixteenByNine = renderer
+      .create(
+        <Image
+          src="test.png"
+          alt=""
+          imageAspectRatio={ImageRatios.SixteenByNine}
+        />
+      )
+      .toJSON();
+    const ratioSquare = renderer
+      .create(
+        <Image src="test.png" alt="" imageAspectRatio={ImageRatios.Square} />
+      )
+      .toJSON();
+    const ratioThreeByFour = renderer
+      .create(
+        <Image
+          src="test.png"
+          alt=""
+          imageAspectRatio={ImageRatios.ThreeByFour}
+        />
+      )
+      .toJSON();
+    const ratioThreeByTwo = renderer
+      .create(
+        <Image
+          src="test.png"
+          alt=""
+          imageAspectRatio={ImageRatios.ThreeByTwo}
+        />
+      )
+      .toJSON();
+    const ratioTwoByOne = renderer
+      .create(
+        <Image src="test.png" alt="" imageAspectRatio={ImageRatios.TwoByOne} />
+      )
+      .toJSON();
+    const typeCircle = renderer
+      .create(
+        <Image
+          src="test.png"
+          alt=""
+          imageAspectRatio={ImageRatios.Square}
+          imageSize={ImageSizes.Small}
+          imageType={ImageTypes.Circle}
+        />
+      )
+      .toJSON();
+    expect(basic).toMatchSnapshot();
+    expect(figCaption).toMatchSnapshot();
+    expect(sizeSmall).toMatchSnapshot();
+    expect(sizeMedium).toMatchSnapshot();
+    expect(sizeLarge).toMatchSnapshot();
+    expect(ratioFourByThree).toMatchSnapshot();
+    expect(ratioOneByTwo).toMatchSnapshot();
+    expect(ratioOriginal).toMatchSnapshot();
+    expect(ratioSixteenByNine).toMatchSnapshot();
+    expect(ratioSquare).toMatchSnapshot();
+    expect(ratioThreeByFour).toMatchSnapshot();
+    expect(ratioThreeByTwo).toMatchSnapshot();
+    expect(ratioTwoByOne).toMatchSnapshot();
+    expect(typeCircle).toMatchSnapshot();
+  });
 });

package/src/components/Image/Image.tsx

@@ -1,84 +1,112 @@
-// Images
 import * as React from "react";
-import bem from "../../utils/bem";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
-export interface ImageProps {
-  /** Text description of the image */
-  alt: string;
-  /** Additional attributes passed to the image */
-  attributes?: { [key: string]: any };
+import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 
-  /** BlockName for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
+interface ImageWrapperProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** 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?: ImageRatios;
+  /** Optional value to control the size of the image */
+  imageSize?: ImageSizes;
+}
+
+export interface ImageProps extends ImageWrapperProps {
+  /** Alternate text description of the image */
+  alt: string;
+  /** Custom image component */
+  component?: JSX.Element | null;
   /** Adding will wrap the image in a <figure> */
   imageCaption?: string;
   /** Adding will wrap the image in a <figure> */
   imageCredit?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
+  /** Optional value to control the size of the image */
+  imageSize?: ImageSizes;
+  /** Optional value for the image type */
+  imageType?: ImageTypes;
   /** The src attribute is required, and contains the path to the image you want to embed. */
   src: string;
 }
 
+function ImageWrapper(props: React.PropsWithChildren<ImageWrapperProps>) {
+  const {
+    additionalStyles = {},
+    className = "",
+    children,
+    imageAspectRatio = ImageRatios.Original,
+    imageSize = ImageSizes.Default,
+  } = props;
+  const styles = useMultiStyleConfig("CustomImageWrapper", {
+    ratio: imageAspectRatio,
+    size: imageSize,
+  });
+  return (
+    <Box
+      __css={{ ...styles, ...additionalStyles }}
+      className={`the-wrap ${className}`}
+    >
+      <Box __css={styles.crop} className="the-crop">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
 export default function Image(props: React.ComponentProps<"img"> & ImageProps) {
-  const baseClass = "image";
   const {
+    additionalStyles = {},
     alt,
-    attributes,
-    blockName,
-    className,
+    className = "",
+    component,
+    imageAspectRatio = ImageRatios.Original,
     imageCaption,
     imageCredit,
-    modifiers = [],
+    imageSize = ImageSizes.Default,
+    imageType = ImageTypes.Default,
     src,
-    ...imgHTMLProps
   } = props;
+  const useImageWrapper = imageAspectRatio !== ImageRatios.Original;
+  const styles = useMultiStyleConfig("CustomImage", {
+    variant: imageType,
+    size: imageSize,
+  });
 
   if (alt && alt.length > 300) {
     throw new Error("Alt Text must be less than 300 characters");
   }
 
-  const figureBlockName = imageCaption || imageCredit ? "figure" : blockName;
-
-  const imageProps: ImageProps = {
-    className: bem(baseClass, modifiers, figureBlockName, [className]),
-    src: src,
-    alt: alt,
-  };
+  const imageComponent: JSX.Element = component ? (
+    component
+  ) : (
+    <Box as="img" src={src} alt={alt} __css={styles.img} />
+  );
+  const finalImage = useImageWrapper ? (
+    <ImageWrapper
+      className={className}
+      imageAspectRatio={imageAspectRatio}
+      imageSize={imageSize}
+      additionalStyles={additionalStyles}
+    >
+      {imageComponent}
+    </ImageWrapper>
+  ) : (
+    imageComponent
+  );
 
-  return (
-    <>
-      {imageCaption || imageCredit ? (
-        <figure className={bem("figure")}>
-          <img
-            alt={imageProps.alt}
-            {...imageProps}
-            {...imgHTMLProps}
-            {...attributes}
-          />
-          <figcaption className={bem("figcaption", [], "figure", ["image"])}>
-            {imageCaption && (
-              <div className={bem("caption", [], "figcaption")}>
-                {imageCaption}
-              </div>
-            )}
-            {imageCredit && (
-              <div className={bem("credit", [], "figcaption")}>
-                {imageCredit}
-              </div>
-            )}
-          </figcaption>
-        </figure>
-      ) : (
-        <img
-          alt={imageProps.alt}
-          {...imageProps}
-          {...imgHTMLProps}
-          {...attributes}
-        />
-      )}
-    </>
+  return imageCaption || imageCredit ? (
+    <Box as="figure" __css={styles.figure}>
+      {finalImage}
+      <Box as="figcaption" __css={styles.figcaption}>
+        {imageCaption && (
+          <Box __css={styles.captionWrappers}>{imageCaption}</Box>
+        )}
+        {imageCredit && <Box __css={styles.captionWrappers}>{imageCredit}</Box>}
+      </Box>
+    </Box>
+  ) : (
+    finalImage
   );
 }

package/src/components/Image/ImageTypes.ts

@@ -0,0 +1,22 @@
+export enum ImageRatios {
+  FourByThree = "fourByThree",
+  OneByTwo = "oneByTwo",
+  Original = "original",
+  SixteenByNine = "sixteenByNine",
+  Square = "square",
+  ThreeByFour = "threeByFour",
+  ThreeByTwo = "threeByTwo",
+  TwoByOne = "twoByOne",
+}
+
+export enum ImageSizes {
+  Default = "default",
+  Large = "large",
+  Medium = "medium",
+  Small = "small",
+}
+
+export enum ImageTypes {
+  Default = "default",
+  Circle = "circle",
+}

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

@@ -0,0 +1,190 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image Renders the UI snapshot correctly 1`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 2`] = `
+<figure
+  className="css-0"
+>
+  <img
+    alt=""
+    className="css-0"
+    src="test.png"
+  />
+  <figcaption
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      Caption
+    </div>
+  </figcaption>
+</figure>
+`;
+
+exports[`Image Renders the UI snapshot correctly 3`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 4`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 5`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 6`] = `
+<div
+  className="the-wrap  css-0"
+>
+  <div
+    className="the-crop css-0"
+  >
+    <img
+      alt=""
+      className="css-0"
+      src="test.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Image Renders the UI snapshot correctly 7`] = `
+<div
+  className="the-wrap  css-0"
+>
+  <div
+    className="the-crop css-0"
+  >
+    <img
+      alt=""
+      className="css-0"
+      src="test.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Image Renders the UI snapshot correctly 8`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 9`] = `
+<div
+  className="the-wrap  css-0"
+>
+  <div
+    className="the-crop css-0"
+  >
+    <img
+      alt=""
+      className="css-0"
+      src="test.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Image Renders the UI snapshot correctly 10`] = `
+<div
+  className="the-wrap  css-0"
+>
+  <div
+    className="the-crop css-0"
+  >
+    <img
+      alt=""
+      className="css-0"
+      src="test.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Image Renders the UI snapshot correctly 11`] = `
+<div
+  className="the-wrap  css-0"
+>
+  <div
+    className="the-crop css-0"
+  >
+    <img
+      alt=""
+      className="css-0"
+      src="test.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Image Renders the UI snapshot correctly 12`] = `
+<div
+  className="the-wrap  css-0"
+>
+  <div
+    className="the-crop css-0"
+  >
+    <img
+      alt=""
+      className="css-0"
+      src="test.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Image Renders the UI snapshot correctly 13`] = `
+<div
+  className="the-wrap  css-0"
+>
+  <div
+    className="the-crop css-0"
+  >
+    <img
+      alt=""
+      className="css-0"
+      src="test.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Image Renders the UI snapshot correctly 14`] = `
+<div
+  className="the-wrap  css-0"
+>
+  <div
+    className="the-crop css-0"
+  >
+    <img
+      alt=""
+      className="css-0"
+      src="test.png"
+    />
+  </div>
+</div>
+`;