merge

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,20 +23,20 @@ const StyledInput = styled.input`
         box-shadow: 0 1px 2px 0 rgba(169, 169, 169, 0.25);
     }
 
-    ${props => props.isValid && css`
-        background-color: ${colors.SUCCESS_PRIMARY};
+    ${props => props.isSuccess && css`
+        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);
         }
@@ -46,22 +49,68 @@ const StyledInput = styled.input`
     }
 `;
 
+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;
+    right: 55px;
+`;
+
 const Input = ({
-    type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isValid, isWarning, isError, placeholder,
+    type, autoComplete, placeholder, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError, errorText,
 }) => (
-    <StyledInput
-        placeholder={placeholder}
-        type={type}
-        autoComplete={autoComplete}
-        autoCorrect={autoCorrect}
-        autoCapitalize={autoCapitalize}
-        spellCheck={spellCheck}
-        value={value}
-        onChange={onChange}
-        isValid={isValid}
-        isWarning={isWarning}
-        isError={isError}
-    />
+    <Wrapper>
+        <InputWrapper>
+            <StyledInput
+                type={type}
+                placeholder={placeholder}
+                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 && (
+            <ErrorLabel>
+                {errorText}
+            </ErrorLabel>
+        )}
+    </Wrapper>
 );
 
 Input.propTypes = {
@@ -73,9 +122,10 @@ Input.propTypes = {
     spellCheck: PropTypes.string,
     value: PropTypes.string.isRequired,
     onChange: PropTypes.func,
-    isValid: PropTypes.bool,
+    isSuccess: PropTypes.bool,
     isWarning: PropTypes.bool,
     isError: PropTypes.bool,
+    errorText: PropTypes.string,
 };
 
 export default Input;