[Ivan Diaz y Maxi] - Added property icon to Input tag :D

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

@@ -41,7 +41,7 @@ let DemoPage = React.createClass({
         {
             title: 'Input wrapped in a label',
             render: (
-                <Input placeholder="placeholder" label="This is a label" />
+                <Input placeholder="placeholder" label="This is a label" icon="user" />
             )
         },
         {

client/src/core-components/input.js

@@ -2,6 +2,8 @@ const React = require('react');
 const classNames = require('classnames');
 const _ = require('lodash');
 
+const Icon = require('core-components/icon');
+
 const Input = React.createClass({
 
     propTypes: {
@@ -10,7 +12,8 @@ const Input = React.createClass({
         onChange: React.PropTypes.func,
         inputType: React.PropTypes.string,
         password: React.PropTypes.bool,
-        required: React.PropTypes.bool
+        required: React.PropTypes.bool,
+        icon: React.PropTypes.string
     },
 
     getDefaultProps() {
@@ -22,12 +25,23 @@ const Input = React.createClass({
     render() {
         return (
             <label className={this.getClass()}>
-                <span className="input--label">{this.props.label}</span>
+                <span className="input__label">{this.props.label}</span>
-                <input {...this.getInputProps()} className="input--text" />
+                {this.renderIcon()}
+                <input {...this.getInputProps()} className="input__text" />
             </label>
         );
     },
 
+    renderIcon() {
+        let icon = null;
+
+        if (this.props.icon) {
+            icon = <span className="input__icon"><Icon name={this.props.icon} /></span>
+        }
+
+        return icon;
+    },
+
     getInputProps() {
         let props = _.clone(this.props);
 
@@ -42,6 +56,7 @@ const Input = React.createClass({
     getClass() {
         let classes = {
             'input': true,
+            'input_with-icon': (this.props.icon),
             ['input_' + this.props.inputType]: true,
 
             [this.props.className]: (this.props.className)

client/src/core-components/input.scss

@@ -3,7 +3,7 @@
 .input {
     display: block;
 
-    &--text {
+    &__text {
         border: 1px solid $grey;
         border-radius: 3px;
         padding: 8px;
@@ -19,7 +19,7 @@
         }
     }
 
-    &--label {
+    &__label {
         color: $primary-black;
         font-size: 15px;
         display: block;
@@ -34,4 +34,21 @@
     &_secondary {
         width: 250px;
     }
+
+    &_with-icon {
+        position: relative;
+
+        .input__icon {
+            position: absolute;
+            margin: 1px;
+            padding: 8px 12px;
+            background-color: #eee;
+        }
+
+        .input__text {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            padding-left: 40px;
+        }
+    }
 }