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

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

@@ -2,13 +2,13 @@
 
 exports[`HorizontalRule renders the UI snapshot correctly 1`] = `
 <hr
-  className="css-ili6fu"
+  className="css-1bhbd2a"
 />
 `;
 
 exports[`HorizontalRule renders the UI snapshot correctly 2`] = `
 <hr
-  className="css-1pwp4fu"
+  className="css-154goob"
 />
 `;
 
@@ -20,12 +20,12 @@ exports[`HorizontalRule renders the UI snapshot correctly 3`] = `
 
 exports[`HorizontalRule renders the UI snapshot correctly 4`] = `
 <hr
-  className="css-ili6fu"
+  className="css-1bhbd2a"
 />
 `;
 
 exports[`HorizontalRule renders the UI snapshot correctly 5`] = `
 <hr
-  className="css-ili6fu"
+  className="css-1bhbd2a"
 />
 `;

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")}
@@ -33,9 +46,41 @@ import { getCategory } from "../../utils/componentCategories";
     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" } },
+    },
   }}
 />
 
@@ -44,68 +89,41 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.8`   |
 
 <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.
@@ -146,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}`,
     })
   );
 }
@@ -169,7 +183,7 @@ for (const iconColor in IconColors) {
   colors.push(
     iconRow("Download", IconNames, {
       color: IconColors[iconColor],
-      displayValue: iconColor,
+      displayValue: `IconColors.${iconColor}`,
     })
   );
 }
@@ -177,7 +191,7 @@ for (const iconSize in IconSizes) {
   sizes.push(
     iconRow("Arrow", IconNames, {
       size: IconSizes[iconSize],
-      displayValue: iconSize,
+      displayValue: `IconSizes.${iconSize}`,
     })
   );
 }
@@ -239,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.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,

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",
-}