Merge pull request #1092 from cozy/percentage-line

feat: Add PercentageLine

docs/styleguide.config.js

@@ -19,7 +19,8 @@ module.exports = {
         '../react/Chip/index.jsx',
         '../react/Icon/index.jsx',
         '../react/Spinner/index.jsx',
-        '../react/Counter/index.jsx'
+        '../react/Counter/index.jsx',
+        '../react/PercentageLine/index.jsx'
       ]
     },
     {

react/PercentageLine/PercentageLine.styl

@@ -0,0 +1,4 @@
+.PercentageLine
+    transition transform 0.3s ease
+    transform-origin 0 0
+    height 5px

react/PercentageLine/Readme.md

@@ -0,0 +1,8 @@
+```
+initialState = { percentage: Math.random() * 100 };
+
+<>
+    <button onClick={() => setState({ percentage: Math.random() * 100})}>Random percentage</button>
+    <PercentageLine  color='var(--primaryColor)' value={state.percentage}/>
+</>
+```

react/PercentageLine/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import cx from 'classnames'
+import styles from './PercentageLine.styl'
+import PropTypes from 'prop-types'
+
+const PercentageLine = ({ value, color, className, style }) => (
+  <div
+    className={cx(className, styles.PercentageLine)}
+    style={{
+      transform: `scaleX(${value / 100})`,
+      backgroundColor: color,
+      ...style
+    }}
+  />
+)
+
+PercentageLine.propTypes = {
+  /** @type Value in percent */
+  value: PropTypes.number.isRequired,
+  /** @type CSS color or CSS variable */
+  color: PropTypes.string.isRequired,
+  /** @type Additional className */
+  className: PropTypes.string,
+  /** @type Custom style */
+  style: PropTypes.object
+}
+
+export default PercentageLine

react/index.js

@@ -75,3 +75,4 @@ export { default as Viewer } from './Viewer/ViewerExposer'
 export { default as FileInput } from './FileInput'
 export { default as Card } from './Card'
 export { default as InlineCard } from './InlineCard'
+export { default as PercentageLine } from './PercentageLine'