diff --git a/components/constants.styl b/components/constants.styl
deleted file mode 100644
index 2dc6b1e92..000000000
--- a/components/constants.styl
+++ /dev/null
@@ -1,59 +0,0 @@
-// -- Colors
-
-PRIMARY = #E91E63
-PRIMARY_DARK = darken(PRIMARY, 25%)
-PRIMARY_LIGHT = lighten(PRIMARY, 25%)
-ACCENT = #03A9F4
-
-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"
-FONT_SIZE = 16px
-FONT_SIZE_TINY = 80%
-FONT_SIZE_SMALL = 90%
-FONT_SIZE_NORMAL = 100%
-FONT_SIZE_BIG = 120%
-FONT_WEIGHT_THIN = 300
-FONT_WEIGHT_NORMAL = 400
-FONT_WEIGHT_BOLD = 700
-
-// -- Sizes
-UNIT = 4rem
-SPACE = (UNIT * 0.29)
-OFFSET = (SPACE * 1.75)
-MENU_WIDTH = (3.85 * UNIT)
-HEADER_HEIGHT = (1.65 * UNIT)
-INPUT_HEIGHT = (2 * SPACE)
-BUTTON_HEIGHT = (2.5 * SPACE)
-BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
-BUTTON_CIRCLE_MINI_HEIGHT = (2 * SPACE)
-LOADING_HEIGHT = (1.5 * UNIT)
-PROGRESS_BAR_HEIGHT = (SPACE / 4)
-
-// -- Shadows
-ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
-ZDEPTH_SHADOW_2 = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
-ZDEPTH_SHADOW_3 = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
-ZDEPTH_SHADOW_4 = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
-ZDEPTH_SHADOW_5 = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
-
-// -- Animations
-ANIMATION_DURATION = 450ms
-ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
-ANIMATION_DELAY = (ANIMATION_DURATION / 5)
-
-// -- Z Indexes
-Z_INDEX_HIGHER = 200
-Z_INDEX_HIGH = 100
-Z_INDEX_NORMAL = 1
-Z_INDEX_LOW = -100
-Z_INDEX_LOWER = -200
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 1232c35f5..c1534d9da 100644
--- a/components/list/index.jsx
+++ b/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 (
- {this.props.itemFactory(data, index)}
+ {this.props.template(data, index)}
);
});
diff --git a/components/list/style.scss b/components/list/style.scss
new file mode 100644
index 000000000..3128e2b3a
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/components/list/style.styl b/components/list/style.styl
deleted file mode 100644
index f879d94a8..000000000
--- a/components/list/style.styl
+++ /dev/null
@@ -1,15 +0,0 @@
-@import '../constants'
-
-:local(.root)
- list-style : none
- &, a
- color : TEXT
- > li
- overflow : hidden
- background-color : WHITE
- box-shadow : ZDEPTH_SHADOW_1
- transition-property : box-shadow
- transition-duration : ANIMATION_DURATION
- transition-timing-function : ANIMATION_EASE
- &:hover
- box-shadow : ZDEPTH_SHADOW_2
diff --git a/spec/components/list.jsx b/spec/components/list.jsx
new file mode 100644
index 000000000..1a57ba748
--- /dev/null
+++ b/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 (
+
+
+
+ {data.label}
+ {data.value}
+
+
+ );
+ },
+
+ render () {
+ return (
+
+ List
+ lorem ipsum...
+
+
+ );
+ }
+});
diff --git a/spec/index.jsx b/spec/index.jsx
index 18c380097..5d2f89e7e 100644
--- a/spec/index.jsx
+++ b/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',