From 12e18a7ed0de687213985485b064e5d6b9b6bd92 Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Sun, 12 Jul 2015 20:55:54 +0700
Subject: [PATCH 01/15] Example using <FontIcon>

---
 spec/components/font_icon.cjsx | 24 ++++++++++++++++++++++++
 spec/index.cjsx                |  2 ++
 2 files changed, 26 insertions(+)
 create mode 100644 spec/components/font_icon.cjsx

diff --git a/spec/components/font_icon.cjsx b/spec/components/font_icon.cjsx
new file mode 100644
index 00000000..33334ebc
--- /dev/null
+++ b/spec/components/font_icon.cjsx
@@ -0,0 +1,24 @@
+###
+@todo
+###
+
+FontIcon = require '../../components/font_icon'
+
+module.exports = React.createClass
+
+  # -- Events
+  onEvent: (type, event, form) ->
+    console.log "[form.#{type}]", form.getValue()
+
+  # -- Render
+  render: ->
+    <section>
+      <h2>Font Icon</h2>
+      <p>lorem ipsum...</p>
+
+      <FontIcon value="add"/>
+      <FontIcon value="access_alarm"/>
+      <FontIcon value="explore"/>
+      <FontIcon value="zoom_in"/>
+      <FontIcon value="input"/>
+    </section>
diff --git a/spec/index.cjsx b/spec/index.cjsx
index 39540f37..ecf8a8ef 100644
--- a/spec/index.cjsx
+++ b/spec/index.cjsx
@@ -6,6 +6,7 @@ Autocomplete  = require './components/autocomplete'
 Button        = require './components/button'
 Dialog        = require './components/dialog'
 Dropdown      = require './components/dropdown'
+FontIcon      = require './components/font_icon'
 Form          = require './components/form'
 Progress      = require './components/progress'
 Switch        = require './components/switch'
@@ -32,6 +33,7 @@ Test = React.createClass
       <Button />
       <Dialog />
       <Dropdown />
+      <FontIcon />
       <Form />
       <Progress />
     </app>

From 5775ab405bad8cc588ebad0261ff8fa84f95f83a Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Mon, 13 Jul 2015 21:09:57 +0700
Subject: [PATCH 02/15] Consolidate properties

---
 components/aside/index.cjsx        | 2 +-
 components/autocomplete/index.cjsx | 8 ++++----
 components/dropdown/index.cjsx     | 7 ++++---
 components/input/index.cjsx        | 5 +++--
 components/list/index.cjsx         | 2 +-
 components/navigation/index.cjsx   | 4 ++--
 6 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/aside/index.cjsx b/components/aside/index.cjsx
index 31842157..d5695966 100644
--- a/components/aside/index.cjsx
+++ b/components/aside/index.cjsx
@@ -7,7 +7,7 @@ module.exports = React.createClass
     active      : React.PropTypes.bool
     className   : React.PropTypes.string
     hideable    : React.PropTypes.bool
-    type        : React.PropTypes.string.required
+    type        : React.PropTypes.string
 
   getDefaultProps: ->
     className   : ""
diff --git a/components/autocomplete/index.cjsx b/components/autocomplete/index.cjsx
index 1340fc6b..2c3123bf 100644
--- a/components/autocomplete/index.cjsx
+++ b/components/autocomplete/index.cjsx
@@ -7,7 +7,7 @@ module.exports = React.createClass
   propTypes:
     className   : React.PropTypes.string
     colors      : React.PropTypes.object
-    dataSource  : React.PropTypes.object
+    dataSource  : React.PropTypes.any
     disabled    : React.PropTypes.bool
     error       : React.PropTypes.string
     exact       : React.PropTypes.bool
@@ -16,7 +16,7 @@ module.exports = React.createClass
     onChange    : React.PropTypes.func
     required    : React.PropTypes.bool
     type        : React.PropTypes.string
-    value       : React.PropTypes.string
+    value       : React.PropTypes.any
 
   getDefaultProps: ->
     className   : ""
@@ -83,14 +83,14 @@ module.exports = React.createClass
           <ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
             {
               for key, label of @state.values
-                <li id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
+                <li ref={key} id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
             }
           </ul>
       }
       <Input {...@props} value="" ref="input" onFocus={@onFocus}
              onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
       <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
-        {<li id={key}>{label}</li> for key, label of @state.suggestions}
+        {<li ref={key} id={key}>{label}</li> for key, label of @state.suggestions}
       </ul>
     </div>
 
diff --git a/components/dropdown/index.cjsx b/components/dropdown/index.cjsx
index 47fbe557..6084927f 100644
--- a/components/dropdown/index.cjsx
+++ b/components/dropdown/index.cjsx
@@ -13,7 +13,7 @@ module.exports = React.createClass
   propTypes:
     className   : React.PropTypes.string
     dataSource  : React.PropTypes.array
-    disabled    : React.PropTypes.disabled
+    disabled    : React.PropTypes.bool
     label       : React.PropTypes.string
     onChange    : React.PropTypes.func
     template    : React.PropTypes.func
@@ -25,6 +25,7 @@ module.exports = React.createClass
     dataSource  : []
     disabled    : false
     type        : "normal"
+    value       : undefined
 
   getInitialState: ->
     active      : false
@@ -69,8 +70,8 @@ module.exports = React.createClass
       { <label>{@props.label}</label> if @props.label }
       <ul ref="values" style={stylesheet} onClick={@onItem}>
       {
-        for item in @props.dataSource
-          <li id={item.value} className={"selected" if item.value is @state.selected.value}>
+        for item, index in @props.dataSource
+          <li id={item.value} ref={index} className={"selected" if item.value is @state.selected.value}>
             { if @props.template then @props.template item else item.label }
             { <Ripple origin={@state.ripple}/> if item.value is @state.selected.value }
           </li>
diff --git a/components/input/index.cjsx b/components/input/index.cjsx
index 5267fca8..75066596 100644
--- a/components/input/index.cjsx
+++ b/components/input/index.cjsx
@@ -55,9 +55,10 @@ module.exports = React.createClass
                     onChange={@onChange}
                     onKeyPress={@props.onKeyPress}
                     onFocus={@props.onFocus}
-                    onBlur={@props.onBlur}>{@state.value}</textarea>
+                    onBlur={@props.onBlur} />
         else
-          <input ref='input' {...@props} value={@state.value} checked={@state.checked} 
+          <input ref='input' {...@props} value={@state.value}
+                 checked={@state.checked} 
                  onChange={@onChange}
                  onKeyPress={@props.onKeyPress}
                  onFocus={@props.onFocus}
diff --git a/components/list/index.cjsx b/components/list/index.cjsx
index 4e9f15ae..70badf9b 100644
--- a/components/list/index.cjsx
+++ b/components/list/index.cjsx
@@ -5,7 +5,7 @@ module.exports = React.createClass
   # -- States & Properties
   propTypes:
     className   : React.PropTypes.string
-    dataSource  : React.PropTypes.Array
+    dataSource  : React.PropTypes.array
     ItemFactory : React.PropTypes.func
     onClick     : React.PropTypes.func
     type        : React.PropTypes.string
diff --git a/components/navigation/index.cjsx b/components/navigation/index.cjsx
index eaf348e7..ef610af0 100644
--- a/components/navigation/index.cjsx
+++ b/components/navigation/index.cjsx
@@ -20,7 +20,7 @@ module.exports = React.createClass
   # -- Render
   render: ->
     <nav data-component-navigation={@props.type}>
-      { <Link {...route} /> for route in @props.routes }
-      { <Button {...action} /> for action in @props.actions }
+      { <Link key={index} {...route} /> for route, index in @props.routes }
+      { <Button key={index} {...action} /> for action, index in @props.actions }
       { @props.children }
     </nav>

From d227181cc50aef1d07ddb7b799bb5ae4a59efd68 Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Mon, 13 Jul 2015 21:15:03 +0700
Subject: [PATCH 03/15] Consolidate keys and values with proptype.any

---
 components/autocomplete/index.cjsx |  4 ++--
 components/dropdown/index.cjsx     |  2 +-
 components/form/index.cjsx         | 10 +++++-----
 components/input/index.cjsx        |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/autocomplete/index.cjsx b/components/autocomplete/index.cjsx
index 2c3123bf..da14004e 100644
--- a/components/autocomplete/index.cjsx
+++ b/components/autocomplete/index.cjsx
@@ -83,14 +83,14 @@ module.exports = React.createClass
           <ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
             {
               for key, label of @state.values
-                <li ref={key} id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
+                <li key={key} id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
             }
           </ul>
       }
       <Input {...@props} value="" ref="input" onFocus={@onFocus}
              onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
       <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
