Add Form component

[mkernohanbc]

Cherry-picked from #401 so that we can test with new components. Scope of this PR is the same:

This PR adds a new Form component, based on RAC Form. An example instance and documentation page in Storybook is also included.

The Form component is intended to be used as a wrapper around other components, to provide additional support for data validation and submission and form styling. It renders an HTML <form> element.

By default, the Form component renders without any styling of its own. The className prop can be used to style the form as a whole.

Some boilerplate CSS is included (see Form.css). This is currently only used to style the example form in Storybook.

[mkernohanbc]

c19a71d simplifies the component structure:

• removes explicit prop declarations and CSS import from the component itself
• adds props as argTypes in Form.stories.tsx instead
• moves boilerplate CSS used for Storybook example into /src/stories
• expands documentation page in Storybook, in a separate 'Utility' section

This component is a convenience, that simply enables the user to import the RAC Form component without needing to add an additional dependency.

With that, I think this is ready for review!

[ty2k]

Great addition! 🚀 Just one small change to the MDX file to make the code sample more readable.

When testing this component, I find the HTML validation is super easy to use. Features like passing type="email" to an input field or type="reset" to a button just work.

Example:

<Form>
  <TextField label="Name" isRequired />
  <TextField type="email" label="Email" isRequired />
  <Select
    label="Employment status"
    items={[
      { id: "employee", label: "Employee" },
      { id: "contractor", label: "Contractor" },
    ]}
    isRequired
  />
  <Button type="submit" variant="primary">
    Submit
  </Button>
  <Button type="reset" variant="secondary">
    Reset
  </Button>
</Form>

After interacting with each field:

With valid data in each field:

Invalid email:

[ty2k]

Instead of using the <Source> block, let's use a code fence so that the whitespace within the CSS snippet won't get mangled on save:

[mkernohanbc]

Fixed in 78cf1c9!

[ty2k]

Looks great! ✅