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

package/src/components/Icons/Icon.stories.mdx

@@ -1,25 +1,38 @@
 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 Icon from "./Icon";
 import {
   IconAlign,
-  IconNames,
-  LogoNames,
   IconColors,
-  IconSizes,
+  IconNames,
   IconRotationTypes,
+  IconSizes,
+  IconTypes,
 } from "./IconTypes";
 import iconSvgs from "./IconSvgs";
 import List from "../List/List";
 import { ListTypes } from "../List/ListTypes";
 import { getCategory } from "../../utils/componentCategories";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const alignEnumValues = getStorybookEnumValues(IconAlign, "IconAlign");
+export const namesEnumValues = getStorybookEnumValues(IconNames, "IconNames");
+export const colorsEnumValues = getStorybookEnumValues(
+  IconColors,
+  "IconColors"
+);
+export const sizesEnumValues = getStorybookEnumValues(IconSizes, "IconSizes");
+export const rotationEnumValues = getStorybookEnumValues(
+  IconRotationTypes,
+  "IconRotationTypes"
+);
 
 <Meta
   title={getCategory("Icon")}
@@ -28,15 +41,46 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A3945",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A3945",
     },
     jest: ["Icon.test.tsx"],
   }}
   argTypes={{
+    align: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "IconAlign.None" } },
+      options: alignEnumValues.options,
+    },
     children: { table: { disable: true } },
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    className: { control: false },
+    color: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "IconColors.UiBlack" } },
+      options: colorsEnumValues.options,
+    },
+    iconRotation: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "IconRotationTypes.Rotate0" } },
+      options: rotationEnumValues.options,
+    },
+    id: { control: false },
+    name: {
+      control: { type: "select" },
+      options: namesEnumValues.options,
+    },
+    size: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "IconSizes.Medium" } },
+      options: sizesEnumValues.options,
+    },
+    title: {
+      control: false,
+      table: { defaultValue: { summary: "`${name} icon`" } },
+    },
+    type: {
+      control: false,
+      table: { defaultValue: { summary: "IconTypes.Default" } },
+    },
   }}
 />
 
