From bbad098c43b0ac295e7e0a2b648cc1b22d6bef49 Mon Sep 17 00:00:00 2001
From: Pham Hai Duong <tanphamhaiduong@gmail.com>
Date: Tue, 17 Sep 2019 15:02:08 +0700
Subject: [PATCH] Migrate Progress Bar to elements (#61)

---
 package.json                                  |  2 +-
 .../__snapshots__/index.test.tsx.snap         | 22 ++++++++++++
 .../ProgressBar/__tests__/index.test.tsx      | 35 +++++++++++++++++++
 src/components/ProgressBar/index.stories.tsx  | 18 ++++++++++
 src/components/ProgressBar/index.tsx          | 34 ++++++++++++++++++
 src/index.tsx                                 |  1 +
 src/styles/components/progressbar.scss        | 18 ++++++++++
 src/styles/index.scss                         |  1 +
 8 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ProgressBar/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 src/components/ProgressBar/__tests__/index.test.tsx
 create mode 100644 src/components/ProgressBar/index.stories.tsx
 create mode 100644 src/components/ProgressBar/index.tsx
 create mode 100644 src/styles/components/progressbar.scss

diff --git a/package.json b/package.json
index 71ebe25f0c..21f0a5c58a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "main": "dist/index.js",
   "umd:main": "dist/elements.umd.production.js",
diff --git a/src/components/ProgressBar/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ProgressBar/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..86493ff466
--- /dev/null
+++ b/src/components/ProgressBar/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<div
+  className="filler"
+  style={
+    Object {
+      "width": "100%",
+    }
+  }
+/>
+`;
+
+exports[`ProgressBar ProgressBar should match snapshot 1`] = `
+<div
+  className="progress-bar"
+>
+  <Filler
+    percentage={100}
+  />
+</div>
+`;
diff --git a/src/components/ProgressBar/__tests__/index.test.tsx b/src/components/ProgressBar/__tests__/index.test.tsx
new file mode 100644
index 0000000000..dd4ef0e974
--- /dev/null
+++ b/src/components/ProgressBar/__tests__/index.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { ProgressBar, Filler } from '../.'
+
+describe('ProgressBar', () => {
+  describe('ProgressBar', () => {
+    it('should match snapshot', () => {
+      const mockProps = {
+        percentage: 100
+      }
+      const wrapper = shallow(<ProgressBar {...mockProps} />)
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should run correctly when percentage < 0', () => {
+      const mockProps = {
+        percentage: -1
+      }
+      const wrapper = shallow(<ProgressBar {...mockProps} />)
+      expect(wrapper.find('Filler').prop('percentage')).toEqual(0)
+    })
+
+    it('should run correctly when percentage > 100', () => {
+      const mockProps = {
+        percentage: 101
+      }
+      const wrapper = shallow(<ProgressBar {...mockProps} />)
+      expect(wrapper.find('Filler').prop('percentage')).toEqual(100)
+    })
+  })
+  describe('Filler', () => {
+    const wrapper = shallow(<Filler percentage={100} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+})
diff --git a/src/components/ProgressBar/index.stories.tsx b/src/components/ProgressBar/index.stories.tsx
new file mode 100644
index 0000000000..6481daeacc
--- /dev/null
+++ b/src/components/ProgressBar/index.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { ProgressBar } from '.'
+
+storiesOf('ProgressBar', module)
+  .add('0%', () => {
+    return <ProgressBar percentage={0} />
+  })
+  .add('50%', () => {
+    return <ProgressBar percentage={50} />
+  })
+  .add('70%', () => {
+    return <ProgressBar percentage={70} />
+  })
+  .add('100%', () => {
+    return <ProgressBar percentage={100} />
+  })
diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
new file mode 100644
index 0000000000..8b1761db7b
--- /dev/null
+++ b/src/components/ProgressBar/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+export const Filler: React.FC<ProgressBarProps> = props => {
+  return <div className="filler" style={{ width: `${props.percentage}%` }} />
+}
+
+Filler.displayName = 'Filler'
+
+const MAX = 100
+const MIN = 0
+
+export type ProgressBarProps = {
+  percentage: number
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = (props: ProgressBarProps) => {
+  const { percentage } = props
+  let validPercentage = percentage
+  if (percentage > MAX) {
+    validPercentage = MAX
+  }
+  if (percentage < MIN) {
+    validPercentage = MIN
+  }
+  return (
+    <div className="progress-bar">
+      <Filler percentage={validPercentage} />
+    </div>
+  )
+}
+
+ProgressBar.displayName = 'ProgressBar'
+
+export default ProgressBar
diff --git a/src/index.tsx b/src/index.tsx
index f310add685..903a30279f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,3 +23,4 @@ export * from './components/CamaraImageInput'
 export * from './components/SelectBox'
 export * from './components/Wizard'
 export * from './components/Wizard/context'
+export * from './components/Progressbar'
diff --git a/src/styles/components/progressbar.scss b/src/styles/components/progressbar.scss
new file mode 100644
index 0000000000..33d21f0ddf
--- /dev/null
+++ b/src/styles/components/progressbar.scss
@@ -0,0 +1,18 @@
+.progress-bar {
+  position: relative;
+  height: 20px;
+  width: 350px;
+  border-radius: 4px;
+  border: 1px solid #333;
+  width: 100%;
+}
+
+.filler {
+  background: #23a4de;
+  height: 100%;
+  border-radius: inherit;
+  transition: width .2s ease-in;
+  &:hover{
+    width: 100%;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7fb9777b18..0e875d9691 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -18,3 +18,4 @@ html {
 @import './components/wizard.scss';
 @import './components/appointment-tile.scss';
 @import './components/react-datepicker.scss';
+@import './components/progressbar.scss';