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

package/src/components/Hero/Hero.stories.mdx

@@ -1,20 +1,23 @@
+import { Box, 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 { Box, VStack } from "@chakra-ui/react";
 
+import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
 import Hero from "./Hero";
 import { HeroTypes, HeroSecondaryTypes } from "./HeroTypes";
 import Image from "../Image/Image";
-import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(HeroTypes, "HeroTypes");
 
 <Meta
   title={getCategory("Hero")}
@@ -23,18 +26,22 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A5314",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A5314",
     },
     jest: ["Hero.test.tsx"],
   }}
   argTypes={{
-    backgroundColor: { table: { disable: true } },
-    foregroundColor: { table: { disable: true } },
-    heading: { table: { disable: true } },
-    image: { table: { disable: true } },
-    locationDetails: { table: { disable: true } },
-    subHeaderText: { table: { disable: true } },
+    backgroundColor: { control: false },
+    foregroundColor: { control: false },
+    heading: { control: false },
+    heroType: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "HeroTypes.Primary" } },
+      options: enumValues.options,
+    },
+    image: { control: false },
+    locationDetails: { control: false },
+    subHeaderText: { control: false },
   }}
 />
 
@@ -67,76 +74,88 @@ descriptive text and images.
 
 <Canvas withToolbar>
   <Story
