[Ivan Diaz] - Add label to input

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

@@ -4,9 +4,9 @@ import React         from 'react/addons';
 import {Link}        from 'react-router';
 import DocumentTitle from 'react-document-title';
 
-import Button from 'core-components/button';
+import Button           from 'core-components/button';
-import Input from 'core-components/input';
+import Input            from 'core-components/input';
-import Widget from 'core-components/widget';
+import Widget           from 'core-components/widget';
 
 var DemoPage = React.createClass({
 
@@ -21,21 +21,27 @@ var DemoPage = React.createClass({
 				<Button type="primary">Sign up</Button>
 			)
 		},
-		{
-			title: 'Widget',
-			render: (
-				<Widget>
-					<h2>Register here!</h2>
-
-					<Button type="primary">SIGN UP</Button>
-				</Widget>
-			)
-		},
         {
             title: 'Input',
             render: (
                 <Input placeholder="placeholder"/>
             )
+        },
+        {
+            title: 'Input wrapped in a label',
+            render: (
+                <Input placeholder="placeholder" label="This is a label" />
+            )
+        },
+        {
+            title: 'Widget',
+            render: (
+                <Widget>
+                    <h2>Register here!</h2>
+
+                    <Button type="primary">SIGN UP</Button>
+                </Widget>
+            )
         }
 	],
 

src/core-components/form.js

@@ -44,11 +44,10 @@ var Form = React.createClass({
         return props;
     },
 
-    getInputProps(child) {
+    getInputProps({props, type}) {
-        var props = child.props;
         var additionalProps = {};
 
-        if(child.type === Input) {
+        if(type === Input) {
             let inputName = props.name;
 
             this.validations[inputName] = props.validation;

src/core-components/input.js

@@ -19,7 +19,10 @@ var Input = React.createClass({
 
     render() {
         return (
-            <input {...this.getProps()} />
+            <label className="input-label">
+                <span className="input-label--text">{this.props.label}</span>
+                <input {...this.getProps()} />
+            </label>
         );
     },
 

src/core-components/input.scss

@@ -13,4 +13,17 @@
     outline: none;
     border-color: $primary-blue;
   }
+
+  &-label {
+    position: relative;
+
+    &--text {
+      color: $primary-black;
+      font-size: 14px;
+      display: block;
+      position: absolute;
+      top: -26px;
+      left: 2px;
+    }
+  }
 }