@nypl/design-system-react-components 0.25.7 → 0.25.10

package/src/components/Image/Image.stories.mdx

@@ -1,17 +1,33 @@
+import { VStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { VStack } from "@chakra-ui/react";
 
+import Heading from "../Heading/Heading";
 import Image from "./Image";
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
-import Heading from "../Heading/Heading";
+import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const ratiosEnumValues = getStorybookEnumValues(
+  ImageRatios,
+  "ImageRatios"
+);
+export const sizesEnumValues = getStorybookEnumValues(ImageSizes, "ImageSizes");
+export const typesEnumValues = getStorybookEnumValues(ImageTypes, "ImageTypes");
+
+export const imageBlockStyles = {
+  margin: "auto",
+  maxWidth: "360px",
+  textAlign: "center",
+  width: "100%",
+};
 
 <Meta
   title={getCategory("Image")}
@@ -25,9 +41,38 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Image.test.tsx"],
   }}
   argTypes={{
-    alt: { table: { disable: true } },
-    className: { table: { disable: true } },
-    component: { table: { disable: true } },
+    additionalFigureStyles: { control: false },
+    additionalImageStyles: { control: false },
+    additionalWrapperStyles: { control: false },
+    alt: {
+      control: false,
+      description:
+        "Alternate text description of the image. Needed for accessibility purposes.",
+    },
+    className: {
+      control: false,
+      description: "Additional class name for the component to use.",
+    },
+    component: { control: false },
+    imageAspectRatio: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "ImageRatios.Original" } },
+      options: ratiosEnumValues.options,
+    },
+    imageSize: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "ImageSizes.Default" } },
+      options: sizesEnumValues.options,
+    },
+    imageType: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "ImageTypes.Default" } },
+      options: typesEnumValues.options,
+    },
+    src: {
+      description:
+        "The src attribute is required, and contains the path to the image you want to embed.",
+    },
   }}
 />
 
