@nypl/design-system-react-components 0.26.0 → 0.28.0

package/src/components/Grid/SimpleGrid.stories.mdx

@@ -8,24 +8,11 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import SimpleGrid from "./SimpleGrid";
-import { GridGaps } from "./GridTypes";
 import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
-import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import {
-  IconNames,
-  LogoNames,
-  IconSizes,
-  IconRotationTypes,
-} from "../Icons/IconTypes";
 import Image from "../Image/Image";
-import { ImageRatios } from "../Image/ImageTypes";
-import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(GridGaps, "GridGaps");
 
 <Meta
   title={getCategory("SimpleGrid")}
@@ -45,8 +32,16 @@ export const enumValues = getStorybookEnumValues(GridGaps, "GridGaps");
     },
     gap: {
       control: { type: "select" },
-      options: enumValues.options,
-      table: { defaultValue: { summary: "GridGaps.Large" } },
+      table: { defaultValue: { summary: "grid.l" } },
+      options: [
+        "grid.xxs",
+        "grid.xs",
+        "grid.s",
+        "grid.m",
+        "grid.l",
+        "grid.xl",
+        "grid.xxl",
+      ],
     },
     id: { control: false },
   }}
@@ -57,7 +52,7 @@ export const enumValues = getStorybookEnumValues(GridGaps, "GridGaps");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -87,20 +82,20 @@ will be triggered.
     args={{
       className: undefined,
       columns: undefined,
-      gap: "GridGaps.Large",
+      gap: "grid.l",
       id: "simpleGrid-id",
     }}
   >
     {(args) => (
-      <SimpleGrid {...args} gap={enumValues.getValue(args.gap)}>
+      <SimpleGrid {...args}>
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/400/220/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardHeading level="three">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.
@@ -109,11 +104,11 @@ will be triggered.
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/400/220/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardHeading level="three">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.
@@ -122,11 +117,11 @@ will be triggered.
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/400/240/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardHeading level="three">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.
@@ -135,11 +130,11 @@ will be triggered.
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/400/260/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardHeading level="three">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.
@@ -148,11 +143,11 @@ will be triggered.
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/400/320/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardHeading level="three">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.
@@ -161,11 +156,11 @@ will be triggered.
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/400/300/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardHeading level="three">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.
@@ -197,15 +192,42 @@ Resources:
 This example is rendering `Icon` components with the `columns` prop set to `5`.
 
 export const icons = [];
-for (const icon in IconNames) {
-  const iname = `Example icon: ${IconNames[icon]}`;
+export const iconNames = [
+  "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",
+];
+for (const name in iconNames) {
+  const iname = `Example icon: ${iconNames[name]}`;
   const iconRender = (
-    <Icon
-      key={icon}
-      name={IconNames[icon]}
-      size={IconSizes.ExtraExtraExtraLarge}
-      titleText={iname}
-    />
+    <Icon key={name} name={iconNames[name]} size="xxxlarge" title={iname} />
   );
   icons.push(iconRender);
 }
@@ -218,7 +240,8 @@ for (const icon in IconNames) {
 
 ### Images
 
-This example is rendering square `Image` components with the `columns` prop set to `6`.
+This example is rendering square `Image` components with the `columns` prop set
+to `6`.
 
 <Canvas>
   <DSProvider>
@@ -247,7 +270,8 @@ This example is rendering square `Image` components with the `columns` prop set
 
 ### Horizontal Cards
 
-This example is rendering horizontal `Card` components with the `columns` prop set to `1`.
+This example is rendering horizontal `Card` components with the `columns` prop
+set to `1`.
 
 <Canvas>
   <DSProvider>
@@ -255,14 +279,14 @@ This example is rendering horizontal `Card` components with the `columns` prop s
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.FourByThree,
+          aspectRatio: "fourByThree",
           src: "https://placeimg.com/400/200/animals",
         }}
         isBordered
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level="four" id="heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -274,14 +298,14 @@ This example is rendering horizontal `Card` components with the `columns` prop s
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.FourByThree,
+          aspectRatio: "fourByThree",
           src: "https://placeimg.com/410/210/animals",
         }}
         isBordered
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading2">
+        <CardHeading level="four" id="heading2">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -293,14 +317,14 @@ This example is rendering horizontal `Card` components with the `columns` prop s
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.FourByThree,
+          aspectRatio: "fourByThree",
           src: "https://placeimg.com/320/320/animals",
         }}
         isBordered
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading3">
+        <CardHeading level="four" id="heading3">
           Card Heading
         </CardHeading>
         <CardContent>

