progress bar first pass with flex

modules/primer-product/index.scss

@@ -21,4 +21,5 @@
 @import "primer-labels/index.scss";
 @import "primer-markdown/index.scss";
 @import "primer-popover/index.scss";
+@import "primer-progress-bar/index.scss";
 @import "primer-subhead/index.scss";

modules/primer-progress-bar/README.md

@@ -33,14 +33,88 @@ For a compiled **CSS** version of this module, an npm script is included that wi
 $ npm run build
 ```
 
-## Documentation
+## Default
 
 <!-- %docs
 title: Progress Bar
 status: Experimental
 -->
 
-TODO: Write some documentation here.
+```html
+<div class="progress-bar">
+  <div class="progress" style="width: 50%">
+  </div>
+</div>
+
+<span class="flex-progress-bar mt-3 d-flex bg-gray overflow-hidden">
+  <span class="flex-progress-bar__to-do height-full bg-green rounded-1"></span>
+  <span class="flex-progress-bar__in-progress height-full bg-purple"></span>
+    <span class="flex-progress-bar__done height-full bg-red"></span>
+</span>
+```
+
+## With Tooltip
+
+<!-- %docs
+title: Progress Bar with Tooltip
+status: Experimental
+-->
+
+```html
+<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
+  <div class="progress-bar">
+    <div class="progress" style="width: 50%">
+    </div>
+  </div>
+</div>
+
+```
+
+## Reverse Progress
+
+<!-- %docs
+title: Progress Bar Reverse
+status: Experimental
+-->
+
+```html
+<div class="reverse-progress-container">
+  <div style="width:50%" class="reverse-progress-bar" ></div>
+</div>
+```
+
+<!-- %enddocs -->
+
+## Progress Bar Small
+
+<!-- %docs
+title: Progress Bar Small
+status: Experimental
+-->
+
+```html
+<div class="progress-bar progress-bar-small mt-3">
+  <div class="progress" style="width:50%">
+  </div>
+</div>
+```
+
+<!-- %enddocs -->
+
+## Progress Bar Inline
+
+<!-- %docs
+title: Progress Bar Inline
+status: Experimental
+-->
+
+```html
+<div class="progress-bar-inline">
+  <span class="progress-bar">
+    <span class="progress" style="width:50%"> </span>
+  </span>
+</div>
+```
 
 <!-- %enddocs -->
 

modules/primer-progress-bar/lib/progress-bar.scss

@@ -1 +1,75 @@
-// SCSS goes here
+// A green progress bar on a grey background.
+.progress-bar {
+  display: block;
+  height: 15px;
+  overflow: hidden; // Crop the progress bar within for rounded corners
+  background-color: lighten($gray-200, 3%);
+  border-radius: 3px;
+
+  .progress {
+    display: block;
+    height: 100%;
+    background-color: darken($green-400, 5%);
+  }
+}
+
+// Reverse progress bar shrinks revealing the bar color which is the container background
+.reverse-progress {
+  &-container {
+    position: relative;
+    height: 3px;
+    background-color: $gray-200;
+    background-image: linear-gradient(
+      to right,
+      $bg-green,
+      $blue-600,
+      $purple-800,
+      $red-600,
+      $orange-500
+    );
+    background-size: 100% 3px;
+  }
+
+  &-bar {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    background-color: $gray-200;
+  }
+}
+
+// used new milestones show page for issue reordering
+.progress-bar-small {
+  height: 10px;
+}
+
+// Used with table-list header on new milestones show page
+// A more robust fix without nesting requires refactoring issue helper
+.progress-bar-inline {
+  .progress-bar {
+    width: 100%;
+    border-color: $gray-200;
+    border-style: solid;
+    border-width: 1px;
+    border-top: 0;
+    border-radius: 0;
+  }
+}
+
+///////// Flexbox Refactoring ///////
+
+.flex-progress-bar {
+  height: 15px;
+}
+
+.flex-progress-bar__to-do {
+  flex-basis: 40%;
+}
+
+.flex-progress-bar__in-progress {
+  flex-basis: 30%;
+}
+
+.flex-progress-bar__done {
+  flex-basis: 5%;
+}

modules/primer-progress-bar/stories.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
+
+const stories = storiesOf('Progress-bar', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+  .forEach(({title, story}) => {
+    stories.add(title, story)
+  })