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; } = Styled;
const Label = styled.label` const Label = styled.label`
color: #464646; color: ${props => props.error ? colors.alert : colors.fonts.regular}
`; `;
const InputField = styled.input` const InputField = styled.input`
background: ${colors.brandSecondary}; background: ${colors.brandSecondary};
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
display: block; display: block;
font-size: 16px; font-size: 16px;
height: ${remcalc(50)}; height: ${remcalc(50)};
padding-left: ${remcalc(15)}; padding: ${remcalc(16)};
padding-right: ${remcalc(15)};
visibility: visible; visibility: visible;
width: 100%; width: 100%;
${baseBox()};
${baseBox()} border-color: ${props => props.error ? colors.alert : 'auto'};
&:focus { &:focus {
border-color: ${boxes.border.checked}; 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 = ({ const Input = ({
autoComplete, autoComplete,
autoFocus, autoFocus,
children, children,
className, className,
disabled = false, disabled = false,
error,
form, form,
id, id,
inputMode, inputMode,
@ -71,17 +78,23 @@ const Input = ({
}) => { }) => {
const _label = label || children; const _label = label || children;
const _children = label && children ? children : null; const _children = label && children ? children : null;
const _error = error ? (<Error>{error}</Error>) : null;
return ( return (
<div> <div>
<Label htmlFor={id}> <Label
error={error}
htmlFor={id}
>
{_label} {_label}
</Label> </Label>
{_error}
<InputField <InputField
aria-labelledby={labelledby} aria-labelledby={labelledby}
autoComplete={autoComplete} autoComplete={autoComplete}
autoFocus={autoFocus} autoFocus={autoFocus}
disabled={disabled} disabled={disabled}
error={error}
form={form} form={form}
id={id} id={id}
inputMode={inputMode} inputMode={inputMode}
@ -109,6 +122,7 @@ Input.propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,
className: React.PropTypes.string, className: React.PropTypes.string,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
error: React.PropTypes.string,
form: React.PropTypes.string, form: React.PropTypes.string,
id: React.PropTypes.string, id: React.PropTypes.string,
inputMode: 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> <small>We&apos;ll never share your email with anyone else.</small>
</Input> </Input>
</Base> </Base>
))
.add('Error', () => (
<Base>
<Input
error="Somethings missing"
placeholder="There was an error"
value="alexw/makeusproud.com"
/>
</Base>
)); ));
storiesOf('Modal', module) storiesOf('Modal', module)