Adds ProgressButton component

Author: headzoo

Diff for: README.md

@@ -77,6 +77,8 @@ A Storybook demo is available online at https://deskpro.github.io/deskpro-compon
   Renders a button with a left side and right side, where clicking the right side opens a popper.
 * [Buttons/DropdownButton](docs/components/buttons/dropdown_button.md)  
   Renders a button with a drop down icon and popper.
+* [Buttons/ProgressButton](docs/components/buttons/progress_button.md)  
+  Renders a button which contains a progress bar.
 
 ### Columns
 * [Columns/Column](docs/components/columns/column.md)  

Diff for: docs/assets/images/progress-button-1.png

@@ -0,0 +1,31 @@
+Buttons/ProgressButton
+======================
+Renders a button which contains a progress bar.
+
+![Button example](../../assets/images/progress-button-1.png)
+
+```jsx
+<div>
+    <ProgressButton percent={50} size="large">
+        6/12
+    </ProgressButton>
+    <ProgressButton percent={75} size="large">
+        9/12
+    </ProgressButton>
+    <ProgressButton percent={100} size="large">
+        12/12
+    </ProgressButton>
+</div>
+```
+
+### Props
+
+**percent={number}**  
+The percentage complete.
+
+**size={string}**  
+One of "small", "medium", or "large".
+
+
+### CSS
+Adds `dp-progress-button` to the root element.

Diff for: docs/components/buttons/progress_button.md

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { objectKeyFilter } from 'utils/objects';
+import Progress from 'Components/Progress';
+import ProgressBar from 'Components/ProgressBar';
+
+/**
+ * Renders a button which contains a progress bar.
+ */
+export default class ProgressButton extends React.Component {
+  static propTypes = {
+    /**
+     * The percentage complete.
+     */
+    percent:   PropTypes.number,
+    /**
+     * The button size.
+     */
+    size:      PropTypes.oneOf(['s', 'm', 'l', 'small', 'medium', 'large']),
+    /**
+     * CSS classes to apply to the element.
+     */
+    className: PropTypes.string,
+    /**
+     * Children to render.
+     */
+    children:  PropTypes.node
+  };
+
+  static defaultProps = {
+    percent: 0,
+    size:    'large'
+  };
+
+  render() {
+    const { percent, size, className, children, ...props } = this.props;
+
+    return (
+      <div
+        className={classNames('dp-progress-button', `dp-progress-button--${size[0]}`, className)}
+        {...objectKeyFilter(props, ProgressButton.propTypes)}
+      >
+        <div className="dp-progress-button__label">
+          {children}
+        </div>
+        <Progress size="small" type={percent < 100 ? 'primary' : 'cta'}>
+          <ProgressBar percent={percent} />
+        </Progress>
+      </div>
+    );
+  }
+}

Diff for: src/Components/Buttons/ProgressButton.jsx

@@ -3,11 +3,13 @@ import ConfirmButton from './ConfirmButton';
 import SplitButton from './SplitButton';
 import ButtonPopper from './ButtonPopper';
 import DropdownButton from './DropdownButton';
+import ProgressButton from './ProgressButton';
 
 export {
   Button,
   ConfirmButton,
   SplitButton,
   ButtonPopper,
   DropdownButton,
+  ProgressButton,
 };

Diff for: src/Components/Buttons/index.js

@@ -258,3 +258,61 @@
 .dp-button--l.dp-dropdown-button .dp-icon {
   margin-left: 15px;
 }
+
+
+/// Progress Button
+///
+
+.dp-progress-button {
+  @extend .dp-button;
+  @extend .dp-button--secondary;
+  padding: 0;
+  cursor: pointer;
+  display: inline-block;
+  background-color: $dp-greyscale-150;
+  border-left: 1px solid $dp-greyscale-300;
+  font-family: $primary-font;
+  font-size: $font-size-s;
+  font-weight: $pf-semi-bold;
+  color: $dp-greyscale-850;
+
+  &, * {
+    box-sizing: border-box;
+  }
+
+  .dp-progress {
+    background-color: $dp-greyscale-00;
+    border-bottom-left-radius: $rad-size-m-l;
+    border-bottom-right-radius: $rad-size-m-l;
+  }
+}
+
+
+
+.dp-progress-button--s {
+  height: 26px;
+
+  .dp-progress-button__label {
+    padding: 4px 6px;
+  }
+
+  .dp-progress {
+    height: 2px;
+  }
+}
+
+.dp-progress-button--m {
+  height: 28px;
+
+  .dp-progress-button__label {
+    padding: 4px 8px;
+  }
+}
+
+.dp-progress-button--l {
+  height: 36px;
+
+  .dp-progress-button__label {
+    padding: 8px 12px;
+  }
+}

Diff for: src/styles/components/_buttons.scss

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { ProgressButton } from 'Components/Buttons';
+
+storiesOf('Buttons', module)
+  .addDecorator(withKnobs)
+  .add('with progress bar', () => {
+    const sizes = ['small', 'medium', 'large'];
+
+    return (
+      <div>
+        {sizes.map(size => (
+          <div style={{ marginBottom: 10 }}>
+            <ProgressButton percent={50} size={size}>
+              6/12
+            </ProgressButton>
+            &nbsp;&nbsp;
+            <ProgressButton percent={75} size={size}>
+              9/12
+            </ProgressButton>
+            &nbsp;&nbsp;
+            <ProgressButton percent={100} size={size}>
+              12/12
+            </ProgressButton>
+          </div>
+        ))}
+      </div>
+    );
+  }
+)
+;

Diff for: tests/storybook/components/buttons/progress.jsx

@@ -16,6 +16,7 @@ import './components/buttons/icon';
 import './components/buttons/square';
 import './components/buttons/split';
 import './components/buttons/dropdown';
+import './components/buttons/progress';
 import './components/columns/column';
 import './components/common/count';
 import './components/common/heading';
@@ -28,3 +29,4 @@ import './components/lists/selectable';
 import './components/modal';
 import './components/urgency';
 import './components/progress';
+