import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

//
// TODO: Make component accepts the content like icons as a children.
//
const InputAdornment = styled(({ className, invalid }) => (
  <div className={className}>
    {invalid ? '!' : ''}
  </div>
))`
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  border-bottom: 1px solid;
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: relative;

  ${props => props.invalid && `{
    color: #FF2B4E;
    border-bottom-color: #FF2B4E;
  }`}

  ${props => props.valid && `{
    border-bottom-color: #50E3C2;

    &:after {
      content: '';
      width: 3px;
      height: 6px;
      border: solid #50E3C2;
      border-width: 0 1px 1px 0;
      transform: rotate(45deg);
    }
  }`}
`

InputAdornment.propTypes = {
  /** Show an invalid input adornment. */
  invalid: PropTypes.bool,
  /** Show a valid input adornment. */
  valid: PropTypes.bool
}

InputAdornment.displayName = 'InputAdornment'

/* @component */
export default InputAdornment

@@ -92,16 +92,59 @@
 ponents'
+%0Aimport Icon from '../../content/Icon/Icon'
 %0A%0A//%0A// 
@@ -321,17 +321,77 @@
 id ?
- '!' : ''
+%0A      '!' :%0A      %3CIcon name='tick' size=%7B8%7D color='#50E3C2' /%3E%0A    
 %7D%0A  
@@ -693,24 +693,24 @@
 valid && %60%7B%0A
+
     border-b
@@ -734,179 +734,8 @@
 3C2;
-%0A%0A    &:after %7B%0A      content: '';%0A      width: 3px;%0A      height: 6px;%0A      border: solid #50E3C2;%0A      border-width: 0 1px 1px 0;%0A      transform: rotate(45deg);%0A    %7D
 %0A  %7D

use tick icon on input adornment component