CR: Button

[l-monninger]

Implement roughly the same button you did in our exercises. The spec is as follows:

Spec:

• The button should take an async call back and run it on click. While running the callback, the button should be in the loading state.
• The button should have default animations for the loading, success, error, warning, helping, and hinting states.
• The button should decay from success or error into default.
• The button should be able to display within it any children.
• The button should use the dependency injection props pattern.
• The button should have a set of roughly ten basic variants. Other color patterns should be achievable, but only by disregarding the basic variants and overriding.
• The variants at least should cover the following verbs do, get info, get user info, navigate, find, sort, install, comment, and get help.
• The variants should be invertible.

Spec draftsheet

Suggestions:

• Look for icons in react-bootstrap-icons.
• Don't spend too much time on the variants. Just provide a map to a tuple of tuples [[string, string, string], [string, string, string]] which describe the the background, border, and font colors. Then use that map to render the button.
• For icons, feel free to make your own if you don't find one in react-bootstrap-icons using SVG gator. Just don't take too much time.
• The quality of the animation is more important than the quality of the icon.

[l-monninger]

Mapping

Lol, dude... This made me chuckle

export const variantMap = Variants.map((Variant) => VARIANT_STYLES);

.map is a container method to transform an array of values to another array of values.

What you need is to map variants using an object that has keys which are the variants, and styles values which are the styles. What I was suggesting above is that you do something like this.

{

    do : [['green', 'white', 'gray'], ['white', 'green', 'gray']]

}

The first three entries are for the button displaying statically. The second three could either be for the button under hover, or the button when inverted. We you get this closer to done, we'll talk through how to project this down into the design system.

Button organization

I didn't give you the exact place to store the button as a bit of a puzzle. components/navigation is not where it should go. And, it was a bit of trick question because the exact folder does not yet exist. It should be components/input/unary/Button. Can you guess why?

Code organization

You've got way too many if statements for this one my dude. Learn how to do the mapping above, and you should be able to figure out how to trim this down.