feat: add badge docs and assets

components/badge/README.md

@@ -1,51 +1,23 @@
 # Badges
 
-Badges are a lightweight method of annotating or labeling content. Wrap content in the `.badge` class to add an inline badge. The font-size and line-height of a badge inherit from that of it's parent's properties.
+Badges are a lightweight method of annotating or labeling content. Wrap content in the .badge class to add an inline badge. The font-size and line-height of a badge inherit from that of it’s parent’s properties.
 
-```
-<span class="badge">
-  Badge
-</span>
-```
+### Badge States
 
-Badge States
+You may wish to display more than the single badge type, either to create separation in the importance of various actions or to communicate the state of an action or form badge states make this super easy.
 
-You may wish to display more than the single badge type, either to create separation in the importance of various actions or to communicate the state of an action or form.  badge states make this super easy.
+|State|Purpose|Preview|
+|---	|---	|---
+|Default| |![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-default.png)|
+|Success|Represents something positive.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-success.png)|
+|Primary|Represents something more significant than a default.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-primary.png)|
+|Danger|Represents something in a danger or error state.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-danger.png)|
+|Warning|Represents something that we want to warn the user about but not quite extreme as a danger state.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-warning.png)|
+|Outline|Outline badges for when we want the density of the badge to be lighter e.g. when next to data in a table cell|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-outline.png)|
+|With Icon|If need be we can add icons and tooltips to add further context.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-icon.png)|
 
-```
-<!-- badge: Default -->
-<span class="badge">
-  Default
-</span>
+### Do & Don't
 
-<!-- badge: Success -->
-<span class="badge badge-success">
-  Success
-</span>
-
-<!-- badge: Info -->
-<span class="badge badge-info">
-  Info
-</span>
-
-<!-- badge: Warning -->
-<span class="badge badge-warning">
-  Warning
-</span>
-
-<!-- badge: Danger -->
-<span class="badge badge-danger">
-  Danger
-</span>
-```
-
-# Rounded Badge
-
-Add the class `.badge-rounded` to any `.badge` element to display it with rounded caps.
-
-```
-<!-- badge: Default -->
-<span class="badge badge-rounded">
-  Default
-</span>
-```
+|Do|Don't|
+|---	|---	|
+|Use rounded rectangles.|Use fully rounded corners (we no longer use this style).|

components/badge/style.ts

@@ -8,24 +8,29 @@ const badgeAppearances = {
     color: #1b2029;
   `,
   "success": css`
-    background-color: #14c684;
-    border-color: #14c684;
-    color: #ffffff;
+    background-color: ${getColors().green};
+    border-color: ${getColors().green};
+    color: ${getColors().white};
   `,
-  "information": css`
-    background-color: #157ff2;
-    border-color: #157ff2;
-    color: #ffffff;
+  "primary": css`
+    background-color: ${getColors().purple};
+    border-color: ${getColors().purple};
+    color: ${getColors().white};
   `,
   "warning": css`
-    background-color: #f56753;
-    border-color: #f56753;
-    color: #ffffff;
+    background-color: ${getColors().yellow};
+    border-color: ${getColors().yellow};
+    color: ${getColors().white};
   `,
   "danger": css`
-    background-color: #eb293a;
-    border-color: #eb293a;
-    color: #ffffff;
+    background-color: ${getColors().red};
+    border-color: ${getColors().red};
+    color: ${getColors().white};
+  `,
+  "outline": css`
+    background-color: ${getColors().white};
+    border-color: ${getColors().greyLight};
+    color: ${getColors().greyDark};
   `
 };