-    name="Hero Props"
+    name="Hero with Controls"
     args={{
-      heroType: HeroTypes.Campaign,
+      backgroundColor: undefined,
+      backgroundImageSrc: undefined,
+      foregroundColor: undefined,
+      heading: undefined,
+      heroType: "HeroTypes.Primary",
+      image: undefined,
+      locationDetails: undefined,
+      subHeaderText: undefined,
     }}
   >
     {(args) =>
-      (args.heroType === HeroTypes.Primary && (
+      (args.heroType === "HeroTypes.Primary" && (
         <Hero
           {...args}
+          backgroundImageSrc="https://placeimg.com/2400/800/nature"
           heading={
             <Heading level={HeadingLevels.One} id="1" text="Hero Primary" />
           }
+          heroType={enumValues.getValue(args.heroType)}
           subHeaderText="Example Subtitle"
-          backgroundImageSrc="https://placeimg.com/2400/800/nature"
         />
       )) ||
-      (HeroSecondaryTypes.includes(args.heroType) && (
+      (HeroSecondaryTypes.includes(enumValues.getValue(args.heroType)) && (
         <div className="nypl--books-and-more">
           <Hero
             {...args}
             heading={
               <Heading level={HeadingLevels.One} id="1" text="Hero Secondary" />
             }
-            subHeaderText={secondarySubHeaderText}
+            heroType={enumValues.getValue(args.heroType)}
             image={image}
+            subHeaderText={secondarySubHeaderText}
           />
         </div>
       )) ||
-      (args.heroType === HeroTypes.Tertiary && (
+      (args.heroType === "HeroTypes.Tertiary" && (
         <Hero
           {...args}
           heading={
             <Heading level={HeadingLevels.One} id="1" text="Hero Tertiary" />
           }
+          heroType={enumValues.getValue(args.heroType)}
           subHeaderText={otherSubHeaderText}
         />
       )) ||
-      (args.heroType === HeroTypes.Campaign && (
+      (args.heroType === "HeroTypes.Campaign" && (
         <Hero
           {...args}
+          backgroundImageSrc="https://placeimg.com/2400/800/nature"
           heading={
             <Heading level={HeadingLevels.One} id="1" text="Hero Campaign" />
           }
-          subHeaderText={otherSubHeaderText}
-          backgroundImageSrc="https://placeimg.com/2400/800/nature"
+          heroType={enumValues.getValue(args.heroType)}
           image={
             <Image
               src="https://placeimg.com/800/400/animals"
               alt="Image example"
             />
           }
+          subHeaderText={otherSubHeaderText}
         />
       )) ||
-      (args.heroType === HeroTypes.FiftyFifty && (
+      (args.heroType === "HeroTypes.FiftyFifty" && (
         <Hero
           {...args}
-          subHeaderText={otherSubHeaderText}
+          heroType={enumValues.getValue(args.heroType)}
           image={
             <Image
               src="https://placeimg.com/600/200/animals"
               alt="Image example"
             />
           }
+          subHeaderText={otherSubHeaderText}
         />
       ))
     }
   </Story>
 </Canvas>
 
-<ArgsTable story="Hero Props" />
+<ArgsTable story="Hero with Controls" />
 
 ## Color Variations for Secondary Hero
 
@@ -159,12 +178,12 @@ parent wrapper's CSS class name for background color updates. Now, the proper
   <Story name="Color Variations for Secondary Hero">
     <VStack spacing={10} align="stretch">
       <Heading
+        id="books-heading"
         level={HeadingLevels.Two}
         text="HeroTypes.SecondaryBooksAndMore"
-        id="books-heading"
       />
       <Hero
-        heroType={HeroTypes.SecondaryBooksAndMore}
+        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -172,16 +191,16 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Books and More"
           />
         }
+        heroType={HeroTypes.SecondaryBooksAndMore}
         subHeaderText={secondarySubHeaderText}
-        image={image}
       />
       <Heading
+        id="location-heading"
         level={HeadingLevels.Two}
         text="HeroTypes.SecondaryLocations"
-        id="location-heading"
       />
       <Hero
-        heroType={HeroTypes.SecondaryLocations}
+        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -189,16 +208,16 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Locations"
           />
         }
+        heroType={HeroTypes.SecondaryLocations}
         subHeaderText={secondarySubHeaderText}
-        image={image}
       />
       <Heading
+        id="research-heading"
         level={HeadingLevels.Two}
         text="HeroTypes.SecondaryResearch"
-        id="research-heading"
       />
       <Hero
-        heroType={HeroTypes.SecondaryResearch}
+        image={image}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -206,16 +225,15 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Research"
           />
         }
+        heroType={HeroTypes.SecondaryResearch}
         subHeaderText={secondarySubHeaderText}
-        image={image}
       />
       <Heading
+        id="whats-on-heading"
         level={HeadingLevels.Two}
         text="HeroTypes.SecondaryWhatsOn"
-        id="whats-on-heading"
       />
       <Hero
-        heroType={HeroTypes.SecondaryWhatsOn}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -223,8 +241,9 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="What's On"
           />
         }
-        subHeaderText={secondarySubHeaderText}
+        heroType={HeroTypes.SecondaryWhatsOn}
         image={image}
+        subHeaderText={secondarySubHeaderText}
       />
     </VStack>
   </Story>
@@ -237,7 +256,7 @@ parent wrapper's CSS class name for background color updates. Now, the proper
     <VStack spacing={10} align="stretch">
       <Heading level={HeadingLevels.Two} text="Primary" id="primary-heading" />
       <Hero
-        heroType={HeroTypes.Primary}
+        backgroundImageSrc="https://placeimg.com/1600/800/arch"
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -245,16 +264,15 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Primary"
           />
         }
-        backgroundImageSrc="https://placeimg.com/1600/800/arch"
+        heroType={HeroTypes.Primary}
       />
       <Heading
+        id="secondary-heading"
         level={HeadingLevels.Two}
         text="Secondary"
-        id="secondary-heading"
       />
       <div className="nypl--locations">
         <Hero
-          heroType={HeroTypes.Secondary}
           heading={
             <Heading
               level={HeadingLevels.One}
@@ -262,17 +280,17 @@ parent wrapper's CSS class name for background color updates. Now, the proper
               text="Hero Secondary"
             />
           }
-          subHeaderText={secondarySubHeaderText}
+          heroType={HeroTypes.Secondary}
           image={image}
+          subHeaderText={secondarySubHeaderText}
         />
       </div>
       <Heading
+        id="tertiary-heading"
         level={HeadingLevels.Two}
         text="Tertiary"
-        id="tertiary-heading"
       />
       <Hero
-        heroType={HeroTypes.Tertiary}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -280,10 +298,10 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Tertiary with Sub-Header"
           />
         }
+        heroType={HeroTypes.Tertiary}
         subHeaderText={otherSubHeaderText}
       />
       <Hero
-        heroType={HeroTypes.Tertiary}
         heading={
           <Heading
             level={HeadingLevels.One}
@@ -291,13 +309,15 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Tertiary without Sub-Header"
           />
         }
+        heroType={HeroTypes.Tertiary}
       />
       <Heading
+        id="campaign-heading"
         level={HeadingLevels.Two}
         text="Campaign"
-        id="campaign-heading"
       />
       <Hero
+        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
         heroType={HeroTypes.Campaign}
         heading={
           <Heading
@@ -306,20 +326,19 @@ parent wrapper's CSS class name for background color updates. Now, the proper
             text="Hero Campaign"
           />
         }
-        subHeaderText={otherSubHeaderText}
-        backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
         image={image}
+        subHeaderText={otherSubHeaderText}
       />
       <Box marginTop="30px" />
       <Heading
+        id="fiftyfifty-heading"
         level={HeadingLevels.Two}
         text="FiftyFifty"
-        id="fiftyfifty-heading"
       />
       <Hero
         heroType={HeroTypes.FiftyFifty}
-        subHeaderText={otherSubHeaderText}
         image={image}
+        subHeaderText={otherSubHeaderText}
       />
     </VStack>
   </DSProvider>

package/src/components/HorizontalRule/HorizontalRule.stories.mdx

@@ -1,14 +1,14 @@
+import { action } from "@storybook/addon-actions";
 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 HorizontalRule from "./HorizontalRule";
-import { action } from "@storybook/addon-actions";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -18,13 +18,14 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=19659%3A0",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=19659%3A0",
     },
     jest: ["HorizontalRule.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
+    className: { control: false },
+    height: { table: { defaultValue: { summary: "2px" } } },
+    width: { table: { defaultValue: { summary: "auto" } } },
   }}
 />
 

package/src/components/HorizontalRule/HorizontalRule.tsx

@@ -1,6 +1,6 @@
 // HorizontalRule
-import * as React from "react";
 import { Box, useStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface HorizontalRuleProps {
   /** Optional alignment value to align the horizontal rule to one side or the
@@ -20,9 +20,7 @@ export interface HorizontalRuleProps {
   width?: string;
 }
 
-export default function HorizontalRule(
-  props: React.ComponentProps<"hr"> & HorizontalRuleProps
-) {
+export default function HorizontalRule(props: HorizontalRuleProps) {
   const { align, className, height = "2px", width = "auto" } = props;
   const styles = useStyleConfig("HorizontalRule", { align });
   let finalHeight = height;

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" } },
+    },
   }}
 />
 
@@ -51,62 +95,35 @@ import { getCategory } from "../../utils/componentCategories";
 
 <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.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,