[Ivan Diaz] - Update dropdown component

src/core-components/drop-down.js

@@ -48,7 +48,7 @@ var DropDown = React.createClass({
         var animation = this.getAnimationStyles();
 
         return (
-            <div className="drop-down">
+            <div className={this.getClass()}>
                 <div className="drop-down--current" onClick={this.getClickCallback(this.getSelectedIndex())}>
                     {this.props.items[this.getSelectedIndex()]}
                 </div>
@@ -72,17 +72,21 @@ var DropDown = React.createClass({
     },
 
     renderItem(item, index) {
-        var render = null;
+        return (
+            <li className="drop-down--list-item" onClick={this.getClickCallback(index)}>
+                {item}
+            </li>
+        );
+    },
 
-        if (index !== this.state.selectedIndex) {
+    getClass() {
-            render = (
+        var classes = {
-                <li className="drop-down--list-item" onClick={this.getClickCallback(index)}>
+            'drop-down': true,
-                    {item}
-                </li>
-            );
-        }
 
-        return render;
+            [this.props.className]: (this.props.className)
+        };
+
+        return classNames(classes);
     },
 
     getClickCallback(index) {
@@ -90,16 +94,10 @@ var DropDown = React.createClass({
     },
 
     handleClick(index) {
-        if (this.getSelectedIndex() === index) {
+        this.setState({
-            this.setState({
+            opened: !this.state.opened,
-                opened: !this.state.opened
+            selectedIndex: index
-            });
+        });
-        }
-        else {
-            this.setState({
-                selectedIndex: index
-            });
-        }
     },
 
     getSelectedIndex() {

src/core-components/drop-down.scss

@@ -8,13 +8,16 @@
     cursor: pointer;
 
     &--current {
-        color: $primary-black;
         background-color: $light-grey;
-        padding: 8px;
+        border-radius: 4px 4px 0 0;
+        color: $primary-black;
+        padding: 6px;
     }
 
     &--list-container {
         background-color: white;
+        position: absolute;
+        width: 150px;
     }
 
     &--list {