Merge branch 'dev' of https://github.com/sanfilippopablo/react-toolbox into sanfilippopablo-dev

* 'dev' of https://github.com/sanfilippopablo/react-toolbox:
  Added custom sized circular ProgressBar to spec
  Added viewBox attr to svg element of circular ProgressBar to allow custom sizing

components/progress_bar/ProgressBar.js

@@ -62,7 +62,7 @@ class ProgressBar extends Component {
 
   renderCircular () {
     return (
-      <svg className={this.props.theme.circle}>
+      <svg className={this.props.theme.circle} viewBox="0 0 60 60">
         <circle className={this.props.theme.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
       </svg>
     );

lib/progress_bar/ProgressBar.js

@@ -73,7 +73,7 @@ var ProgressBar = function (_Component) {
     value: function renderCircular() {
       return _react2.default.createElement(
         'svg',
-        { className: this.props.theme.circle },
+        { className: this.props.theme.circle, viewBox: '0 0 60 60' },
         _react2.default.createElement('circle', { className: this.props.theme.path, style: this.circularStyle(), cx: '30', cy: '30', r: '25' })
       );
     }

spec/components/progress.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ProgressBar from '../../components/progress_bar';
+import style from '../style'
 
 const initialState = {
   progress: 0,
@@ -47,6 +48,8 @@ class ProgressBarTest extends React.Component {
         <ProgressBar mode='indeterminate'/>
         <p style={{margin: '10px auto'}}>Circular</p>
         <ProgressBar type='circular' mode='indeterminate'/>
+        <p style={{margin: '10px auto'}}>Circular with custom size</p>
+        <ProgressBar type='circular' mode='indeterminate' className={style.customSizedProgress}/>
       </section>
     );
   }

spec/style.scss

@@ -139,3 +139,8 @@ $offset: 1.8 * $unit;
   flex-direction: column;
   flex-grow: 2;
 }
+
+.customSizedProgress {
+  width: 40px !important;
+  height: 40px !important;
+}