feat(progress): adds background color and separator.

8base · Dec 10, 2019 · f45366e · f45366e
1 parent 399daf4
commit f45366e
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 9 deletions.
diff --git a/...ts__/__image_snapshots__/progress-test-js-components-progress-common-1-snap.png b/...ts__/__image_snapshots__/progress-test-js-components-progress-common-1-snap.png
diff --git a/src/components/Progress/Progress.js b/src/components/Progress/Progress.js
@@ -7,6 +7,7 @@ import {
   ProgressBodyTag,
   ProgressInnerTag,
   ProgressValueTag,
+  ProgressSeparatorTag,
   ProgressTextTag,
   ProgressLabelTag,
 } from './Progress.theme';
@@ -17,9 +18,18 @@ type ProgressProps = {
   valueText?: React$Node,
   valueWidth?: number | string,
   size?: 'sm' | 'md' | 'lg',
+  color?: string,
+  backgroundColor?: string,
+  showSeparator?: boolean,
 };
 
-const Progress = ({ value, label, valueText, valueWidth, ...rest }: ProgressProps) => {
+const Progress = ({
+  value,
+  label,
+  valueText,
+  valueWidth,
+  ...rest
+}: ProgressProps) => {
   value = value > 100 ? value % 100 : value;
 
   return (
@@ -28,8 +38,13 @@ const Progress = ({ value, label, valueText, valueWidth, ...rest }: ProgressProp
       <ProgressBodyTag modifiers={ rest }>
         <ProgressInnerTag modifiers={ rest } style={ valueWidth ? { minWidth: valueWidth, maxWidth: valueWidth } : {} }>
           <ProgressValueTag modifiers={ rest } style={{ width: `${value}%` }} />
+          <If condition={ !!rest.showSeparator } >
+            <ProgressSeparatorTag modifiers={ rest } style={{ left: `${value}%` }} />
+          </If>
         </ProgressInnerTag>
-        <ProgressTextTag modifiers={ rest }>{ valueText ? valueText : `${value} %` }</ProgressTextTag>
+        <ProgressTextTag modifiers={ rest }>
+          { valueText ? valueText : `${value} %` }
+        </ProgressTextTag>
       </ProgressBodyTag>
     </ProgressTag>
   );
@@ -38,6 +53,8 @@ const Progress = ({ value, label, valueText, valueWidth, ...rest }: ProgressProp
 Progress.defaultProps = {
   size: 'md',
   color: 'PRIMARY',
+  backgroundColor: 'GRAY_20',
+  showSeparator: false,
 };
 
 export { Progress };
diff --git a/src/components/Progress/Progress.stories.js b/src/components/Progress/Progress.stories.js
@@ -17,6 +17,12 @@ export const common = () => (
     <br />
     <Progress value={ 100 } />
     <br />
+    <Progress
+      showSeparator
+      backgroundColor="GREEN_30"
+      value={ 75 }
+    />
+    <br />
     <Progress
       size="sm"
       valueWidth="75%"
@@ -30,15 +36,29 @@ export const common = () => (
       valueWidth="75%"
       label="End-User Accounts"
       valueText="3,500/5,000"
-      value={ (100 * 2230000) / 2500000 }
+      value={ (100 * 3500) / 5000 }
     />
     <br />
     <Progress
       size="sm"
       valueWidth="75%"
       label="8base Database Rows"
       valueText="200,300/125,000"
-      value={ (100 * 1830000) / 2500000 }
+      value={ (100 * 200300) / 125000 }
+    />
+    <br />
+    <Progress
+      size="sm"
+      valueWidth="50%"
+      label="Background color"
+      valueText={ (
+        <div>
+          100000 / <span style={{ fontWeight: 600 }} >125000</span>
+        </div>
+      ) }
+      value={ (100 * 100000) / 125000 }
+      showSeparator
+      backgroundColor="GREEN_30"
     />
     <br />
   </Column>

diff --git a/src/components/Progress/Progress.theme.js b/src/components/Progress/Progress.theme.js
@@ -28,20 +28,48 @@ const HEIGHT_BY_SIZE = {
   lg: 16,
 };
 
+const HEIGHT_SEPARATOR_BY_SIZE = {
+  sm: 12,
+  md: 18,
+  lg: 20,
+};
+
+const BORDER_RADIUS_BY_SIZE = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+};
+
 const [ProgressInnerTag, themeInner] = createThemeTag(`${name}Inner`, ({ COLORS }: *) => ({
-  root: ({ size }) => ({
+  root: ({ size, backgroundColor }) => ({
+    position: 'relative',
+    zIndex: 1,
     flex: '1',
     height: HEIGHT_BY_SIZE[size],
-    background: COLORS.GRAY_20,
-    borderRadius: '8px',
+    background: COLORS[backgroundColor],
+    borderRadius: BORDER_RADIUS_BY_SIZE[size],
   }),
 }));
 
 const [ProgressValueTag, themeValue] = createThemeTag(`${name}Value`, ({ COLORS }: *) => ({
-  root: ({ size, color }) => ({
+  root: ({ size, color, showSeparator }) => ({
     height: '100%',
     backgroundColor: COLORS[color],
-    borderRadius: HEIGHT_BY_SIZE[size],
+    borderRadius: BORDER_RADIUS_BY_SIZE[size],
+    borderTopRightRadius: showSeparator ? 0 : BORDER_RADIUS_BY_SIZE[size],
+    borderBottomRightRadius: showSeparator ? 0 : BORDER_RADIUS_BY_SIZE[size],
+  }),
+}));
+
+const [ProgressSeparatorTag, themeSeparator] = createThemeTag(`${name}Separator`, ({ COLORS }: *) => ({
+  root: ({ size }) => ({
+    position: 'absolute',
+    width: '2px',
+    borderRadius: '1px',
+    backgroundColor: COLORS.GRAY_30,
+    height: HEIGHT_SEPARATOR_BY_SIZE[size],
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
   }),
 }));
 
@@ -64,6 +92,7 @@ const theme = {
   ...themeBody,
   ...themeInner,
   ...themeValue,
+  ...themeSeparator,
   ...themeText,
   ...themeLabel,
 };
@@ -74,6 +103,7 @@ export {
   ProgressBodyTag,
   ProgressInnerTag,
   ProgressValueTag,
+  ProgressSeparatorTag,
   ProgressTextTag,
   ProgressLabelTag,
 };