Merge pull request #2957 from SUI-Components/color-intent-progress-bar

feat(components/atom/progressBar): tint color trail in progress circle

Author: andresin87

components/atom/progressBar/src/ProgressBarCircle/Circle/index.js

@@ -66,7 +66,8 @@ const Circle = ({
     >
       <path
         className={cx(`${baseClassName}-trail`, {
-          [`${baseClassName}-trail--${modifier}`]: !!modifier
+          [`${baseClassName}-trail--${modifier}`]: !!modifier,
+          [`${baseClassName}-trail--color-${color}`]: !!color
         })}
         {...getPathStyles({percentage: 100, strokeWidth: mainStrokeWidth})}
         strokeWidth={mainStrokeWidth}

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

@@ -143,6 +143,13 @@ $base-class-circle: '#{$base-class}Circle';
     &--success {
       stroke: $c-atom-circle-progress-bar-trail--success;
     }
+    &#{$base-class-circle}-trail--color {
+      @each $colorName, $colorValue in $c-progress-bar-fill-array {
+        &-#{$colorName} {
+          stroke: color-mix(in srgb, $c-white, $colorValue 16%);
+        }
+      }
+    }
   }
 
   &-path {

components/atom/progressBar/src/ProgressBarLine/index.js

@@ -48,7 +48,8 @@ const ProgressBarLine = ({
           [`${CLASS_CONTAINER_BAR}--borderless`]: isBorderless,
           [`${CLASS_CONTAINER_BAR}--success`]: status === STATUS.SUCCESS,
           [`${CLASS_CONTAINER_BAR}--error`]: status === STATUS.ERROR,
-          [`${CLASS_CONTAINER_BAR}--loading`]: status === STATUS.LOADING
+          [`${CLASS_CONTAINER_BAR}--loading`]: status === STATUS.LOADING,
+          [`${CLASS_CONTAINER_BAR}--color-${color}`]: color
         })}
       >
         {percentageArray.map((percentageValue, currentIndex, array) => {

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

@@ -27,9 +27,19 @@ $base-class-line: '#{$base-class}Line';
     height: $h-progress-bar; /* Can be anything */
     position: relative;
     box-sizing: border-box;
-    @each $size-key, $size-value in $size-atom-line-progress-bar {
-      &--size-#{$size-key} {
-        height: $size-value;
+    &--size {
+      @each $size-key, $size-value in $size-atom-line-progress-bar {
+        &-#{$size-key} {
+          height: $size-value;
+        }
+      }
+    }
+    &--color {
+      @each $colorName, $colorValue in $c-progress-bar-fill-array {
+        &-#{$colorName} {
+          background-color: color-mix(in srgb, $c-white, $colorValue 16%);
+          border-color: color-mix(in srgb, $bc-progress-bar, $colorValue 16%);
+        }
       }
     }
   }