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

package/src/components/DatePicker/DatePicker.tsx

@@ -2,10 +2,8 @@ import { chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useState, forwardRef } from "react";
 import ReactDatePicker from "react-datepicker";
 
-import { DatePickerTypes } from "./DatePickerTypes";
 import Fieldset from "../Fieldset/Fieldset";
 import { FormRow, FormField } from "../Form/Form";
-import { FormGaps } from "../Form/FormTypes";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
@@ -14,6 +12,19 @@ import TextInput, {
   TextInputRefType,
 } from "../TextInput/TextInput";
 
+interface ReactDatePickerAttrs {
+  popperClassName: string;
+  popperPlacement: string;
+  popperModifiers: any[];
+  minDate: Date | null;
+  maxDate: Date | null;
+  dateFormat: string;
+  showMonthYearPicker?: boolean;
+  showYearPicker?: boolean;
+  yearItemNumber?: number;
+}
+export type DatePickerTypes = "full" | "month" | "year";
+
 // The object shape for the DatePicker's start and end date state values.
 export interface FullDateType {
   /** Date object that gets returned for the onChange
@@ -50,9 +61,6 @@ interface DatePickerWrapperProps extends DateRangeRowProps {
 // Interface used by the internal DS `TextInput` component as a custom
 // component for the ReactDatePicker plugin component. Internal use only.
 interface CustomTextInputProps extends Partial<InputProps> {
-  /** The ReactDatePicker plugin has its own `id` prop so we use this to pass the
-   * value from the parent `DatePicker` component. */
-  dsId: string;
   /** The ReactDatePicker plugin manipulates the ref value so we declare our
    * own for some cases. */
   dsRef?: React.Ref<TextInputRefType>;
@@ -124,16 +132,15 @@ export interface DatePickerProps extends DatePickerWrapperProps {
 const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
   (
     {
-      additionalStyles = {},
-      attributes,
-      dsId,
       dsRef,
       helperText,
+      id,
       invalidText,
       isDisabled,
       isInvalid,
       isRequired,
       labelText,
+      name,
       onChange,
       onClick,
       showLabel,
@@ -142,28 +149,30 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
       value,
     },
     ref: React.Ref<TextInputRefType>
-  ) => (
-    <TextInput
-      id={dsId}
-      showLabel={showLabel}
-      onChange={onChange}
-      value={value}
-      labelText={labelText}
-      isDisabled={isDisabled}
-      isRequired={isRequired}
-      showHelperInvalidText={showHelperInvalidText}
-      showRequiredLabel={showRequiredLabel}
-      isInvalid={isInvalid}
-      helperText={helperText}
-      invalidText={invalidText}
-      // Use either the specific prop-based or the `forwardRef` value.
-      // `react-datepicker` manipulates the `ref` value so when we
-      // want a specific ref, use the `dsRef` prop.
-      ref={dsRef || ref}
-      attributes={{ ...attributes, onClick }}
-      additionalStyles={additionalStyles}
-    />
-  )
+  ) => {
+    return (
+      <TextInput
+        helperText={helperText}
+        id={id}
+        invalidText={invalidText}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+        labelText={labelText}
+        name={name}
+        onChange={onChange}
+        onClick={onClick}
+        showHelperInvalidText={showHelperInvalidText}
+        showLabel={showLabel}
+        showRequiredLabel={showRequiredLabel}
+        value={value}
+        // Use either the specific prop-based or the `forwardRef` value.
+        // `react-datepicker` manipulates the `ref` value so when we
+        // want a specific ref, use the `dsRef` prop.
+        ref={dsRef || ref}
+      />
+    );
+  }
 );
 
 /**
@@ -216,7 +225,7 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({
   children,
 }) =>
   isDateRange ? (
-    <FormRow id={`${id}-form-row`} gap={FormGaps.ExtraSmall}>
+    <FormRow id={`${id}-form-row`} gap="grid.xs">
       {children}
     </FormRow>
   ) : (
@@ -231,7 +240,7 @@ export const DatePicker = chakra(
     const {
       className,
       dateFormat = "yyyy-MM-dd",
-      dateType = DatePickerTypes.Full,
+      dateType = "full",
       helperText,
       helperTextFrom,
       helperTextTo,
@@ -268,14 +277,14 @@ export const DatePicker = chakra(
     // This updates the internal state for the start and end date values,
     // and also calls the `onChange` prop if it was passed to return the
     // date value to the parent.
-    const onChangeDefault = (date, value) => {
+    const onChangeDefault = (date: Date, value: string) => {
       setFullDate({ ...fullDate, [value]: date });
       onChange && onChange({ ...fullDate, [value]: date });
     };
-    // How many years to display in the DatePickerTypes.Year option.
+    // How many years to display in the "year" option.
     const yearsToDisplay = 12;
     // Both `ReactDatePicker` components share some props.
-    let baseDatePickerAttrs = {
+    let baseDatePickerAttrs: ReactDatePickerAttrs = {
       popperClassName: "date-picker-calendar",
       popperPlacement: "bottom-start",
       popperModifiers: [
@@ -292,7 +301,6 @@ export const DatePicker = chakra(
     };
     // Both custom `TextInput` components share some props.
     let baseCustomTextInputAttrs = {
-      dsId: `${id}-start`,
       isRequired,
       // In the date range type, don't display the "(Required)" text in
       // individual input labels. It'll display in the legend element.
@@ -305,7 +313,7 @@ export const DatePicker = chakra(
       helperText: isDateRange ? helperTextFrom : helperText,
       showHelperInvalidText,
       invalidText,
-      additionalStyles: finalStyles.subLabels,
+      __css: finalStyles.subLabels,
     };
     // These are attribute objects for the `react-datepicker` package component.
     let startDatePickerAttrs = {};
@@ -316,10 +324,10 @@ export const DatePicker = chakra(
     let startLabelText = labelText;
 
     // Update the appropriate props for the selected date type to render.
-    if (dateType === DatePickerTypes.Month) {
+    if (dateType === "month") {
       baseDatePickerAttrs["showMonthYearPicker"] = true;
       baseDatePickerAttrs.dateFormat = "MM-yyyy";
-    } else if (dateType === DatePickerTypes.Year) {
+    } else if (dateType === "year") {
       baseDatePickerAttrs["showYearPicker"] = true;
       baseDatePickerAttrs["yearItemNumber"] = yearsToDisplay;
       baseDatePickerAttrs.dateFormat = "yyyy";
@@ -354,7 +362,6 @@ export const DatePicker = chakra(
     if (isDateRange) {
       const endCustomTextInputAttrs = {
         ...baseCustomTextInputAttrs,
-        dsId: `${id}-end`,
         helperText: helperTextTo,
       };
       // These props are used to follow the pattern recommended by
@@ -375,33 +382,34 @@ export const DatePicker = chakra(
       startLabelText = "From";
       endDatePickerElement = (
         <ReactDatePicker
-          selected={fullDate.endDate}
-          onChange={(date) => onChangeDefault(date, "endDate")}
           customInput={
             <CustomTextInput
-              labelText="To"
               dsRef={refTo}
-              attributes={{ name: nameTo }}
+              labelText="To"
               {...endCustomTextInputAttrs}
             />
           }
+          id={`${id}-end`}
+          name={nameTo}
+          onChange={(date: Date) => onChangeDefault(date, "endDate")}
+          selected={fullDate.endDate}
           {...endDatePickerAttrs}
         />
       );
     }
-
     const startDatePickerElement = (
       <ReactDatePicker
-        selected={fullDate.startDate}
-        onChange={(date) => onChangeDefault(date, "startDate")}
         customInput={
           <CustomTextInput
-            labelText={startLabelText}
             dsRef={ref}
-            attributes={{ name: nameFrom }}
+            labelText={startLabelText}
             {...baseCustomTextInputAttrs}
           />
         }
+        id={`${id}-start`}
+        name={nameFrom}
+        onChange={(date: Date) => onChangeDefault(date, "startDate")}
+        selected={fullDate.startDate}
         {...startDatePickerAttrs}
       />
     );

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}` });
       }