adding success and error styles to input filed
This commit is contained in:
parent
92887e12c5
commit
7dffed145c
@ -11,7 +11,7 @@ const {
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
remcalc,
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
@ -19,23 +19,37 @@ const {
|
||||
} = composers;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
default: styled,
|
||||
css
|
||||
} = Styled;
|
||||
|
||||
const successBakcground = css`
|
||||
background-color: ${colors.brandSecondary};
|
||||
background-image: url("./input-confirm.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 98% 20px;
|
||||
`;
|
||||
|
||||
const defaultBackground = css`
|
||||
background-color: ${colors.brandSecondary};
|
||||
`;
|
||||
|
||||
const Label = styled.label`
|
||||
color: ${props => props.error ? colors.alert : colors.fonts.regular}
|
||||
`;
|
||||
|
||||
const InputField = styled.input`
|
||||
background: ${colors.brandSecondary};
|
||||
${baseBox()};
|
||||
|
||||
${props => props.success ? successBakcground : defaultBackground }
|
||||
|
||||
border-color: ${props => props.error ? colors.alert : 'auto'}
|
||||
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding: ${remcalc('15 18')};
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
${baseBox()};
|
||||
border-color: ${props => props.error ? colors.alert : ''};
|
||||
|
||||
&:focus {
|
||||
border-color: ${boxes.border.checked};
|
||||
@ -71,6 +85,7 @@ const Input = ({
|
||||
selectionDirection,
|
||||
spellCheck,
|
||||
style,
|
||||
success,
|
||||
tabIndex,
|
||||
type,
|
||||
value
|
||||
@ -106,6 +121,7 @@ const Input = ({
|
||||
required={required}
|
||||
selectionDirection={selectionDirection}
|
||||
spellCheck={spellCheck}
|
||||
success={success}
|
||||
tabIndex={tabIndex}
|
||||
type={type}
|
||||
value={value}
|
||||
@ -137,6 +153,7 @@ Input.propTypes = {
|
||||
selectionDirection: React.PropTypes.string,
|
||||
spellCheck: React.PropTypes.bool,
|
||||
style: React.PropTypes.object,
|
||||
success: React.PropTypes.bool,
|
||||
tabIndex: React.PropTypes.string,
|
||||
type: React.PropTypes.string,
|
||||
value: React.PropTypes.string
|
||||
|
@ -28,8 +28,15 @@ storiesOf('Input', module)
|
||||
<Base>
|
||||
<Input
|
||||
error="Somethings missing"
|
||||
placeholder="There was an error"
|
||||
value="alexw/makeusproud.com"
|
||||
/>
|
||||
</Base>
|
||||
))
|
||||
.add('Success', () => (
|
||||
<Base>
|
||||
<Input
|
||||
success
|
||||
value="alexw@makeusproud.com"
|
||||
/>
|
||||
</Base>
|
||||
));
|
24
ui/src/shared/assets/input-confirm.svg
Normal file
24
ui/src/shared/assets/input-confirm.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon: confirmation</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<circle id="path-1" cx="9" cy="9" r="9"></circle>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ui-components-revised" transform="translate(-1145.000000, -1341.000000)">
|
||||
<g id="single-field-line" transform="translate(801.000000, 45.000000)">
|
||||
<g id="text-field-+-confirmation" transform="translate(0.000000, 1254.000000)">
|
||||
<g id="icon:-confirmation" transform="translate(344.000000, 42.000000)">
|
||||
<use id="Oval" stroke="#00AF66" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
|
||||
<polygon id="tick" fill="#00AF66" points="12.017 5.00007 8.121 10.33607 6.634 8.22707 5 9.37907 8.091 13.76807 13.632 6.17907"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in New Issue
Block a user