@@ -36,7 +81,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.6`    |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Image} />
 
@@ -47,22 +92,34 @@ import { getCategory } from "../../utils/componentCategories";
 
 <Canvas>
   <Story
-    name="Image Props"
+    name="Image with Controls"
     args={{
+      additionalFigureStyles: undefined,
+      additionalImageStyles: undefined,
+      additionalWrapperStyles: undefined,
       alt: "Alt text",
-      imageAspectRatio: ImageRatios.TwoByOne,
+      className: undefined,
+      component: undefined,
+      imageAspectRatio: "ImageRatios.TwoByOne",
       imageCaption: "Image caption",
       imageCredit: "Image credit",
-      imageSize: ImageSizes.Medium,
-      imageType: ImageTypes.Default,
+      imageSize: "ImageSizes.Medium",
+      imageType: "ImageTypes.Default",
       src: "https://placeimg.com/400/300/animals",
     }}
   >
-    {(args) => <Image {...args} />}
+    {(args) => (
+      <Image
+        {...args}
+        imageAspectRatio={ratiosEnumValues.getValue(args.imageAspectRatio)}
+        imageSize={sizesEnumValues.getValue(args.imageSize)}
+        imageType={typesEnumValues.getValue(args.imageType)}
+      />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Image Props" />
+<ArgsTable story="Image with Controls" />
 
 ## Image Figure
 
@@ -102,28 +159,61 @@ Use the `ImageSizes` prop to set the desired size.
 
 <Canvas>
   <Story name="Image Sizes">
-    <VStack spacing="xs">
-      <Heading id="Small" text="ImageSizes.Small" />
-      <Image
-        alt="Alt text"
-        imageSize={ImageSizes.Small}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="Medium" text="ImageSizes.Medium" />
-      <Image
-        alt="Alt text"
-        imageSize={ImageSizes.Medium}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="Large" text="ImageSizes.Large" />
-      <Image
-        alt="Alt text"
-        imageSize={ImageSizes.Large}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="Default" text="ImageSizes.Default" />
-      <Image alt="Alt text" src="https://placeimg.com/400/300/animals" />
-    </VStack>
+    <SimpleGrid columns={1}>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="ExtraExtraSmall" text="ImageSizes.ExtraExtraSmall" />
+        <Image
+          alt="Alt text"
+          imageCaption="64px"
+          imageSize={ImageSizes.ExtraExtraSmall}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="ExtraSmall" text="ImageSizes.ExtraSmall" />
+        <Image
+          alt="Alt text"
+          imageCaption="96px"
+          imageSize={ImageSizes.ExtraSmall}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="Small" text="ImageSizes.Small" />
+        <Image
+          alt="Alt text"
+          imageCaption="165px"
+          imageSize={ImageSizes.Small}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="Medium" text="ImageSizes.Medium" />
+        <Image
+          alt="Alt text"
+          imageCaption="225px"
+          imageSize={ImageSizes.Medium}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="Large" text="ImageSizes.Large" />
+        <Image
+          alt="Alt text"
+          imageCaption="360px"
+          imageSize={ImageSizes.Large}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="Default" text="ImageSizes.Default" />
+        <Image
+          alt="Alt text"
+          imageCaption="100%"
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+    </SimpleGrid>
   </Story>
 </Canvas>
 
@@ -137,56 +227,72 @@ in an element with a fixed width value.
 
 <Canvas>
   <Story name="Image Aspect Ratios">
-    <VStack spacing="xs" maxWidth="360px" margin="auto">
-      <Heading id="fourbythree" text="ImageRatios.FourByThree" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.FourByThree}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="onebytwo" text="ImageRatios.OneByTwo" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.OneByTwo}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="original" text="ImageRatios.Original" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.Original}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="sixteenbynine" text="ImageRatios.SixteenByNine" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.SixteenByNine}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="square" text="ImageRatios.Square" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="threebyfour" text="ImageRatios.ThreeByFour" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.ThreeByFour}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="threebytwo" text="ImageRatios.ThreeByTwo" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.ThreeByTwo}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="twobyone" text="ImageRatios.TwoByOne" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        src="https://placeimg.com/400/300/animals"
-      />
-    </VStack>
+    <SimpleGrid columns={1}>
+      <div style={imageBlockStyles}>
+        <Heading id="fourbythree" text="ImageRatios.FourByThree" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.FourByThree}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="onebytwo" text="ImageRatios.OneByTwo" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.OneByTwo}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="original" text="ImageRatios.Original" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.Original}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="sixteenbynine" text="ImageRatios.SixteenByNine" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.SixteenByNine}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="square" text="ImageRatios.Square" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.Square}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="threebyfour" text="ImageRatios.ThreeByFour" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.ThreeByFour}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="threebytwo" text="ImageRatios.ThreeByTwo" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.ThreeByTwo}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="twobyone" text="ImageRatios.TwoByOne" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+    </SimpleGrid>
   </Story>
 </Canvas>
 
@@ -200,21 +306,25 @@ in an element with a fixed width value.
 
 <Canvas>
   <Story name="Image Types">
-    <VStack spacing="xs" maxWidth="360px" margin="auto">
-      <Heading id="default" text="ImageTypes.Default" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageType={ImageTypes.Default}
-        src="https://placeimg.com/400/400/animals"
-      />
-      <Heading id="circle" text="ImageTypes.Circle" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageType={ImageTypes.Circle}
-        src="https://placeimg.com/400/400/animals"
-      />
-    </VStack>
+    <SimpleGrid columns={1}>
+      <div style={imageBlockStyles}>
+        <Heading id="default" text="ImageTypes.Default" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.Square}
+          imageType={ImageTypes.Default}
+          src="https://placeimg.com/400/400/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="circle" text="ImageTypes.Circle" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.Square}
+          imageType={ImageTypes.Circle}
+          src="https://placeimg.com/400/400/animals"
+        />
+      </div>
+    </SimpleGrid>
   </Story>
 </Canvas>

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

@@ -74,6 +74,14 @@ describe("Image", () => {
     const figCaption = renderer
       .create(<Image src="test.png" alt="" imageCaption="Caption" />)
       .toJSON();
+    const sizeExtraExtraSmall = renderer
+      .create(
+        <Image src="test.png" alt="" imageSize={ImageSizes.ExtraExtraSmall} />
+      )
+      .toJSON();
+    const sizeExtraSmall = renderer
+      .create(<Image src="test.png" alt="" imageSize={ImageSizes.ExtraSmall} />)
+      .toJSON();
     const sizeSmall = renderer
       .create(<Image src="test.png" alt="" imageSize={ImageSizes.Small} />)
       .toJSON();
@@ -152,6 +160,8 @@ describe("Image", () => {
       .toJSON();
     expect(basic).toMatchSnapshot();
     expect(figCaption).toMatchSnapshot();
+    expect(sizeExtraExtraSmall).toMatchSnapshot();
+    expect(sizeExtraSmall).toMatchSnapshot();
     expect(sizeSmall).toMatchSnapshot();
     expect(sizeMedium).toMatchSnapshot();
     expect(sizeLarge).toMatchSnapshot();

package/src/components/Image/Image.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
 
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 
 interface ImageWrapperProps {
   /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
+  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` */
@@ -15,6 +15,10 @@ interface ImageWrapperProps {
 }
 
 export interface ImageProps extends ImageWrapperProps {
+  /** Optionally pass in additional Chakra-based styles only for the figure. */
+  additionalFigureStyles?: { [key: string]: any };
+  /** Optionally pass in additional Chakra-based styles only for the image. */
+  additionalImageStyles?: { [key: string]: any };
   /** Alternate text description of the image */
   alt: string;
   /** Custom image component */
@@ -33,7 +37,7 @@ export interface ImageProps extends ImageWrapperProps {
 
 function ImageWrapper(props: React.PropsWithChildren<ImageWrapperProps>) {
   const {
-    additionalStyles = {},
+    additionalWrapperStyles = {},
     className = "",
     children,
     imageAspectRatio = ImageRatios.Original,
@@ -45,19 +49,21 @@ function ImageWrapper(props: React.PropsWithChildren<ImageWrapperProps>) {
   });
   return (
     <Box
-      __css={{ ...styles, ...additionalStyles }}
       className={`the-wrap ${className}`}
+      __css={{ ...styles, ...additionalWrapperStyles }}
     >
-      <Box __css={styles.crop} className="the-crop">
+      <Box className="the-crop" __css={styles.crop}>
         {children}
       </Box>
     </Box>
   );
 }
 
-export default function Image(props: React.ComponentProps<"img"> & ImageProps) {
+export default function Image(props: ImageProps) {
   const {
-    additionalStyles = {},
+    additionalFigureStyles = {},
+    additionalImageStyles = {},
+    additionalWrapperStyles = {},
     alt,
     className = "",
     component,
@@ -81,14 +87,19 @@ export default function Image(props: React.ComponentProps<"img"> & ImageProps) {
   const imageComponent: JSX.Element = component ? (
     component
   ) : (
-    <Box as="img" src={src} alt={alt} __css={styles.img} />
+    <Box
+      as="img"
+      src={src}
+      alt={alt}
+      __css={{ ...styles.img, ...additionalImageStyles }}
+    />
   );
   const finalImage = useImageWrapper ? (
     <ImageWrapper
       className={className}
       imageAspectRatio={imageAspectRatio}
       imageSize={imageSize}
-      additionalStyles={additionalStyles}
+      additionalWrapperStyles={additionalWrapperStyles}
     >
       {imageComponent}
     </ImageWrapper>
@@ -97,7 +108,7 @@ export default function Image(props: React.ComponentProps<"img"> & ImageProps) {
   );
 
   return imageCaption || imageCredit ? (
-    <Box as="figure" __css={styles.figure}>
+    <Box as="figure" __css={{ ...styles.figure, ...additionalFigureStyles }}>
       {finalImage}
       <Box as="figcaption" __css={styles.figcaption}>
         {imageCaption && (

package/src/components/Image/ImageTypes.ts

@@ -14,6 +14,8 @@ export enum ImageSizes {
   Large = "large",
   Medium = "medium",
   Small = "small",
+  ExtraSmall = "xsmall",
+  ExtraExtraSmall = "xxsmall",
 }
 
 export enum ImageTypes {

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

@@ -54,6 +54,22 @@ exports[`Image Renders the UI snapshot correctly 5`] = `
 `;
 
 exports[`Image Renders the UI snapshot correctly 6`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 7`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 8`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -69,7 +85,7 @@ exports[`Image Renders the UI snapshot correctly 6`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 7`] = `
+exports[`Image Renders the UI snapshot correctly 9`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -85,7 +101,7 @@ exports[`Image Renders the UI snapshot correctly 7`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 8`] = `
+exports[`Image Renders the UI snapshot correctly 10`] = `
 <img
   alt=""
   className="css-0"
@@ -93,7 +109,7 @@ exports[`Image Renders the UI snapshot correctly 8`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 9`] = `
+exports[`Image Renders the UI snapshot correctly 11`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -109,7 +125,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`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -125,7 +141,7 @@ exports[`Image Renders the UI snapshot correctly 10`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 11`] = `
+exports[`Image Renders the UI snapshot correctly 13`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -141,7 +157,7 @@ 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"
 >
@@ -157,7 +173,7 @@ 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"
 >
@@ -173,7 +189,7 @@ 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"
 >

package/src/components/Label/Label.stories.mdx

@@ -1,11 +1,11 @@
+import { Box } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
-import { Box } from "@chakra-ui/react";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 
 import Label from "./Label";
 import { getCategory } from "../../utils/componentCategories";
@@ -17,8 +17,15 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Label.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    optReqFlag: {
+      control: { type: "select" },
+      options: ["Required", "Optional", ""],
+    },
+    text: {
+      description: "Only used for Storybook",
+    },
   }}
 />
 
@@ -27,32 +34,26 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Label} />
 
 <Canvas>
   <Story
-    name="Label"
+    name="Label with Controls"
     args={{
-      text: "A label for a villager.",
-      optReqFlag: "Required",
+      className: undefined,
       htmlFor: "id-of-input-element",
-    }}
-    argTypes={{
-      optReqFlag: {
-        control: {
-          type: "select",
-        },
-        options: ["Required", "Optional", ""],
-      },
+      id: "label-id",
+      optReqFlag: "Required",
+      text: "A label for a villager.",
     }}
   >
     {(args) => <Label {...args}>{args.text}</Label>}
   </Story>
 </Canvas>
 
-<ArgsTable story="Label" />
+<ArgsTable story="Label with Controls" />
 
 ## Required/Optional helper text