adds error state to checkbox and requires onClick prop

src/client/components/forms/field-types/Checkbox/StyledCheckbox/index.js

@@ -6,18 +6,19 @@ import './index.scss';
 const baseClass = 'styled-checkbox';
 
 const StyledCheckbox = ({
-  onClick, isChecked, label, name, isDisabled,
+  onClick, isChecked, label, name, isDisabled, hasError,
 }) => {
   const classes = [
     baseClass,
     isChecked && `${baseClass}--is-checked`,
     isDisabled && `${baseClass}--is-disabled`,
+    hasError && `${baseClass}--has-error`,
   ].filter(Boolean).join(' ');
 
   return (
     <button
       className={classes}
-      onClick={() => (onClick && !isDisabled) && onClick(!isChecked)}
+      onClick={() => !isDisabled && onClick(!isChecked)}
       type="button"
       title={label}
       role="checkbox"
@@ -31,18 +32,19 @@ const StyledCheckbox = ({
 };
 
 StyledCheckbox.defaultProps = {
-  onClick: null,
   isChecked: false,
   label: 'Checkbox',
   isDisabled: false,
+  hasError: false,
 };
 
 StyledCheckbox.propTypes = {
-  onClick: PropTypes.func,
+  onClick: PropTypes.func.isRequired,
   isChecked: PropTypes.bool,
   label: PropTypes.string,
   name: PropTypes.string.isRequired,
   isDisabled: PropTypes.bool,
+  hasError: PropTypes.bool,
 };
 
 export default StyledCheckbox;

src/client/components/forms/field-types/Checkbox/StyledCheckbox/index.scss

@@ -20,4 +20,8 @@
       opacity: 1;
     }
   }
+
+  &--has-error {
+    background-color: lighten($error, 20%);
+  }
 }

src/client/components/forms/field-types/Checkbox/index.js

@@ -5,6 +5,8 @@ import Label from '../../Label';
 import Error from '../../Error';
 import StyledCheckbox from './StyledCheckbox';
 
+import './index.scss';
+
 const defaultError = 'Checkbox is required';
 const defaultValidate = value => Boolean(value);
 
@@ -63,6 +65,7 @@ const Checkbox = (props) => {
         name={name}
         label={label}
         isDisabled={formProcessing}
+        hasError={showError}
       />
     </div>
   );

src/client/components/forms/field-types/Checkbox/index.scss

@@ -0,0 +1,12 @@
+@import '../shared';
+
+.field-type.checkbox {
+  .tooltip {
+    right: auto;
+
+    span {
+      left: calc(#{base(1.25)} / 2);
+      transform: none;
+    }
+  }
+}