feat: Add PercentageBar component (#1232)

cozy · Nov 6, 2019 · 26dc94f · 26dc94f
1 parent 82bd844
commit 26dc94f
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 0 deletions.
diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
@@ -22,6 +22,7 @@ module.exports = {
         '../react/Spinner/index.jsx',
         '../react/Counter/index.jsx',
         '../react/PercentageLine/index.jsx',
+        '../react/PercentageBar/index.jsx',
         '../react/Stack/index.jsx',
         '../react/IconStack/index.jsx'
       ]

diff --git a/react/PercentageBar/Readme.md b/react/PercentageBar/Readme.md
@@ -0,0 +1,18 @@
+```
+import PercentageBar from 'cozy-ui/transpiled/react/PercentageBar';
+initialState = { percentage: 0.5 * 100 };
+
+<>
+    <button onClick={() => setState({ percentage: Math.random() * 100})}>Random percentage</button>
+    {(state.percentage).toFixed(2)}%
+    <PercentageBar
+      color="var(--primaryColor)"
+      value={state.percentage}
+      style={{ marginBottom: '2rem' }}
+    />
+    <PercentageBar
+      color="var(--emerald)"
+      value={state.percentage}
+    />
+</>
+```
diff --git a/react/PercentageBar/index.jsx b/react/PercentageBar/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import PercentageLine from '../PercentageLine'
+import styles from './styles.styl'
+import cx from 'classnames'
+
+const PercentageBar = props => {
+  const { value, color, className, ...rest } = props
+
+  return (
+    <div className={cx(styles.PercentageBar, className)} {...rest}>
+      <PercentageLine
+        value={value}
+        color={color}
+        className={styles.PercentageBar__line}
+      />
+    </div>
+  )
+}
+
+export default PercentageBar
diff --git a/react/PercentageBar/styles.styl b/react/PercentageBar/styles.styl
@@ -0,0 +1,11 @@
+radius = 4px
+
+.PercentageBar
+    background-color var(--paleGrey)
+    border 1px solid var(--silver)
+    height 1.5rem
+    border-radius radius
+
+.PercentageBar__line
+    height 100%
+    border-radius radius
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -3425,6 +3425,21 @@ exports[`Menu should render examples: Menu 3`] = `
 </div>"
 `;
 
+exports[`PercentageBar should render examples: PercentageBar 1`] = `
+"<div><button>Random percentage</button>50.00% <div class=\\"styles__PercentageBar___12TWu\\" style=\\"margin-bottom: 2rem;\\">
+    <div class=\\"styles__PercentageBar__line___1DAnN PercentageLine__PercentageLine___3koWP\\" style=\\"transform: scaleX(0.5);\\"></div>
+  </div>
+  <div class=\\"styles__PercentageBar___12TWu\\">
+    <div class=\\"styles__PercentageBar__line___1DAnN PercentageLine__PercentageLine___3koWP\\" style=\\"transform: scaleX(0.5);\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`PercentageLine should render examples: PercentageLine 1`] = `
+"<div><button>Random percentage</button>50.00% <div class=\\"PercentageLine__PercentageLine___3koWP\\" style=\\"transform: scaleX(0.5);\\"></div>
+</div>"
+`;
+
 exports[`QuotaAlert should render examples: QuotaAlert 1`] = `
 "<div>
   <div><button>Toggle modal</button></div>

diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
@@ -39,6 +39,8 @@ testComponent('Label')
 testComponent('ListItemText')
 testComponent('Media')
 testComponent('Menu')
+testComponent('PercentageBar')
+testComponent('PercentageLine')
 testComponent('QuotaAlert')
 testComponent('Radio')
 testComponent('SelectBox')