feat(progress): adding is-rounded to progess has was requested in #242

nostalgic-css · Jan 18, 2019 · d6b75e5 · d6b75e5
1 parent e74d2c0
commit d6b75e5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/docs/progress.stories.js b/docs/progress.stories.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, number, radios,
+  withKnobs, number, radios, boolean,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Progress', module);
@@ -22,5 +22,7 @@ stories.add('progress', () => {
     'is-error': 'is-error',
     'is-pattern': 'is-pattern',
   }, '');
-  return `<progress class="nes-progress ${extraClass}" value="${percentage}" max="100" style="width: 98%;"></progress>`;
+  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
+  const selectedClasses = [extraClass, isRounded];
+  return `<progress class="nes-progress ${selectedClasses.join(' ')}" value="${percentage}" max="100" style="width: 98%;"></progress>`;
 });
diff --git a/scss/elements/progress.scss b/scss/elements/progress.scss
@@ -27,6 +27,9 @@
 
   @include progress-style($base-color);
 
+  &.is-rounded {
+    @include rounded-corners();
+  }
   &.is-primary {
     @include progress-style(map-get($primary-colors, "normal"));
   }