Badge (#131)

* Initial badge component setup

* Add badge styling

* Add initial badge documentation

* Add !default for background color var

* Update border radius and padding

* Remove link, button, pill and hollow treatments

* Add documentation, remove pill and hollow examples

src/badge/README.md

@@ -0,0 +1,33 @@
+# Badge
+
+Badges contain small amounts of information that help provide additional 
+context for a larger piece of content. Context could be describing the 
+content's state, status, or other pertinent meta-information. 
+
+An example of a badge could be a count for updates, or a status of "new". 
+Badges are not to be confused with tags or input labels. Tags and input labels
+could contain badges, however.
+
+[View prototype on CodePen][codepen].
+
+[codepen]: https://codepen.io/thoughtbot/pen/ZEzROvy
+
+## Usage
+
+### Default
+
+```html
+<span class="tbds-badge">Badge Label</span>
+```
+
+```html
+<a href="#" class="tbds-badge">Link Badge</a>
+```
+
+```html
+<button type="button" class="tbds-badge">Button Badge</button>
+```
+
+```html
+<span class="tbds-badge">Badge with <strong>text-level formatting</strong></span>
+```

src/badge/index.scss

@@ -0,0 +1,3 @@
+@import "../settings/index";
+
+@import "./lib/badge";

src/badge/lib/badge.scss

@@ -0,0 +1,17 @@
+$_tbds-badge-font-size: 0.8em !default;
+$_tbds-badge-background-color: #f5f5f5 !default;
+$_tbds-badge-color: $tbds-brand-gray !default;
+
+.tbds-badge {
+  background-color: $_tbds-badge-background-color;
+  border: 0;
+  border-radius: $_tbds-badge-font-size;
+  color: $_tbds-badge-color;
+  display: inline-block;
+  font-size: $_tbds-badge-font-size;
+  font-weight: normal;
+  line-height: 1;
+  padding: 0.25em 0.75em;
+  vertical-align: baseline;
+  white-space: nowrap;
+}

src/index.scss

@@ -2,6 +2,7 @@
 
 @import "app-frame/index";
 @import "avatar/index";
+@import "badge/index";
 @import "button/index";
 @import "forms/index";
 @import "icon/index";