Merge pull request #950 from primer/diffstat

Add Diffstat component

docs/content/components/labels.md

@@ -174,3 +174,26 @@ Counters can also be used in `Box` headers to indicate the number of items in a
   </ul>
 </div>
 ```
+
+## Diffstat
+
+Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red.
+
+```html live
+<span class="diffstat tooltipped tooltipped-e" aria-label="6 changes: 3 additions &amp; 3 deletions">
+  6
+  <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
+</span>
+```
+
+Use the `text-green` and `text-red` utilities to add addtitional information about the size of the diff.
+
+```html live
+<span class="diffstat">
+    <span class="text-green">+7</span>
+    <span class="text-red">−2</span>
+    <span class="tooltipped tooltipped-e" aria-label="9 lines changed">
+      <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
+    </span>
+</span>
+```

src/labels/diffstat.scss

@@ -0,0 +1,32 @@
+// diffstat
+//
+// Green/red blocks showing additions and deletions
+
+.diffstat {
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+  color: $text-gray;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.diffstat-block-deleted,
+.diffstat-block-added,
+.diffstat-block-neutral {
+  display: inline-block;
+  width: $spacer-2;
+  height: $spacer-2;
+  margin-left: 1px;
+}
+
+.diffstat-block-deleted {
+  background-color: $bg-diffstat-deleted;
+}
+
+.diffstat-block-added {
+  background-color: $bg-diffstat-added;
+}
+
+.diffstat-block-neutral {
+  background-color: $bg-diffstat-neutral;
+}

src/labels/index.scss

@@ -3,3 +3,4 @@
 @import "./labels.scss";
 @import "./states.scss";
 @import "./counters.scss";
+@import "./diffstat.scss";

src/support/variables/colors.scss

@@ -54,6 +54,11 @@ $bg-yellow:         $yellow-500 !default;
 $bg-yellow-light:   $yellow-200 !default;
 $bg-yellow-dark:    $yellow-700 !default;
 
+// diffstat background colors
+$bg-diffstat-added: darken($green-400, 5%) !default;
+$bg-diffstat-deleted: $red-600 !default;
+$bg-diffstat-neutral: $gray-300 !default;
+
 // Text colors
 $text-blue:         $blue-500 !default;
 $text-gray-dark:    $gray-900 !default;