Merged in Add-icon-support-for-input (pull request #16)

[Ivan Diaz y Maxi] - Added icon and error properties to Input tag :D

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

@@ -35,13 +35,13 @@ let DemoPage = React.createClass({
         {
             title: 'Input',
             render: (
-                <Input placeholder="placeholder"/>
+                <Input placeholder="placeholder" error="No anda"/>
             )
         },
         {
             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,9 @@ 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,
+        error: React.PropTypes.string
     },
 
     getDefaultProps() {
@@ -22,12 +26,34 @@ 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" />
+                {this.renderError()}
             </label>
         );
     },
 
+    renderError() {
+        let error = null;
+
+        if (this.props.error){
+            error = <span className="input__error"> {this.props.error} </span>;
+        }
+
+        return error;
+    },
+
+    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 +68,8 @@ const Input = React.createClass({
     getClass() {
         let classes = {
             'input': true,
+            'input_with-icon': (this.props.icon),
+            'input_with-error': (this.props.error),
             ['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,34 @@
     &_secondary {
         width: 250px;
     }
+
+    &_with-icon {
+        position: relative;
+
+        .input__icon {
+            position: absolute;
+            margin: 1px;
+            padding: 8px 12px;
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+            background-color: $light-grey;
+        }
+
+        .input__text {
+            padding-left: 40px;
+        }
+    }
+
+    &_with-error {
+        .input__error {
+            color: $primary-red;
+            font-size: $font-size--sm;
+            display: block;
+            position: absolute;
+        }
+        .input__text {
+            border: 1px solid $primary-red;
+        }
+    }
+
 }