Merge branch 'KelvinTegelaar:dev' into dev

Author: BNWEIN

src/components/forms/RFFComponents.js

@@ -7,6 +7,7 @@ import {
   CFormSwitch,
   CFormTextarea,
   CSpinner,
+  CTooltip,
 } from '@coreui/react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
@@ -75,9 +76,14 @@ RFFCFormCheck.propTypes = {
   ...sharedPropTypes,
 }
 
+function ConditionWrapper({ condition, wrapper, children }) {
+  return condition ? wrapper(children) : children
+}
+
 export const RFFCFormSwitch = ({
   name,
   label,
+  helpText,
   sublabel,
   className = 'mb-3',
   validate,
@@ -86,26 +92,36 @@ export const RFFCFormSwitch = ({
   return (
     <Field name={name} type="checkbox" validate={validate}>
       {({ meta, input }) => (
-        <div className={className}>
-          <CFormSwitch
-            {...input}
-            // @todo revisit this, only shows green when checked
-            valid={!meta.error && meta.touched && validate}
-            invalid={meta.error && meta.touched && validate}
-            disabled={disabled}
-            id={name}
-            label={label}
-          />
-          {input.value && <RFFCFormFeedback meta={meta} />}
-          <sub>{sublabel}</sub>
-        </div>
+        <ConditionWrapper
+          condition={helpText}
+          wrapper={(children) => (
+            <CTooltip placement="left" content={helpText}>
+              {children}
+            </CTooltip>
+          )}
+        >
+          <div className={className}>
+            <CFormSwitch
+              {...input}
+              // @todo revisit this, only shows green when checked
+              valid={!meta.error && meta.touched && validate}
+              invalid={meta.error && meta.touched && validate}
+              disabled={disabled}
+              id={name}
+              label={label}
+            />
+            {input.value && <RFFCFormFeedback meta={meta} />}
+            <sub>{sublabel}</sub>
+          </div>
+        </ConditionWrapper>
       )}
     </Field>
   )
 }
 
 RFFCFormSwitch.propTypes = {
   ...sharedPropTypes,
+  helpText: PropTypes.string,
 }
 
 export const RFFCFormInput = ({