Autoinject styles for ProgressBar

components/identifiers.js

@@ -5,4 +5,5 @@ export const BUTTON = 'RTButton';
 export const CARD = 'RTCard';
 export const CHIP = 'RTChip';
 export const INPUT = 'RTInput';
+export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';

components/progress_bar/ProgressBar.js

@@ -1,28 +1,29 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import prefixer from '../utils/prefixer';
+import { PROGRESS_BAR } from '../identifiers.js';
+import prefixer from '../utils/prefixer.js';
 
-class ProgressBar extends React.Component {
+class ProgressBar extends Component {
   static propTypes = {
-    buffer: React.PropTypes.number,
-    className: React.PropTypes.string,
-    max: React.PropTypes.number,
-    min: React.PropTypes.number,
-    mode: React.PropTypes.oneOf(['determinate', 'indeterminate']),
-    multicolor: React.PropTypes.bool,
-    theme: React.PropTypes.shape({
-      buffer: React.PropTypes.string,
-      circle: React.PropTypes.string,
-      circular: React.PropTypes.string,
-      indeterminate: React.PropTypes.string,
-      linear: React.PropTypes.string,
-      multicolor: React.PropTypes.string,
-      path: React.PropTypes.string,
-      value: React.PropTypes.string
+    buffer: PropTypes.number,
+    className: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number,
+    mode: PropTypes.oneOf(['determinate', 'indeterminate']),
+    multicolor: PropTypes.bool,
+    theme: PropTypes.shape({
+      buffer: PropTypes.string,
+      circle: PropTypes.string,
+      circular: PropTypes.string,
+      indeterminate: PropTypes.string,
+      linear: PropTypes.string,
+      multicolor: PropTypes.string,
+      path: PropTypes.string,
+      value: PropTypes.string
     }),
-    type: React.PropTypes.oneOf(['linear', 'circular']),
-    value: React.PropTypes.number
+    type: PropTypes.oneOf(['linear', 'circular']),
+    value: PropTypes.number
   };
 
   static defaultProps = {
@@ -98,5 +99,5 @@ class ProgressBar extends React.Component {
   }
 }
 
-export default themr('ToolboxProgress')(ProgressBar);
+export default themr(PROGRESS_BAR)(ProgressBar);
 export { ProgressBar };

components/progress_bar/index.js

@@ -1 +1,9 @@
-export default from './ProgressBar';
+import { themr } from 'react-css-themr';
+import { PROGRESS_BAR } from '../identifiers.js';
+import { ProgressBar } from './ProgressBar.js';
+import theme from './theme.scss';
+
+const ThemedProgressBar = themr(PROGRESS_BAR, theme)(ProgressBar);
+
+export default ThemedProgressBar;
+export { ThemedProgressBar as ProgressBar };

components/progress_bar/readme.md

@@ -5,16 +5,17 @@ Minimize visual changes that occur while your app loads content by representing
 <!-- example -->
 ```jsx
 import ProgressBar from 'react-toolbox/lib/progress_bar';
-import theme from 'react-toolbox/lib/progress_bar/theme';
 
 const ProgressTest = () => (
   <div>
-    <ProgressBar type="circular" mode="indeterminate" theme={theme} />
-    <ProgressBar type="linear" mode="determinate" value={83} buffer={90} theme={theme} />
+    <ProgressBar type="circular" mode="indeterminate" />
+    <ProgressBar type="linear" mode="determinate" value={83} buffer={90} />
   </div>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTProgressBar`.
+
 ## Properties
 
 | Name          | Type        | Default         | Description|
@@ -28,9 +29,7 @@ const ProgressTest = () => (
 | `type`        | `String`    | `linear`        | Type of the progress bar, it can be `circular` or `linear`.|
 | `value`       | `Number`    | `0`             | Value of the current progress.|
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxProgress`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|