@nypl/design-system-react-components 0.25.0 → 0.25.1

package/src/components/DatePicker/DatePicker.test.tsx

@@ -195,7 +195,7 @@ describe("DatePicker", () => {
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           invalidText="Please select a valid date."
-          errored={true}
+          isInvalid={true}
         />
       );
       // When errored, we expect only the error text to appear.
@@ -212,7 +212,7 @@ describe("DatePicker", () => {
         <DatePicker
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
-          disabled={true}
+          isDisabled={true}
         />
       );
 
@@ -383,7 +383,7 @@ describe("DatePicker", () => {
           helperText="Note that the Library may be closed on Sundays."
           helperTextTo="Note for the 'to' field."
           invalidText="Please select a valid date range."
-          errored={true}
+          isInvalid={true}
         />
       );
 
@@ -398,7 +398,7 @@ describe("DatePicker", () => {
           helperText="Note that the Library may be closed on Sundays."
           helperTextTo="Note for the 'to' field."
           invalidText="Please select a valid date range."
-          disabled={true}
+          isDisabled={true}
         />
       );
 

package/src/components/DatePicker/DatePicker.tsx

@@ -86,14 +86,14 @@ export interface DatePickerProps extends DatePickerWrapperProps {
   maxDate?: string;
   /** Populates the `HelperErrorText` error state for both "From" and "To" input components. */
   invalidText?: string;
-  /** Helper for modifiers array; adds 'errored' styling. */
-  errored?: boolean;
+  /** Helper for modifiers array; adds 'isInvalid' styling. */
+  isInvalid?: boolean;
   /** Adds the 'required' property to the input element(s). */
   required?: boolean;
   /** Whether or not to display the "Required"/"Optional" text in the label text. */
   showOptReqLabel?: boolean;
   /** Adds the 'disabled' property to the input element(s). */
-  disabled?: boolean;
+  isDisabled?: boolean;
   /** Modifiers array for use with BEM. See how to work with modifiers and BEM
    * here: http://getbem.com/introduction/ */
   modifiers?: string[];
@@ -130,10 +130,10 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
       onChange,
       value,
       labelText,
-      disabled,
+      isDisabled,
       dsRequired,
       showOptReqLabel,
-      errored,
+      isInvalid,
       helperText,
       invalidText,
       onClick,
@@ -149,10 +149,10 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
       onChange={onChange}
       value={value}
       labelText={labelText}
-      disabled={disabled}
-      required={dsRequired}
+      isDisabled={isDisabled}
+      isRequired={dsRequired}
       showOptReqLabel={showOptReqLabel}
-      errored={errored}
+      isInvalid={isInvalid}
       helperText={helperText}
       invalidText={invalidText}
       // Use either the specific prop-based or the forwardRef value.
@@ -220,10 +220,10 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
       helperTextFrom,
       helperTextTo,
       invalidText,
-      errored,
+      isInvalid,
       required,
       showOptReqLabel = true,
-      disabled,
+      isDisabled,
       nameFrom,
       nameTo,
       blockName,
@@ -268,7 +268,7 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
       minDate: minDate ? new Date(minDate) : null,
       maxDate: maxDate ? new Date(maxDate) : null,
       dateFormat,
-      disabled,
+      isDisabled,
     };
     // Both TextInput components share some props.
     let baseCustomTextInputAttrs = {
@@ -277,8 +277,8 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
       // Always display the labels or the input fields when
       // the DatePicker component is a `dateRange` type.
       showLabel: dateRange ? true : showLabel,
-      disabled,
-      errored,
+      isDisabled,
+      isInvalid,
       helperText: dateRange ? helperTextFrom : helperText,
       invalidText,
     };

package/src/components/DatePicker/_DatePicker.scss

@@ -2,6 +2,7 @@ fieldset {
   legend {
     @include space-stack-xs;
 
+    font-size: 14px;
     font-weight: var(--font-weight-medium);
   }
 

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

@@ -13,7 +13,9 @@ import Form, { FormRow, FormField } from "./Form";
 import { FormSpacing } from "./FormTypes";
 import TextInput from "../TextInput/TextInput";
 import Radio from "../Radio/Radio";
+import RadioGroup from "../RadioGroup/RadioGroup";
 import Checkbox from "../Checkbox/Checkbox";
+import CheckboxGroup from "../CheckboxGroup/CheckboxGroup";
 import Label from "../Label/Label";
 import Button from "../Button/Button";
 import Select from "../Select/Select";
@@ -22,6 +24,8 @@ import { HeadingLevels } from "../Heading/HeadingTypes";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
 import { action } from "@storybook/addon-actions";
 
+import SimpleGrid from "../Grid/SimpleGrid";
+
 <Meta
   title={getCategory("Form")}
   component={Form}
@@ -41,7 +45,7 @@ import { action } from "@storybook/addon-actions";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.24.1`   |
+| Latest            | `0.25.1`   |
 
 <Description of={Form} />
 
@@ -70,18 +74,34 @@ The `Form` component renders a standard `<form>` element and should be used to h
   >
     {(args) => (
       <Form {...args}>
+        <FormRow>
+          <FormField>
+            <TextInput
+              labelText="First Name"
+              helperText="Make sure to complete this field."
+              isRequired
+            />
+          </FormField>
+          <FormField>
+            <TextInput
+              labelText="Last Name"
+              helperText="Make sure to complete this field."
+              isRequired
+            />
+          </FormField>
+        </FormRow>
         <FormField>
           <TextInput
             labelText="Username"
             helperText="Make sure to complete this field."
-            required
+            isRequired
           />
         </FormField>
         <FormField>
           <TextInput
             labelText="Password"
             helperText="Make sure to complete this field."
-            required
+            isRequired
           />
         </FormField>
         <FormRow>
@@ -109,24 +129,24 @@ The `Form` component renders a standard `<form>` element and should be used to h
         </FormRow>
         <FormRow>
           <FormField>
-            <Label>Checkbox Group</Label>
-            <Checkbox labelText="Checkbox 1" showLabel />
-            <br />
-            <Checkbox labelText="Checkbox 1" showLabel />
-            <br />
-            <Checkbox labelText="Checkbox 1" showLabel />
-            <br />
-            <Checkbox labelText="Checkbox 1" showLabel />
+            <CheckboxGroup
+              labelText="Checkbox Group"
+              name="cbg1"
+              optReqFlag={false}
+            >
+              <Checkbox labelText="Checkbox 1" showLabel />
+              <Checkbox labelText="Checkbox 2" showLabel />
+              <Checkbox labelText="Checkbox 3" showLabel />
+              <Checkbox labelText="Checkbox 4" showLabel />
+            </CheckboxGroup>
           </FormField>
           <FormField>
-            <Label>Radio Group</Label>
-            <Radio labelText="Radio 1" showLabel />
-            <br />
-            <Radio labelText="Radio 2" showLabel />
-            <br />
-            <Radio labelText="Radio 3" showLabel />
-            <br />
-            <Radio labelText="Radio 4" showLabel />
+            <RadioGroup labelText="Radio Group" name="rg1" optReqFlag={false}>
+              <Radio labelText="Radio 1" showLabel />
+              <Radio labelText="Radio 2" showLabel />
+              <Radio labelText="Radio 3" showLabel />
+              <Radio labelText="Radio 4" showLabel />
+            </RadioGroup>
           </FormField>
           <FormField>
             <Select
@@ -137,6 +157,8 @@ The `Form` component renders a standard `<form>` element and should be used to h
               <option>Option 1</option>
               <option>Option 2</option>
               <option>Option 3</option>
+              <option>Option 4</option>
+              <option>Option 5</option>
             </Select>
           </FormField>
         </FormRow>
@@ -168,6 +190,7 @@ export const formRow = (size) => {
               <option>Option 1</option>
               <option>Option 2</option>
               <option>Option 3</option>
+              <option>Option 4</option>
             </Select>
           </FormField>
           <FormField>
@@ -179,6 +202,7 @@ export const formRow = (size) => {
               <option>Option 1</option>
               <option>Option 2</option>
               <option>Option 3</option>
+              <option>Option 4</option>
             </Select>
           </FormField>
           <FormField>
@@ -190,6 +214,7 @@ export const formRow = (size) => {
               <option>Option 1</option>
               <option>Option 2</option>
               <option>Option 3</option>
+              <option>Option 4</option>
             </Select>
           </FormField>
         </FormRow>
@@ -231,14 +256,14 @@ Below are the spacing variants available with the `FormSpacing` enum.
     <TextInput
       labelText="Username"
       helperText="Make sure to complete this field."
-      required
+      isRequired
     />
   </FormField>
   <FormField>
     <TextInput
       labelText="Password"
       helperText="Make sure to complete this field."
-      required
+      isRequired
     />
   </FormField>
   <FormRow>

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

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Form, { FormRow, FormField } from "./Form";
-import { FormSpacing } from "./FormTypes";
+// import { FormSpacing } from "./FormTypes";
 import TextInput from "../TextInput/TextInput";
 
 describe("Form Accessibility", () => {
@@ -32,40 +32,43 @@ describe("Form Snapshot", () => {
 });
 
 describe("Form", () => {
-  let container;
   it("Renders a <form> element", () => {
-    const utils = render(<Form />);
-    container = utils.container;
-
-    expect(container.querySelector(".form")).toBeInTheDocument();
+    render(<Form />);
+    expect(screen.getByRole("form")).toBeInTheDocument();
   });
 
-  it("Renders a <form> element with child .form-row element", () => {
-    const utils = render(
+  it("Renders a <form> element with child FormRow element", () => {
+    render(
       <Form>
         <FormRow />
       </Form>
     );
-    container = utils.container;
-
-    expect(container.querySelector(".form")).toBeInTheDocument();
-    expect(container.querySelector(".form-row")).toBeInTheDocument();
+    const form = screen.getByRole("form");
+    const formRow = form.firstChild;
+    expect(form).toBeInTheDocument();
+    expect(formRow).toBeInTheDocument();
+    expect(formRow).toHaveStyle({
+      display: "grid",
+    });
   });
 
-  it("Renders a <form> element with child .form-field element", () => {
-    const utils = render(
+  it("Renders a <form> element with child FormField element", () => {
+    render(
       <Form>
         <FormField />
       </Form>
     );
-    container = utils.container;
-
-    expect(container.querySelector(".form")).toBeInTheDocument();
-    expect(container.querySelector(".form-field")).toBeInTheDocument();
+    const form = screen.getByRole("form");
+    const formField = form.firstChild;
+    expect(form).toBeInTheDocument();
+    expect(formField).toBeInTheDocument();
+    expect(formField).toHaveStyle({
+      display: "grid",
+    });
   });
 
-  it("Renders a <form> element with .form-row, .form-field and input elements properly nested", () => {
-    const utils = render(
+  it("Renders a <form> element with FormRow, FormField and input elements properly nested", () => {
+    render(
       <Form>
         <FormRow>
           <FormField>
@@ -74,33 +77,43 @@ describe("Form", () => {
         </FormRow>
       </Form>
     );
-    container = utils.container;
-
-    expect(container.querySelector(".form")).toBeInTheDocument();
-    expect(container.querySelector(".form-row")).toBeInTheDocument();
-    expect(container.querySelector(".form-field")).toBeInTheDocument();
-    expect(container.querySelector(".textinput")).toBeInTheDocument();
+    const form = screen.getByRole("form");
+    const formRow = form.firstChild;
+    const formField = formRow.firstChild;
+    const textInput = screen.getByRole("textbox");
+    expect(form).toBeInTheDocument();
+    expect(formRow).toBeInTheDocument();
+    expect(formRow).toHaveStyle({
+      display: "grid",
+    });
+    expect(formField).toBeInTheDocument();
+    expect(formField).toHaveStyle({
+      display: "grid",
+    });
+    expect(textInput).toBeInTheDocument();
   });
 
   it("Renders a <form> element with custom `action` and `method` attributes", () => {
-    const utils = render(<Form action="/end/point" method="get" />);
-    container = utils.container;
-
-    expect(container.querySelector(".form")).toBeInTheDocument();
-    expect(container.querySelector(".form")).toHaveAttribute(
-      "action",
-      "/end/point"
-    );
-    expect(container.querySelector(".form")).toHaveAttribute("method", "get");
+    render(<Form action="/end/point" method="get" />);
+    const form = screen.getByRole("form");
+    expect(form).toBeInTheDocument();
+    expect(form).toHaveAttribute("action", "/end/point");
+    expect(form).toHaveAttribute("method", "get");
   });
 
-  it("Renders a <form> element with spacing variant applied", () => {
-    const utils = render(<Form spacing={FormSpacing.ExtraSmall} />);
-    container = utils.container;
-
-    expect(container.querySelector(".form")).toBeInTheDocument();
-    expect(
-      container.querySelector(".form--spacing-extra-small")
-    ).toBeInTheDocument();
-  });
+  // 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 spacing={FormSpacing.ExtraSmall}>
+  //       <FormRow />
+  //     </Form>
+  //   );
+  //   const form = screen.getByRole("form");
+  //   const formRow = form.firstChild;
+  //   expect(form).toBeInTheDocument();
+  //   expect(formRow).toHaveStyle({
+  //     "grid-gap": "var(--chakra-space-xs)",
+  //   });
+  // });
 });

package/src/components/Form/Form.tsx

@@ -1,66 +1,94 @@
 import * as React from "react";
-import bem from "../../utils/bem";
-import generateUUID from "../../helpers/generateUUID";
 import { FormSpacing } from "./FormTypes";
+import SimpleGrid from "../Grid/SimpleGrid";
+import { Box } from "@chakra-ui/react";
+import generateUUID from "../../helpers/generateUUID";
+
+export interface FormChildProps {
+  /** className to be applied to FormRow */
+  className?: string;
+  /** Spacing size (internal use) */
+  gap?: FormSpacing;
+  /** ID that other components can cross reference (internal use) */
+  id?: string;
+}
 
 export interface FormProps {
   /** Optional form `action` attribute */
   action?: string;
-  /** Optional additional attributes passed to the `<form>` element */
-  attributes?: { [key: string]: any };
   /** Optional className you can add in addition to `form` */
   className?: string;
   /** Optional ID that other components can cross reference */
   id?: string;
   /** Optional form `method` attribute */
   method?: "get" | "post";
-  /** Optional modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
   /** 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``` */
   spacing?: FormSpacing;
 }
 
-// FormRow child-component
-export function FormRow(props) {
-  const { children, className } = props;
-  return <div className={bem("form-row", [], "", [className])}>{children}</div>;
+/** FormRow child-component */
+export function FormRow(props: React.PropsWithChildren<FormChildProps>) {
+  const { children, className, gap, id } = props;
+  const count = React.Children.count(children);
+  const alteredChildren = React.Children.map(
+    children,
+    (child: React.ReactElement, i) => {
+      return React.cloneElement(child, { id: `${id}-grandchild${i}` });
+    }
+  );
+  return (
+    <SimpleGrid columns={count} className={className} gap={gap} id={id}>
+      {alteredChildren}
+    </SimpleGrid>
+  );
 }
 
-// FormField child-component
-export function FormField(props) {
-  const { children, className } = props;
+/** FormField child-component */
+export function FormField(props: React.PropsWithChildren<FormChildProps>) {
+  const { children, className, gap, id } = props;
   return (
-    <div className={bem("form-field", [], "", [className])}>{children}</div>
+    <SimpleGrid columns={1} className={className} gap={gap} id={id}>
+      {children}
+    </SimpleGrid>
   );
 }
 
+/** main Form component */
 export default function Form(props: React.ComponentProps<"form"> & FormProps) {
   const {
     action,
-    attributes = {},
     children,
     className,
     id = generateUUID(),
     method,
-    modifiers = [],
     spacing,
   } = props;
 
+  let attributes = {};
   action && (attributes["action"] = action);
 
   method &&
     (method === "get" || method === "post") &&
     (attributes["method"] = method);
 
-  spacing && modifiers.push(`spacing-${spacing}`);
+  const alteredChildren = React.Children.map(
+    children,
+    (child: React.ReactElement, i) => {
+      return React.cloneElement(child, { gap: spacing, id: `${id}-child${i}` });
+    }
+  );
 
   return (
-    <form
-      className={bem("form", modifiers, "", [className])}
+    <Box
+      as="form"
+      aria-label="form"
       id={id}
       {...attributes}
+      className={className}
     >
-      {children}
-    </form>
+      <SimpleGrid columns={1} gap={spacing} id={id + "-parent"}>
+        {alteredChildren}
+      </SimpleGrid>
+    </Box>
   );
 }

package/src/components/Form/FormTypes.tsx

@@ -1,8 +1,3 @@
-export enum FormSpacing {
-  ExtraExtraSmall = "extra-extra-small",
-  ExtraSmall = "extra-small",
-  Small = "small",
-  Medium = "medium",
-  Large = "large",
-  ExtraLarge = "extra-large",
-}
+import { GridGaps as FormSpacing } from "../Grid/GridTypes";
+
+export { FormSpacing };

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

@@ -2,26 +2,36 @@
 
 exports[`Form Snapshot Renders the UI snapshot correctly 1`] = `
 <form
-  className="form "
+  aria-label="form"
+  className="css-0"
   id="snapshot-form"
 >
   <div
-    className="form-row "
+    className="css-aq1pyb"
+    id="snapshot-form-parent"
   >
     <div
-      className="form-field "
+      className="css-1ao258g"
+      id="snapshot-form-child0"
     >
-      Form Field 1
-    </div>
-    <div
-      className="form-field "
-    >
-      Form Field 2
-    </div>
-    <div
-      className="form-field "
-    >
-      Form Field 3
+      <div
+        className="css-aq1pyb"
+        id="snapshot-form-child0-grandchild0"
+      >
+        Form Field 1
+      </div>
+      <div
+        className="css-aq1pyb"
+        id="snapshot-form-child0-grandchild1"
+      >
+        Form Field 2
+      </div>
+      <div
+        className="css-aq1pyb"
+        id="snapshot-form-child0-grandchild2"
+      >
+        Form Field 3
+      </div>
     </div>
   </div>
 </form>

package/src/components/Grid/GridTypes.tsx

@@ -0,0 +1,9 @@
+export enum GridGaps {
+  ExtraExtraSmall = "xxs",
+  ExtraSmall = "xs",
+  Small = "s",
+  Medium = "m",
+  Large = "l",
+  ExtraLarge = "xl",
+  ExtraExtraLarge = "xxl",
+}