Migrate Progress Bar to elements (#61)

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",

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>
+`;

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()
+  })
+})

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} />
+  })

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

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'

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%;
+  }
+}

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';