@@ -45,68 +89,41 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.11`  |
 
 <Description of={Icon} />
 
 <Canvas withToolbar>
   <Story
-    name="Icon Props Control"
+    name="Icon with Controls"
     args={{
-      align: "None",
-      color: "UiBlack",
+      additionalStyles: undefined,
+      align: "IconAlign.None",
+      className: undefined,
+      color: "IconColors.UiBlack",
       decorative: true,
-      iconRotation: "Rotate0",
-      name: "Check",
-      size: "ExtraLarge",
-    }}
-    argTypes={{
-      align: {
-        control: {
-          type: "select",
-        },
-        options: Object.keys(IconAlign),
-      },
-      color: {
-        control: {
-          type: "select",
-        },
-        options: Object.keys(IconColors),
-      },
-      iconRotation: {
-        control: {
-          type: "select",
-        },
-        options: Object.keys(IconRotationTypes),
-      },
-      name: {
-        control: {
-          type: "select",
-        },
-        options: Object.keys(IconNames),
-      },
-      size: {
-        control: {
-          type: "select",
-        },
-        options: Object.keys(IconSizes),
-      },
+      iconRotation: "IconRotationTypes.Rotate0",
+      id: "icon-id",
+      name: "IconNames.Check",
+      size: "IconSizes.ExtraLarge",
+      title: undefined,
+      type: IconTypes.Default,
     }}
   >
     {(args) => (
       <Icon
-        align={IconAlign[args.align]}
-        color={IconColors[args.color]}
-        iconRotation={IconRotationTypes[args.iconRotation]}
-        name={IconNames[args.name]}
-        size={IconSizes[args.size]}
+        align={alignEnumValues.getValue(args.align)}
+        color={colorsEnumValues.getValue(args.color)}
+        iconRotation={rotationEnumValues.getValue(args.iconRotation)}
+        name={namesEnumValues.getValue(args.name)}
+        size={sizesEnumValues.getValue(args.size)}
         title={args.title}
       />
     )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Icon Props Control" />
+<ArgsTable story="Icon with Controls" />
 
 export const iconRow = (icon, iconType = IconNames, opts = {}) => {
   // We'll use this setup function to render all the icons in a list item.
@@ -147,22 +164,18 @@ export const iconRow = (icon, iconType = IconNames, opts = {}) => {
   );
 };
 export const icons = [];
-export const logos = [];
 export const rotations = [];
 export const colors = [];
 export const sizes = [];
 for (const icon in IconNames) {
-  icons.push(iconRow(icon, IconNames));
-}
-for (const logo in LogoNames) {
-  logos.push(iconRow(logo, LogoNames, { iconSize: IconSizes.ExtraLarge }));
+  icons.push(iconRow(icon, IconNames, { displayValue: `IconNames.${icon}` }));
 }
 for (const iconRotation in IconRotationTypes) {
   rotations.push(
     iconRow("Arrow", IconNames, {
       size: IconSizes.Large,
       iconRotation: IconRotationTypes[iconRotation],
-      displayValue: iconRotation,
+      displayValue: `IconRotationTypes.${iconRotation}`,
     })
   );
 }
@@ -170,7 +183,7 @@ for (const iconColor in IconColors) {
   colors.push(
     iconRow("Download", IconNames, {
       color: IconColors[iconColor],
-      displayValue: iconColor,
+      displayValue: `IconColors.${iconColor}`,
     })
   );
 }
@@ -178,7 +191,7 @@ for (const iconSize in IconSizes) {
   sizes.push(
     iconRow("Arrow", IconNames, {
       size: IconSizes[iconSize],
-      displayValue: iconSize,
+      displayValue: `IconSizes.${iconSize}`,
     })
   );
 }
@@ -240,25 +253,13 @@ The `IconSizes` enum can be found in`src/components/Icons/IconTypes.tsx`.
 
 ## All Display Icons
 
-The following icons are for generic purposes. All the available logo names can
+The following icons are for generic purposes. All the available icon names can
 be found in the `IconNames` enum in `src/components/Icons/IconTypes.tsx`.
 
 <Canvas withToolbar>
   <Story name="All Display Icons">{allIconsType(icons)}</Story>
 </Canvas>
 
-## All Logo Icons
-
-_Note: this is a work in progress_
-
-The following icons are meant to be used for logos for different libraries
-and products. All the available logo names can
-be found in the `LogoNames` enum in `src/components/Icons/IconTypes.tsx`.
-
-<Canvas withToolbar>
-  <Story name="All Logo Icons">{allIconsType(logos)}</Story>
-</Canvas>
-
 ## Custom Icons
 
 If you'd like to pass a custom svg to your application, you can pass it a

package/src/components/Icons/Icon.test.tsx

@@ -35,7 +35,7 @@ describe("Icon", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Icon />);
     expect(warn).toHaveBeenCalledWith(
-      "Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears."
+      "Icon: Pass an icon `name` prop or an SVG child to ensure an icon appears."
     );
   });
 

package/src/components/Icons/Icon.tsx

@@ -9,7 +9,6 @@ import {
   IconRotationTypes,
   IconSizes,
   IconTypes,
-  LogoNames,
 } from "./IconTypes";
 import iconSvgs from "./IconSvgs";
 
@@ -18,7 +17,7 @@ export interface IconProps {
   additionalStyles?: { [key: string]: any };
   /** Aligns the icon. */
   align?: IconAlign;
-  /** className that appears in addition to "icon" */
+  /** Optional className that will be added to the parent element */
   className?: string;
   /** Overrides default icon color (black). */
   color?: IconColors;
@@ -30,14 +29,14 @@ export interface IconProps {
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** The name of the icon you want to use. */
-  name?: IconNames | LogoNames;
+  name?: IconNames;
   /** Sets the icon size. */
   size?: IconSizes;
   /** For accessibility purposes, the text passed in the `title` prop gets
    * rendered in a `title` element in the SVG. This descriptive text is not
    * visible but is needed for screenreaders to describe the graphic. */
   title?: string;
-  /** Sets the icon variant type. */
+  /** FOR INTERNAL DS USE ONLY: the icon variant to display. */
   type?: IconTypes;
 }
 
@@ -47,7 +46,7 @@ export interface IconProps {
 export default function Icon(props: React.PropsWithChildren<IconProps>) {
   const {
     additionalStyles = {},
-    align = "none",
+    align = IconAlign.None,
     children,
     className,
     color = IconColors.UiBlack,
@@ -83,7 +82,7 @@ export default function Icon(props: React.PropsWithChildren<IconProps>) {
     return null;
   } else if (!name && !children) {
     console.warn(
-      "Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears."
+      "Icon: Pass an icon `name` prop or an SVG child to ensure an icon appears."
     );
     return null;
   }

package/src/components/Icons/IconSvgs.tsx

@@ -7,7 +7,6 @@ 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";
@@ -22,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";
@@ -60,7 +39,6 @@ export default {
   action_launch,
   alert_notification_important,
   arrow,
-  brooklyn,
   check,
   clock,
   close,
@@ -75,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

@@ -78,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,18 +1,26 @@
+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",
@@ -28,15 +36,43 @@ export const imageBlockStyles = {
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
     },
     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.",
+    },
   }}
 />
 
@@ -45,7 +81,7 @@ export const imageBlockStyles = {
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.6`    |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Image} />
 
@@ -56,22 +92,34 @@ export const imageBlockStyles = {
 
 <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
 

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 && (