@nypl/design-system-react-components 0.25.5 → 0.25.9

package/src/components/Icons/IconSvgs.tsx

@@ -5,8 +5,8 @@ import action_check_circle from "../../../icons/svg/action_check_circle.svg";
 import action_help_default from "../../../icons/svg/action_help_default.svg";
 import action_help_outline from "../../../icons/svg/action_help_outline.svg";
 import action_launch from "../../../icons/svg/action_launch.svg";
+import alert_notification_important from "../../../icons/svg/alert_notification_important.svg";
 import arrow from "../../../icons/svg/arrow.svg";
-import brooklyn from "../../../icons/svg/brooklyn.svg";
 import check from "../../../icons/svg/check.svg";
 import clock from "../../../icons/svg/clock.svg";
 import close from "../../../icons/svg/close.svg";
@@ -21,29 +21,9 @@ import download from "../../../icons/svg/download.svg";
 import error_filled from "../../../icons/svg/error_filled.svg";
 import error_outline from "../../../icons/svg/error_outline.svg";
 import headset from "../../../icons/svg/headset.svg";
-import logo_brooklyn from "../../../icons/svg/logo_brooklynpl.svg";
-import logo_nypl from "../../../icons/svg/logo_nypl.svg";
-import logo_nypl_negative from "../../../icons/svg/logo_nypl_negative.svg";
-import logo_queens from "../../../icons/svg/logo_queenspl.svg";
-import lpa_negative from "../../../icons/svg/lpa_negative.svg";
-import lpa_positive from "../../../icons/svg/lpa_positive.svg";
 import minus from "../../../icons/svg/minus.svg";
-import nypl_circle_negative from "../../../icons/svg/nypl_circle_negative.svg";
-import nypl_circle_positive from "../../../icons/svg/nypl_circle_positive.svg";
-import nypl_full_lock_up_negative from "../../../icons/svg/nypl_full_lock_up_negative.svg";
-import nypl_full_lock_up from "../../../icons/svg/nypl_full_lock_up.svg";
-import nypl_no_lion_negative from "../../../icons/svg/nypl_no_lion_negative.svg";
-import nypl_no_lion_positive from "../../../icons/svg/nypl_no_lion_positive.svg";
 import plus from "../../../icons/svg/plus.svg";
-import queens_long from "../../../icons/svg/queens_long.svg";
-import queens_stacked from "../../../icons/svg/queens_stacked.svg";
-import schomburg_circle from "../../../icons/svg/schomburg_circle.svg";
-import schomburg_positive from "../../../icons/svg/schomburg_positive.svg";
 import search from "../../../icons/svg/search.svg";
-import simplye_black from "../../../icons/svg/simplye_black.svg";
-import simplye_color from "../../../icons/svg/simplye_color.svg";
-import snfl_negative from "../../../icons/svg/snfl_negative.svg";
-import snfl_positive from "../../../icons/svg/snfl_positive.svg";
 import speaker_notes from "../../../icons/svg/speaker_notes.svg";
 import utility_account_filled from "../../../icons/svg/utility_account_filled.svg";
 import utility_account_unfilled from "../../../icons/svg/utility_account_unfilled.svg";
@@ -57,8 +37,8 @@ export default {
   action_help_default,
   action_help_outline,
   action_launch,
+  alert_notification_important,
   arrow,
-  brooklyn,
   check,
   clock,
   close,
@@ -73,29 +53,9 @@ export default {
   file_type_spreadsheet,
   file_type_video,
   headset,
-  logo_brooklyn,
-  logo_nypl,
-  logo_nypl_negative,
-  logo_queens,
-  lpa_negative,
-  lpa_positive,
   minus,
-  nypl_circle_negative,
-  nypl_circle_positive,
-  nypl_full_lock_up_negative,
-  nypl_full_lock_up,
-  nypl_no_lion_negative,
-  nypl_no_lion_positive,
   plus,
-  queens_long,
-  queens_stacked,
-  schomburg_circle,
-  schomburg_positive,
   search,
-  simplye_black,
-  simplye_color,
-  snfl_negative,
-  snfl_positive,
   speaker_notes,
   utility_account_filled,
   utility_account_unfilled,

package/src/components/Icons/IconTypes.tsx

@@ -52,6 +52,7 @@ export enum IconNames {
   ActionCheckCircle = "action_check_circle",
   ActionHelpDefault = "action_help_default",
   ActionHelpOutline = "action_help_outline",
+  AlertNotificationImportant = "alert_notification_important",
   ActionLaunch = "action_launch",
   Arrow = "arrow",
   Check = "check",
@@ -77,27 +78,3 @@ export enum IconNames {
   UtilityHamburger = "utility_hamburger",
   UtilitySearch = "utility_search",
 }
-
-export enum LogoNames {
-  Brooklyn = "brooklyn",
-  LogoBrooklyn = "logo_brooklyn",
-  LogoNypl = "logo_nypl",
-  LogoNyplNegative = "logo_nypl_negative",
-  LogoQueens = "logo_queens",
-  LpaNegative = "lpa_negative",
-  LpaPositive = "lpa_positive",
-  NyplCircleNegative = "nypl_circle_negative",
-  NyplCirclePositive = "nypl_circle_positive",
-  NyplFullLockUpNegative = "nypl_full_lock_up_negative",
-  NyplFullLockUp = "nypl_full_lock_up",
-  NyplNoLionNegative = "nypl_no_lion_negative",
-  NyplNoLionPositive = "nypl_no_lion_positive",
-  QueensLong = "queens_long",
-  QueensStacked = "queens_stacked",
-  SchomburgCircle = "schomburg_circle",
-  SchomburgPositive = "schomburg_positive",
-  SimplyeBlack = "simplye_black",
-  SimplyeColor = "simplye_color",
-  SnflNegative = "snfl_negative",
-  SnflPositive = "snfl_positive",
-}

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 {