feat: #653 Upload Progress (#716)

packages/elements/src/components/UploadProgress/__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UploadProgress should match snapshot 1`] = `
+<div
+  className="upload-progress has-background-info visible"
+>
+  <span>
+    Uploading...
+  </span>
+  <div
+    className="upload-progress-inner"
+  >
+    <div
+      className="upload-progress-bg"
+      style={
+        Object {
+          "width": "100%",
+        }
+      }
+    />
+  </div>
+  <span>
+    Complete 4/10
+  </span>
+</div>
+`;

packages/elements/src/components/UploadProgress/__tests__/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { UploadProgress, UploadProgressProps } from '../.'
+
+describe('UploadProgress', () => {
+  it('should match snapshot', () => {
+    const mockProps: UploadProgressProps = {
+      visible: true,
+      percentage: 100,
+      totalCount: 10,
+      completedCount: 4,
+    }
+    const wrapper = shallow(<UploadProgress {...mockProps} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('should run correctly when percentage < 0', () => {
+    const mockProps: UploadProgressProps = {
+      percentage: -1,
+      visible: true,
+    }
+    const wrapper = shallow(<UploadProgress {...mockProps} />)
+    expect(wrapper.find('.upload-progress-bg').prop('style')).toEqual({ width: '0%' })
+  })
+
+  it('should run correctly when percentage > 100', () => {
+    const mockProps: UploadProgressProps = {
+      percentage: 101,
+      visible: true,
+    }
+    const wrapper = shallow(<UploadProgress {...mockProps} />)
+    expect(wrapper.find('.upload-progress-bg').prop('style')).toEqual({ width: '100%' })
+  })
+})

packages/elements/src/components/UploadProgress/index.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+
+export interface UploadProgressProps {
+  visible: boolean
+  percentage?: number
+  totalCount?: number
+  completedCount?: number
+}
+
+const MAX = 100
+const MIN = 0
+
+export const UploadProgress: React.FC<UploadProgressProps> = ({
+  visible,
+  percentage = 0,
+  totalCount = 0,
+  completedCount = 0,
+}) => {
+  let validPercentage = percentage
+  if (percentage > MAX) {
+    validPercentage = MAX
+  }
+  if (percentage < MIN) {
+    validPercentage = MIN
+  }
+
+  return (
+    <div className={`upload-progress has-background-info ${visible ? 'visible' : ''}`}>
+      <span>Uploading...</span>
+      <div className="upload-progress-inner">
+        <div className="upload-progress-bg" style={{ width: `${validPercentage}%` }}></div>
+      </div>
+      <span>{`Complete ${completedCount}/${totalCount}`}</span>
+    </div>
+  )
+}

packages/elements/src/components/UploadProgress/upload-progress.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { UploadProgress } from './index'
+
+const Demo = () => {
+  const [visible, setVisible] = React.useState(false)
+  const [percentage, setPercentage] = React.useState(0)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setVisible(true)
+    }, 500)
+
+    const timer = setInterval(() => {
+      setPercentage(current => {
+        return current >= 100 ? 0 : current + Math.random() * 10
+      })
+    }, 500)
+
+    return () => {
+      clearInterval(timer)
+    }
+  }, [])
+
+  return (
+    <UploadProgress
+      percentage={percentage}
+      totalCount={10}
+      completedCount={Math.floor(percentage / 10)}
+      visible={visible}
+    />
+  )
+}
+
+storiesOf('UploadProgress', module).add('Default', () => <Demo />)

packages/elements/src/styles/components/upload-progress.scss

@@ -0,0 +1,43 @@
+@import '../base/layout.scss';
+
+.upload-progress {
+  width: 100%;
+  padding: $layout-base;
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  left: 0;
+  transform: translateY(100%);
+  transition: transform 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  color: white;
+  text-transform: uppercase;
+  font-size: 1rem;
+  font-weight: bold;
+  text-align: center;
+
+  &.visible {
+    transform: translateY(calc(#{$layout-base} * -1));
+  }
+
+  &-inner {
+    margin-left: $layout-base;
+    margin-right: $layout-base;
+    height: 2rem;
+    width: 100%;
+  }
+
+  &-bg {
+    background-color: #88c4e9;
+    height: 100%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .upload-progress {
+    &-inner {
+      width: 50%;
+    }
+  }
+}

packages/elements/src/styles/index.scss

@@ -30,3 +30,4 @@
 @import './components/spreadsheet.scss';
 @import './components/help-guide.scss';
 @import './components/notification.scss';
+@import './components/upload-progress.scss';