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

package/src/components/Form/Form.stories.mdx

@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex, Spacer } from "@chakra-ui/react";
+import { Flex, Spacer } from "@chakra-ui/react";
 import { action } from "@storybook/addon-actions";
 import {
   ArgsTable,
@@ -10,25 +10,20 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Button from "../Button/Button";
+import ButtonGroup from "../ButtonGroup/ButtonGroup";
 import Checkbox from "../Checkbox/Checkbox";
 import CheckboxGroup from "../CheckboxGroup/CheckboxGroup";
 import DatePicker from "../DatePicker/DatePicker";
-import { DatePickerTypes } from "../DatePicker/DatePickerTypes";
 import Form, { FormRow, FormField } from "./Form";
-import { FormGaps } from "./FormTypes";
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
 import Label from "../Label/Label";
 import Radio from "../Radio/Radio";
 import RadioGroup from "../RadioGroup/RadioGroup";
 import Select from "../Select/Select";
+import SimpleGrid from "../Grid/SimpleGrid";
 import TextInput from "../TextInput/TextInput";
 import { getCategory } from "../../utils/componentCategories";
-import SimpleGrid from "../Grid/SimpleGrid";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(FormGaps, "FormGaps");
 
 <Meta
   title={getCategory("Form")}
@@ -50,8 +45,16 @@ export const enumValues = getStorybookEnumValues(FormGaps, "FormGaps");
     },
     gap: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "FormGaps.Large" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "grid.l" } },
+      options: [
+        "grid.xxs",
+        "grid.xs",
+        "grid.s",
+        "grid.m",
+        "grid.l",
+        "grid.xl",
+        "grid.xxl",
+      ],
     },
   }}
 />
@@ -61,7 +64,7 @@ export const enumValues = getStorybookEnumValues(FormGaps, "FormGaps");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -91,10 +94,10 @@ fields as needed.
 </Form>
 ```
 
-`FormField` should be used as a parent for all input components from the 
+`FormField` should be used as a parent for all input components from the
 Reservoir Design System (DS) (`Button`, `Select`, `TextInput`, etc.).
 
-`FormRow` should be used as a parent of multiple `FormField` components when 
+`FormRow` should be used as a parent of multiple `FormField` components when
 you need to render multiple input components in a horizontal row.
 
 ## Component Props
@@ -107,11 +110,11 @@ you need to render multiple input components in a horizontal row.
       className: undefined,
       id: "form-id",
       method: "get",
-      gap: "FormGaps.Large",
+      gap: "grid.l",
     }}
   >
     {(args) => (
-      <Form {...args} gap={enumValues.getValue(args.gap)} id="form-id">
+      <Form {...args} id="form-id">
         <FormRow>
           <FormField>
             <TextInput
@@ -131,7 +134,7 @@ you need to render multiple input components in a horizontal row.
           </FormField>
           <FormField>
             <DatePicker
-              dateType={DatePickerTypes.Full}
+              dateType="full"
               dateFormat="yyyy-MM-dd"
               helperTextFrom="From this date."
               helperTextTo="To this date."
@@ -293,17 +296,17 @@ Resources:
 
 ## Spacing Variants
 
-export const formRow = (nameString, size) => {
-  const labelText = `Size: ${nameString} (${size})`;
+export const formRow = (gapValue) => {
+  const labelText = `Size: ${gapValue}`;
   return (
-    <li key={size}>
-      <Heading level={HeadingLevels.Three}>{labelText}</Heading>
-      <Form gap={size} id={`form-spacing-${size}`}>
+    <li key={gapValue}>
+      <Heading level="three">{labelText}</Heading>
+      <Form gap={gapValue} id={`form-spacing-${gapValue}`}>
         <FormRow>
           <FormField>
             <Select
               helperText="The select field helper text."
-              id={`select-spacing-${size}-1`}
+              id={`select-spacing-${gapValue}-1`}
               labelText="Select Field"
               showLabel={true}
             >
@@ -316,7 +319,7 @@ export const formRow = (nameString, size) => {
           <FormField>
             <Select
               helperText="The select field helper text."
-              id={`select-spacing-${size}-2`}
+              id={`select-spacing-${gapValue}-2`}
               labelText="Select Field"
               showLabel={true}
             >
@@ -329,7 +332,7 @@ export const formRow = (nameString, size) => {
           <FormField>
             <Select
               helperText="The select field helper text."
-              id={`select-spacing-${size}-3`}
+              id={`select-spacing-${gapValue}-3`}
               labelText="Select Field"
               showLabel={true}
             >
@@ -346,18 +349,30 @@ export const formRow = (nameString, size) => {
   );
 };
 export const sizes = [];
-for (const formGap in FormGaps) {
-  sizes.push(formRow(`FormGaps.${formGap}`, FormGaps[formGap]));
+export const gapValues = [
+  "grid.xxs",
+  "grid.xs",
+  "grid.s",
+  "grid.m",
+  "grid.l",
+  "grid.xl",
+  "grid.xxl",
+];
+for (const gap in gapValues) {
+  sizes.push(formRow(gapValues[gap]));
 }
 export const getForms = (list) => <ul style={{ listStyle: "none" }}>{list}</ul>;
 
 By default, the `Form` component will handle the NYPL spacing around form input
-elements. The default spacing value is `large`, which corresponds to the CSS
-variable `--nypl-space-l` (2rem / 32px).
+elements. The default spacing value is large `grid.l`, which corresponds to the
+CSS variable `--nypl-space-l` (2rem / 32px).
 
-**IMPORTANT:** The default spacing should not be overwritten without a very good reason.
+**IMPORTANT:** The default spacing should not be overwritten without a very
+good reason.
 
-Below are the spacing variants available with the `FormGaps` enum.
+Below are examples of the spacing values available to use in the `gap` prop of
+the `Form` component: `"grid.xxs"`, `"grid.xs"`, `"grid.s"`, `"grid.m"`,
+`"grid.l"`, `"grid.xl"`, `"grid.xxl"`.
 
 <Canvas>
   <Story name="Spacing Variants">{getForms(sizes)}</Story>
@@ -366,7 +381,7 @@ Below are the spacing variants available with the `FormGaps` enum.
 ## Example Code
 
 ```jsx
