adding in error handling for inpupt component

This commit is contained in:
Alex Windett 2017-01-10 18:00:11 +00:00
parent 4c80ca619f
commit ed0b28ca17
2 changed files with 30 additions and 7 deletions

View File

@ -23,20 +23,20 @@ const {
} = Styled;
const Label = styled.label`
color: #464646;
color: ${props => props.error ? colors.alert : colors.fonts.regular}
`;
const InputField = styled.input`
background: ${colors.brandSecondary};
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
display: block;
font-size: 16px;
height: ${remcalc(50)};
padding-left: ${remcalc(15)};
padding-right: ${remcalc(15)};
padding: ${remcalc(16)};
visibility: visible;
width: 100%;
${baseBox()}
${baseBox()};
border-color: ${props => props.error ? colors.alert : 'auto'};
&:focus {
border-color: ${boxes.border.checked};
@ -44,12 +44,19 @@ const InputField = styled.input`
}
`;
const Error = styled.span`
float: right;
color: ${colors.alert};
font-size: ${remcalc(14)};
`;
const Input = ({
autoComplete,
autoFocus,
children,
className,
disabled = false,
error,
form,
id,
inputMode,
@ -71,17 +78,23 @@ const Input = ({
}) => {
const _label = label || children;
const _children = label && children ? children : null;
const _error = error ? (<Error>{error}</Error>) : null;
return (
<div>
<Label htmlFor={id}>
<Label
error={error}
htmlFor={id}
>
{_label}
</Label>
{_error}
<InputField
aria-labelledby={labelledby}
autoComplete={autoComplete}
autoFocus={autoFocus}
disabled={disabled}
error={error}
form={form}
id={id}
inputMode={inputMode}
@ -109,6 +122,7 @@ Input.propTypes = {
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
error: React.PropTypes.string,
form: React.PropTypes.string,
id: React.PropTypes.string,
inputMode: React.PropTypes.string,

View File

@ -241,6 +241,15 @@ storiesOf('Input', module)
<small>We&apos;ll never share your email with anyone else.</small>
</Input>
</Base>
))
.add('Error', () => (
<Base>
<Input
error="Somethings missing"
placeholder="There was an error"
value="alexw/makeusproud.com"
/>
</Base>
));
storiesOf('Modal', module)