32 - Add buttons and dropdowns of the design system

[MellyGray]

What this PR does / why we need it:

This PR adds the buttons and dropdown elements of the Dataverse design system as React components having them documented in the Storybook. This will make it easier for developers to use and maintain consistent buttons and dropdowns across the application.

Which issue(s) this PR closes:

• Closes Create the buttons and dropdowns of the design system #32

Special notes for your reviewer:

I've used Bootstrap Button and Dropdown encapsulated in our own component.

I've made some customisation to the Bootstrap CSS styles to match the current styles of the Dataverse JSF frontend. This customisation made me add a css property with the !important, which is a bad practice, to override a css style added by Bootstrap js.

I believe this wouldn't be necessary if we used Bootstrap as it is, just changing the theme variables, instead of making a huge customisation. I've assumed we wanted this customisation so the new frontend looks as the one in JSF as specified in the current Style Guide but let me know if we can stick to Bootstrap styles so I can do the changes to remove the property with the !important

Suggestions on how to test this:

npm run storybook

Go to http://localhost:6006

In the UI section you can see the Button and DropdownButton components with their different states

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

This PR adds the button and dropdown of the Dataverse Design System as specified in the Analysis doc

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

Button and dropdown added to the Design System

Additional documentation:

• Design System Analysis
• Current Dataverse Style Guide

[mreekie]

Sprint kickoff:

• resized to 33 to 10 for new sprint

[pdurbin]

I added the gradient so the button would look more similar to the current button of Dataverse, but we could also remove the gradient and leave the plain blue color

I'm confused. I thought we recently decided to use Bootstrap 5 styles without any alteration.

Also, I'm nervous about relying on tools that must be run manually.

I also don't love the idea of seeing "Serious" in a tool and ignoring it.

So perhaps we should restore the original Bootstrap 5 button which, from what I understand, doesn't have a background gradient.

[MellyGray]

I'm confused. I thought we recently decided to use Bootstrap 5 styles without any alteration.

Hi @pdurbin ! I may have misunderstood the resolution of the Bootstrap styles thing, what I understood is that we were going to use Bootstrap 5 styles without any alteration except for the Bootstrap theme variables, to set the primary and secondary color. Because overriding these variables doesn't add more complexity since it's part of the available Bootstrap variables to customize the theme and it doesn't requite changing the CSS. It's just a bunch of variables to make a clean customization

$primary: #337AB7;
$secondary: #E7E7E7;

Then there is a third variable which is $enable-gradients: true; to apply $primary and $secondary but with a gradient, so I thought we could set it to true so the buttons look more similar to the JSF styles. . But anyway, I can set the variable to false.

Just so we are on the same page, I also changed other theme variables such as the $font-family or $text-color. Is that ok, or do we want to keep everything exactly as plain Bootstrap?

Also, I'm nervous about relying on tools that must be run manually.

I also don't love the idea of seeing "Serious" in a tool and ignoring it.

So perhaps we should restore the original Bootstrap 5 button which, from what I understand, doesn't have a background gradient.

I totally agree! I just let the gradient because it was already in the JSF frontend. I can set the variable to false

[ekraffmiller]

looks good, fixes the Accessibility issue

[kcondon]

@MellyGray I'm ready to merge but there is a merge conflict that needs to be resolved.

[MellyGray]

@kcondon sorry! I'll try to solve the conflicts next time before moving to QA. Did you solve the conflicts? I can't see them anymore