Migrate list to sass

components/list/index.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import style from './style';
 
@@ -11,7 +10,7 @@ export default React.createClass({
   propTypes: {
     className: React.PropTypes.string,
     dataSource: React.PropTypes.array,
-    ItemFactory: React.PropTypes.func,
+    template: React.PropTypes.func,
     onClick: React.PropTypes.func,
     type: React.PropTypes.string
   },
@@ -38,7 +37,7 @@ export default React.createClass({
     const items = this.props.dataSource.map((data, index) => {
       return (
         <li key={index} onClick={this.onClick.bind(null, data, index)}>
-          {this.props.itemFactory(data, index)}
+          {this.props.template(data, index)}
         </li>
       );
     });

components/list/style.scss

@@ -0,0 +1,25 @@
+@import "../variables";
+
+$list-color: unquote("rgb(#{$color-black})") !default;
+$list-background: unquote("rgb(#{$color-white})") !default;
+
+.root {
+  list-style: none;
+
+  &, a {
+    color: $list-color;
+  }
+
+  > li {
+    overflow: hidden;
+    background-color: $list-background;
+    box-shadow: $zdepth-shadow-1;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: box-shadow;
+
+    &:hover {
+      box-shadow: $zdepth-shadow-2;
+    }
+  }
+}

spec/components/list.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import List from '../../components/list';
+
+export default React.createClass({
+  displayName: 'ListTest',
+
+  getInitialState () {
+    return {
+      countries: [
+        { value: 'ES-es', label: 'Spain', img: 'http://' },
+        { value: 'TH-th', label: 'Thailand', img: 'http://' },
+        { value: 'EN-gb', label: 'England', img: 'http://' },
+        { value: 'EN-en', label: 'USA', img: 'http://' },
+        { value: 'FR-fr', label: 'France', img: 'http://' }
+      ],
+      selected: 'TH-th'
+    };
+  },
+
+  onChange (dropdown) {
+    console.log('[DROPDOWN]', dropdown.getValue());
+  },
+
+  customDropdownItem (data) {
+    const style = {
+      width: 32,
+      height: 32,
+      backgroundColor: '#ccc',
+      marginRight: 8
+    };
+
+    return (
+      <div data-flex="horizontal grow" data-flex-content="center">
+        <img src={data.img} data-flex-grow="min" style={style} />
+        <div data-flex-grow="max" data-flex="vertical" >
+          <strong>{data.label}</strong>
+          <small>{data.value}</small>
+        </div>
+      </div>
+    );
+  },
+
+  render () {
+    return (
+      <section>
+        <h5>List</h5>
+        <p>lorem ipsum...</p>
+        <List dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.onChange}/>
+      </section>
+    );
+  }
+});

spec/index.jsx

@@ -16,9 +16,6 @@ import Slider from './components/slider';
 import Switch from './components/switch';
 import Tabs from './components/tabs';
 
-// import FontIcon from './components/font_icon';
-// import Form from './components/form';
-
 const Test = React.createClass({
   displayName: 'App',