[Max Red] - Added error property 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" icon="user" />
+                <Input placeholder="placeholder" label="This is a label" icon="user"/>
             )
         },
         {

client/src/core-components/input.js

@@ -13,7 +13,8 @@ const Input = React.createClass({
         inputType: React.PropTypes.string,
         password: React.PropTypes.bool,
         required: React.PropTypes.bool,
-        icon: React.PropTypes.string
+        icon: React.PropTypes.string,
+        error: React.PropTypes.string
     },
 
     getDefaultProps() {
@@ -28,10 +29,21 @@ const Input = React.createClass({
                 <span className="input__label">{this.props.label}</span>
                 {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;
 
@@ -57,6 +69,7 @@ const Input = React.createClass({
         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

@@ -42,13 +42,26 @@
             position: absolute;
             margin: 1px;
             padding: 8px 12px;
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
             background-color: #eee;
         }
 
         .input__text {
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
             padding-left: 40px;
         }
     }
+
+    &_with-error {
+        .input__error {
+            color: red;
+            font-size: $font-size--sm;
+            display: block;
+            position: absolute;
+        }
+        .input__text {
+            border: 1px solid red;
+        }
+    }
+
 }