31 - Create the form elements of the design system

[MellyGray]

What this PR does / why we need it:

This PR add the form elements of the design system as described in the Design System Analysis Doc

Which issue(s) this PR closes:

• Closes Create the form elements of the design system #31

Special notes for your reviewer:

I did't add all the form elements in the Dataverse because that could be infinite, I only added the ones we'll be using in the MVP.

For the tests I didn't test some FormElements independently because it didn't make sense to for example test the input component without the label component.

Suggestions on how to test this:

npm run storybook

Go to storybook and check all the different form elements in the Form doc file. You can even see the code from the storybook by clicking the code button in each story.

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

None

Is there a release notes update needed for this change?:

Form elements of the design system added

Additional documentation:

https://docs.google.com/document/d/1OxCQO7B-yJaMWRl8EzuflcSmIaCmVSs19aoD83PjPmA/edit#heading=h.8nqu9gh25f0n

[pdurbin]

Overall this looks good. I did add some suggestions.

[pdurbin]

I'm not sure how accurate this is supposed to be but the way authors are presented is pretty different than what we do in reality. Maybe we should switch to a different example? Or make it more real? Maybe it's just a matter or changing Surname to Affiliation?

To add multiple authors, we use a plus sign to add more, like this:

Also, authors just have a single "Name" field with can be a person or an organization. So it's a little weird to see Name and Surname here (for user accounts we use Given Name and Family Name, by the way:

[MellyGray]

When I did this I was just thinking of an example, not necessary a real one

Maybe I can think of a different example not related to Dataverse, because I would like to have all the different input types in one example

About the plus sign, should I add it to this PR as part of the form elements?

[pdurbin]

I do think the plus sign is important to have somewhere. Yes, if you could add it, that would be great.

I'm happy to help make the examples a little more real. Otherwise, it's a bit confusing.

[MellyGray]

I added the the plus button functionality and fixed the examples, let me know if I need to change something else

[pdurbin]

Authors don't have descriptions in Dataverse so this example feels weird.

[MellyGray]

Yes, sorry, I just wanted to show all the different input types in one example. I can think of a different example not related with Dataverse

[pdurbin]

No worries. Thanks for taking a look!

[MellyGray]

Ok, so I changed the examples to these ones which come from the New Dataset form. Let my know if they make more sense know. I'm working on the plus button to add it to the examples too.

[pdurbin]

Yes. Something like this is what I had in mind:

This is only one of the five tooltips, of course. And I'm not sure of the best way to add more space between "Affiliation" and the tooltip. 😅

This is what I'm doing:

$ git diff
diff --git a/src/stories/ui/form/Form.stories.tsx b/src/stories/ui/form/Form.stories.tsx
index 254b222..fc521b8 100644
--- a/src/stories/ui/form/Form.stories.tsx
+++ b/src/stories/ui/form/Form.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Form } from '../../../sections/ui/form/Form'
 import { Col } from '../../../sections/ui/grid/Col'
 import { Row } from '../../../sections/ui/grid/Row'
+import { Tooltip } from '../../../sections/ui/tooltip/Tooltip'
 
 /**
  * ## Description
@@ -210,6 +211,7 @@ export const FormValidation: Story = {
           </Form.Group>
           <Form.Group as={Col} controlId="basic-form-affiliation">
             <Form.Group.Label>Affiliation</Form.Group.Label>
+            <Tooltip placement="auto" message="The name of the entity affiliated with the author, e.g. an organization's name"></Tooltip>
             <Form.Group.Input type="text" placeholder="Affiliation" />
           </Form.Group>
         </Row>

Anyway, these tool tips are all over our forms so maybe we should go ahead and add them in this PR? I'm going to pull this out of "Ready for QA" (plenty of other stuff in the currently anyway), so we can decide how to proceed. Besides, it sounds like @MellyGray wants to add the plus button. I'll assign all three of us but please unassign yourself if you want off! 😄

[MellyGray]

@ekraffmiller @pdurbin I added the tooltips and fixed the plus button

The plus button doesn't look exactly the same because this is how the Plus icon looks in Bootstrap 5:

Let me know what you think

[pdurbin]

@MellyGray the plus button looks good and I see tooltips too! Thanks!

I haven't looked at the code yet. If @ekraffmiller is happy, this can go to QA. Or maybe I'll get to it. Thanks again!

[ekraffmiller]

Looks good to me, thanks!

[kcondon]

@MellyGray This looks good but there is a merge conflict. Would you please resolve this? Btw, on some of the Props, Group With Multiple Fields, when you click + or -, it does add a new instance but it also clears any existing instances of data. Is that something we would also see when on the page because that might cause some issues if people have not saved the page yet and wanted to add another entry. If this iteration is to get it roughly correct and adjust later, then np. Thanks!