adding in error handling for inpupt component

ui/src/components/input/index.js

@@ -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,

ui/stories/index.js

@@ -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)