feat: implement badge component

Implement badge component and it's variations

Closes DCOS-21610

Author: weblancaster

components/badge/__snapshots__/badge.test.tsx.snap

@@ -2,39 +2,47 @@
 
 exports[`Badge danger 1`] = `
 <span
-  className="css-f00b3g"
+  className="css-1x7fm58"
 >
   danger
 </span>
 `;
 
 exports[`Badge default 1`] = `
 <span
-  className="css-b4fwwt"
+  className="css-mx4jeh"
 >
   default
 </span>
 `;
 
-exports[`Badge information 1`] = `
+exports[`Badge outline 1`] = `
 <span
-  className="css-19f16re"
+  className="css-12s43p8"
 >
-  information
+  outline
+</span>
+`;
+
+exports[`Badge primary 1`] = `
+<span
+  className="css-25ardn"
+>
+  primary
 </span>
 `;
 
 exports[`Badge success 1`] = `
 <span
-  className="css-1j3h1kw"
+  className="css-1xv1zbc"
 >
   success
 </span>
 `;
 
 exports[`Badge warning 1`] = `
 <span
-  className="css-wz5vwa"
+  className="css-r5izn1"
 >
   warning
 </span>

components/badge/badge.test.tsx

@@ -11,25 +11,31 @@ describe("Badge", () => {
 
   it("success", () => {
     expect(renderer
-    .create(<Badge appearance="success">success</Badge>)
+    .create(<Badge theme="success">success</Badge>)
     .toJSON()).toMatchSnapshot()
   });
 
-  it("information", () => {
+  it("primary", () => {
     expect(renderer
-    .create(<Badge appearance="information">information</Badge>)
+    .create(<Badge theme="primary">primary</Badge>)
+    .toJSON()).toMatchSnapshot()
+  });
+
+  it("danger", () => {
+    expect(renderer
+    .create(<Badge theme="danger">danger</Badge>)
     .toJSON()).toMatchSnapshot()
   });
 
   it("warning", () => {
     expect(renderer
-    .create(<Badge appearance="warning">warning</Badge>)
+    .create(<Badge theme="warning">warning</Badge>)
     .toJSON()).toMatchSnapshot()
   });
 
-  it("danger", () => {
+  it("outline", () => {
     expect(renderer
-    .create(<Badge appearance="danger">danger</Badge>)
+    .create(<Badge theme="outline">outline</Badge>)
     .toJSON()).toMatchSnapshot()
   });
 });

components/badge/badge.tsx

@@ -2,19 +2,19 @@ import * as React from "react";
 import { badge } from "./style";
 
 export interface IBadgeProps {
-  appearance?: string;
-  children?: React.ReactNode | string;
+  theme?: string;
+  children?: JSX.Element | string;
 }
 
 export class Badge extends React.PureComponent<IBadgeProps, {}> {
   public static defaultProps: Partial<IBadgeProps> = {
-    appearance: "default"
+    theme: "default"
   };
 
   public render() {
-    const { appearance, children } = this.props;
+    const { theme, children } = this.props;
 
-    return <span className={badge(appearance)}>{children}</span>;
+    return <span className={badge(theme)}>{children}</span>;
   }
 }
 

components/badge/stories/badge.stories.tsx

@@ -1,14 +1,38 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { withReadme } from "storybook-readme";
-import Badge from "../badge";
+import { Badge } from "../../index";
 
 const BadgeReadme = require("../README.md");
 
 storiesOf("Badge", module)
   .addDecorator(withReadme([BadgeReadme]))
-  .addWithInfo("default", () => <Badge>default</Badge>)
-  .addWithInfo("success", () => <Badge appearance="success">success</Badge>)
-  .addWithInfo("information", () => <Badge appearance="information">information</Badge>)
-  .addWithInfo("warning", () => <Badge appearance="warning">warning</Badge>)
-  .addWithInfo("danger", () => <Badge appearance="danger">danger</Badge>)
+  .addWithInfo(
+    "Default",
+    () => <Badge>Default</Badge>
+  )
+  .addWithInfo(
+    "Success",
+    "Represents something positive.",
+    () => <Badge theme="success">Success</Badge>
+  )
+  .addWithInfo(
+    "Primary",
+    "Represents something more significant than a default.",
+    () => <Badge theme="primary">Primary</Badge>
+  )
+  .addWithInfo(
+    "Danger",
+    "Represents something in a danger or error state.",
+    () => <Badge theme="danger">Danger</Badge>
+  )
+  .addWithInfo(
+    "Warning",
+    "Represents something that we want to warn the user about but not quite extreme as a danger state.",
+    () => <Badge theme="warning">Warning</Badge>
+  )
+  .addWithInfo(
+    "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",
+    () => <Badge theme="outline">Outline</Badge>
+  )

components/badge/style.ts

@@ -1,7 +1,7 @@
 import { css } from "emotion";
-import { getColors, getFonts } from "../../shared/style";
+import { getColors, getFonts } from "../../shared/styles/core";
 
-const badgeAppearances = {
+const badgeTheme = {
   "default": css`
     background-color: ${getColors().greyLight};
     border-color: ${getColors().greyLight};
@@ -31,12 +31,18 @@ const badgeAppearances = {
     background-color: ${getColors().white};
     border-color: ${getColors().greyLight};
     color: ${getColors().greyDark};
+  `,
+  "outline-primary": css`
+    background-color: ${getColors().white};
+    border-color: ${getColors().purple};
+    color: ${getColors().greyDark};
   `
 };
 
-export const badge = (appearance) => {
+export const badge = (theme) => {
   return css`
-    ${badgeAppearances[appearance]};
+    ${badgeTheme[theme]};
+    box-sizing: border-box;
     border-width: 1px;
     border-style: solid;
     padding-left: 8px;