From 768b42683aeabc368e08d760070a789da9869b0b Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Fri, 5 Jul 2019 10:00:25 +0200
Subject: [PATCH 1/2] feat: Add PercentageLine

---
 docs/styleguide.config.js                |  3 ++-
 react/PercentageLine/PercentageLine.styl |  4 ++++
 react/PercentageLine/Readme.md           |  8 +++++++
 react/PercentageLine/index.jsx           | 28 ++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 react/PercentageLine/PercentageLine.styl
 create mode 100644 react/PercentageLine/Readme.md
 create mode 100644 react/PercentageLine/index.jsx

diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index a6b94c38e6..ce1a595518 100644
--- a/docs/styleguide.config.js
+++ b/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'
       ]
     },
     {
diff --git a/react/PercentageLine/PercentageLine.styl b/react/PercentageLine/PercentageLine.styl
new file mode 100644
index 0000000000..7fe979da27
--- /dev/null
+++ b/react/PercentageLine/PercentageLine.styl
@@ -0,0 +1,4 @@
+.PercentageLine
+    transition transform 0.3s ease
+    transform-origin 0 0
+    height 5px
diff --git a/react/PercentageLine/Readme.md b/react/PercentageLine/Readme.md
new file mode 100644
index 0000000000..d91c2b8ffe
--- /dev/null
+++ b/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}/>
+</>
+```
diff --git a/react/PercentageLine/index.jsx b/react/PercentageLine/index.jsx
new file mode 100644
index 0000000000..59251b9e78
--- /dev/null
+++ b/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

From b79162b14ed45ac029c0a3905c9a427230aec3ba Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Fri, 5 Jul 2019 12:27:19 +0200
Subject: [PATCH 2/2] feat: Expose via index

---
 react/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/react/index.js b/react/index.js
index 838b0742e4..46ee479b41 100644
--- a/react/index.js
+++ b/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'