Add success, warning & error icons

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,
 };