list

components/list/index.cjsx

@@ -1,4 +1,4 @@
-require './style'
+localCSS = require './style'
 
 module.exports = React.createClass
 
@@ -11,9 +11,10 @@ module.exports = React.createClass
     type        : React.PropTypes.string
 
   getDefaultProps: ->
-    attributes  : ""
+    attributes  : ''
+    className   : ''
     dataSource  : []
-    type        : "default"
+    type        : 'default'
 
   # -- Events
   onClick: (event, item) ->
@@ -21,7 +22,10 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
-    <ul data-component-list={@props.type}>
+    className  = "#{localCSS.root} #{@props.className}"
+    className += " #{@props.type}"  if @props.type
+
+    <ul data-react-toolbox='list' className={className}>
     {
       for item, index in @props.dataSource
         <li key={index} onClick={@onClick.bind null, item}>

components/list/style.styl

@@ -1,6 +1,6 @@
-@import "../constants.styl"
+@import '../constants'
 
-[data-component-list]
+:local(.root)
   list-style                      : none
   &, a
     color                         : TEXT
@@ -8,9 +8,8 @@
     overflow                      : hidden
     background-color              : WHITE
     box-shadow                    : ZDEPTH_SHADOW_1
-    transition-property             box-shadow
-    transition-duration             ANIMATION_DURATION
-    transition-timing-function      ANIMATION_EASE
-    // -- Classes
+    transition-property           : box-shadow
+    transition-duration           : ANIMATION_DURATION
+    transition-timing-function    : ANIMATION_EASE
     &:hover
       box-shadow                  : ZDEPTH_SHADOW_2