Example info request form

[GaryRidgway]

I have a branch here that I am using as a sort of checklist to go through and move styles over.

[bspeare]

Remaining work here is to make the focus styles stronger and get review from @pyrello.

[pyrello]

Remaining work here is to make the focus styles stronger and get review from @pyrello.

I'm going to review this today.

[pyrello]

Some initial thoughts:

• Because the form being created in this PR is a mockup of an existing form and its purpose is to help guide providing styles for that particular form, I don't think it should be built in a component called Form.vue. If we are going to use a component, maybe we need a component with a name specific to that form.
• I'm not sure that creating a Vue component is warranted here. The implication of a Vue component in the context of a library like this is that someone could consume it. But there is no use case for consuming a demo form.
• If we were going to use a form component to drive this, the form component itself would want to be agnostic to the specific form and be able to render different forms depending on the input being passed to it. There might already exist a Vue plugin that does something like this so it would be worth looking to see so we're not reinventing the wheel.
• I'm open to the above being part of this slice (or at least some experimenting to see how difficult it is), but if we don't end up using a form component here, I would suggest we just hard code the form markup into a story file.
• Similar to above, I don't think we should be using a Form.stories.js file for this specific demo form. While I think this could morph into being a form that is used to demo our form styles, this hasn't been decided yet and I don't want this form to become the de facto form component without some thinking about whether that is what we want or not. To that end, I'm wondering if we need a demo or showcase namespace for providing these types of mockups and examples.

[pyrello]

@GaryRidgway and I discussed my comments above. Based on that conversation, here is my understanding of next steps:

• Create a showcase folder inside the components folder. The purpose of this is to have a place to put mockups or other examples that combine multiple components in more complex configurations.
• Build a .stories.js file for the example form that is part of this work. The first iteration of this is that all the form markup just lives in this file. If we find value in it later, we can swap out the markup with imported components.
• The Form.vue file can be removed for now or its template could be replaced with something like the following that just allows it to be a convenient way to wrap form elements in a form tag:

<form>
  <slot></slot>
</form>

• The mockup being created in Create application form layout in UIDS #997 can be implemented in a similar way as above, but potentially with some of the parts of the template in the .stories.js file being replaced with Vue components if the work progresses that far.

[pyrello]

This looks good and provides a good starting point for adding form styles as well as a nice looking example form.