Merge pull request #2954 from SUI-Components/progressbar-new-sizes

feat(components/atom/progressBar): new sizes and strokes

Author: andresin87

components/atom/progressBar/src/ProgressBarCircle/index.scss

@@ -8,6 +8,11 @@ $base-class-circle: '#{$base-class}Circle';
   flex-direction: row;
   flex-wrap: nowrap;
 
+  &--extraSmall {
+    height: $w-atom-circle-progress-bar-circle-extraSmall;
+    width: $w-atom-circle-progress-bar-circle-extraSmall;
+  }
+
   &--small {
     height: $h-atom-circle-progress-bar-circle-small;
     width: $w-atom-circle-progress-bar-circle-small;
@@ -51,7 +56,8 @@ $base-class-circle: '#{$base-class}Circle';
     padding: 0;
     position: absolute;
     text-align: center;
-    &--small {
+    &--small,
+    &--extraSmall {
       top: 0;
       bottom: 0;
       left: 100%;

components/atom/progressBar/src/ProgressBarCircle/settings.js

@@ -8,11 +8,13 @@ export const SIZE_TO_WIDTH_LINE_MAP = {
   [SIZES.EXTRA_LARGE]: 6,
   [SIZES.LARGE]: 4,
   [SIZES.MEDIUM]: 8,
-  [SIZES.SMALL]: 8
+  [SIZES.SMALL]: 8,
+  [SIZES.EXTRA_SMALL]: 12
 }
 
 export const STROKE_SIZE_MAP = {
   [SIZES.LARGE]: 18,
   [SIZES.MEDIUM]: 12,
-  [SIZES.SMALL]: 6
+  [SIZES.SMALL]: 6,
+  [SIZES.EXTRA_SMALL]: 4
 }

components/atom/progressBar/src/ProgressBarCircle/settings.scss

@@ -6,6 +6,8 @@ $w-atom-circle-progress-bar-circle-medium: 24px !default;
 $h-atom-circle-progress-bar-circle-medium: $w-atom-circle-progress-bar-circle-medium !default;
 $w-atom-circle-progress-bar-circle-small: 16px !default;
 $h-atom-circle-progress-bar-circle-small: $w-atom-circle-progress-bar-circle-small !default;
+$w-atom-circle-progress-bar-circle-extraSmall: 12px !default;
+$h-atom-circle-progress-bar-circle-extraSmall: $w-atom-circle-progress-bar-circle-extraSmall !default;
 $w-atom-circle-progress-bar-circle-large--error: 32px !default;
 $h-atom-circle-progress-bar-circle-large--error: $w-atom-circle-progress-bar-circle-large--error !default;
 $w-atom-circle-progress-bar-circle-medium--error: 22px !default;

components/atom/progressBar/src/ProgressBarLine/settings.scss

@@ -50,6 +50,7 @@ $c-atom-line-progress-bar-status--loading: $c-gray-lightest !default;
 $c-atom-line-progress-bar-status--success: $c-success !default;
 
 $size-atom-line-progress-bar: (
+  extraSmall: $sz-base * 0.25,
   small: $sz-base * 0.5,
   medium: $sz-base,
   large: $sz-base * 2,

components/atom/progressBar/src/settings.js

@@ -7,16 +7,18 @@ export const TYPES = {
 }
 
 export const SIZES = {
-  EXTRA_LARGE: 'extraLarge',
+  EXTRA_SMALL: 'extraSmall',
   SMALL: 'small',
   MEDIUM: 'medium',
-  LARGE: 'large'
+  LARGE: 'large',
+  EXTRA_LARGE: 'extraLarge'
 }
 
 export const STROKE_SIZES = {
   SMALL: 'small',
   MEDIUM: 'medium',
-  LARGE: 'large'
+  LARGE: 'large',
+  EXTRA_SMALL: 'extraSmall'
 }
 
 export const LINE_CAPS = {

components/atom/progressBar/test/index.test.js

@@ -225,15 +225,16 @@ describe(json.name, () => {
       // Given
       const library = pkg
       const expected = {
-        EXTRA_LARGE: 'extraLarge',
+        EXTRA_SMALL: 'extraSmall',
         LARGE: 'large',
         MEDIUM: 'medium',
-        SMALL: 'small'
+        SMALL: 'small',
+        EXTRA_LARGE: 'extraLarge'
       }
 
       // When
       const {atomProgressBarSizes: actual} = library
-      const {EXTRA_LARGE, LARGE, MEDIUM, SMALL, ...others} = actual
+      const {EXTRA_LARGE, LARGE, MEDIUM, SMALL, EXTRA_SMALL, ...others} = actual
 
       // Then
       expect(Object.keys(others).length).to.equal(0)