Add a classname attribute and refactor progress bar

components/progress_bar/index.cjsx

@@ -9,13 +9,15 @@ module.exports = React.createClass
   # -- Properties
   propTypes:
     buffer        : React.PropTypes.number
+    className     : React.PropTypes.string
+    indeterminate : React.PropTypes.bool
     max           : React.PropTypes.number
     min           : React.PropTypes.number
     value         : React.PropTypes.number
-    indeterminate : React.PropTypes.bool
 
   getDefaultProps: ->
     buffer        : 0
+    className     : ""
     indeterminate : false
     max           : 100
     min           : 0
@@ -25,16 +27,12 @@ module.exports = React.createClass
   calculateRatio: (value) ->
     (value - @props.min) / (@props.max - @props.min)
 
-  transformProgress: (ratio) ->
-    WebkitTransform: "scaleX(#{ratio})"
-    MsTransform:     "scaleX(#{ratio})"
-    transform:       "scaleX(#{ratio})"
-
   # -- Render
   render: ->
-    className      = 'indeterminate' if @props.indeterminate
-    primaryRatio   = @calculateRatio(@props.value)
-    secondaryRatio = @calculateRatio(@props.buffer)
+    className   = @props.className
+    className   += ' indeterminate' if @props.indeterminate
+    valueStyle  = transformProgress(@calculateRatio(@props.value))
+    bufferStyle = transformProgress(@calculateRatio(@props.buffer))
 
     <div data-component-progressbar
          className={className}
@@ -42,6 +40,12 @@ module.exports = React.createClass
          aria-valuenow={@props.value}
          aria-valuemin={@props.min}
          aria-valuemax={@props.max}>
-      <span data-component-progressbar-buffer style={@transformProgress(secondaryRatio)}></span>
-      <span data-component-progressbar-value  style={@transformProgress(primaryRatio)}></span>
+      <span data-component-progressbar-buffer style={bufferStyle}></span>
+      <span data-component-progressbar-value  style={valueStyle}></span>
     </div>
+
+# TODO Refactor to a module to add vendor prefixes to a property
+transformProgress = (ratio) ->
+  WebkitTransform: "scaleX(#{ratio})"
+  MsTransform:     "scaleX(#{ratio})"
+  transform:       "scaleX(#{ratio})"