package/src/components/Grid/SimpleGrid.test.tsx

@@ -3,10 +3,8 @@ import { render } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import SimpleGrid from "./SimpleGrid";
 import Card, { CardHeading, CardContent } from "../Card/Card";
-import { ImageRatios } from "../Image/ImageTypes";
-import { HeadingLevels } from "../Heading/HeadingTypes";
+import SimpleGrid from "./SimpleGrid";
 
 describe("Grid Accessibility", () => {
   it("passes axe accessibility test with children components", async () => {
@@ -15,11 +13,11 @@ describe("Grid Accessibility", () => {
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/500/200/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Two}>Card Heading</CardHeading>
+          <CardHeading level="two">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.
@@ -28,11 +26,11 @@ describe("Grid Accessibility", () => {
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/400/220/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardHeading level="three">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.
@@ -41,11 +39,11 @@ describe("Grid Accessibility", () => {
         <Card
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.TwoByOne,
+            aspectRatio: "twoByOne",
             src: "https://placeimg.com/400/240/animals",
           }}
         >
-          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardHeading level="three">Card Heading</CardHeading>
           <CardContent>
             Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
             libero, a pharetra augue.

package/src/components/Grid/SimpleGrid.tsx

@@ -1,13 +1,23 @@
 import { chakra, SimpleGrid as ChakraSimpleGrid } from "@chakra-ui/react";
 import * as React from "react";
 
-import { GridGaps } from "./GridTypes";
+export type GridGaps =
+  | "grid.xxs"
+  | "grid.xs"
+  | "grid.s"
+  | "grid.m"
+  | "grid.l"
+  | "grid.xl"
+  | "grid.xxl";
 export interface SimpleGridProps {
   /** Additional class name. */
   className?: string;
-  /** Optional numeric value to override the default column count; the default column count is 3 */
+  /** Optional numeric value to override the default column count; the default
+   * column count is 3. */
   columns?: number;
-  /** Optional gap size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for standard grid layouts, this prop should not be used``` */
+  /** Optional gap size; if omitted, the default `large` (2rem / 32px) spacing
+   * will be used; `IMPORTANT: for standard grid layouts, this prop should
+   * not be used.` */
   gap?: GridGaps;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
@@ -15,14 +25,7 @@ export interface SimpleGridProps {
 
 export const SimpleGrid = chakra(
   (props: React.PropsWithChildren<SimpleGridProps>) => {
-    const {
-      children,
-      columns,
-      className,
-      gap = GridGaps.Large,
-      id,
-      ...rest
-    } = props;
+    const { children, columns, className, gap = "grid.l", id, ...rest } = props;
 
     const responsiveCols = columns
       ? { base: 1, md: columns }

package/src/components/Heading/Heading.stories.mdx

@@ -8,18 +8,7 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "./Heading";
-import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 import { getCategory } from "../../utils/componentCategories";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const sizesEnumValues = getStorybookEnumValues(
-  HeadingSizes,
-  "HeadingSizes"
-);
-export const levelsEnumValues = getStorybookEnumValues(
-  HeadingLevels,
-  "HeadingLevels"
-);
 
 <Meta
   title={getCategory("Heading")}
@@ -33,17 +22,10 @@ export const levelsEnumValues = getStorybookEnumValues(
     jest: ["Heading.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { control: false },
     className: { control: false },
     id: { control: false },
     level: {
-      control: { type: "select" },
-      options: levelsEnumValues.options,
-      table: { defaultValue: { summary: "HeadingLevels.Two" } },
-    },
-    size: {
-      control: { type: "select" },
-      options: sizesEnumValues.options,
+      table: { defaultValue: { summary: "two" } },
     },
   }}
 />
@@ -53,7 +35,7 @@ export const levelsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -79,23 +61,16 @@ semantic elements can be overwritten using the `size` prop.
   <Story
     name="Heading with Controls"
     args={{
-      additionalStyles: undefined,
       className: undefined,
       id: "heading-id",
-      level: "HeadingLevels.Two",
+      level: "two",
       size: undefined,
       text: "Default Heading",
       url: undefined,
       urlClass: undefined,
     }}
   >
-    {(args) => (
-      <Heading
-        {...args}
-        level={levelsEnumValues.getValue(args.level)}
-        size={args.size && sizesEnumValues.getValue(args.size)}
-      />
-    )}
+    {(args) => <Heading {...args} />}
   </Story>
 </Canvas>
 
@@ -125,36 +100,16 @@ Resources:
 <Canvas>
   <Story name="Default Heading Styles">
     <div>
-      <Heading
-        id="heading-one"
-        level={HeadingLevels.One}
-        text="<h1> Heading 1 - HeadingLevels.One"
-      />
-      <Heading
-        id="heading-two"
-        level={HeadingLevels.Two}
-        text="<h2> Heading 2 - HeadingLevels.Two"
-      />
+      <Heading id="heading-one" level="one" text="<h1> Heading 1 - 'one'" />
+      <Heading id="heading-two" level="two" text="<h2> Heading 2 - 'two'" />
       <Heading
         id="heading-three"
-        level={HeadingLevels.Three}
-        text="<h3> Heading 3 - HeadingLevels.Three"
-      />
-      <Heading
-        id="heading-four"
-        level={HeadingLevels.Four}
-        text="<h4> Heading 4 - HeadingLevels.Four"
-      />
-      <Heading
-        id="heading-five"
-        level={HeadingLevels.Five}
-        text="<h5> Heading 5 - HeadingLevels.Five"
-      />
-      <Heading
-        id="heading-six"
-        level={HeadingLevels.Six}
-        text="<h6> Heading 6 - HeadingLevels.Six"
+        level="three"
+        text="<h3> Heading 3 - 'three'"
       />
+      <Heading id="heading-four" level="four" text="<h4> Heading 4 - 'four'" />
+      <Heading id="heading-five" level="five" text="<h5> Heading 5 - 'five'" />
+      <Heading id="heading-six" level="six" text="<h6> Heading 6 - 'six'" />
     </div>
   </Story>
 </Canvas>
@@ -162,34 +117,34 @@ Resources:
 ## Size Styles
 
 Note: The `level` prop for the `Heading`s in the next example are all set to
-`level={HeadingLevels.One}`.
+`level="one"`.
 
 <Canvas>
   <Story name="Size Styles">
     <div>
       <Heading
         id="heading-primary"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Primary}
-        text="<h1> HeadingSizes.Primary"
+        level="one"
+        size="primary"
+        text="<h1> 'primary'"
       />
       <Heading
         id="heading-secondary"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Secondary}
-        text="<h1> HeadingSizes.Secondary"
+        level="one"
+        size="secondary"
+        text="<h1> 'secondary'"
       />
       <Heading
         id="heading-tertiary"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Tertiary}
-        text="<h1> HeadingSizes.Tertiary"
+        level="one"
+        size="tertiary"
+        text="<h1> 'tertiary'"
       />
       <Heading
         id="heading-callout"
-        level={HeadingLevels.One}
-        size={HeadingSizes.Callout}
-        text="<h1> HeadingSizes.Callout"
+        level="one"
+        size="callout"
+        text="<h1> 'callout'"
       />
     </div>
   </Story>
@@ -199,7 +154,7 @@ Note: The `level` prop for the `Heading`s in the next example are all set to
 
 <Canvas>
   <Story name="Heading with Bold Text">
-    <Heading id="headingWithBold" level={HeadingLevels.One}>
+    <Heading id="headingWithBold" level="one">
       <>
         Heading with a <b>Bold</b> Word
       </>
@@ -215,12 +170,12 @@ When the `url` prop is passed to `Heading`, a child `<a>` element is created and
   <Story name="Headings with Links">
     <Heading
       id="heading-with-link-url"
-      level={HeadingLevels.Two}
+      level="two"
       text="Heading with URL Props"
       url="http://apple.com"
       urlClass="special-link"
     />
-    <Heading id="heading-with-link-child" level={HeadingLevels.Two}>
+    <Heading id="heading-with-link-child">
       <>
         Heading with a Word <a href="#hello">Link</a>
       </>