[Ivan Diaz] - Add label to input

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

@@ -21,6 +21,18 @@ var DemoPage = React.createClass({
 				<Button type="primary">Sign up</Button>
 			)
 		},
+        {
+            title: 'Input',
+            render: (
+                <Input placeholder="placeholder"/>
+            )
+        },
+        {
+            title: 'Input wrapped in a label',
+            render: (
+                <Input placeholder="placeholder" label="This is a label" />
+            )
+        },
         {
             title: 'Widget',
             render: (
@@ -30,12 +42,6 @@ var DemoPage = React.createClass({
                     <Button type="primary">SIGN UP</Button>
                 </Widget>
             )
-		},
-        {
-            title: 'Input',
-            render: (
-                <Input placeholder="placeholder"/>
-            )
         }
 	],
 

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 (
+            <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;
+    }
+  }
 }