mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
adding in error handling for inpupt component
This commit is contained in:
parent
4c80ca619f
commit
ed0b28ca17
@ -23,33 +23,40 @@ 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};
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
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,
|
||||
|
@ -241,6 +241,15 @@ storiesOf('Input', module)
|
||||
<small>We'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)
|
||||
|
Loading…
Reference in New Issue
Block a user