✨ Add badge component

[XuTheBunny]

Motivation

Adds badge component for labels and stats.

Use Cases

1. Kids First Data Tracker
   

2. Kids First Coordinator
   
   
   

3. Kids First Portal
   

API changes

No API changes are made on this component.

Implementation Notes

Referencing Colors in the storybook and color options.

Rendering and Storybook location

src/
└── components
    ├── Badge
    │   ├── __tests__/
    │   ├── Badge.jsx
    │   ├── Badge.story.jsx
    │   └── Badge.css
    └── index.js

Functional Tests

Test badge component under all the color options and on loading or not.

[dankolbman]

UIKit Storybook for Review

Built with commit 6a549bb

https://deploy-preview-107--kf-uikit.netlify.com

[bdolly]

good start, a couple tweaks and I think we need to define the difference between a badge and a tag and what colors mean instead of maybe allowing users to use any color

[bdolly]

@dankolbman should we leave this as a utility class or make specific BEM classes for color. I kind of think there should be specific BEM classes for colors that follow a standard like Badge--error Badge--success etc

[dankolbman]

yeah that sounds good, if those different state -> colors are defined of course.
I think the idea here was to provide consistent state -> color mappings for content. Perhaps we want to allow the color to be over-ridable for use cases where app-specific states are needed?

[bdolly]

so you're saying leave it as is for or change it up to make it BEM classes?

[dankolbman]

Story book is returning an error :(
Also, due to kids-first/kf-ui-data-tracker#155, maybe we want to rethink how these should be styled? @bdolly @XuTheBunny

[bdolly]

small percy tweak again and waiting on some color discussion with @dankolbman

[bdolly]

so you're saying leave it as is for or change it up to make it BEM classes?

[bdolly]

maybe we want to rethink how these should be styled? @bdolly @XuTheBunny

Agreed, I think @allisonheath wanted to be part of that discussion as well as it involves brand standards

[allisonheath]

I don't think I necessarily need to be there for the initial discussions/ideas, but if you all can come up with an option or two I can review/inform.