add support for positive validation messages

src/components/formik-forms/formik-input.jsx

@@ -11,6 +11,7 @@ require('./formik-input.scss');
 const FormikInput = ({
     className,
     error,
+    toolTip,
     validationClassName,
     wrapperClassName,
     ...props
@@ -31,11 +32,18 @@ const FormikInput = ({
             )}
             {...props}
         />
-        {error && (
+        {error ? (
             <ValidationMessage
+                isError
                 className={validationClassName}
                 message={error}
             />
+        ) : toolTip && (
+            <ValidationMessage
+                isOk
+                className={validationClassName}
+                message={toolTip}
+            />
         )}
     </div>
 );
@@ -44,6 +52,7 @@ const FormikInput = ({
 FormikInput.propTypes = {
     className: PropTypes.string,
     error: PropTypes.string,
+    toolTip: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
     type: PropTypes.string,
     validationClassName: PropTypes.string,
     wrapperClassName: PropTypes.string

src/components/formik-forms/formik-select.jsx

@@ -37,6 +37,7 @@ const FormikSelect = ({
             </Field>
             {error && (
                 <ValidationMessage
+                    isError
                     className={validationClassName}
                     message={error}
                 />

src/components/forms/validation-message.jsx

@@ -5,13 +5,24 @@ const React = require('react');
 require('./validation-message.scss');
 
 const ValidationMessage = props => (
-    <div className={classNames(['validation-message', props.className])}>
+    <div
+        className={classNames(
+            'validation-message',
+            {
+                'validation-error': props.isError,
+                'validation-ok': props.isOk
+            },
+            props.className
+        )}
+    >
         {props.message}
     </div>
 );
 
 ValidationMessage.propTypes = {
     className: PropTypes.string,
+    isError: PropTypes.bool,
+    isOk: PropTypes.bool,
     message: PropTypes.string
 };
 

src/components/forms/validation-message.scss

@@ -11,7 +11,6 @@
     margin-left: $arrow-border-width;
     border: 1px solid $active-gray;
     border-radius: 5px;
-    background-color: $ui-orange;
     padding: 1rem;
     max-width: 18.75rem;
     min-height: 1rem;
@@ -31,7 +30,6 @@
         border-left: 1px solid $active-gray;
         border-radius: 5px;
 
-        background-color: $ui-orange;
         width: $arrow-border-width;
         height: $arrow-border-width;
 
@@ -52,3 +50,19 @@
         }
     }
 }
+
+.validation-error {
+    background-color: $ui-orange;
+
+    &:before {
+        background-color: $ui-orange;
+    }
+}
+
+.validation-ok {
+    background-color: $ui-blue;
+
+    &:before {
+        background-color: $ui-blue;
+    }
+}