Refactor FieldCheckbox

Wrap the whole component in redux-form Field instead of just using Field
for the actual input element.

src/components/FieldCheckbox/FieldCheckbox.example.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { Button } from '../../components';
 import FieldCheckbox from './FieldCheckbox';
+import { required } from '../../util/validators';
 
 const formName = 'Styleguide.FieldCheckbox.Form';
 
@@ -12,10 +13,13 @@ const FormComponent = props => {
 
   return (
     <form onSubmit={handleSubmit}>
+      <FieldCheckbox id="checkbox-id" name="checkbox-name" label="Check here, optional" />
+
       <FieldCheckbox
-        id="field-checkbox-example-id"
-        name="field-checkbox-example-name"
-        label="Check here"
+        id="checkbox-required-id"
+        name="checkbox-required-name"
+        label="Check here, required"
+        validate={required('This field is required')}
       />
 
       <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>

src/components/FieldCheckbox/FieldCheckbox.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { node, string, object } from 'prop-types';
 import classNames from 'classnames';
 import { Field } from 'redux-form';
+import { ValidationError } from '../../components';
 
 import css from './FieldCheckbox.css';
 
@@ -31,42 +32,60 @@ const IconCheckbox = props => {
 
 IconCheckbox.defaultProps = { className: null };
 
-const { node, string } = PropTypes;
-
 IconCheckbox.propTypes = { className: string };
 
-const FieldCheckbox = props => {
-  const { rootClassName, className, svgClassName, id, name, label } = props;
+const FieldCheckboxComponent = props => {
+  const { rootClassName, className, svgClassName, id, label, input, meta, ...rest } = props;
 
   const classes = classNames(rootClassName || css.root, className);
 
+  const { value, ...inputProps } = input;
+  const checked = !!value;
+
+  const checkboxProps = {
+    id,
+    className: css.input,
+    type: 'checkbox',
+    checked,
+    ...inputProps,
+    ...rest,
+  };
+
   return (
     <span className={classes}>
-      <Field id={id} name={name} className={css.input} type="checkbox" component="input" />
+      <input {...checkboxProps} />
       <label htmlFor={id} className={css.label}>
         <span className={css.checkboxWrapper}>
           <IconCheckbox className={svgClassName} />
         </span>
         <span className={css.text}>{label}</span>
       </label>
+      <ValidationError fieldMeta={meta} />
     </span>
   );
 };
 
-FieldCheckbox.defaultProps = {
+FieldCheckboxComponent.defaultProps = {
   className: null,
   rootClassName: null,
   svgClassName: null,
   label: null,
 };
 
-FieldCheckbox.propTypes = {
+FieldCheckboxComponent.propTypes = {
   className: string,
   rootClassName: string,
   svgClassName: string,
   id: string.isRequired,
-  name: string.isRequired,
   label: node,
+
+  // redux-form Field params
+  input: object.isRequired,
+  meta: object.isRequired,
+};
+
+const FieldCheckbox = props => {
+  return <Field component={FieldCheckboxComponent} {...props} />;
 };
 
 export default FieldCheckbox;