@nypl/design-system-react-components 0.26.1 → 1.0.0

package/src/components/Hero/Hero.tsx

@@ -1,9 +1,28 @@
 import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
-import { HeroTypes, HeroSecondaryTypes } from "./HeroTypes";
-import Image from "../Image/Image";
+import Image, { ComponentImageProps } from "../Image/Image";
 
+export type HeroTypes =
+  | "primary"
+  | "secondary"
+  | "secondaryBooksAndMore"
+  | "secondaryLocations"
+  | "secondaryResearch"
+  | "secondaryWhatsOn"
+  | "tertiary"
+  | "campaign"
+  | "fiftyFifty";
+// Only used for internal purposes.
+export const heroSecondaryTypes = [
+  "secondary",
+  "secondaryBooksAndMore",
+  "secondaryLocations",
+  "secondaryResearch",
+  "secondaryWhatsOn",
+];
+export interface HeroImageProps
+  extends Pick<ComponentImageProps, "alt" | "src"> {}
 export interface HeroProps {
   /** Optional hex color value used to override the default background
    * color for a given `Hero` variation.
@@ -21,14 +40,14 @@ export interface HeroProps {
   heading?: JSX.Element;
   /** Used to control how the `Hero` component will be rendered. */
   heroType?: HeroTypes;
-  /** Text description of the image; to follow best practices for accessibility,
-   * this prop should not be left blank if `imageSrc` is passed. */
-  imageAlt?: string;
-  /** Optional `imageSrc` used for SECONDARY, FIFTYFIFTY and CAMPAIGN
-   * `Hero` types; Note: `imageSrc` can only be used in conjunction with
-   * `backgroundImageSrc` for the CAMPAIGN `Hero` type.
-   * Note: not all `Hero` variations utilize this prop. */
-  imageSrc?: string;
+  /** Object used to create and render the `Image` component. Note that only
+   * `src` and `alt` are the available attributes to pass. If `imageProps.alt`
+   * is left blank, a warning will be logged to the console and will cause
+   * accessibility issues. For `imageProps.src`, it will only work for the
+   * "secondary", "fiftyFifty" and "campaign" `Hero` types; Note: `imageProps.src`
+   * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
+   * `Hero` type. Note: not all `Hero` variations utilize this prop. */
+  imageProps?: HeroImageProps;
   /** Optional details area that contains location data.
    * Note: not all `Hero` variations utilize this prop. */
   locationDetails?: JSX.Element;
@@ -37,18 +56,6 @@ export interface HeroProps {
   subHeaderText?: string | JSX.Element;
 }
 
-// Used to map between HeroTypes enum values and Chakra variant options.
-const variantMap = {};
-for (const type in HeroTypes) {
-  variantMap[HeroTypes[type]] = HeroTypes[type];
-}
-/**
- * Map the HeroTypes to the Hero Chakra theme variant object. If a wrong
- * value is passed (typically in non-Typescript scenarios), then the default
- * is the "primary" variant.
- */
-const getVariant = (type) => variantMap[type] || HeroTypes.Primary;
-
 export const Hero = chakra(
   (props: React.PropsWithChildren<HeroProps>) => {
     const {
@@ -57,89 +64,86 @@ export const Hero = chakra(
       foregroundColor,
       heading,
       heroType,
-      imageAlt,
-      imageSrc,
+      imageProps = {
+        alt: "",
+        src: "",
+      },
       locationDetails,
       subHeaderText,
       ...rest
     } = props;
-    const variant = getVariant(heroType);
-    const styles = useMultiStyleConfig("Hero", { variant });
+    const styles = useMultiStyleConfig("Hero", { variant: heroType });
     const headingStyles = styles.heading;
     // We want to add `Hero`-specific styling to the `Heading` component.
     const finalHeading =
-      heading &&
-      React.cloneElement(heading, { additionalStyles: headingStyles });
+      heading && React.cloneElement(heading, { __css: headingStyles });
     let backgroundImageStyle = {};
     let contentBoxStyling = {};
 
-    if (imageSrc && !imageAlt) {
+    if (imageProps.src && !imageProps.alt) {
       console.warn(
-        `NYPL Reservoir: The "imageSrc" prop was passed but the "imageAlt" props was not. This will make the rendered image inaccessible.`
+        `NYPL Reservoir Hero: The "imageProps.src" prop was passed but the "imageProps.alt" props was not. This will make the rendered image inaccessible.`
       );
     }
 
-    if (heroType === HeroTypes.Primary) {
+    if (heroType === "primary") {
       if (!backgroundImageSrc) {
         console.warn(
           "NYPL Reservoir Hero: It is recommended to use the `backgroundImageSrc` " +
-            "prop for the `HeroTypes.Primary` `heroType` variant."
+            "prop for the `'primary'` `heroType` variant."
         );
       }
-      if (imageAlt && imageSrc) {
+      if (imageProps.alt && imageProps.src) {
         console.warn(
-          "NYPL Reservoir Hero: The `imageSrc` and `imageAlt` props have been " +
-            "passed, but the `HeroTypes.Primary` `heroType` variant will not use it."
+          "NYPL Reservoir Hero: The `imageProps.src` and `imageProps.alt` props have been " +
+            "passed, but the `'primary'` `heroType` variant will not use it."
         );
       }
     } else if (locationDetails) {
       console.warn(
         "NYPL Reservoir Hero: The `locationDetails` prop should only be used " +
-          "with the `HeroTypes.Primary` `heroType` variant."
+          "with the `'primary'` `heroType` variant."
       );
     }
-    if (HeroSecondaryTypes.includes(heroType) && backgroundImageSrc) {
+    if (heroSecondaryTypes.includes(heroType) && backgroundImageSrc) {
       console.warn(
         "NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " +
-          "but the `HeroTypes.Secondary` `heroType` variant will not use it."
+          "but the `'secondary'` `heroType` variant will not use it."
       );
     }
-    if (heroType === HeroTypes.Tertiary && (backgroundImageSrc || imageSrc)) {
+    if (heroType === "tertiary" && (backgroundImageSrc || imageProps.src)) {
       console.warn(
-        "NYPL Reservoir Hero: The `HeroTypes.Tertiary` `heroType` variant hero " +
+        "NYPL Reservoir Hero: The `'tertiary'` `heroType` variant hero " +
           "will not use any of the image props."
       );
     }
-    if (heroType === HeroTypes.Campaign && (!backgroundImageSrc || !imageSrc)) {
+    if (heroType === "campaign" && (!backgroundImageSrc || !imageProps.src)) {
       console.warn(
         "NYPL Reservoir Hero: It is recommended to use both the " +
-          "`backgroundImageSrc` and `imageSrc` props for the " +
-          "`HeroTypes.Campaign` `heroType` variant."
+          "`backgroundImageSrc` and `imageProps.src` props for the " +
+          "`'campaign'` `heroType` variant."
       );
     }
-    if (heroType === HeroTypes.FiftyFifty && backgroundImageSrc) {
+    if (heroType === "fiftyFifty" && backgroundImageSrc) {
       console.warn(
         "NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " +
-          "but the `HeroTypes.FiftyFifty` `heroType` variant hero will not use it."
+          "but the `'fiftyFifty'` `heroType` variant hero will not use it."
       );
     }
 
-    if (heroType === HeroTypes.Primary) {
+    if (heroType === "primary") {
       backgroundImageStyle = backgroundImageSrc
         ? { backgroundImage: `url(${backgroundImageSrc})` }
         : {};
-    } else if (heroType === HeroTypes.Campaign) {
+    } else if (heroType === "campaign") {
       backgroundImageStyle = backgroundImageSrc
         ? { backgroundImage: `url(${backgroundImageSrc})` }
         : { backgroundColor };
-    } else if (
-      heroType === HeroTypes.Tertiary ||
-      heroType === HeroTypes.FiftyFifty
-    ) {
+    } else if (heroType === "tertiary" || heroType === "fiftyFifty") {
       backgroundImageStyle = { backgroundColor };
     }
 
-    if (!HeroSecondaryTypes.includes(heroType)) {
+    if (!heroSecondaryTypes.includes(heroType)) {
       contentBoxStyling = {
         color: foregroundColor,
         backgroundColor,
@@ -147,15 +151,15 @@ export const Hero = chakra(
     } else if (foregroundColor || backgroundColor) {
       console.warn(
         "NYPL Reservoir Hero: The `foregroundColor` and/or `backgroundColor` " +
-          "props have been passed, but the `HeroTypes.Secondary` `heroType` " +
+          "props have been passed, but the `'secondary'` `heroType` " +
           "variant will not use them."
       );
     }
 
     const childrenToRender =
-      heroType === HeroTypes.Campaign ? (
+      heroType === "campaign" ? (
         <>
-          <Image alt={imageAlt} src={imageSrc} />
+          <Image alt={imageProps.alt} src={imageProps.src} />
           <Box __css={styles.interior}>
             {finalHeading}
             {subHeaderText}
@@ -163,12 +167,11 @@ export const Hero = chakra(
         </>
       ) : (
         <>
-          {heroType !== HeroTypes.Primary &&
-            heroType !== HeroTypes.Tertiary && (
-              <Image alt={imageAlt} src={imageSrc} />
-            )}
+          {heroType !== "primary" && heroType !== "tertiary" && (
+            <Image alt={imageProps.alt} src={imageProps.src} />
+          )}
           {finalHeading}
-          {heroType === HeroTypes.Tertiary && subHeaderText ? (
+          {heroType === "tertiary" && subHeaderText ? (
             <p>{subHeaderText}</p>
           ) : (
             <Box __css={styles.bodyText}>{subHeaderText}</Box>
@@ -191,7 +194,6 @@ export const Hero = chakra(
         >
           {childrenToRender}
         </Box>
-        {locationDetails}
       </Box>
     );
   },

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

@@ -8,33 +8,9 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "./Icon";
-import {
-  IconAlign,
-  IconColors,
-  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")}
@@ -49,31 +25,42 @@ export const rotationEnumValues = getStorybookEnumValues(
   }}
   argTypes={{
     align: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "IconAlign.None" } },
-      options: alignEnumValues.options,
+      table: { defaultValue: { summary: "none" } },
     },
     children: { table: { disable: true } },
     className: { control: false },
     color: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "IconColors.UiBlack" } },
-      options: colorsEnumValues.options,
+      table: { defaultValue: { summary: "ui.black" } },
+      options: [
+        "ui.black",
+        "ui.white",
+        "brand.primary",
+        "brand.secondary",
+        "section.blogs.primary",
+        "section.blogs.secondary",
+        "section.books-and-more.primary",
+        "section.books-and-more.secondary",
+        "section.education.primary",
+        "section.education.secondary",
+        "section.locations.primary",
+        "section.locations.secondary",
+        "section.research.primary",
+        "section.research.secondary",
+        "section.research-library.lpa",
+        "section.research-library.schomburg",
+        "section.research-library.schwartzman",
+        "section.whats-on.primary",
+        "section.whats-on.secondary",
+      ],
     },
     iconRotation: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "IconRotationTypes.Rotate0" } },
-      options: rotationEnumValues.options,
+      table: { defaultValue: { summary: "rotate0" } },
     },
     id: { control: false },
-    name: {
-      control: { type: "select" },
-      options: namesEnumValues.options,
-    },
+    name: {},
     size: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "IconSizes.Medium" } },
-      options: sizesEnumValues.options,
+      table: { defaultValue: { summary: "medium" } },
     },
     title: {
       control: false,
@@ -81,7 +68,7 @@ export const rotationEnumValues = getStorybookEnumValues(
     },
     type: {
       control: false,
-      table: { defaultValue: { summary: "IconTypes.Default" } },
+      table: { defaultValue: { summary: "default" } },
     },
   }}
 />
@@ -91,7 +78,7 @@ export const rotationEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -114,57 +101,47 @@ export const rotationEnumValues = getStorybookEnumValues(
   <Story
     name="Icon with Controls"
     args={{
-      additionalStyles: undefined,
-      align: "IconAlign.None",
+      align: "none",
       className: undefined,
-      color: "IconColors.UiBlack",
+      color: "ui.black",
       decorative: true,
-      iconRotation: "IconRotationTypes.Rotate0",
+      iconRotation: "rotate0",
       id: "icon-id",
-      name: "IconNames.Check",
-      size: "IconSizes.ExtraExtraLarge",
+      name: "check",
+      size: "xxlarge",
       title: undefined,
-      type: IconTypes.Default,
+      type: "default",
     }}
   >
-    {(args) => (
-      <Icon
-        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}
-      />
-    )}
+    {(args) => <Icon {...args} />}
   </Story>
 </Canvas>
 
 <ArgsTable story="Icon with Controls" />
 
-export const iconRow = (icon, iconType = IconNames, opts = {}) => {
+export const iconRow = (iconName, opts = {}) => {
   // We'll use this setup function to render all the icons in a list item.
   // Some icons display better with a dark background.
   const styles = { display: "block" };
   const {
-    size = IconSizes.Large,
-    iconRotation = IconRotationTypes.Rotate0,
-    color = IconColors.UiBlack,
-    displayValue = icon,
+    size = "large",
+    iconRotation = "rotate0",
+    color = "ui.black",
+    displayValue = iconName,
   } = opts;
-  let key = icon;
-  if (icon.indexOf("Negative") !== -1 || color.indexOf("white") !== -1) {
+  let key = iconName;
+  if (iconName.indexOf("Negative") !== -1 || color.indexOf("White") !== -1) {
     styles.backgroundColor = "#000";
     styles.padding = "1rem";
   }
   // The following is just to fix duplicate React key issues.
-  if (iconRotation !== IconRotationTypes.Rotate0) {
+  if (iconRotation !== "rotate0") {
     key += `-${iconRotation}`;
   }
-  if (color !== IconColors.UiBlack) {
+  if (color !== "ui.black") {
     key += `-${color}`;
   }
-  if (size !== IconSizes.Large) {
+  if (size !== "large") {
     key += `-${size}`;
   }
   return (
@@ -172,10 +149,10 @@ export const iconRow = (icon, iconType = IconNames, opts = {}) => {
       key={key}
       style={{ marginBottom: "var(--nypl-space-l)", textAlign: "center" }}
     >
-      <Heading level={HeadingLevels.Four}>{displayValue}</Heading>
+      <Heading level="four">{displayValue}</Heading>
       <span style={styles}>
         <Icon
-          name={iconType[icon]}
+          name={iconName}
           size={size}
           iconRotation={iconRotation}
           color={color}
@@ -188,37 +165,105 @@ export const icons = [];
 export const rotations = [];
 export const colors = [];
 export const sizes = [];
-for (const icon in IconNames) {
+export const iconColorsValues = [
+  "ui.black",
+  "ui.white",
+  "brand.primary",
+  "brand.secondary",
+  "section.blogs.primary",
+  "section.blogs.secondary",
+  "section.books-and-more.primary",
+  "section.books-and-more.secondary",
+  "section.education.primary",
+  "section.education.secondary",
+  "section.locations.primary",
+  "section.locations.secondary",
+  "section.research.primary",
+  "section.research.secondary",
+  "section.research-library.lpa",
+  "section.research-library.schomburg",
+  "section.research-library.schwartzman",
+  "section.whats-on.primary",
+  "section.whats-on.secondary",
+];
+export const iconNamesValues = [
+  "accessibilityFull",
+  "accessibilityPartial",
+  "actionCheckCircle",
+  "actionHelpDefault",
+  "actionHelpOutline",
+  "alertNotificationImportant",
+  "actionLaunch",
+  "arrow",
+  "check",
+  "clock",
+  "close",
+  "download",
+  "errorFilled",
+  "errorOutline",
+  "fileTypeAudio",
+  "fileTypeDoc",
+  "fileTypeGenericDoc",
+  "fileTypeImage",
+  "fileTypePdf",
+  "fileTypeSpreadsheet",
+  "fileTypeVideo",
+  "headset",
+  "minus",
+  "plus",
+  "search",
+  "speakerNotes",
+  "utilityAccountFilled",
+  "utilityAccountUnfilled",
+  "utilityHamburger",
+  "utilitySearch",
+];
+export const iconRotationTypesValues = [
+  "rotate0",
+  "rotate90",
+  "rotate180",
+  "rotate270",
+];
+export const iconSizesValues = [
+  "default",
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+  "xxlarge",
+  "xxxlarge",
+];
+for (const icon in iconNamesValues) {
   icons.push(
-    iconRow(icon, IconNames, {
-      displayValue: `IconNames.${icon}`,
-      size: IconSizes.ExtraExtraLarge,
+    iconRow(iconNamesValues[icon], {
+      displayValue: iconNamesValues[icon],
+      size: "xxlarge",
     })
   );
 }
-for (const iconRotation in IconRotationTypes) {
+for (const iconRotation in iconRotationTypesValues) {
   rotations.push(
-    iconRow("Arrow", IconNames, {
-      displayValue: `IconRotationTypes.${iconRotation}`,
-      iconRotation: IconRotationTypes[iconRotation],
-      size: IconSizes.ExtraExtraLarge,
+    iconRow("arrow", {
+      displayValue: iconRotationTypesValues[iconRotation],
+      iconRotation: iconRotationTypesValues[iconRotation],
+      size: "xxlarge",
     })
   );
 }
-for (const iconColor in IconColors) {
+for (const iconColor in iconColorsValues) {
   colors.push(
-    iconRow("ErrorFilled", IconNames, {
-      color: IconColors[iconColor],
-      displayValue: `IconColors.${iconColor}`,
-      size: IconSizes.ExtraExtraLarge,
+    iconRow("errorFilled", {
+      color: iconColorsValues[iconColor],
+      displayValue: iconColorsValues[iconColor],
+      size: "xxlarge",
     })
   );
 }
-for (const iconSize in IconSizes) {
+for (const iconSize in iconSizesValues) {
   sizes.push(
-    iconRow("ActionCheckCircle", IconNames, {
-      displayValue: `IconSizes.${iconSize}`,
-      size: IconSizes[iconSize],
+    iconRow("actionCheckCircle", {
+      displayValue: iconSizesValues[iconSize],
+      size: iconSizesValues[iconSize],
     })
   );
 }
@@ -229,10 +274,10 @@ export const allIconsType = (list) => (
 
 ## Accessibility
 
-For accessibility purposes, every Reservoir Design System (DS) `Icon` will 
-render the `svg` element with its icon name in the `title` element. The default 
-text in the `title` element is the icon's code name. Pass in better descriptive 
-text in the `title` prop when using the `Icon` component in your application. 
+For accessibility purposes, every Reservoir Design System (DS) `Icon` will
+render the `svg` element with its icon name in the `title` element. The default
+text in the `title` element is the icon's code name. Pass in better descriptive
+text in the `title` prop when using the `Icon` component in your application.
 This will give screenreaders a better descriptive title for the `svg` graphic.
 
 `Icon`s are decorative by default. This means that they are presentational and
@@ -248,19 +293,15 @@ Resources:
 ## Rotation Types
 
 Passing an `iconRotation` prop with a value from `IconRotationTypes` allows
-the icon to be rotated when it is rendered. The `IconRotationTypes` enum
-can be found in `src/components/Icons/IconTypes.tsx`.
+the icon to be rotated when it is rendered. The values are:
+`"rotate0"`, `"rotate90"`, `"rotate180"`, and `"rotate270"`.
 
 Note: All of the examples below have been rendered with the `size` prop set to
-`IconSizes.ExtraExtraLarge`.
+`xxlarge`.
 
 ```jsx
 // Example
-<Icon
-  iconRotation={IconRotationTypes.Rotate180}
-  name={IconNames.Arrow}
-  size={IconSizes.ExtraExtraLarge}
-/>
+<Icon iconRotation="rotate180" name="arrow" size="xxlarge" />
 ```
 
 <Canvas>
@@ -269,19 +310,23 @@ Note: All of the examples below have been rendered with the `size` prop set to
 
 ## IconColors Types
 
-Update an SVG icon by passing a `color` prop with a value from `IconColors`.
-The `IconColors` enum can be found in `src/components/Icons/IconTypes.tsx`.
+Update an SVG icon by passing a `color` prop with a value from the `IconColors`
+type. The values are: `"ui.black"`, `"ui.white"`, `"brand.primary"`,
+`"brand.secondary"`, `"section.blogs.primary"`, `"section.blogs.secondary"`,
+`"section.books-and-more.primary"`, `"section.books-and-more.secondary"`,
+`"section.education.primary"`, `"section.education.secondary"`,
+`"section.locations.primary"`, `"section.locations.secondary"`,
+`"section.research.primary"`, `"section.research.secondary"`,
+`"section.research-library.lpa"`, `"section.research-library.schomburg"`,
+`"section.research-library.schwartzman"`, `"section.whats-on.primary"`,
+`"section.whats-on.secondary"`.
 
 Note: All of the examples below have been rendered with the `size` prop set to
-`IconSizes.ExtraExtraLarge`.
+`xxlarge`.
 
 ```jsx
 // Example
-<Icon
-  color={IconColors.BrandPrimary}
-  name={IconNames.ErrorFilled}
-  size={IconSizes.ExtraExtraLarge}
-/>
+<Icon color="brand.primary" name="errorFilled" size="xxlarge" />
 ```
 
 <Canvas>
@@ -290,15 +335,16 @@ Note: All of the examples below have been rendered with the `size` prop set to
 
 ## IconSizes Types
 
-Update an SVG icon by passing a `size` prop with a value from `IconSizes`.
-The `IconSizes` enum can be found in`src/components/Icons/IconTypes.tsx`.
+Update an SVG icon by passing a `size` prop with a value from `IconSizes`. The
+values are: `"default"`, `"small"`, `"medium"`, `"large"`, `"xlarge"`,
+`"xxlarge"`, `"xxxlarge"`.
 
-Note: `IconSizes.Default` sets the width to `100%` and the rendered icon will
-expand to fill the full width of the parent element.
+Note: `"default"` sets the width to `100%` and the rendered icon will expand to
+fill the full width of the parent element.
 
 ```jsx
 // Example
-<Icon name={IconNames.ActionCheckCircle} size={IconSizes.ExtraExtraLarge} />
+<Icon name="actionCheckCircle" size="xxlarge" />
 ```
 
 <Canvas>
@@ -308,10 +354,18 @@ expand to fill the full width of the parent element.
 ## All Display Icons
 
 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`.
+be found in the `IconNames` type. They are: `"accessibilityFull"`,
+`"accessibilityPartial"`, `"actionCheckCircle"`, `"actionHelpDefault"`,
+`"actionHelpOutline"`, `"alertNotificationImportant"`, `"actionLaunch"`,
+`"arrow"`, `"check"`, `"clock"`, `"close"`, `"download"`, `"errorFilled"`,
+`"errorOutline"`, `"fileTypeAudio"`, `"fileTypeDoc"`,
+`"fileTypeGenericDoc"`, `"fileTypeImage"`, `"fileTypePdf"`,
+`"fileTypeSpreadsheet"`, `"fileTypeVideo"`, `"headset"`, `"minus"`,
+`"plus"`, `"search"`, `"speakerNotes"`, `"utilityAccountFilled"`,
+`"utilityAccountUnfilled"`, `"utilityHamburger"`, `"utilitySearch"`.
 
 Note: All of the examples below have been rendered with the `size` prop set to
-`IconSizes.ExtraExtraLarge`.
+`xxlarge`.
 
 <Canvas withToolbar>
   <Story name="All Icons">{allIconsType(icons)}</Story>
@@ -336,9 +390,9 @@ child to the `Icon` component.
   <Story
     name="Custom Icons"
     args={{
-      color: IconColors.UiBlack,
-      size: IconSizes.ExtraExtraExtraLarge,
-      iconRotation: IconRotationTypes.Rotate0,
+      color: "ui.black",
+      size: "xxxlarge",
+      iconRotation: "rotate0",
       decorative: true,
     }}
   >