[Ivan Diaz] - Add Input Styling

src/app/demo/components-demo-page.js

@@ -4,8 +4,9 @@ import React         from 'react/addons';
 import {Link}        from 'react-router';
 import DocumentTitle from 'react-document-title';
 
-import Button from 'core-components/button.js';
+import Button from 'core-components/button';
-import Widget from 'core-components/widget.js';
+import Input from 'core-components/input';
+import Widget from 'core-components/widget';
 
 var DemoPage = React.createClass({
 
@@ -29,6 +30,12 @@ var DemoPage = React.createClass({
 					<Button type="primary">SIGN UP</Button>
 				</Widget>
 			)
+		},
+        {
+            title: 'Input',
+            render: (
+                <Input placeholder="placeholder"/>
+            )
         }
 	],
 

src/core-components/input.js

@@ -1,4 +1,6 @@
 import React              from 'react';
+import classNames         from 'classnames';
+import _                  from 'lodash';
 
 var Input = React.createClass({
 
@@ -8,12 +10,6 @@ var Input = React.createClass({
         onChange: React.PropTypes.func
     },
 
-    getDefaultProps() {
-        return {
-            value: ''
-        };
-    },
-
     render() {
         return (
             <input {...this.getProps()} />
@@ -21,7 +17,22 @@ var Input = React.createClass({
     },
 
     getProps() {
-        return this.props;
+        var props = _.clone(this.props);
+
+        props.className = this.getClass();
+        props.type = 'text';
+
+        return props;
+    },
+
+    getClass() {
+        var classes = {
+            'input': true
+        };
+
+        classes[this.props.className] = (this.props.className);
+
+        return classNames(classes);
     }
 });
 

src/core-components/input.scss

@@ -0,0 +1,11 @@
+@import "../scss/vars";
+
+.input {
+  border: 1px solid $grey;
+  border-radius: 3px;
+  padding: 8px;
+
+  &:hover {
+    border-color: $dark-grey;
+  }
+}