Merge pull request #2953 from SUI-Components/updtae-indicator-color

ADD color tint to the indicator properly

Author: andresin87

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

@@ -1,18 +1,22 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 
-import {SIZES, STATUS} from '../settings.js'
+import {SIZES, STATUS, COLORS} from '../settings.js'
 import {INDICATOR_CLASS_NAME} from './settings.js'
 
-const Indicator = ({percentage, status, errorIcon, size, children}) => {
+const Indicator = ({percentage, status, errorIcon, size, children, color}) => {
   if (status === STATUS.LOADING) return null
   return (
-    <span
-      className={cx(INDICATOR_CLASS_NAME, `${INDICATOR_CLASS_NAME}--${status}`, `${INDICATOR_CLASS_NAME}--${size}`)}
+    <div
+      className={cx(INDICATOR_CLASS_NAME, `${INDICATOR_CLASS_NAME}--${status}`, `${INDICATOR_CLASS_NAME}--${size}`, {
+        [`${INDICATOR_CLASS_NAME}--color-${color}`]: color
+      })}
     >
-      {status === STATUS.PROGRESS && (children || `${percentage}%`)}
-      {status === STATUS.ERROR && errorIcon}
-    </span>
+      <span>
+        {status === STATUS.PROGRESS && (children || `${percentage}%`)}
+        {status === STATUS.ERROR && errorIcon}
+      </span>
+    </div>
   )
 }
 
@@ -21,6 +25,7 @@ Indicator.propTypes = {
   status: PropTypes.oneOf(Object.values(STATUS)),
   errorIcon: PropTypes.node,
   size: PropTypes.oneOf(Object.values(SIZES)),
+  color: PropTypes.oneOf(Object.values(COLORS)),
   children: PropTypes.node
 }
 

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

@@ -36,7 +36,7 @@ const ProgressBarCircle = ({
         color={color}
       />
       {!hideIndicator && (
-        <Indicator percentage={percentage} size={size} status={status} errorIcon={errorIcon}>
+        <Indicator color={color} percentage={percentage} size={size} status={status} errorIcon={errorIcon}>
           {children}
         </Indicator>
       )}

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

@@ -4,6 +4,9 @@ $base-class-circle: '#{$base-class}Circle';
   background-color: transparent;
   font-size: $fz-atom-circle-progress-bar-text--outer;
   position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
 
   &--small {
     height: $h-atom-circle-progress-bar-circle-small;
@@ -48,8 +51,15 @@ $base-class-circle: '#{$base-class}Circle';
     padding: 0;
     position: absolute;
     text-align: center;
-    &--small:not(&--error) {
-      margin-left: $ml-atom-circle-progress-bar-text--outer;
+    &--small {
+      top: 0;
+      bottom: 0;
+      left: 100%;
+      display: flex;
+      align-items: center;
+      &:not(&--error) {
+        margin-left: $ml-atom-circle-progress-bar-text--outer;
+      }
     }
 
     &--medium {
@@ -83,6 +93,13 @@ $base-class-circle: '#{$base-class}Circle';
         fill: $c-atom-circle-progress-bar-trail--error;
       }
     }
+    &--color {
+      @each $colorName, $colorValue in $c-progress-bar-fill-array {
+        &-#{$colorName} {
+          color: $colorValue;
+        }
+      }
+    }
   }
 
   &-circle {

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

@@ -2,13 +2,22 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 
 import {CLASS_INDICATOR} from './settings.js'
+import {COLORS} from '../../settings.js'
 
-const Indicator = ({indicatorBottom, indicatorTotal, percentage}) => {
+const Indicator = ({indicatorBottom, indicatorTotal, percentage, color}) => {
   return (
-    <span className={cx(CLASS_INDICATOR, `${CLASS_INDICATOR}--${indicatorBottom ? 'bottom' : 'top'}`)}>
+    <div
+      className={cx(
+        CLASS_INDICATOR,
+        {
+          [`${CLASS_INDICATOR}--color-${color}`]: color
+        },
+        `${CLASS_INDICATOR}--${indicatorBottom ? 'bottom' : 'top'}`
+      )}
+    >
       <strong>{percentage}</strong>
       {indicatorTotal ? `/100` : `%`}
-    </span>
+    </div>
   )
 }
 
@@ -17,7 +26,8 @@ Indicator.displayName = 'Indicator'
 Indicator.propTypes = {
   indicatorBottom: PropTypes.string,
   indicatorTotal: PropTypes.number,
-  percentage: PropTypes.number
+  percentage: PropTypes.number,
+  color: PropTypes.oneOf(Object.values(COLORS))
 }
 
 export default Indicator

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

@@ -35,7 +35,8 @@ const ProgressBarLine = ({
     hideIndicator,
     indicatorBottom,
     percentage: percentageArray[0],
-    indicatorTotal
+    indicatorTotal,
+    color
   })
 
   return (

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

@@ -1,20 +1,6 @@
 $base-class-line: '#{$base-class}Line';
 
 #{$base-class} {
-  &-indicator {
-    display: inline-block;
-    font-size: $fz-s;
-    line-height: $lh-s;
-
-    &--top {
-      margin-bottom: $m-base;
-    }
-
-    &--bottom {
-      margin-top: $m-base;
-    }
-  }
-
   &-container {
     &--error {
       background: $bg-progress-bar--error;
@@ -57,6 +43,27 @@ $base-class-line: '#{$base-class}Line';
     overflow: hidden;
     position: absolute;
 
+    &-indicator {
+      display: inline-block;
+      font-size: $fz-s;
+      line-height: $lh-s;
+
+      &--top {
+        margin-bottom: $m-base;
+      }
+
+      &--bottom {
+        margin-top: $m-base;
+      }
+      &--color {
+        @each $colorName, $colorValue in $c-progress-bar-fill-array {
+          &-#{$colorName} {
+            color: $colorValue;
+          }
+        }
+      }
+    }
+
     &#{$this}--color {
       @each $colorName, $colorValue in $c-progress-bar-fill-array {
         &-#{$colorName}:not(#{$this}--status-error):not(#{$this}--status-loading):not(#{$this}--status-success) {

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

@@ -1,9 +1,14 @@
 import Indicator from './Indicator/index.js'
 
-const useIndicator = ({hideIndicator, indicatorBottom, percentage, indicatorTotal}) => {
+const useIndicator = ({hideIndicator, indicatorBottom, percentage, indicatorTotal, color}) => {
   if (hideIndicator) return []
   const indicator = (
-    <Indicator indicatorBottom={indicatorBottom} percentage={percentage} indicatorTotal={indicatorTotal} />
+    <Indicator
+      color={color}
+      indicatorBottom={indicatorBottom}
+      percentage={percentage}
+      indicatorTotal={indicatorTotal}
+    />
   )
   return [!indicatorBottom ? indicator : null, indicatorBottom ? indicator : null]
 }

components/atom/progressBar/src/index.js

@@ -4,7 +4,7 @@ import ProgressBarCircle from './ProgressBarCircle/index.js'
 import ProgressBarLine from './ProgressBarLine/index.js'
 import {COLORS, LINE_CAPS, SIZES, STATUS, STROKE_SIZES, TYPES} from './settings.js'
 
-const AtomProgressBar = ({type = TYPES.LINE, status = STATUS.PROGRESS, color = COLORS.PRIMARY, size, ...props}) => {
+const AtomProgressBar = ({type = TYPES.LINE, status = STATUS.PROGRESS, color, size, ...props}) => {
   switch (type) {
     case TYPES.CIRCLE:
       return <ProgressBarCircle size={size} status={status} color={color} {...props} />