-<Form action="/end/point" method="get" gap={FormGaps.Large} id="example-form">
+<Form action="/end/point" method="get" gap="grid.l" id="example-form">
   <FormField>
     <TextInput
       labelText="Username"

package/src/components/Form/Form.test.tsx

@@ -4,7 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Form, { FormRow, FormField } from "./Form";
-// import { FormGaps } from "./FormTypes";
 import TextInput from "../TextInput/TextInput";
 
 describe("Form Accessibility", () => {
@@ -117,7 +116,7 @@ describe("Form", () => {
     );
     const form = screen.getByRole("form");
     const formRow = form.firstChild;
-    const formField = formRow.firstChild;
+    const formField = formRow?.firstChild;
     const textInput = screen.getByRole("textbox");
     expect(form).toBeInTheDocument();
     expect(formRow).toBeInTheDocument();
@@ -232,20 +231,4 @@ describe("Form", () => {
       "NYPL Reservoir Form: This component's required `id` prop was not passed."
     );
   });
-
-  // TO DO: There's somethign weird about checking for the "grid-gap" style.
-  // Other styles can be validated, but "grid-gap" is being ellusive.
-  // it("Renders a <form> element with spacing variant applied", () => {
-  //   render(
-  //     <Form gap={FormGaps.ExtraSmall}>
-  //       <FormRow />
-  //     </Form>
-  //   );
-  //   const form = screen.getByRole("form");
-  //   const formRow = form.firstChild;
-  //   expect(form).toBeInTheDocument();
-  //   expect(formRow).toHaveStyle({
-  //     "grid-gap": "var(--nypl-space-xs)",
-  //   });
-  // });
 });

package/src/components/Form/Form.tsx

@@ -1,8 +1,7 @@
 import { chakra } from "@chakra-ui/react";
 import * as React from "react";
 
-import { FormGaps } from "./FormTypes";
-import SimpleGrid from "../Grid/SimpleGrid";
+import SimpleGrid, { GridGaps } from "../Grid/SimpleGrid";
 
 interface FormBaseProps {
   /** className to be applied to FormRow, FormField, and Form */
@@ -10,7 +9,7 @@ interface FormBaseProps {
   /** Optional spacing size; if omitted, the default `large` (2rem / 32px)
    * spacing will be used; ```IMPORTANT: for general form layout, this prop
    * should not be used``` */
-  gap?: FormGaps;
+  gap?: GridGaps;
   /** ID that other components can cross reference (internal use) */
   id: string;
 }
@@ -32,7 +31,7 @@ export const FormRow = chakra(
     const { children, className, gap, id, ...rest } = props;
     const count = React.Children.count(children);
     const alteredChildren = React.Children.map(
-      children,
+      children as JSX.Element,
       (child: React.ReactElement, i) => {
         if (!child) return null;
         if (child.type === FormField || child.props.mdxType === "FormField") {
@@ -77,7 +76,7 @@ export const Form = chakra(
       action,
       children,
       className,
-      gap = FormGaps.Large,
+      gap = "grid.l",
       id,
       method,
       onSubmit,
@@ -89,7 +88,8 @@ export const Form = chakra(
         "NYPL Reservoir Form: This component's required `id` prop was not passed."
       );
     }
-    let attributes = {};
+
+    const attributes: Partial<FormProps> = {};
     action && (attributes["action"] = action);
 
     method &&
@@ -97,7 +97,7 @@ export const Form = chakra(
       (attributes["method"] = method);
 
     const alteredChildren = React.Children.map(
-      children,
+      children as JSX.Element,
       (child: React.ReactElement, i) => {
         return React.cloneElement(child, { gap, id: `${id}-child${i}` });
       }

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 }