[TB] Create the form template and organisms

[lwnoble]

We need to create a form component

• Each form component will have an input type (text, dropdown, multi-select dropdown text area, or type ahead) * Note we do not yet have a type ahead input component
• Each form component will have a fixed or floating label (We can start with just fixed)
• The form element may have the following variables:
• Help Text
• A notification (Error, warning, success or info)

You can view the designs in Figma here:
https://www.figma.com/file/VV48uh4FjSEpCLqR5bwUPJ/Theme-Builder---MASTER?type=design&node-id=1161-112517&mode=design&t=HIdhAwflZ68rX4Dz-0

Look under components > form

• link to problem content

Proposed Solution

[aaronreed708]

@lwnoble not sure what you mean by component and I don't appear to have access to the Figma to know exactly what you are envisioning. Do you mean a new molecule that has some associated settings? Or is this a new organism that doesn't have settings?

This may be a good first issue once we have this clarification.

[aaronreed708]

Epic to capture requirements, subsequent implementation issues to follow

[aaronreed708]

Discussed with @lwnoble today. We came to the conclusion that this collection of form items is a template, not a component or molecule.

where @lwnoble says, "form element", that would be one of the following molecules/components: text, dropdown, multi-select dropdown, text area, or type ahead. Where she mentions "form component" above, that will actually be a form organism.

So to summarize our discussions, this issue seeks to create a form template, as designed in the Figma link above, that will layout a bunch of form organisms that demonstrate many of the potential variations that a form organism may take based on their configurable variables.

Todo's:

• create form components like label (fixed initially, then add floating), help, or notification (Error, warning, success or info)
  • some thought needs to be given here whether these would have value in the Theme Builder UI as it exists today. Would the end user want/need to configure labels, for example, system wide (which is what a design system would do)? Or would we just show them in the "Components" tab as something that the end user can use to build organisms, but not necessarily enforce system wide?
• create form organisms that use the form elements like text, dropdown, multi-select dropdown, text area, or type ahead in combination with the molecules/components like label, help, or notification
  • a form organism page could have radio butons, switches, etc. where these controls affect what shows in the demonstration/display area of the organism.
    • perhaps a switch to turn off/hide and turn on/show the error/notification area, a switch to make the label fixed or float, etc.
• create a form template that follows the Figma design and demonstrates the form organisms in a wide variety of configurations
• a future/stretch goal would be to allow a designer to create a form template and dynamically add (using drag and drop?) form organisms to the form with user-provided configurations
  • the goal here would be to allow a designer to pass to a developer something that can be loaded into Theme Builder and, once loaded in Theme Builder, show their vision in a tangible, working environment.

I updated the title of this issue to reflect these clarifications.