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, }) => ( - + + + {isError && ( + + )} + {isWarning && ( + + )} + {isSuccess && ( + + )} + ); 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, };