Added ProgressBar components

Author: rafaelklaessen

src/components/ProgressBar/ProgressBarFill/README.md

@@ -0,0 +1,3 @@
+```js
+<ProgressBarFill value={78} />
+```

src/components/ProgressBar/ProgressBarFill/index.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import styled, { keyframes } from 'react-emotion';
+import withTheme from '../../ThemeContext/withTheme';
+
+const bounce = keyframes`
+  0% {
+    left: 0;
+    width: 30%;
+  }
+
+  25% {
+    width: 40%
+  }
+
+  50% {
+    left: 70%;
+    width: 30%;
+  }
+
+  75% {
+    width: 40%;
+  }
+
+  100% {
+    left: 0;
+    width: 30%;
+  }
+`;
+
+const ProgressBarFill = styled('div')({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  borderRadius: 100
+}, ({ color, value, indeterminate, theme }) => {
+  const styles = [];
+
+  styles.push({
+    height: theme.fontSize,
+    backgroundColor: color || theme.primaryColor
+  });
+
+  if (!indeterminate) {
+    styles.push({
+      width: `${value}%`
+    });
+  }
+
+  if (indeterminate) {
+    styles.push({
+      animation: `${bounce} 4s ease infinite`
+    });
+  }
+
+  return styles;
+});
+
+ProgressBarFill.propTypes = {
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  value: PropTypes.number,
+  indeterminate: PropTypes.bool
+};
+
+ProgressBarFill.defaultProps = {
+  value: 0,
+  indeterminate: false
+};
+
+export default withTheme(ProgressBarFill);

src/components/ProgressBar/ProgressBarWrapper/README.md

@@ -0,0 +1,5 @@
+```js
+<ProgressBarWrapper>
+  Foo Bar
+</ProgressBarWrapper>
+```

src/components/ProgressBar/ProgressBarWrapper/index.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+import { lightGrey } from '../../../colors';
+import withTheme from '../../ThemeContext/withTheme';
+
+const ProgressBarWrapper = styled('div')({
+  position: 'relative',
+  background: lightGrey,
+  borderRadius: 100,
+  overflow: 'hidden'
+}, ({ backgroundColor, theme }) => ({
+  height: theme.fontSize,
+  backgroundColor
+}));
+
+ProgressBarWrapper.propTypes = {
+  backgroundColor: PropTypes.string
+};
+
+ProgressBarWrapper.defaultProps = {
+  backgroundColor: '#EEEEEE'
+};
+
+export default withTheme(ProgressBarWrapper);

src/components/ProgressBar/README.md

@@ -0,0 +1,12 @@
+```js
+<ProgressBar value={57} />
+```
+
+```js
+<ProgressBar color="#039BE5" value={78} />
+```
+
+`indeterminate`:
+```js
+<ProgressBar indeterminate />
+```

src/components/ProgressBar/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ProgressBarWrapper from './ProgressBarWrapper';
+import ProgressBarFill from './ProgressBarFill';
+
+const ProgressBar = ({
+  color,
+  backgroundColor,
+  value,
+  fillProps,
+  indeterminate,
+  ...props
+}) => (
+  <ProgressBarWrapper {...props}>
+    <ProgressBarFill
+      color={color}
+      backgroundColor={backgroundColor}
+      value={value}
+      indeterminate={indeterminate}
+      {...fillProps}
+    />
+  </ProgressBarWrapper>
+);
+
+ProgressBar.propTypes = {
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  value: PropTypes.number,
+  fillProps: PropTypes.object,
+  indeterminate: PropTypes.bool
+};
+
+ProgressBar.defaultProps = {
+  backgroundColor: '#EEEEEE',
+  value: 0,
+  fillProps: null,
+  indeterminate: false
+};
+
+export default ProgressBar;

styleguide.config.js

@@ -56,6 +56,7 @@ module.exports = {
     componentSection('Link'),
     componentSection('LoadingSpinner'),
     componentSection('SimpleLoadingSpinner'),
+    componentSection('ProgressBar'),
     componentSection('Code'),
     componentSection('BlockQuote'),
     componentSection('Tabs'),