-        {<li ref={key} id={key}>{label}</li> for key, label of @state.suggestions}
+        {<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
       </ul>
     </div>
 
diff --git a/components/dropdown/index.cjsx b/components/dropdown/index.cjsx
index 6084927f..260dee1b 100644
--- a/components/dropdown/index.cjsx
+++ b/components/dropdown/index.cjsx
@@ -71,7 +71,7 @@ module.exports = React.createClass
       <ul ref="values" style={stylesheet} onClick={@onItem}>
       {
         for item, index in @props.dataSource
-          <li id={item.value} ref={index} className={"selected" if item.value is @state.selected.value}>
+          <li id={item.value} key={index} className={"selected" if item.value is @state.selected.value}>
             { if @props.template then @props.template item else item.label }
             { <Ripple origin={@state.ripple}/> if item.value is @state.selected.value }
           </li>
diff --git a/components/form/index.cjsx b/components/form/index.cjsx
index 8c1b8831..c944e0e9 100644
--- a/components/form/index.cjsx
+++ b/components/form/index.cjsx
@@ -59,15 +59,15 @@ module.exports = React.createClass
       {
         for attribute, index in @state.attributes
           if attribute.type is "submit"
-            <Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
+            <Button key={index} {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
           else if attribute.type is "autocomplete"
-            <Autocomplete {...attribute} onChange={@onChange}/>
+            <Autocomplete key={index} {...attribute} onChange={@onChange}/>
           else if attribute.type is "dropdown"
-            <Dropdown {...attribute} onChange={@onChange}/>
+            <Dropdown key={index} {...attribute} onChange={@onChange}/>
           else if attribute.type is "switch"
-            <Switch {...attribute} onChange={@onChange}/>
+            <Switch key={index} {...attribute} onChange={@onChange}/>
           else
-            <Input {...attribute} />
+            <Input key={index} {...attribute} />
       }
       { @props.children }
     </form>
diff --git a/components/input/index.cjsx b/components/input/index.cjsx
index 75066596..47e3e707 100644
--- a/components/input/index.cjsx
+++ b/components/input/index.cjsx
@@ -16,7 +16,7 @@ module.exports = React.createClass
     onBlur      : React.PropTypes.func
     required    : React.PropTypes.bool
     type        : React.PropTypes.string
-    value       : React.PropTypes.string
+    value       : React.PropTypes.any
 
   getDefaultProps: ->
     className   : ''

From d99c275300723734acbd9efcf95161a2ba06a90a Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Wed, 15 Jul 2015 21:18:51 +0700
Subject: [PATCH 04/15] Classes for different states

---
 components/input/index.cjsx | 30 ++++++++++++++++-----
 components/input/style.styl | 54 ++++++++++++++++++++++---------------
 2 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/components/input/index.cjsx b/components/input/index.cjsx
index 47e3e707..cf7bc5e1 100644
--- a/components/input/index.cjsx
+++ b/components/input/index.cjsx
@@ -30,8 +30,14 @@ module.exports = React.createClass
     error       : @props.error
     touch       : @props.type in ['checkbox', 'radio']
     value       : @props.value
+    focus       : false
+    valid       : false
 
   # -- Events
+  onBlur: (event) ->
+    @setState focus: false
+    @props.onBlur? event, @
+
   onChange: (event) ->
     if @state.touch
       @setState checked: event.target.checked, error: undefined
@@ -39,30 +45,40 @@ module.exports = React.createClass
       @setState value: event.target.value, error: undefined
     @props.onChange? event, @
 
+  onFocus: (event) ->
+    @setState focus: true
+    @props.onFocus? event, @
+
+  onKeyPress: (event) ->
+    @setState focus: true
+    @props.onKeyPress? event, @
+
   # -- Render
   render: ->
     className = @props.className
+    className += ' checked' if @state.checked
     className += ' disabled' if @props.disabled
     className += ' error' if @state.error
+    className += ' focus' if @state.focus
     className += ' touch' if @state.touch
     className += ' radio' if @props.type is 'radio'
-    className += ' checked' if @state.checked
+    className += ' valid' if @state.value? and @state.value.length > 0
 
     <div data-component-input={@props.type} className={className}>
       {
         if @props.multiline
           <textarea ref='input' {...@props} value={@state.value}
+                    onBlur={@onBlur}
                     onChange={@onChange}
-                    onKeyPress={@props.onKeyPress}
-                    onFocus={@props.onFocus}
-                    onBlur={@props.onBlur} />
+                    onFocus={@onFocus}
+                    onKeyPress={@onKeyPress} />
         else
           <input ref='input' {...@props} value={@state.value}
                  checked={@state.checked} 
+                 onBlur={@onBlur}
                  onChange={@onChange}
-                 onKeyPress={@props.onKeyPress}
-                 onFocus={@props.onFocus}
-                 onBlur={@props.onBlur}/>
+                 onFocus={@onFocus}
+                 onKeyPress={@onKeyPress} />
       }
       <span className='bar'></span>
       { <label>{@props.label}</label> if @props.label }
diff --git a/components/input/style.styl b/components/input/style.styl
index ff69bf97..9549fb6f 100644
--- a/components/input/style.styl
+++ b/components/input/style.styl
@@ -77,6 +77,38 @@
           transform                       scale(1)
 
   &:not(.touch)
+
+    // -- Stylesheets
+    &.focus
+      input, textarea
+        outline                       : none
+        ~ .bar:before, ~ .bar:after
+          width                       : 50%
+        &:invalid
+          &  ~ label
+            color                     : CANCEL
+          & ~ .bar:before, & ~ .bar:after
+            background-color          : CANCEL
+    &.focus , &.valid
+      input, textarea
+        & ~ label
+          top                         : -(SPACE / 2)
+          font-size                   : FONT_SIZE_TINY
+          color                       : THEME
+    input[type="date"]
+      & ~ label
+          top                         : -(SPACE / 2)
+          font-size                   : FONT_SIZE_TINY
+          color                       : THEME
+    &:not(.focus)
+      input, textarea
+          &:invalid:not(:required)
+            border-bottom-color       : CANCEL
+    &.error
+      input, textarea
+        border-bottom-color           : CANCEL
+
+    // -- Children
     input, textarea
       display                         : block
       padding                         : (SPACE / 2) 0
@@ -86,24 +118,9 @@
       border                          : none
       border-bottom                   : 1px solid FORM_BORDER_COLOR
       // -- Attributes
-      &:focus
-        outline                       : none
-        ~ .bar:before, ~ .bar:after
-          width                       : 50%
-      &:focus ~ label, &:valid ~ label
-        top                           : -(SPACE / 2)
-        font-size                     : FONT_SIZE_TINY
-        // color                         : THEME
       &:disabled
         color                         : FORM_BORDER_COLOR
         border-bottom-style           : dotted
-      &:invalid
-        &:not(:required):not(:focus)
-          border-bottom-color         : CANCEL
-        &:focus  ~ label
-          color                       : CANCEL
-        ~ .bar:before, ~ .bar:after
-          background-color            : CANCEL
 
     label
       position                        : absolute
@@ -113,6 +130,7 @@
       transition-property               top, font-size, color
       transition-duration               ANIMATION_DURATION
       transition-timing-function        ANIMATION_EASE
+
     .bar
       position                        : relative
       display                         : block
@@ -132,12 +150,6 @@
       &:after
         right                         : 50%
 
-  &.error
-    input, textarea
-      border-bottom-color             : CANCEL
-
-
-
   // -- Children
   label
     pointer-events                    : none

From 410fe2255edd69d2e16809dbdbfd64d97d98ddb8 Mon Sep 17 00:00:00 2001
From: soyjavi <soyjavi@CNX.local>
Date: Thu, 16 Jul 2015 09:00:52 +0700
Subject: [PATCH 05/15] Include webpack-dev-server

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dc46ddaa..71f98103 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
     "node-libs-browser"           : "^0.5.2",
     "style-loader"                : "^0.12.3",
     "stylus-loader"               : "^1.2.0",
-    "webpack"                     : "^1.9.10"
+    "webpack"                     : "^1.9.10",
+    "webpack-dev-server"          : "*"
   },
   "repository"                    : "github:soyjavi/react-toolbox"
 }

From ff7965b37e466b2ee4331ef1da269a595f9d2edf Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Fri, 17 Jul 2015 14:43:41 +0700
Subject: [PATCH 06/15] When type is "hidden" add className .hidden

---
 components/input/index.cjsx | 15 ++++++++-------
 components/input/style.styl |  4 +++-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/input/index.cjsx b/components/input/index.cjsx
index cf7bc5e1..c4170b43 100644
--- a/components/input/index.cjsx
+++ b/components/input/index.cjsx
@@ -56,13 +56,14 @@ module.exports = React.createClass
   # -- Render
   render: ->
     className = @props.className
-    className += ' checked' if @state.checked
-    className += ' disabled' if @props.disabled
-    className += ' error' if @state.error
-    className += ' focus' if @state.focus
-    className += ' touch' if @state.touch
-    className += ' radio' if @props.type is 'radio'
-    className += ' valid' if @state.value? and @state.value.length > 0
+    className += ' checked'   if @state.checked
+    className += ' disabled'  if @props.disabled
+    className += ' error'     if @state.error
+    className += ' focus'     if @state.focus
+    className += ' hidden'    if @props.type is 'hidden'
+    className += ' touch'     if @state.touch
+    className += ' radio'     if @props.type is 'radio'
+    className += ' valid'     if @state.value? and @state.value.length > 0
 
     <div data-component-input={@props.type} className={className}>
       {
diff --git a/components/input/style.styl b/components/input/style.styl
index 9549fb6f..98e33445 100644
--- a/components/input/style.styl
+++ b/components/input/style.styl
@@ -77,7 +77,6 @@
           transform                       scale(1)
 
   &:not(.touch)
-
     // -- Stylesheets
     &.focus
       input, textarea
@@ -150,6 +149,9 @@
       &:after
         right                         : 50%
 
+  &.hidden
+    display                           : none
+
   // -- Children
   label
     pointer-events                    : none

From 83b9c431139caa34d4fa414fe24130f5042a4802 Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Fri, 17 Jul 2015 14:45:42 +0700
Subject: [PATCH 07/15] Use label in upper level

---
 components/autocomplete/index.cjsx | 3 ++-
 components/autocomplete/style.styl | 4 ++++
 spec/components/autocomplete.cjsx  | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/autocomplete/index.cjsx b/components/autocomplete/index.cjsx
index da14004e..ae4f3ddf 100644
--- a/components/autocomplete/index.cjsx
+++ b/components/autocomplete/index.cjsx
@@ -78,6 +78,7 @@ module.exports = React.createClass
   render: ->
     <div data-component-autocomplete={@props.type}
          className={"focus" if @state.focus}>
+      { <label>{@props.label}</label> if @props.label }
       {
         if @props.multiple
           <ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
@@ -87,7 +88,7 @@ module.exports = React.createClass
             }
           </ul>
       }
-      <Input {...@props} value="" ref="input" onFocus={@onFocus}
+      <Input {...@props} ref="input" value="" label="" onFocus={@onFocus}
              onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
       <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
         {<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
diff --git a/components/autocomplete/style.styl b/components/autocomplete/style.styl
index 087e6720..07c927f6 100644
--- a/components/autocomplete/style.styl
+++ b/components/autocomplete/style.styl
@@ -2,7 +2,11 @@
 
 [data-component-autocomplete]
   position                                      : relative
+
   // -- Children
+  > label
+    font-size                                   : FONT_SIZE_TINY
+    color                                       : THEME
   > [data-role] > *
     font-size                                   : FONT_SIZE_SMALL
     cursor                                      : pointer
diff --git a/spec/components/autocomplete.cjsx b/spec/components/autocomplete.cjsx
index 6bf9f4f9..091a373f 100644
--- a/spec/components/autocomplete.cjsx
+++ b/spec/components/autocomplete.cjsx
@@ -30,6 +30,7 @@ module.exports = React.createClass
       <p>lorem ipsum...</p>
 
       <Autocomplete ref="autocomplete_multiple"
+                    label="Choose a country"
                     placeholder="elements is up to you..."
                     dataSource={@state.countries}
                     value={countries_selected}/>

From 69a2d16b2c59fbf9fb78b172fd05d5b74b8a2d75 Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Sat, 18 Jul 2015 10:33:06 +0700
Subject: [PATCH 08/15] Fix error in documentation

---
 components/navigation/navigation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/navigation/navigation.md b/components/navigation/navigation.md
index 534850d4..b90a6669 100644
--- a/components/navigation/navigation.md
+++ b/components/navigation/navigation.md
@@ -7,7 +7,7 @@ var routes = [
   {route:'http://google.com', caption='Go to Google.com'},
 ];
 var actions = [
- {caption:"Primary", style:"primary", icon="access_alarm"}
+ {caption: "Primary", style: "primary", icon: "access_alarm"}
 ];
 
 <Navigation routes={routes} actions={actions} />

From ea89a8e98ee305a056fdc7dc4c9dea6ac5ac714d Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Sat, 18 Jul 2015 10:57:52 +0700
Subject: [PATCH 09/15] First version of <Card/>

---
 components/button/style.styl           |  3 ++
 components/card/index.cjsx             | 67 ++++++++++++++++++++++++++
 components/card/style.styl             | 60 +++++++++++++++++++++++
 components/dropdown/index.cjsx         |  2 +-
 components/modules/mixins/touch.coffee |  0
 spec/components/card.cjsx              | 47 ++++++++++++++++++
 spec/index.cjsx                        |  2 +
 spec/index.html                        |  5 +-
 8 files changed, 184 insertions(+), 2 deletions(-)
 create mode 100644 components/card/index.cjsx
 create mode 100644 components/card/style.styl
 create mode 100644 components/modules/mixins/touch.coffee
 create mode 100644 spec/components/card.cjsx

diff --git a/components/button/style.styl b/components/button/style.styl
index 46fcc735..18ba6af0 100644
--- a/components/button/style.styl
+++ b/components/button/style.styl
@@ -72,6 +72,9 @@
   > .icon
     font-size                   : FONT_SIZE_BIG
     margin-right                : (SPACE / 2)
+  > abbr
+    font-weight                 : FONT_WEIGHT_BOLD
+
   &.anchor
     width                       : 100%
 
diff --git a/components/card/index.cjsx b/components/card/index.cjsx
new file mode 100644
index 00000000..5c1e4c69
--- /dev/null
+++ b/components/card/index.cjsx
@@ -0,0 +1,67 @@
+###
+v2
+  - can set a icon like dispatcher
+  - can set different template (maybe use a kind of mixin )
+###
+
+require './style'
+Navigation  = require "../navigation"
+Ripple      = require "../ripple"
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    className   : React.PropTypes.string
+    color       : React.PropTypes.string
+    image       : React.PropTypes.string
+    legend      : React.PropTypes.string
+    info        : React.PropTypes.string
+    onClick     : React.PropTypes.func
+    type        : React.PropTypes.string
+
+  getDefaultProps: ->
+    className   : ""
+    type        : "default"
+
+  getInitialState: ->
+    loading     : @props.loading
+    ripple      : undefined
+
+  # -- Lifecycle
+  componentWillReceiveProps: ->
+    @setState ripple: undefined
+
+  # -- Events
+  onClick: ->
+    event.preventDefault()
+    client = event.target.getBoundingClientRect?()
+    @setState ripple:
+                left  : event.pageX - client?.left
+                top   : event.pageY - client?.top
+                width : (client?.width * 2.5)
+    @props.onClick? event, @
+
+  # -- Render
+  render: ->
+    className = @props.className
+    className += " touch" if @props.onClick?
+    className += " image" if @props.image?
+    className += " color" if @props.color?
+    style = {}
+    style.backgroundImage = "url(#{@props.image})" if @props.image
+    style.backgroundColor = @props.color if @props.color
+
+    <div data-component-card={@props.type} className={className}
+         onClick={@onClick if @props.onClick}>
+      {
+        if @props.title or image
+          <figure style={style}>
+            { <h2>{@props.title}</h2> if @props.title }
+          </figure>
+      }
+      { <p>{@props.text}</p> if @props.text }
+      { <small>{@props.legend}</small> if @props.legend }
+      { <Navigation actions={@props.actions} /> if @props.actions }
+      { <Ripple origin={@state.ripple} loading={@state.loading} /> if @props.onClick }
+    </div>
diff --git a/components/card/style.styl b/components/card/style.styl
new file mode 100644
index 00000000..3f8c92f4
--- /dev/null
+++ b/components/card/style.styl
@@ -0,0 +1,60 @@
+@import "../constants.styl"
+
+SIZE                            = (5 * UNIT)
+OFFSET                          = (SPACE / 1.25)
+[data-component-card]
+  display-flex()
+  flex-direction                    column
+  position                        : relative
+  overflow                        : hidden
+  width                           : SIZE
+  box-shadow                      : ZDEPTH_SHADOW_1
+  background                      : WHITE
+
+  // -- Children
+  *:not([data-component-button])
+    pointer-events                : none
+  > *:not([data-component-ripple]):not([data-component-navigation])
+    padding                       : OFFSET
+  &:not(.color) > *:not(figure), > *:not(:last-child)
+    box-shadow                    : 0 1px darken(BACKGROUND, 5%)
+  > figure
+    display-flex()
+    flex-direction                  column
+    justify-content                 flex-end
+    flex-grow                       2
+    min-height                    : (SIZE / 2)
+    background-size               : cover
+    > *
+      font-weight                 : FONT_WEIGHT_NORMAL
+
+  > [data-component-navigation]
+    padding                       : OFFSET = (OFFSET / 2)
+    > *
+      pointer-events              : all
+      padding-left                : OFFSET
+      padding-right               : OFFSET
+      box-shadow                  : none !important
+      &:hover
+        background-color          : rgba(0,0,0,0.1) !important
+
+  // -- ClassNames
+  &.touch
+    cursor                        : pointer
+    &:hover, &:active
+      box-shadow                  : ZDEPTH_SHADOW_2
+  &.image
+    > figure
+      text-shadow                 : ZDEPTH_SHADOW_1
+  &.image, &.color
+    > figure
+      color                       : WHITE
+
+// -- Extends
+[data-component-card="small"]
+  > figure
+    min-height                    : 0px
+[data-component-card="square"]
+  height                          : SIZE
+[data-component-card="wide"]
+  width                           : (SIZE * 2)
diff --git a/components/dropdown/index.cjsx b/components/dropdown/index.cjsx
index 260dee1b..27a462f4 100644
--- a/components/dropdown/index.cjsx
+++ b/components/dropdown/index.cjsx
@@ -15,7 +15,7 @@ module.exports = React.createClass
     dataSource  : React.PropTypes.array
     disabled    : React.PropTypes.bool
     label       : React.PropTypes.string
-    onChange    : React.PropTypes.func
+    onChange    : React.PropTypes.funca
     template    : React.PropTypes.func
     type        : React.PropTypes.string
     value       : React.PropTypes.string
diff --git a/components/modules/mixins/touch.coffee b/components/modules/mixins/touch.coffee
new file mode 100644
index 00000000..e69de29b
diff --git a/spec/components/card.cjsx b/spec/components/card.cjsx
new file mode 100644
index 00000000..6246b7cc
--- /dev/null
+++ b/spec/components/card.cjsx
@@ -0,0 +1,47 @@
+###
+@todo
+###
+
+Card           = require '../../components/card'
+
+module.exports = React.createClass
+
+  # -- States & Properties
+
+  # -- Events
+  onClick: (event, card) ->
+    console.log "onClick", arguments
+
+  onActionClick: ->
+    console.log "onClick", arguments
+
+  # -- Render
+  render: ->
+    actions = [
+      caption: "Save", icon: "add", onClick: @onActionClick
+    ,
+      caption: "Close", onClick: @onActionClick
+    ]
+    text  = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+    legend = "Lorem Ipsum is simply dummy text"
+    <section>
+      <h2>Card</h2>
+      <h3>Basic properties</h3>
+      <Card title="Default Card" />
+      <Card title="Default Card with text" text={text} />
+      <Card title="Default Card with legend" legend={legend} />
+      <Card title="Default Card with actions" actions={actions} />
+      <Card title="Defaulr Card with image" text={text} legend={legend}
+            image="http://cdn.tapquo.com/photos/soyjavi.jpg" />
+      <Card title="Default Card with color and onClick event"
+            text={text} legend={legend} color="#e91e63" onClick={@onClick} />
+
+      <h3>Sizes using type property</h3>
+      <Card type="small" title="Small Card"
+            text={text} legend={legend} color="#00bcd4" onClick={@onClick} />
+      <Card type="square" title="Square Card"
+            text={text} legend={legend} color="#00bcd4" onClick={@onClick} />
+      <Card type="wide" title="Wide card"
+            text={text} legend={legend} color="#00bcd4" onClick={@onClick} />
+
+    </section>
diff --git a/spec/index.cjsx b/spec/index.cjsx
index ecf8a8ef..9e3e9f87 100644
--- a/spec/index.cjsx
+++ b/spec/index.cjsx
@@ -4,6 +4,7 @@
 Aside         = require './components/aside'
 Autocomplete  = require './components/autocomplete'
 Button        = require './components/button'
+Card          = require './components/card'
 Dialog        = require './components/dialog'
 Dropdown      = require './components/dropdown'
 FontIcon      = require './components/font_icon'
@@ -27,6 +28,7 @@ Test = React.createClass
     <app data-toolbox={true}>
       <h1>React-Kit <small>New way for create</small></h1>
 
+      <Card />
       <Switch />
       <Aside />
       <Autocomplete />
diff --git a/spec/index.html b/spec/index.html
index cf966833..2d108904 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -15,7 +15,10 @@
     <meta http-equiv="cleartype" content="on">
     <link href="../build/react-toolbox.commons.css" rel='stylesheet' type='text/css'>
     <link href="../build/react-toolbox.test.css" rel='stylesheet' type='text/css'>
-    <style> app > h1, app > section { margin: 2rem; } </style>
+    <style>
+      app > h1, app > section { margin: 2rem; }
+      app [data-component-card] { margin: 0 1rem 1rem 0;}
+    </style>
   </head>
   <body>
     <script src="../node_modules/react/dist/react-with-addons.js"></script>

From a39dbcb16a4010e297fdbccd690c51b8da335a2c Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Sat, 18 Jul 2015 11:00:45 +0700
Subject: [PATCH 10/15] Improve examples

---
 spec/components/card.cjsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/spec/components/card.cjsx b/spec/components/card.cjsx
index 6246b7cc..da5e5810 100644
--- a/spec/components/card.cjsx
+++ b/spec/components/card.cjsx
@@ -25,23 +25,24 @@ module.exports = React.createClass
     text  = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
     legend = "Lorem Ipsum is simply dummy text"
     <section>
-      <h2>Card</h2>
+      <h2>Cards</h2>
+
       <h3>Basic properties</h3>
       <Card title="Default Card" />
       <Card title="Default Card with text" text={text} />
       <Card title="Default Card with legend" legend={legend} />
       <Card title="Default Card with actions" actions={actions} />
-      <Card title="Defaulr Card with image" text={text} legend={legend}
+      <Card title="Defaulr Card with text & image" text={text}
             image="http://cdn.tapquo.com/photos/soyjavi.jpg" />
-      <Card title="Default Card with color and onClick event"
-            text={text} legend={legend} color="#e91e63" onClick={@onClick} />
+      <Card title="Default Card with text, color & onClick event" text={text}
+            color="#e91e63" onClick={@onClick} />
 
       <h3>Sizes using type property</h3>
-      <Card type="small" title="Small Card"
-            text={text} legend={legend} color="#00bcd4" onClick={@onClick} />
-      <Card type="square" title="Square Card"
-            text={text} legend={legend} color="#00bcd4" onClick={@onClick} />
-      <Card type="wide" title="Wide card"
-            text={text} legend={legend} color="#00bcd4" onClick={@onClick} />
+      <Card type="small" title="Small Card with text & onClick event"
+            text={text} color="#00bcd4" onClick={@onClick} />
+      <Card type="square" title="Square Card with text & onClick event"
+            text={text} color="#00bcd4" onClick={@onClick} />
+      <Card type="wide" title="Wide card with text & onClick event"
+            text={text} color="#00bcd4" onClick={@onClick} />
 
     </section>

From c33e199bc9f7f9b914f612bbbbf4575e408b5ff3 Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Mon, 20 Jul 2015 14:06:53 +0700
Subject: [PATCH 11/15] Enhaced component

---
 components/card/index.cjsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/components/card/index.cjsx b/components/card/index.cjsx
index 5c1e4c69..50035a66 100644
--- a/components/card/index.cjsx
+++ b/components/card/index.cjsx
@@ -1,9 +1,3 @@
-###
-v2
-  - can set a icon like dispatcher
-  - can set different template (maybe use a kind of mixin )
-###
-
 require './style'
 Navigation  = require "../navigation"
 Ripple      = require "../ripple"
@@ -15,8 +9,8 @@ module.exports = React.createClass
     className   : React.PropTypes.string
     color       : React.PropTypes.string
     image       : React.PropTypes.string
+    text        : React.PropTypes.string
     legend      : React.PropTypes.string
-    info        : React.PropTypes.string
     onClick     : React.PropTypes.func
     type        : React.PropTypes.string
 
@@ -33,8 +27,8 @@ module.exports = React.createClass
     @setState ripple: undefined
 
   # -- Events
-  onClick: ->
-    event.preventDefault()
+  onClick: (event) ->
+    event.preventDefault() if @props.onClick?
     client = event.target.getBoundingClientRect?()
     @setState ripple:
                 left  : event.pageX - client?.left
@@ -49,14 +43,14 @@ module.exports = React.createClass
     className += " image" if @props.image?
     className += " color" if @props.color?
     style = {}
-    style.backgroundImage = "url(#{@props.image})" if @props.image
+    style.backgroundImage = "url(#{@props.image})" if @props.image?
     style.backgroundColor = @props.color if @props.color
 
-    <div data-component-card={@props.type} className={className}
-         onClick={@onClick if @props.onClick}>
+    <div data-component-card={@props.type} className={className} onClick={@onClick}>
       {
-        if @props.title or image
+        if @props.title or @props.image
           <figure style={style}>
+            { <small>{@props.subtitle}</small> if @props.subtitle }
             { <h2>{@props.title}</h2> if @props.title }
           </figure>
       }

From a9f09f626dbfe00de8624c250409c4b9958b7471 Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Mon, 20 Jul 2015 16:09:27 +0700
Subject: [PATCH 12/15] <Card/> finished

---
 components/card/card.md    | 28 ++++++++++++++++++++++++++++
 components/card/index.cjsx |  3 ++-
 components/card/style.styl |  2 ++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 components/card/card.md

diff --git a/components/card/card.md b/components/card/card.md
new file mode 100644
index 00000000..8ceb18cb
--- /dev/null
+++ b/components/card/card.md
@@ -0,0 +1,28 @@
+# Card
+
+```
+var Card = require('react-toolbox/components/card');
+
+<Card title="Default Card" />
+<Card title="Default Card with text" text={text} />
+<Card title="Default Card with legend" legend={legend} />
+<Card title="Default Card with actions" actions={actions} />
+<Card title="Defaulr Card with text & image" text={text} image="http://" />
+<Card title="Default Card with text, color & onClick event" text={text}
+    color="#e91e63" onClick={@onClick} />
+<Card type="small" title="Small Card with text & onClick event"
+    text={text} color="#00bcd4" onClick={@onClick} />
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **className**     | String        |                 | Sets the class-styles of the Component.|
+| **color**         | String        |                 | Sets HEX of the Component.|
+| **image**         | String        |                 | Sets a background image url.|
+| **text**          | String        |                 | Sets a complementary text.|
+| **legend**        | String        |                 | Sets a legend text.|
+| **onClick**       | Function      |                 | Callback function that is fired when the components's is clicked.|
+| **title**         | String        | "text"          | Sets the title of the component.|
+| **type**          | String        | "text"          | Type of the component, overwrite this property if you need set a different stylesheet.|
diff --git a/components/card/index.cjsx b/components/card/index.cjsx
index 50035a66..ea0bb7dd 100644
--- a/components/card/index.cjsx
+++ b/components/card/index.cjsx
@@ -12,6 +12,7 @@ module.exports = React.createClass
     text        : React.PropTypes.string
     legend      : React.PropTypes.string
     onClick     : React.PropTypes.func
+    title       : React.PropTypes.string
     type        : React.PropTypes.string
 
   getDefaultProps: ->
@@ -57,5 +58,5 @@ module.exports = React.createClass
       { <p>{@props.text}</p> if @props.text }
       { <small>{@props.legend}</small> if @props.legend }
       { <Navigation actions={@props.actions} /> if @props.actions }
-      { <Ripple origin={@state.ripple} loading={@state.loading} /> if @props.onClick }
+      { <Ripple origin={@state.ripple} loading={@state.loading} /> }
     </div>
diff --git a/components/card/style.styl b/components/card/style.styl
index 3f8c92f4..0e524acf 100644
--- a/components/card/style.styl
+++ b/components/card/style.styl
@@ -16,6 +16,8 @@ OFFSET                          = (SPACE / 1.25)
     pointer-events                : none
   > *:not([data-component-ripple]):not([data-component-navigation])
     padding                       : OFFSET
+  &:not(.color):not(.image) > [data-component-ripple]
+    background-color              : BACKGROUND
   &:not(.color) > *:not(figure), > *:not(:last-child)
     box-shadow                    : 0 1px darken(BACKGROUND, 5%)
   > figure

From 3a2f8809dfc02c18cf1e984855d1395fd2516b7a Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Tue, 21 Jul 2015 10:51:02 +0700
Subject: [PATCH 13/15] You can select item with keyboards

---
 components/autocomplete/index.cjsx | 39 +++++++++++++++++++++++++-----
 components/autocomplete/style.styl | 26 +++++++++++---------
 components/constants.styl          |  5 ++++
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/components/autocomplete/index.cjsx b/components/autocomplete/index.cjsx
index ae4f3ddf..3fb346c3 100644
--- a/components/autocomplete/index.cjsx
+++ b/components/autocomplete/index.cjsx
@@ -52,8 +52,17 @@ module.exports = React.createClass
     @setState focus: false if Object.keys(suggestions).length is 0
 
   onKeyPress: (event) ->
+    key_ascii = event.which
     query = @refs.input.getValue().trim()
-    if event.which is 13 and query isnt ""
+
+    if @state.focus
+      children = @refs.suggestions.getDOMNode().children
+      for child, index in children when child.classList.contains "active"
+        child.classList.remove "active"
+        query = child.getAttribute "id"
+        break
+
+    if key_ascii is 13 and query isnt ""
       for key, label of @state.suggestions when query.toLowerCase() is label.toLowerCase()
         suggestion = {"#{key}": label}
         break
@@ -62,6 +71,13 @@ module.exports = React.createClass
       else if suggestion
         @_addValue suggestion
 
+    else if @state.focus and key_ascii in [40, 38]
+      if key_ascii is 40
+        index = if index >= children.length - 1 then 0 else index + 1
+      else
+        index = if index is 0 then children.length - 1 else index - 1
+      children[index].classList.add "active"
+
   onBlur: (event) ->
     setTimeout (=> @setState focus: false, suggestions: {}), 300
 
@@ -69,6 +85,12 @@ module.exports = React.createClass
     key = event.target.getAttribute "id"
     @_addValue {"#{key}": @state.suggestions[key]}
 
+  onRefreshSelection: (event) ->
+    children = @refs.suggestions.getDOMNode().children
+    for child, index in children when child.classList.contains "active"
+      child.classList.remove "active"
+      break
+
   onDelete: (event) ->
     delete @state.values[event.target.getAttribute "id"]
     @setState focus: false, values: @state.values
@@ -76,8 +98,8 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
-    <div data-component-autocomplete={@props.type}
-         className={"focus" if @state.focus}>
+    className = "focus" if @state.focus
+    <div data-component-autocomplete={@props.type} className={className}>
       { <label>{@props.label}</label> if @props.label }
       {
         if @props.multiple
@@ -88,9 +110,14 @@ module.exports = React.createClass
             }
           </ul>
       }
-      <Input {...@props} ref="input" value="" label="" onFocus={@onFocus}
-             onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
-      <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
+      <Input {...@props} ref="input" value="" label=""
+             onBlur={@onBlur}
+             onChange={@onChange}
+             onFocus={@onFocus}
+             onKeyDown={@onKeyPress}
+             />
+      <ul ref="suggestions" data-role="suggestions"
+        onClick={@onSelect} onMouseEnter={@onRefreshSelection}>
         {<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
       </ul>
     </div>
diff --git a/components/autocomplete/style.styl b/components/autocomplete/style.styl
index 07c927f6..48746025 100644
--- a/components/autocomplete/style.styl
+++ b/components/autocomplete/style.styl
@@ -2,13 +2,10 @@
 
 [data-component-autocomplete]
   position                                      : relative
-
-  // -- Children
   > label
     font-size                                   : FONT_SIZE_TINY
     color                                       : THEME
   > [data-role] > *
-    font-size                                   : FONT_SIZE_SMALL
     cursor                                      : pointer
   > [data-role="values"]
     > *
@@ -20,25 +17,30 @@
       background-color                          : THEME
       border-radius                             : (SPACE / 8)
   > [data-role="suggestions"]
-    z-index                                     : 10
+    z-index                                     : 2
     position                                    : absolute
     width                                       : 100%
+    height                                      : 0
+    max-height                                  : 50vh
     overflow-x                                  : hidden
     overflow-y                                  : scroll
-    max-height                                  : 0
     margin-top                                  : -(SPACE)
     background-color                            : WHITE
-    visibility                                  : hidden
-    box-shadow                                  : ZDEPTH_SHADOW_1
-    transition                                    max-height ANIMATION_DURATION ANIMATION_EASE
+    opacity                                     : 0
+    transform                                     translateY(-(INPUT_HEIGHT / 2))
+    transition-property                           height, box-shadow, opacity, transform
+    transition-duration                           ANIMATION_DURATION
+    transition-timing-function                    ANIMATION_EASE
     > *
       padding                                   : (SPACE / 2)
-      &:hover
+      &:hover, &.active
         color                                   : WHITE
-        background-color                        : THEME
+        background-color                        : FORM_ITEM_SELECT_BACKGROUND
 
   // -- Styles
   &.focus
     > [data-role="suggestions"]
-      max-height                                : 25vh
-      visibility                                : visible
+      height                      : auto
+      opacity                     : 1
+      transform                     translateY(0%)
+      box-shadow                    ZDEPTH_SHADOW_1
diff --git a/components/constants.styl b/components/constants.styl
index b658f468..742800eb 100644
--- a/components/constants.styl
+++ b/components/constants.styl
@@ -4,14 +4,19 @@
 COLOR                       = #222222
 BACKGROUND                  = #f5f5f5
 THEME                       = #cccccc
+THEME                       = #e91e63
 WHITE                       = #ffffff
 PRIMARY                     = #e91e63
+
 SECONDARY                   = #00bcd4
 SUCCESS                     = #259b24
 CANCEL                      = #e51c23
 WARNING                     = #ff9800
 FORM_COLOR                  = COLOR
 FORM_BORDER_COLOR           = lighten(FORM_COLOR, 75%)
+FORM_BORDER_COLOR_FOCUS     = THEME
+FORM_ITEM_SELECT            = THEME
+FORM_ITEM_SELECT_BACKGROUND = lighten(THEME, 75%)
 
 // -- Fonts
 FONT_FAMILY                 = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"

From 9ba11dcb7618a72bfe7201f7e061e1f5d800938f Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Tue, 21 Jul 2015 10:51:20 +0700
Subject: [PATCH 14/15] Remove unnecesary

---
 components/dropdown/index.cjsx | 2 --
 components/dropdown/style.styl | 1 -
 2 files changed, 3 deletions(-)

diff --git a/components/dropdown/index.cjsx b/components/dropdown/index.cjsx
index 27a462f4..e15361e2 100644
--- a/components/dropdown/index.cjsx
+++ b/components/dropdown/index.cjsx
@@ -23,9 +23,7 @@ module.exports = React.createClass
   getDefaultProps: ->
     className   : ""
     dataSource  : []
-    disabled    : false
     type        : "normal"
-    value       : undefined
 
   getInitialState: ->
     active      : false
diff --git a/components/dropdown/style.styl b/components/dropdown/style.styl
index eb98d8dc..522ff94d 100644
--- a/components/dropdown/style.styl
+++ b/components/dropdown/style.styl
@@ -97,4 +97,3 @@
       border-right                : BORDER
       border-top                  : SIZE solid FORM_BORDER_COLOR
       transition                    transform ANIMATION_DURATION ANIMATION_EASE
-

From 3912b92d5e1734a190010cddf8c0a0d04aa5d995 Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Tue, 21 Jul 2015 16:24:14 +0700
Subject: [PATCH 15/15] Use Material Design naming for stylesheets.

---
 components/autocomplete/style.styl |  6 +++---
 components/button/button.md        |  4 ++--
 components/button/style.styl       | 29 ++++++++++++++---------------
 components/card/style.styl         |  2 +-
 components/constants.styl          | 28 +++++++++++++---------------
 components/dropdown/style.styl     | 12 ++++++------
 components/input/style.styl        | 26 +++++++++++++-------------
 components/list/style.styl         |  2 +-
 components/loading/style.styl      |  2 +-
 components/progress_bar/style.styl |  6 +++---
 components/switch/style.styl       | 16 ++++++++--------
 example/src/app.cjsx               |  2 +-
 spec/components/button.cjsx        |  4 ++--
 spec/index.cjsx                    | 11 +----------
 14 files changed, 69 insertions(+), 81 deletions(-)

diff --git a/components/autocomplete/style.styl b/components/autocomplete/style.styl
index 48746025..e6628385 100644
--- a/components/autocomplete/style.styl
+++ b/components/autocomplete/style.styl
@@ -4,7 +4,7 @@
   position                                      : relative
   > label
     font-size                                   : FONT_SIZE_TINY
-    color                                       : THEME
+    color                                       : PRIMARY
   > [data-role] > *
     cursor                                      : pointer
   > [data-role="values"]
@@ -14,7 +14,7 @@
       padding                                   : (SPACE / 4) (SPACE / 2)
       font-size                                 : FONT_SIZE_SMALL
       color                                     : WHITE
-      background-color                          : THEME
+      background-color                          : PRIMARY
       border-radius                             : (SPACE / 8)
   > [data-role="suggestions"]
     z-index                                     : 2
@@ -35,7 +35,7 @@
       padding                                   : (SPACE / 2)
       &:hover, &.active
         color                                   : WHITE
-        background-color                        : FORM_ITEM_SELECT_BACKGROUND
+        background-color                        : PRIMARY_LIGHT
 
   // -- Styles
   &.focus
diff --git a/components/button/button.md b/components/button/button.md
index 25aa1fbc..86b55d23 100644
--- a/components/button/button.md
+++ b/components/button/button.md
@@ -5,12 +5,12 @@ var Button = require('react-toolbox/components/button');
 
 <Button caption="Login" />
 <Button caption="Primary" className="primary" icon="access_alarm" />
-<Button caption="Secondary" className="secondary" />
+<Button caption="Secondary" className="accent" />
 <Button caption="Disabled" disabled />
 
 <Button type="circle" icon="access_alarm" />
 <Button type="circle" icon="explore" className="primary" />
-<Button type="circle" icon="zoom_in" className="secondary" />
+<Button type="circle" icon="zoom_in" className="accent" />
 <Button type="circle" icon="input" disabled={true} />
 ```
 
diff --git a/components/button/style.styl b/components/button/style.styl
index 18ba6af0..4892e1ff 100644
--- a/components/button/style.styl
+++ b/components/button/style.styl
@@ -21,41 +21,40 @@
       outline                   : 0
     &:not(.transparent)
       box-shadow                  ZDEPTH_SHADOW_1
-      &:not(.primary):not(.secondary)
-        color                   : COLOR
+      &:not(.primary):not(.accent)
+        color                   : TEXT
         background-color        : WHITE
       &:hover
         box-shadow                ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
-      &.primary, &.secondary
+      &.primary, &.accent
         color                   : WHITE
       &.primary
         background-color        : PRIMARY
-      &.secondary
-        background-color        : SECONDARY
+      &.accent
+        background-color        : ACCENT
 
     &.transparent
       background-color          : transparent
-      &:not(.primary):not(.secondary)
+      &:not(.primary):not(.accent)
         &:hover
-          background-color      : alpha(COLOR, 12.5%)
+          background-color      : alpha(TEXT, 12.5%)
       &.primary
         color                   : PRIMARY
         &:hover
           background-color      : alpha(PRIMARY, 12.5%)
-      &.secondary
-        color                   : SECONDARY
+      &.accent
+        color                   : ACCENT
         &:hover
-          background-color      : alpha(SECONDARY, 12.5%)
-
+          background-color      : alpha(ACCENT, 12.5%)
+    &:not(.primary):not(.accent) > [data-component-ripple]
+      background-color          : DIVIDER
   &[disabled]
+    color                       : darken(DIVIDER, 25%)
     &:not(.transparent)
-      color                     : darken(BACKGROUND, 35%)
-      background-color          : darken(BACKGROUND, 7.5%)
+      background-color          : DIVIDER
     &.transparent
-      color                     : darken(BACKGROUND, 25%)
       background-color          : transparent
 
-
   // -- Layout
   &:not(.transparent) ~ &:not(:last-child)
     margin-left                 : SPACE
diff --git a/components/card/style.styl b/components/card/style.styl
index 0e524acf..b23024e0 100644
--- a/components/card/style.styl
+++ b/components/card/style.styl
@@ -17,7 +17,7 @@ OFFSET                          = (SPACE / 1.25)
   > *:not([data-component-ripple]):not([data-component-navigation])
     padding                       : OFFSET
   &:not(.color):not(.image) > [data-component-ripple]
-    background-color              : BACKGROUND
+    background-color              : DIVIDER
   &:not(.color) > *:not(figure), > *:not(:last-child)
     box-shadow                    : 0 1px darken(BACKGROUND, 5%)
   > figure
diff --git a/components/constants.styl b/components/constants.styl
index 742800eb..7b938e9f 100644
--- a/components/constants.styl
+++ b/components/constants.styl
@@ -1,22 +1,20 @@
 @import './vendor.styl'
 
 // -- Colors
-COLOR                       = #222222
-BACKGROUND                  = #f5f5f5
-THEME                       = #cccccc
-THEME                       = #e91e63
-WHITE                       = #ffffff
-PRIMARY                     = #e91e63
+PRIMARY                     = #E91E63
+PRIMARY_DARK                = darken(PRIMARY, 25%)
+PRIMARY_LIGHT               = lighten(PRIMARY, 25%)
+ACCENT                      = #03A9F4
 
-SECONDARY                   = #00bcd4
-SUCCESS                     = #259b24
-CANCEL                      = #e51c23
-WARNING                     = #ff9800
-FORM_COLOR                  = COLOR
-FORM_BORDER_COLOR           = lighten(FORM_COLOR, 75%)
-FORM_BORDER_COLOR_FOCUS     = THEME
-FORM_ITEM_SELECT            = THEME
-FORM_ITEM_SELECT_BACKGROUND = lighten(THEME, 75%)
+TEXT                        = #212121
+TEXT_ACCENT                 = #727272
+
+DIVIDER                     = lighten(#B6B6B6, 75%)
+BACKGROUND                  = #ffffff
+WHITE                       = #ffffff
+SUCCESS                     = #4CAF50
+CANCEL                      = #F44336
+WARNING                     = #FFC107
 
 // -- Fonts
 FONT_FAMILY                 = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
diff --git a/components/dropdown/style.styl b/components/dropdown/style.styl
index 522ff94d..565b5249 100644
--- a/components/dropdown/style.styl
+++ b/components/dropdown/style.styl
@@ -4,8 +4,8 @@
   position                        : relative
   margin-bottom                   : SPACE
   width                           : inherit
-  color                           : FORM_COLOR
-  border-bottom                   : 1px solid FORM_BORDER_COLOR
+  color                           : TEXT
+  border-bottom                   : 1px solid DIVIDER
 
   // -- Class
   &.active
@@ -28,7 +28,7 @@
       transition-delay              ANIMATION_DURATION
 
   &.disabled
-    color                         : FORM_BORDER_COLOR
+    color                         : TEXT_SECONDARY
     border-bottom-style           : dotted
     > div:after
       transform                     scale(0)
@@ -46,7 +46,7 @@
     position                      : relative
     bottom                        : -(SPACE / 4)
     font-size                     : FONT_SIZE_TINY
-    color                         : FORM_BORDER_COLOR
+    color                         : TEXT_SECONDARY
   > ul
     z-index                       : 2
     position                      : absolute
@@ -76,7 +76,7 @@
       > *
         pointer-events            : none
       > [data-component-ripple]
-        background-color          : lighten(FORM_BORDER_COLOR, 50%)
+        background-color          : DIVIDER
   > div
     display                       : block
     > span
@@ -95,5 +95,5 @@
       height                      : 0
       border-left                 : BORDER = SIZE solid transparent
       border-right                : BORDER
-      border-top                  : SIZE solid FORM_BORDER_COLOR
+      border-top                  : SIZE solid DIVIDER
       transition                    transform ANIMATION_DURATION ANIMATION_EASE
diff --git a/components/input/style.styl b/components/input/style.styl
index 98e33445..4dfee047 100644
--- a/components/input/style.styl
+++ b/components/input/style.styl
@@ -28,7 +28,7 @@
       height                          : SPACE
       margin-right                    : (SPACE / 1.32)
       border-radius                   : RADIUS
-      box-shadow                      : inset 0 0 0 RADIUS FORM_COLOR
+      box-shadow                      : inset 0 0 0 RADIUS TEXT
       transition-property               background-color, box-shadow
       transition-duration               ANIMATION_DURATION
       transition-timing-function        ANIMATION_EASE
@@ -52,23 +52,23 @@
         transition                      transform ANIMATION_DURATION ANIMATION_DELAY ANIMATION_EASE
     label
       font-size                       : FONT_SIZE_SMALL
-      color                           : FORM_COLOR
+      color                           : TEXT
     // -- Style
     &:not(.radio) .bar:after
       content                         : "✓"
     &.radio .bar
       border-radius                   : 50%
     &.disabled .bar
-      box-shadow                        inset 0 0 0 RADIUS FORM_BORDER_COLOR
+      box-shadow                        inset 0 0 0 RADIUS DIVIDER
     &.checked
       &.radio .bar
-        box-shadow                      : inset 0 0 0 RADIUS SECONDARY, inset 0 0 0 (RADIUS * 2.5) WHITE
+        box-shadow                      : inset 0 0 0 RADIUS ACCENT, inset 0 0 0 (RADIUS * 2.5) WHITE
       &:not(.radio) .bar
         box-shadow                      : none
       .bar
-        background-color                : SECONDARY
+        background-color                : ACCENT
         &:before
-          background-color              : alpha(SECONDARY, .5)
+          background-color              : alpha(ACCENT, .5)
           animation-name                  ripple-touch
           animation-iteration-count       1
           animation-timing-function       ANIMATION_EASE
@@ -93,12 +93,12 @@
         & ~ label
           top                         : -(SPACE / 2)
           font-size                   : FONT_SIZE_TINY
-          color                       : THEME
+          color                       : PRIMARY
     input[type="date"]
       & ~ label
           top                         : -(SPACE / 2)
           font-size                   : FONT_SIZE_TINY
-          color                       : THEME
+          color                       : PRIMARY
     &:not(.focus)
       input, textarea
           &:invalid:not(:required)
@@ -112,20 +112,20 @@
       display                         : block
       padding                         : (SPACE / 2) 0
       width                           : 100%
-      color                           : FORM_COLOR
+      color                           : TEXT
       background-color                : transparent
       border                          : none
-      border-bottom                   : 1px solid FORM_BORDER_COLOR
+      border-bottom                   : 1px solid DIVIDER
       // -- Attributes
       &:disabled
-        color                         : FORM_BORDER_COLOR
+        color                         : TEXT_SECONDARY
         border-bottom-style           : dotted
 
     label
       position                        : absolute
       left                            : 0
       top                             : (SPACE / 2)
-      color                           : FORM_BORDER_COLOR
+      color                           : TEXT_SECONDARY
       transition-property               top, font-size, color
       transition-duration               ANIMATION_DURATION
       transition-timing-function        ANIMATION_EASE
@@ -140,7 +140,7 @@
         height                        : 2px
         width                         : 0
         bottom                        : 0
-        background-color              : THEME
+        background-color              : PRIMARY
         transition-property             width, background-color
         transition-duration             ANIMATION_DURATION
         transition-timing-function      ANIMATION_EASE
diff --git a/components/list/style.styl b/components/list/style.styl
index 2b1caff8..715d9ae7 100644
--- a/components/list/style.styl
+++ b/components/list/style.styl
@@ -3,7 +3,7 @@
 [data-component-list]
   list-style                      : none
   &, a
-    color                         : COLOR
+    color                         : TEXT
   > li
     overflow                      : hidden
     background-color              : WHITE
diff --git a/components/loading/style.styl b/components/loading/style.styl
index 1c5b542c..df54249c 100644
--- a/components/loading/style.styl
+++ b/components/loading/style.styl
@@ -28,7 +28,7 @@
         position                    : absolute
         width                       : SIZE
         height                      : SIZE
-        background-color            : THEME
+        background-color            : PRIMARY
         transform                     scale(0.0)
       &:nth-child(n+1)
         margin-top                  : -(SIZE)
diff --git a/components/progress_bar/style.styl b/components/progress_bar/style.styl
index 76bd4d02..7f31f505 100644
--- a/components/progress_bar/style.styl
+++ b/components/progress_bar/style.styl
@@ -27,10 +27,10 @@ SCALE_RATIO          = CIRCLE_RADIUS/20
       transition-timing-function    ANIMATION_EASE
 
     [data-component-progressbar-value]
-      background-color            : SECONDARY
+      background-color            : ACCENT
 
     [data-component-progressbar-buffer]
-      background-color            : alpha(SECONDARY, 15%)
+      background-color            : alpha(ACCENT, 15%)
 
     &.indeterminate [data-component-progressbar-value]
       transform-origin              center center
@@ -52,7 +52,7 @@ SCALE_RATIO          = CIRCLE_RADIUS/20
       stroke-linecap              : round
       stroke-miterlimit           : 20
       stroke-width                : 4
-      stroke                      : SECONDARY
+      stroke                      : ACCENT
       fill                        : none
       transition                    stroke-dasharray ANIMATION_DURATION ANIMATION_EASE
 
diff --git a/components/switch/style.styl b/components/switch/style.styl
index 2b7e64e6..0e080fee 100644
--- a/components/switch/style.styl
+++ b/components/switch/style.styl
@@ -5,7 +5,7 @@
   margin-bottom                       : SPACE
   height                              : SIZE = (SPACE / 1.25)
   width                               : WIDTH = (2.5 * SIZE)
-  background-color                    : FORM_BORDER_COLOR
+  background-color                    : DIVIDER
   border-radius                       : SPACE
   transition                            background-color ANIMATION_DURATION ANIMATION_EASE
 
@@ -27,7 +27,7 @@
     display                           : block
     margin-left                       : WIDTH + (SPACE / 2)
     font-size                         : FONT_SIZE_SMALL
-    color                             : FORM_COLOR
+    color                             : FORM_TEXT
   > [data-component-ripple]
     z-index                           : -1
     overflow                          : hidden
@@ -35,7 +35,7 @@
     max-height                        : (SIZE * 2.7)
     top                               : (SIZE / 2)
     left                              : (SIZE * 2)
-    background-color                  : alpha(COLOR, 10%)
+    background-color                  : alpha(TEXT, 10%)
     opacity                           : 0
     animation-duration                  (1.0 * ANIMATION_DURATION)
 
@@ -45,16 +45,16 @@
     > span
       box-shadow                      : ZDEPTH_SHADOW_1
   &.disabled
-    background-color                  : lighten(FORM_BORDER_COLOR, 50%)
+    background-color                  : lighten(DIVIDER, 50%)
     > span
-      background-color                : FORM_BORDER_COLOR
+      background-color                : DIVIDER
 
   &.checked
-    background-color                  : alpha(THEME, 25%)
+    background-color                  : alpha(PRIMARY, 25%)
     > span
-      background-color                : THEME
+      background-color                : PRIMARY
       right                           : 0
       box-shadow                      : ZDEPTH_SHADOW_2
     > [data-component-ripple]
       left                            : 0
-      background-color                : alpha(THEME, 15%)
+      background-color                : alpha(PRIMARY, 15%)
diff --git a/example/src/app.cjsx b/example/src/app.cjsx
index 8ad21ea7..45358c81 100644
--- a/example/src/app.cjsx
+++ b/example/src/app.cjsx
@@ -26,7 +26,7 @@ App = React.createClass
       <h1>Hello React-Toolbox</h1>
       <Form attributes={@state.fields} />
       <Button caption="Hello world!" type="square" style="primary"/>
-      <Button icon="adb" type="circle" style="secondary" />
+      <Button icon="adb" type="circle" style="accent" />
     </app>
 
 React.render <App/>, document.body
diff --git a/spec/components/button.cjsx b/spec/components/button.cjsx
index 1d2e1e89..05432919 100644
--- a/spec/components/button.cjsx
+++ b/spec/components/button.cjsx
@@ -18,12 +18,12 @@ module.exports = React.createClass
       <p>lorem ipsum...</p>
       <Button caption="Login" disabled=false />
       <Button caption="Primary" className="primary" icon="access_alarm" />
-      <Button caption="Secondary" className="secondary" />
+      <Button caption="Secondary" className="accent" />
       <Button caption="Disabled" disabled={true} />
 
       <Button type="circle" icon="access_alarm" />
       <Button type="circle" icon="explore" className="primary" />
-      <Button type="circle" icon="zoom_in" className="secondary" />
+      <Button type="circle" icon="zoom_in" className="accent" />
       <Button type="circle" icon="input" disabled={true} />
 
     </section>
diff --git a/spec/index.cjsx b/spec/index.cjsx
index 9e3e9f87..8f4e1e63 100644
--- a/spec/index.cjsx
+++ b/spec/index.cjsx
@@ -12,21 +12,12 @@ Form          = require './components/form'
 Progress      = require './components/progress'
 Switch        = require './components/switch'
 
-# React           = require('react/addons')
-# TestUtils       = React.addons.TestUtils
-# shallowRenderer = TestUtils.createRenderer()
-
-# shallowRenderer.render(React.createElement(MyComponent, { className: 'MyComponent' }, 'some child text'))
-#
-# component = shallowRenderer.getRenderOutput();
-
-
 Test = React.createClass
 
   # -- Render
   render: ->
     <app data-toolbox={true}>
-      <h1>React-Kit <small>New way for create</small></h1>
+      <h1>React-Toolbox <small>New way for create</small></h1>
 
       <Card />
       <Switch />