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

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

@@ -14,7 +14,7 @@ describe("Image Accessibility", () => {
 
   it("passes axe accessibility for figure element wrapper", async () => {
     const { container } = render(
-      <Image src="test.png" alt="" imageCaption="This is a caption" />
+      <Image src="test.png" alt="" caption="This is a caption" />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -35,28 +35,21 @@ describe("Image", () => {
   });
 
   it("renders an image wrapped in figure when provided a caption", () => {
-    render(<Image src="test.png" imageCaption="caption" alt="" />);
+    render(<Image src="test.png" caption="caption" alt="" />);
     expect(screen.getByRole("img")).toBeInTheDocument();
     expect(screen.getByRole("figure")).toBeInTheDocument();
     expect(screen.getByText("caption")).toBeInTheDocument();
   });
 
   it("renders an image wrapped in figure when provided an image credit", () => {
-    render(<Image src="test.png" imageCredit="credit" alt="" />);
+    render(<Image src="test.png" credit="credit" alt="" />);
     expect(screen.getByRole("img")).toBeInTheDocument();
     expect(screen.getByRole("figure")).toBeInTheDocument();
     expect(screen.getByText("credit")).toBeInTheDocument();
   });
 
   it("renders an image wrapped in figure with credit and caption", () => {
-    render(
-      <Image
-        src="test.png"
-        imageCaption="caption"
-        imageCredit="credit"
-        alt=""
-      />
-    );
+    render(<Image src="test.png" caption="caption" credit="credit" alt="" />);
     expect(screen.getByRole("img")).toBeInTheDocument();
     expect(screen.getByRole("figure")).toBeInTheDocument();
     expect(screen.getByText("caption")).toBeInTheDocument();
@@ -66,85 +59,73 @@ describe("Image", () => {
   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");
+    ).toThrowError(
+      "NYPL Reservoir Image: 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" />)
+      .create(<Image src="test.png" alt="" caption="Caption" />)
+      .toJSON();
+    const figCredit = renderer
+      .create(<Image src="test.png" alt="" credit="Credit" />)
+      .toJSON();
+    const figCaptionCredit = renderer
+      .create(<Image src="test.png" alt="" caption="Caption" credit="Credit" />)
       .toJSON();
     const sizeExtraExtraSmall = renderer
-      .create(
-        <Image src="test.png" alt="" imageSize={ImageSizes.ExtraExtraSmall} />
-      )
+      .create(<Image src="test.png" alt="" size={ImageSizes.ExtraExtraSmall} />)
       .toJSON();
     const sizeExtraSmall = renderer
-      .create(<Image src="test.png" alt="" imageSize={ImageSizes.ExtraSmall} />)
+      .create(<Image src="test.png" alt="" size={ImageSizes.ExtraSmall} />)
       .toJSON();
     const sizeSmall = renderer
-      .create(<Image src="test.png" alt="" imageSize={ImageSizes.Small} />)
+      .create(<Image src="test.png" alt="" size={ImageSizes.Small} />)
       .toJSON();
     const sizeMedium = renderer
-      .create(<Image src="test.png" alt="" imageSize={ImageSizes.Medium} />)
+      .create(<Image src="test.png" alt="" size={ImageSizes.Medium} />)
       .toJSON();
     const sizeLarge = renderer
-      .create(<Image src="test.png" alt="" imageSize={ImageSizes.Large} />)
+      .create(<Image src="test.png" alt="" size={ImageSizes.Large} />)
       .toJSON();
     const ratioFourByThree = renderer
       .create(
-        <Image
-          src="test.png"
-          alt=""
-          imageAspectRatio={ImageRatios.FourByThree}
-        />
+        <Image src="test.png" alt="" aspectRatio={ImageRatios.FourByThree} />
       )
       .toJSON();
     const ratioOneByTwo = renderer
       .create(
-        <Image src="test.png" alt="" imageAspectRatio={ImageRatios.OneByTwo} />
+        <Image src="test.png" alt="" aspectRatio={ImageRatios.OneByTwo} />
       )
       .toJSON();
     const ratioOriginal = renderer
       .create(
-        <Image src="test.png" alt="" imageAspectRatio={ImageRatios.Original} />
+        <Image src="test.png" alt="" aspectRatio={ImageRatios.Original} />
       )
       .toJSON();
     const ratioSixteenByNine = renderer
       .create(
-        <Image
-          src="test.png"
-          alt=""
-          imageAspectRatio={ImageRatios.SixteenByNine}
-        />
+        <Image src="test.png" alt="" aspectRatio={ImageRatios.SixteenByNine} />
       )
       .toJSON();
     const ratioSquare = renderer
-      .create(
-        <Image src="test.png" alt="" imageAspectRatio={ImageRatios.Square} />
-      )
+      .create(<Image src="test.png" alt="" aspectRatio={ImageRatios.Square} />)
       .toJSON();
     const ratioThreeByFour = renderer
       .create(
-        <Image
-          src="test.png"
-          alt=""
-          imageAspectRatio={ImageRatios.ThreeByFour}
-        />
+        <Image src="test.png" alt="" aspectRatio={ImageRatios.ThreeByFour} />
       )
       .toJSON();
     const ratioThreeByTwo = renderer
       .create(
-        <Image
-          src="test.png"
-          alt=""
-          imageAspectRatio={ImageRatios.ThreeByTwo}
-        />
+        <Image src="test.png" alt="" aspectRatio={ImageRatios.ThreeByTwo} />
       )
       .toJSON();
     const ratioTwoByOne = renderer
       .create(
-        <Image src="test.png" alt="" imageAspectRatio={ImageRatios.TwoByOne} />
+        <Image src="test.png" alt="" aspectRatio={ImageRatios.TwoByOne} />
       )
       .toJSON();
     const typeCircle = renderer
@@ -152,14 +133,23 @@ describe("Image", () => {
         <Image
           src="test.png"
           alt=""
-          imageAspectRatio={ImageRatios.Square}
-          imageSize={ImageSizes.Small}
+          aspectRatio={ImageRatios.Square}
+          size={ImageSizes.Small}
           imageType={ImageTypes.Circle}
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(<Image src="test.png" alt="" p="20px" color="ui.error.primary" />)
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Image src="test.png" alt="" data-testid="image" />)
+      .toJSON();
+
     expect(basic).toMatchSnapshot();
     expect(figCaption).toMatchSnapshot();
+    expect(figCredit).toMatchSnapshot();
+    expect(figCaptionCredit).toMatchSnapshot();
     expect(sizeExtraExtraSmall).toMatchSnapshot();
     expect(sizeExtraSmall).toMatchSnapshot();
     expect(sizeSmall).toMatchSnapshot();
@@ -174,5 +164,7 @@ describe("Image", () => {
     expect(ratioThreeByTwo).toMatchSnapshot();
     expect(ratioTwoByOne).toMatchSnapshot();
     expect(typeCircle).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/Image/Image.tsx

@@ -1,17 +1,39 @@
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 
+// Used for components that have an `imageProps` prop.
+export interface ComponentImageProps {
+  /** 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. */
+  alt?: string;
+  /** Optional value to control the aspect ratio of the internal `Image` component.
+   * Defaults to `ImageRatios.Square`. */
+  aspectRatio?: ImageRatios;
+  /** Optional value to render as a caption for the internal `Image` component. */
+  caption?: string;
+  /** Optional DOM element to use instead of the DS `Image` component. */
+  component?: JSX.Element;
+  /** Optional value to render as a credit for the internal `Image` component. */
+  credit?: string;
+  /** Optional value to control the size of the internal `Image` component.
+   * Defaults to `ImageSizes.Medium`. */
+  size?: ImageSizes;
+  /** Optional value that contains the path to an image. If omitted, the internal
+   * DS `Image` component will not render. */
+  src?: string;
+}
+
 interface ImageWrapperProps {
   /** Optionally pass in additional Chakra-based styles. */
   additionalWrapperStyles?: { [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;
+  aspectRatio?: ImageRatios;
   /** Optional value to control the size of the image */
-  imageSize?: ImageSizes;
+  size?: ImageSizes;
 }
 
 export interface ImageProps extends ImageWrapperProps {
@@ -21,67 +43,72 @@ export interface ImageProps extends ImageWrapperProps {
   additionalImageStyles?: { [key: string]: any };
   /** Alternate text description of the image */
   alt: string;
+  /** Adding will wrap the image in a <figure> */
+  caption?: 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;
-  /** Optional value to control the size of the image */
-  imageSize?: ImageSizes;
+  credit?: string;
   /** 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 {
-    additionalWrapperStyles = {},
-    className = "",
-    children,
-    imageAspectRatio = ImageRatios.Original,
-    imageSize = ImageSizes.Default,
-  } = props;
-  const styles = useMultiStyleConfig("CustomImageWrapper", {
-    ratio: imageAspectRatio,
-    size: imageSize,
-  });
-  return (
-    <Box
-      className={`the-wrap ${className}`}
-      __css={{ ...styles, ...additionalWrapperStyles }}
-    >
-      <Box className="the-crop" __css={styles.crop}>
-        {children}
+const ImageWrapper = chakra(
+  (props: React.PropsWithChildren<ImageWrapperProps>) => {
+    const {
+      additionalWrapperStyles = {},
+      className = "",
+      children,
+      aspectRatio = ImageRatios.Original,
+      size = ImageSizes.Default,
+      ...rest
+    } = props;
+    const styles = useMultiStyleConfig("CustomImageWrapper", {
+      ratio: aspectRatio,
+      size,
+    });
+    return (
+      <Box
+        className={`the-wrap ${className}`}
+        __css={{ ...styles, ...additionalWrapperStyles }}
+        {...rest}
+      >
+        <Box className="the-crop" __css={styles.crop}>
+          {children}
+        </Box>
       </Box>
-    </Box>
-  );
-}
+    );
+  }
+);
 
-export default function Image(props: ImageProps) {
+export const Image = chakra((props: ImageProps) => {
   const {
     additionalFigureStyles = {},
     additionalImageStyles = {},
     additionalWrapperStyles = {},
     alt,
+    aspectRatio = ImageRatios.Original,
+    caption,
     className = "",
     component,
-    imageAspectRatio = ImageRatios.Original,
-    imageCaption,
-    imageCredit,
-    imageSize = ImageSizes.Default,
+    credit,
     imageType = ImageTypes.Default,
+    size = ImageSizes.Default,
     src,
+    ...rest
   } = props;
-  const useImageWrapper = imageAspectRatio !== ImageRatios.Original;
+  const useImageWrapper = aspectRatio !== ImageRatios.Original;
   const styles = useMultiStyleConfig("CustomImage", {
     variant: imageType,
-    size: imageSize,
+    size,
   });
 
   if (alt && alt.length > 300) {
-    throw new Error("Alt Text must be less than 300 characters");
+    throw new Error(
+      "NYPL Reservoir Image: Alt text must be less than 300 characters."
+    );
   }
 
   const imageComponent: JSX.Element = component ? (
@@ -96,10 +123,11 @@ export default function Image(props: ImageProps) {
   );
   const finalImage = useImageWrapper ? (
     <ImageWrapper
-      className={className}
-      imageAspectRatio={imageAspectRatio}
-      imageSize={imageSize}
       additionalWrapperStyles={additionalWrapperStyles}
+      aspectRatio={aspectRatio}
+      className={className}
+      size={size}
+      {...(caption || credit ? {} : rest)}
     >
       {imageComponent}
     </ImageWrapper>
@@ -107,17 +135,21 @@ export default function Image(props: ImageProps) {
     imageComponent
   );
 
-  return imageCaption || imageCredit ? (
-    <Box as="figure" __css={{ ...styles.figure, ...additionalFigureStyles }}>
+  return caption || credit ? (
+    <Box
+      as="figure"
+      __css={{ ...styles.figure, ...additionalFigureStyles }}
+      {...rest}
+    >
       {finalImage}
       <Box as="figcaption" __css={styles.figcaption}>
-        {imageCaption && (
-          <Box __css={styles.captionWrappers}>{imageCaption}</Box>
-        )}
-        {imageCredit && <Box __css={styles.captionWrappers}>{imageCredit}</Box>}
+        {caption && <Box __css={styles.captionWrappers}>{caption}</Box>}
+        {credit && <Box __css={styles.captionWrappers}>{credit}</Box>}
       </Box>
     </Box>
   ) : (
     finalImage
   );
-}
+});
+
+export default Image;

package/src/components/Image/ImageTypes.ts

@@ -11,11 +11,11 @@ export enum ImageRatios {
 
 export enum ImageSizes {
   Default = "default",
-  Large = "large",
-  Medium = "medium",
-  Small = "small",
-  ExtraSmall = "xsmall",
   ExtraExtraSmall = "xxsmall",
+  ExtraSmall = "xsmall",
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
 }
 
 export enum ImageTypes {

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

@@ -30,6 +30,53 @@ exports[`Image Renders the UI snapshot correctly 2`] = `
 `;
 
 exports[`Image Renders the UI snapshot correctly 3`] = `
+<figure
+  className="css-0"
+>
+  <img
+    alt=""
+    className="css-0"
+    src="test.png"
+  />
+  <figcaption
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      Credit
+    </div>
+  </figcaption>
+</figure>
+`;
+
+exports[`Image Renders the UI snapshot correctly 4`] = `
+<figure
+  className="css-0"
+>
+  <img
+    alt=""
+    className="css-0"
+    src="test.png"
+  />
+  <figcaption
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      Caption
+    </div>
+    <div
+      className="css-0"
+    >
+      Credit
+    </div>
+  </figcaption>
+</figure>
+`;
+
+exports[`Image Renders the UI snapshot correctly 5`] = `
 <img
   alt=""
   className="css-0"
@@ -37,7 +84,7 @@ exports[`Image Renders the UI snapshot correctly 3`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 4`] = `
+exports[`Image Renders the UI snapshot correctly 6`] = `
 <img
   alt=""
   className="css-0"
@@ -45,7 +92,7 @@ exports[`Image Renders the UI snapshot correctly 4`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 5`] = `
+exports[`Image Renders the UI snapshot correctly 7`] = `
 <img
   alt=""
   className="css-0"
@@ -53,7 +100,7 @@ exports[`Image Renders the UI snapshot correctly 5`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 6`] = `
+exports[`Image Renders the UI snapshot correctly 8`] = `
 <img
   alt=""
   className="css-0"
@@ -61,7 +108,7 @@ exports[`Image Renders the UI snapshot correctly 6`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 7`] = `
+exports[`Image Renders the UI snapshot correctly 9`] = `
 <img
   alt=""
   className="css-0"
@@ -69,9 +116,9 @@ exports[`Image Renders the UI snapshot correctly 7`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 8`] = `
+exports[`Image Renders the UI snapshot correctly 10`] = `
 <div
-  className="the-wrap  css-0"
+  className="the-wrap css-1u8qly9"
 >
   <div
     className="the-crop css-0"
@@ -85,9 +132,9 @@ exports[`Image Renders the UI snapshot correctly 8`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 9`] = `
+exports[`Image Renders the UI snapshot correctly 11`] = `
 <div
-  className="the-wrap  css-0"
+  className="the-wrap css-1u8qly9"
 >
   <div
     className="the-crop css-0"
@@ -101,7 +148,7 @@ exports[`Image Renders the UI snapshot correctly 9`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 10`] = `
+exports[`Image Renders the UI snapshot correctly 12`] = `
 <img
   alt=""
   className="css-0"
@@ -109,9 +156,9 @@ exports[`Image Renders the UI snapshot correctly 10`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 11`] = `
+exports[`Image Renders the UI snapshot correctly 13`] = `
 <div
-  className="the-wrap  css-0"
+  className="the-wrap css-1u8qly9"
 >
   <div
     className="the-crop css-0"
@@ -125,9 +172,9 @@ exports[`Image Renders the UI snapshot correctly 11`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 12`] = `
+exports[`Image Renders the UI snapshot correctly 14`] = `
 <div
-  className="the-wrap  css-0"
+  className="the-wrap css-1u8qly9"
 >
   <div
     className="the-crop css-0"
@@ -141,9 +188,9 @@ exports[`Image Renders the UI snapshot correctly 12`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 13`] = `
+exports[`Image Renders the UI snapshot correctly 15`] = `
 <div
-  className="the-wrap  css-0"
+  className="the-wrap css-1u8qly9"
 >
   <div
     className="the-crop css-0"
@@ -157,9 +204,9 @@ exports[`Image Renders the UI snapshot correctly 13`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 14`] = `
+exports[`Image Renders the UI snapshot correctly 16`] = `
 <div
-  className="the-wrap  css-0"
+  className="the-wrap css-1u8qly9"
 >
   <div
     className="the-crop css-0"
@@ -173,9 +220,9 @@ exports[`Image Renders the UI snapshot correctly 14`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 15`] = `
+exports[`Image Renders the UI snapshot correctly 17`] = `
 <div
-  className="the-wrap  css-0"
+  className="the-wrap css-1u8qly9"
 >
   <div
     className="the-crop css-0"
@@ -189,9 +236,9 @@ exports[`Image Renders the UI snapshot correctly 15`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 16`] = `
+exports[`Image Renders the UI snapshot correctly 18`] = `
 <div
-  className="the-wrap  css-0"
+  className="the-wrap css-1u8qly9"
 >
   <div
     className="the-crop css-0"
@@ -204,3 +251,19 @@ exports[`Image Renders the UI snapshot correctly 16`] = `
   </div>
 </div>
 `;
+
+exports[`Image Renders the UI snapshot correctly 19`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 20`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;