From d58dadedc9fe94c89904ee36838c841cfb997c0f Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Thu, 30 Aug 2018 14:43:06 +0200
Subject: [PATCH 1/3] Fix input state colors

---
 src/components/Input/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 616bb5ef..81cd94e9 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -21,19 +21,19 @@ const StyledInput = styled.input`
     }
 
     ${props => props.isValid && css`
-        background-color: ${colors.SUCCESS_PRIMARY};
+        border-color: ${colors.SUCCESS_PRIMARY};
         &:focus {
             box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25);
         }
     `}
     ${props => props.isWarning && css`
-        background-color: ${colors.WARNING_PRIMARY};
+        border-color: ${colors.WARNING_PRIMARY};
         &:focus {
             box-shadow: 0 1px 4px 0 rgba(235, 138, 0, 0.25);
         }
     `}
     ${props => props.isError && css`
-        background-color: ${colors.ERROR_PRIMARY};
+        border-color: ${colors.ERROR_PRIMARY};
         &:focus {
             box-shadow: 0 1px 4px 0 rgba(255, 111, 109, 0.25);
         }

From 6d9cdfcabb4d0c084ff6aed25274503be8473d0f Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Thu, 30 Aug 2018 15:10:02 +0200
Subject: [PATCH 2/3] Add success, warning & error icons

---
 src/components/Input/index.js | 60 ++++++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 81cd94e9..add07904 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -2,9 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
+import ICONS from 'config/icons';
+import Icon from 'components/Icon';
 import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
 
 const StyledInput = styled.input`
+    width: 100%;
     padding: 6px 12px;
 
     line-height: 1.42857143;
@@ -20,7 +23,7 @@ const StyledInput = styled.input`
         box-shadow: 0 1px 2px 0 rgba(169, 169, 169, 0.25);
     }
 
-    ${props => props.isValid && css`
+    ${props => props.isSuccess && css`
         border-color: ${colors.SUCCESS_PRIMARY};
         &:focus {
             box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25);
@@ -46,21 +49,48 @@ const StyledInput = styled.input`
     }
 `;
 
+const Wrapper = styled.div``;
+
+const StyledIcon = styled(Icon)`
+    position: absolute;
+    right: 55px;
+`;
+
 const Input = ({
-    type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isValid, isWarning, isError,
+    type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError,
 }) => (
-    <StyledInput
-        type={type}
-        autoComplete={autoComplete}
-        autoCorrect={autoCorrect}
-        autoCapitalize={autoCapitalize}
-        spellCheck={spellCheck}
-        value={value}
-        onChange={onChange}
-        isValid={isValid}
-        isWarning={isWarning}
-        isError={isError}
-    />
+    <Wrapper>
+        <StyledInput
+            type={type}
+            autoComplete={autoComplete}
+            autoCorrect={autoCorrect}
+            autoCapitalize={autoCapitalize}
+            spellCheck={spellCheck}
+            value={value}
+            onChange={onChange}
+            isSuccess={isSuccess}
+            isWarning={isWarning}
+            isError={isError}
+        />
+        {isError && (
+            <StyledIcon
+                icon={ICONS.ERROR}
+                color={colors.ERROR_PRIMARY}
+            />
+        )}
+        {isWarning && (
+            <StyledIcon
+                icon={ICONS.WARNING}
+                color={colors.WARNING_PRIMARY}
+            />
+        )}
+        {isSuccess && (
+            <StyledIcon
+                icon={ICONS.CHECKED}
+                color={colors.SUCCESS_PRIMARY}
+            />
+        )}
+    </Wrapper>
 );
 
 Input.propTypes = {
@@ -71,7 +101,7 @@ Input.propTypes = {
     spellCheck: PropTypes.string,
     value: PropTypes.string.isRequired,
     onChange: PropTypes.func,
-    isValid: PropTypes.bool,
+    isSuccess: PropTypes.bool,
     isWarning: PropTypes.bool,
     isError: PropTypes.bool,
 };

From 797b66d9d5f2ee6c092b81c6be301ff808a9dc87 Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Thu, 30 Aug 2018 15:19:58 +0200
Subject: [PATCH 3/3] Add error text under the input

---
 src/components/Input/index.js | 80 ++++++++++++++++++++++-------------
 1 file changed, 50 insertions(+), 30 deletions(-)

diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index add07904..b6855ef4 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -49,7 +49,19 @@ const StyledInput = styled.input`
     }
 `;
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+`;
+
+const InputWrapper = styled.div``;
+
+const ErrorLabel = styled.span`
+    margin-top: 10px;
+    font-size: ${FONT_SIZE.SMALLER};
+    color: ${colors.ERROR_PRIMARY};
+`;
 
 const StyledIcon = styled(Icon)`
     position: absolute;
@@ -57,38 +69,45 @@ const StyledIcon = styled(Icon)`
 `;
 
 const Input = ({
-    type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError,
+    type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError, errorText,
 }) => (
     <Wrapper>
-        <StyledInput
-            type={type}
-            autoComplete={autoComplete}
-            autoCorrect={autoCorrect}
-            autoCapitalize={autoCapitalize}
-            spellCheck={spellCheck}
-            value={value}
-            onChange={onChange}
-            isSuccess={isSuccess}
-            isWarning={isWarning}
-            isError={isError}
-        />
+        <InputWrapper>
+            <StyledInput
+                type={type}
+                autoComplete={autoComplete}
+                autoCorrect={autoCorrect}
+                autoCapitalize={autoCapitalize}
+                spellCheck={spellCheck}
+                value={value}
+                onChange={onChange}
+                isSuccess={isSuccess}
+                isWarning={isWarning}
+                isError={isError}
+            />
+            {isError && (
+                <StyledIcon
+                    icon={ICONS.ERROR}
+                    color={colors.ERROR_PRIMARY}
+                />
+            )}
+            {isWarning && (
+                <StyledIcon
+                    icon={ICONS.WARNING}
+                    color={colors.WARNING_PRIMARY}
+                />
+            )}
+            {isSuccess && (
+                <StyledIcon
+                    icon={ICONS.CHECKED}
+                    color={colors.SUCCESS_PRIMARY}
+                />
+            )}
+        </InputWrapper>
         {isError && (
-            <StyledIcon
-                icon={ICONS.ERROR}
-                color={colors.ERROR_PRIMARY}
-            />
-        )}
-        {isWarning && (
-            <StyledIcon
-                icon={ICONS.WARNING}
-                color={colors.WARNING_PRIMARY}
-            />
-        )}
-        {isSuccess && (
-            <StyledIcon
-                icon={ICONS.CHECKED}
-                color={colors.SUCCESS_PRIMARY}
-            />
+            <ErrorLabel>
+                {errorText}
+            </ErrorLabel>
         )}
     </Wrapper>
 );
@@ -104,6 +123,7 @@ Input.propTypes = {
     isSuccess: PropTypes.bool,
     isWarning: PropTypes.bool,
     isError: PropTypes.bool,
+    errorText: PropTypes.string,
 };
 
 export default Input;