Identify UI elements for the Dataverse Design System and create issues for their development

[GPortas]

Overview of the Feature Request

For the development of the different Dataverse functionalities, we need to identify the common UI primitives shared across the application, such as generic buttons, text fields, etc, that will be part of the Dataverse Design System.

Since the Dataverse UI is already developed in JSF and there is already documentation related to this topic (https://guides.dataverse.org/en/latest/style/patterns.html), the ultimate goal of this issue is to analyze the existing UI and resources to identify and create issues corresponding to the implementation of the different UI elements.

Considerations:

• There may be elements that, in addition to being used directly, also compound other larger elements that are also used in different places.
• We must focus only on the components within the scope of the MVP functionalities
• App-specific components that contain business logic should not be included

Design system elements don't need to be atoms they can also be molecules as long as they are not business specific
Example atom (a button):

Example molecule (a modal):

A part from that, we'll use this issue to think about UI components documentation Guidelines. Using for example the Storybook docs capabilities

What kind of user is the feature intended for?

Dataverse frontend developers

What inspired the request?

• MVP Strategy document: link
• Frontend team meeting about initial contributions

What existing behavior do you want changed?

N/A

Any brand new behavior do you want to add to Dataverse Frontend?

N/A

Any related open or closed issues to this feature request?

N/A