Add progress bar (#140)

* feat(progress.scss): add progress bar element

* feat(progress.stories.js): add progress test in storybook

* feat: add is-filled class

* feat: add color variation

docs/progress.stories.js

@@ -0,0 +1,26 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, number, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Progress', module);
+stories.addDecorator(withKnobs);
+
+// prettier-ignore
+stories.add('progress', () => {
+  const percentage = number('percentage', 30, {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1,
+  });
+  const extraClass = radios('class', {
+    default: '',
+    'is-primary': 'is-primary',
+    'is-success': 'is-success',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+    'is-pattern': 'is-pattern',
+  }, '');
+  return `<progress class="nes-progress ${extraClass}" value="${percentage}" max="100" style="width: 98%;"></progress>`;
+});

index.html

@@ -178,6 +178,16 @@
       </div>
     </section>
 
+    <section class="container with-title">
+      <h2 class="title">Progress</h2>
+      <progress class="nes-progress" value="90" max="100"></progress>
+      <progress class="nes-progress is-primary" value="80" max="100"></progress>
+      <progress class="nes-progress is-success" value="50" max="100"></progress>
+      <progress class="nes-progress is-warning" value="30" max="100"></progress>
+      <progress class="nes-progress is-error" value="10" max="100"></progress>
+      <progress class="nes-progress is-pattern" value="50" max="100"></progress>
+    </section>
+
     <section class="container with-title">
       <h2 class="title">Icons</h2>
       <section class="container with-title">

scss/elements/_index.scss

@@ -6,3 +6,4 @@
 @import "checkboxes.scss";
 @import "balloons.scss";
 @import "tables.scss";
+@import "progress.scss";

scss/elements/progress.scss

@@ -0,0 +1,108 @@
+.nes-progress {
+  width: 100%;
+  height: 48px;
+  padding: 4px;
+  margin: 4px;
+  color: $base-color;
+  background-color: $background-color;
+  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
+  -webkit-appearance: none;
+  appearance: none;
+
+  @mixin progress-style($color) {
+    &::-webkit-progress-bar {
+      background-color: $background-color;
+    }
+    &::-webkit-progress-value {
+      background-color: $color;
+    }
+    &::-moz-progress-bar {
+      background-color: $color;
+    }
+    &::-ms-fill {
+      background-color: $color;
+      border: none;
+    }
+  }
+
+  @include progress-style($base-color);
+
+  &.is-primary {
+    @include progress-style(map-get($primary-colors, "normal"));
+  }
+
+  &.is-success {
+    @include progress-style(map-get($success-colors, "normal"));
+  }
+
+  &.is-warning {
+    @include progress-style(map-get($warning-colors, "normal"));
+  }
+
+  &.is-error {
+    @include progress-style(map-get($error-colors, "normal"));
+  }
+
+  &.is-pattern {
+    &::-webkit-progress-value {
+      background-color: $base-color;
+      background-image: linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        ),
+        linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        );
+      background-position: 0 0, 10px 10px;
+      background-size: 20px 20px;
+    }
+
+    &::-moz-progress-bar {
+      background-color: $base-color;
+      background-image: -moz-linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        ),
+        -moz-linear-gradient(45deg, $background-color 25%, transparent 25%, transparent 75%, $background-color
+              75%, $background-color);
+      background-position: 0 0, 10px 10px;
+      background-size: 20px 20px;
+    }
+
+    &::-ms-fill {
+      background-color: $base-color;
+      background-image: linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        ),
+        linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        );
+      background-position: 0 0, 10px 10px;
+      background-size: 20px 20px;
+      border: none;
+    }
+  }
+}