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