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

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -6,8 +6,6 @@ import {
   useStyleConfig,
 } from "@chakra-ui/react";
 
-import generateUUID from "../../helpers/generateUUID";
-import { ColorVariants } from "./BreadcrumbsTypes";
 import Icon from "../Icons/Icon";
 import {
   IconNames,
@@ -15,6 +13,8 @@ import {
   IconSizes,
   IconTypes,
 } from "../Icons/IconTypes";
+import generateUUID from "../../helpers/generateUUID";
+import { ColorVariants } from "./BreadcrumbsTypes";
 import { getVariant } from "../../utils/utils";
 
 export interface BreadcrumbsDataProps {
@@ -83,9 +83,15 @@ function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   const styles = useStyleConfig("Breadcrumb", { variant });
   const finalStyles = { ...styles, ...additionalStyles };
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
+  const ariaAttrs = { "aria-label": "Breadcrumb" };
 
   return (
-    <ChakraBreadcrumb className={className} __css={finalStyles} id={id}>
+    <ChakraBreadcrumb
+      className={className}
+      id={id}
+      {...ariaAttrs}
+      __css={finalStyles}
+    >
       {breadcrumbItems}
     </ChakraBreadcrumb>
   );

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

@@ -2,7 +2,7 @@
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -101,7 +101,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -200,7 +200,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -299,7 +299,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -398,7 +398,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 5`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-1f2fw9u"
   id="breadcrumbs-test"
 >

package/src/components/Card/Card.stories.mdx

@@ -93,7 +93,7 @@ export const cardLayoutsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Card} />
 

package/src/components/Card/Card.tsx

@@ -222,7 +222,10 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
           child.props.children
         );
       const elem = React.cloneElement(child, {
-        additionalStyles: styles.heading,
+        additionalStyles: {
+          ...styles.heading,
+          ...child.props.additionalStyles,
+        },
         key,
         center,
         // Override the child text with the potential `CardLinkOverlay`.

package/src/components/Chakra/Flex.stories.mdx

@@ -0,0 +1,113 @@
+import { Box, Flex, Spacer, VStack } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+import Link from "../Link/Link";
+import { LinkTypes } from "../Link/LinkTypes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta title={getCategory("Flex")} component={Flex} />
+
+# Flex
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.10`  |
+| Latest            | `0.25.10`  |
+
+Note: This needs the use of the `DSProvider` component. See the
+[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+for more information.
+
+This component is directly exported from Chakra UI. The `Flex` component is
+useful for simple layouts and can be used along with Chakra's `Spacer` component.
+The combination can be used to create a container where the children span the
+entire width of the container.
+
+Details about available props and related child components can be found on the
+[Flex component](https://chakra-ui.com/docs/layout/flex) page on the Chakra UI site.
+
+<Canvas>
+  <Story
+    name="Flex"
+    args={{
+      alignItems: "baseline",
+    }}
+  >
+    {(args) => (
+      <Flex {...args}>
+        <Box w="20" h="20" bg="brand.primary" />
+        <Box w="20" h="20" bg="brand.secondary" />
+        <Box w="20" h="20" bg="brand.primary" />
+        <Box w="20" h="20" bg="brand.secondary" />
+        <Box w="20" h="20" bg="brand.primary" />
+      </Flex>
+    )}
+  </Story>
+</Canvas>
+
+## Examples
+
+Use the `justify` prop to move the children around.
+
+<Canvas>
+  <DSProvider>
+    <VStack align="stretch">
+      <div>
+        <p>`justify` set to "center"</p>
+        <Flex alignItems="baseline" justify="center">
+          <Box w="20" h="20" bg="brand.primary" />
+          <Box w="20" h="20" bg="brand.secondary" />
+          <Box w="20" h="20" bg="brand.primary" />
+          <Box w="20" h="20" bg="brand.secondary" />
+          <Box w="20" h="20" bg="brand.primary" />
+        </Flex>
+      </div>
+      <div>
+        <p>`justify` set to "space-between"</p>
+        <Flex alignItems="baseline" justify="space-between">
+          <Box w="20" h="20" bg="brand.primary" />
+          <Box w="20" h="20" bg="brand.secondary" />
+          <Box w="20" h="20" bg="brand.primary" />
+          <Box w="20" h="20" bg="brand.secondary" />
+          <Box w="20" h="20" bg="brand.primary" />
+        </Flex>
+      </div>
+    </VStack>
+  </DSProvider>
+</Canvas>
+
+## With Spacer
+
+A common use-case is displaying a row with two children where the first aligns
+left and the second aligns right. Add the `Spacer` component between the children.
+This is similar to setting `justify="space-between"` on the `Flex` parent but
+the `Spacer` component is more flexible for most situations.
+
+<Canvas>
+  <DSProvider>
+    <Flex alignItems="baseline">
+      <Heading id="row-heading" level={HeadingLevels.Three}>
+        Heading
+      </Heading>
+      <Spacer />
+      <Link href="#viewmore" type={LinkTypes.Forwards}>
+        View more
+      </Link>
+    </Flex>
+  </DSProvider>
+</Canvas>
+
+```jsx
+<Flex alignItems="baseline">
+  <Heading id="row-heading" level={HeadingLevels.Three}>
+    Heading
+  </Heading>
+  <Spacer />
+  <Link href="#viewmore" type={LinkTypes.Forwards}>
+    View more
+  </Link>
+</Flex>
+```

package/src/components/DatePicker/DatePicker.stories.mdx

@@ -78,7 +78,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={DatePicker} />
 

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

@@ -9,7 +9,7 @@ import { DatePickerTypes } from "./DatePickerTypes";
 import { TextInputRefType } from "../TextInput/TextInput";
 
 /** This adds a "0" padding for date values under "10". */
-const str_pad = (n) => String("0" + n).slice(-2);
+const strPad = (n) => String("0" + n).slice(-2);
 const monthArray = [
   "January",
   "February",
@@ -49,8 +49,8 @@ describe("DatePicker", () => {
   /** Returns today's year, month, and day values. */
   const getTodaysValues = () => {
     const year = todaysDate.getFullYear();
-    const month = str_pad(todaysDate.getMonth() + 1);
-    const day = str_pad(todaysDate.getDate());
+    const month = strPad(todaysDate.getMonth() + 1);
+    const day = strPad(todaysDate.getDate());
     return [year, month, day];
   };
   /** Returns today's date in string format based on the DatePicker type. */
@@ -328,9 +328,9 @@ describe("DatePicker", () => {
       expect(screen.getByDisplayValue(newDayValue)).toBeInTheDocument();
 
       const { startDate } = dateObject;
-      const valueFromOnChange = `${startDate.getFullYear()}-${str_pad(
+      const valueFromOnChange = `${startDate.getFullYear()}-${strPad(
         startDate.getMonth() + 1
-      )}-${str_pad(startDate.getDate())}`;
+      )}-${strPad(startDate.getDate())}`;
       expect(newDayValue).toEqual(valueFromOnChange);
     });
 
@@ -724,7 +724,7 @@ describe("DatePicker", () => {
       // We are two months ahead but still selecting the midmonth day.
       userEvent.click(screen.getByText(midMonthDay));
       // So only the month should change accordingly.
-      const newMonthValue = `${newDayValue.substr(0, 5)}${str_pad(
+      const newMonthValue = `${newDayValue.substr(0, 5)}${strPad(
         "10"
       )}${newDayValue.substr(7)}`;
       expect(screen.getByDisplayValue(newMonthValue)).toBeInTheDocument();

package/src/components/DatePicker/DatePicker.tsx

@@ -4,7 +4,7 @@ import ReactDatePicker from "react-datepicker";
 import { DatePickerTypes } from "./DatePickerTypes";
 import Fieldset from "../Fieldset/Fieldset";
 import { FormRow, FormField } from "../Form/Form";
-import { FormSpacing } from "../Form/FormTypes";
+import { FormGaps } from "../Form/FormTypes";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
@@ -16,8 +16,7 @@ import generateUUID from "../../helpers/generateUUID";
 import { useMultiStyleConfig } from "@chakra-ui/system";
 
 // The object shape for the DatePicker's start and end date state values.
-// Internal use only.
-interface FullDateType {
+export interface FullDateType {
   /** Date object that gets returned for the onChange
    * function only for date ranges. */
   endDate?: Date;
@@ -217,7 +216,7 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({
   children,
 }) =>
   isDateRange ? (
-    <FormRow id={`${id}-form-row`} gap={FormSpacing.ExtraSmall}>
+    <FormRow id={`${id}-form-row`} gap={FormGaps.ExtraSmall}>
       {children}
     </FormRow>
   ) : (

package/src/components/Fieldset/Fieldset.stories.mdx

@@ -39,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.3`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Fieldset} />
 

package/src/components/Fieldset/Fieldset.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 interface FieldsetProps {
-  /** Children to render. Typically form-related components are used. */
-  children: React.ReactNode;
   /** Additional class name to add. */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
@@ -24,7 +22,7 @@ interface FieldsetProps {
  * A wrapper component that renders a `fieldset` element along with a `legend`
  * element as its first child. Commonly used to wrap form components.
  */
-const Fieldset: React.FC<FieldsetProps> = ({
+const Fieldset = ({
   children,
   className,
   id,
@@ -32,7 +30,7 @@ const Fieldset: React.FC<FieldsetProps> = ({
   isRequired = false,
   legendText,
   optReqFlag = true,
-}) => {
+}: React.PropsWithChildren<FieldsetProps>) => {
   const styles = useMultiStyleConfig("Fieldset", { isLegendHidden });
   return (
     <Box as="fieldset" id={id} __css={styles} className={className}>

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

@@ -14,7 +14,7 @@ import CheckboxGroup from "../CheckboxGroup/CheckboxGroup";
 import DatePicker from "../DatePicker/DatePicker";
 import { DatePickerTypes } from "../DatePicker/DatePickerTypes";
 import Form, { FormRow, FormField } from "./Form";
-import { FormSpacing } from "./FormTypes";
+import { FormGaps } from "./FormTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
@@ -27,7 +27,7 @@ import { getCategory } from "../../utils/componentCategories";
 import SimpleGrid from "../Grid/SimpleGrid";
 import { getStorybookEnumValues } from "../../utils/utils";
 
-export const enumValues = getStorybookEnumValues(FormSpacing, "FormSpacing");
+export const enumValues = getStorybookEnumValues(FormGaps, "FormGaps");
 
 <Meta
   title={getCategory("Form")}
@@ -47,9 +47,9 @@ export const enumValues = getStorybookEnumValues(FormSpacing, "FormSpacing");
       control: { type: "radio" },
       options: ["get", "post"],
     },
-    spacing: {
+    gap: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "FormSpacing.Large" } },
+      table: { defaultValue: { summary: "FormGaps.Large" } },
       options: enumValues.options,
     },
   }}
@@ -60,15 +60,31 @@ export const enumValues = getStorybookEnumValues(FormSpacing, "FormSpacing");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Form} />
 
-The `Form` component renders a standard `<form>` element and should be used to handle layout and spacing for child input fields. `FormRow` and `FormField` components should be used to build the `<form>` struture and to arrange input fields as needed.
+The `Form` component renders a standard `<form>` element and should be used to
+handle layout and spacing for child input fields. `FormRow` and `FormField`
+components should be used to build the `<form>` structure and to arrange input
+fields as needed.
 
-`FormField` should be used as a parent for all input components from the DS (`Button`, `Select`, `TextInput`, etc.).
+```jsx
+<Form>
+  <FormRow>
+    <FormField>{/* ... */}</FormField>
+  </FormRow>
+  <FormRow>
+    <FormField>{/* ... */}</FormField>
+  </FormRow>
+</Form>
+```
+
+`FormField` should be used as a parent for all input components from the DS
+(`Button`, `Select`, `TextInput`, etc.).
 
-`FormRow` should be used as a parent of multiple `FormField` components when you need to render multiple input components in a horizontal row.
+`FormRow` should be used as a parent of multiple `FormField` components when you
+need to render multiple input components in a horizontal row.
 
 <Canvas withToolbar>
   <Story
@@ -78,11 +94,11 @@ The `Form` component renders a standard `<form>` element and should be used to h
       className: undefined,
       id: "form-id",
       method: "get",
-      spacing: "FormSpacing.Large",
+      gap: "FormGaps.Large",
     }}
   >
     {(args) => (
-      <Form {...args} spacing={enumValues.getValue(args.spacing)}>
+      <Form {...args} gap={enumValues.getValue(args.gap)}>
         <FormRow>
           <FormField>
             <TextInput
@@ -205,7 +221,7 @@ export const formRow = (nameString, size) => {
   return (
     <li key={size}>
       <Heading level={HeadingLevels.Three}>{labelText}</Heading>
-      <Form spacing={size}>
+      <Form gap={size}>
         <FormRow>
           <FormField>
             <Select
@@ -250,16 +266,18 @@ export const formRow = (nameString, size) => {
   );
 };
 export const sizes = [];
-for (const formSpacing in FormSpacing) {
-  sizes.push(formRow(`FormSpacing.${formSpacing}`, FormSpacing[formSpacing]));
+for (const FormGaps in FormGaps) {
+  sizes.push(formRow(`FormGaps.${FormGaps}`, FormGaps[FormGaps]));
 }
 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).
+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).
 
 **IMPORTANT:** The default spacing should not be overwritten without a very good reason.
 
-Below are the spacing variants available with the `FormSpacing` enum.
+Below are the spacing variants available with the `FormGaps` enum.
 
 <Canvas>
   <Story
@@ -277,7 +295,7 @@ Below are the spacing variants available with the `FormSpacing` enum.
 <Story name="Example Code" />
 
 ```jsx
-<Form action="/end/point" method="get" spacing={FormSpacing.Large}>
+<Form action="/end/point" method="get" gap={FormGaps.Large}>
   <FormField>
     <TextInput
       labelText="Username"

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

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, 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 { FormGaps } from "./FormTypes";
 import TextInput from "../TextInput/TextInput";
 
 describe("Form Accessibility", () => {
@@ -12,6 +12,19 @@ describe("Form Accessibility", () => {
     const { container } = render(<Form />);
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test for the full hierachy", async () => {
+    const { container } = render(
+      <Form>
+        <FormRow>
+          <FormField>Form Field 1</FormField>
+          <FormField>Form Field 2</FormField>
+          <FormField>Form Field 3</FormField>
+        </FormRow>
+      </Form>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Form Snapshot", () => {
@@ -101,11 +114,87 @@ describe("Form", () => {
     expect(form).toHaveAttribute("method", "get");
   });
 
+  it("passes down the `Form`'s id down to its children", () => {
+    const { container } = render(
+      <Form id="formId">
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+      </Form>
+    );
+
+    expect(container.querySelector("#formId")).toBeInTheDocument();
+    // The first `FormRow` adds "child0" to its id
+    expect(container.querySelector("#formId-child0")).toBeInTheDocument();
+    // The first `FormRow`'s first `FormField` adds "grandchild0" to its id
+    expect(
+      container.querySelector("#formId-child0-grandchild0")
+    ).toBeInTheDocument();
+    // The first `FormRow`'s second `FormField` adds "grandchild1" to its id
+    expect(
+      container.querySelector("#formId-child0-grandchild1")
+    ).toBeInTheDocument();
+    // The second `FormRow` adds "child1" to its id
+    expect(container.querySelector("#formId-child1")).toBeInTheDocument();
+    // The second `FormRow`'s first `FormField` adds "grandchild0" to its id
+    expect(
+      container.querySelector("#formId-child1-grandchild0")
+    ).toBeInTheDocument();
+    // The second `FormRow`'s second `FormField` adds "grandchild1" to its id
+    expect(
+      container.querySelector("#formId-child1-grandchild1")
+    ).toBeInTheDocument();
+  });
+
+  it("logs a warning if a child of `FormRow` is not a `FormField`", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Form>
+        <FormRow>
+          <div>Not a FormField</div>
+        </FormRow>
+      </Form>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "FormRow children must be `FormField` components."
+    );
+  });
+
+  it("calls the onSubmit function", () => {
+    const onSubmit = jest.fn();
+    render(
+      <Form onSubmit={onSubmit}>
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+      </Form>
+    );
+    const form = screen.getByRole("form");
+    expect(onSubmit).toHaveBeenCalledTimes(0);
+    fireEvent.submit(form);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
   // 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}>
+  //     <Form gap={FormGaps.ExtraSmall}>
   //       <FormRow />
   //     </Form>
   //   );

package/src/components/Form/Form.tsx

@@ -1,30 +1,29 @@
-import { Box } from "@chakra-ui/react";
 import * as React from "react";
 
-import { FormSpacing } from "./FormTypes";
+import { FormGaps } from "./FormTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
 import generateUUID from "../../helpers/generateUUID";
 
-export interface FormChildProps {
-  /** className to be applied to FormRow */
+interface FormBaseProps {
+  /** className to be applied to FormRow, FormField, and Form */
   className?: string;
-  /** Spacing size (internal use) */
-  gap?: FormSpacing;
+  /** 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;
   /** ID that other components can cross reference (internal use) */
   id?: string;
 }
 
-export interface FormProps {
+export interface FormChildProps extends FormBaseProps {}
+
+export interface FormProps extends FormBaseProps {
   /** Optional form `action` attribute */
   action?: string;
-  /** 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 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;
+  /** Function to call for the `onSubmit` form event. */
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 
 /** FormRow child-component */
@@ -35,7 +34,11 @@ export function FormRow(props: React.PropsWithChildren<FormChildProps>) {
     children,
     (child: React.ReactElement, i) => {
       if (!child) return null;
-      return React.cloneElement(child, { id: `${id}-grandchild${i}` });
+      if (child.type === FormField || child.props.mdxType === "FormField") {
+        return React.cloneElement(child, { id: `${id}-grandchild${i}` });
+      }
+      console.warn("FormRow children must be `FormField` components.");
+      return null;
     }
   );
   return (
@@ -61,9 +64,10 @@ export default function Form(props: React.PropsWithChildren<FormProps>) {
     action,
     children,
     className,
+    gap = FormGaps.Large,
     id = generateUUID(),
     method,
-    spacing = FormSpacing.Large,
+    onSubmit,
   } = props;
 
   let attributes = {};
@@ -76,21 +80,21 @@ export default function Form(props: React.PropsWithChildren<FormProps>) {
   const alteredChildren = React.Children.map(
     children,
     (child: React.ReactElement, i) => {
-      return React.cloneElement(child, { gap: spacing, id: `${id}-child${i}` });
+      return React.cloneElement(child, { gap, id: `${id}-child${i}` });
     }
   );
 
   return (
-    <Box
-      as="form"
+    <form
       aria-label="form"
+      className={className}
       id={id}
+      onSubmit={onSubmit}
       {...attributes}
-      className={className}
     >
-      <SimpleGrid columns={1} gap={spacing} id={id + "-parent"}>
+      <SimpleGrid columns={1} gap={gap} id={`${id}-parent`}>
         {alteredChildren}
       </SimpleGrid>
-    </Box>
+    </form>
   );
 }

package/src/components/Form/FormTypes.tsx

@@ -1,3 +1,3 @@
-import { GridGaps as FormSpacing } from "../Grid/GridTypes";
+import { GridGaps as FormGaps } from "../Grid/GridTypes";
 
-export { FormSpacing };
+export { FormGaps };