docs(checkbox): Add basic examples

config/styleguide.config.js

@@ -4,7 +4,7 @@ const { version } = require('../package.json')
 const styleguidistEnv = process.env.STYLEGUIDIST_ENV || 'dev' // dev, staging, production
 
 // Append strings to this array to enable components in staging, e.g. `['Box', 'ExpandCollapse']`
-const enabledInStaging = ['Responsive', 'Image']
+const enabledInStaging = ['Responsive', 'Image', 'Checkbox']
 
 /* eslint-disable no-unused-vars */
 const toggleByEnv = (component, toggledOffValue, toggledOnValue) => {

src/components/Checkbox/Checkbox.jsx

@@ -133,14 +133,35 @@ class Checkbox extends React.Component {
 }
 
 Checkbox.propTypes = {
+  /**
+   * The label.
+   */
   label: PropTypes.string.isRequired,
+  /**
+   * The checked state
+   */
   checked: PropTypes.bool,
   /**
    * A feedback state.
    */
   feedback: PropTypes.oneOf(['error']),
+  /**
+   * A callback function to be invoked when the checkbox is checked or unchecked.
+   *
+   * @param {SyntheticEvent} event The React `SyntheticEvent`
+   */
   onChange: PropTypes.func,
+  /**
+   * A callback function to be invoked when the checkbox receives focus.
+   *
+   * @param {SyntheticEvent} event The React `SyntheticEvent`
+   */
   onFocus: PropTypes.func,
+  /**
+   * A callback function to be invoked when the checkbox loses focus.
+   *
+   * @param {SyntheticEvent} event The React `SyntheticEvent`
+   */
   onBlur: PropTypes.func,
 }
 

src/components/Checkbox/Checkbox.md

@@ -1,11 +1,19 @@
 ```
-<Checkbox label="Choice A one two three four five six seven eight nine ten eleven twelve" />
+<Box tag="fieldset" between={2}>
+  <legend>Show me deals for...</legend>
+  <Checkbox label="Mobility" />
+  <Checkbox label="Internet" />
+  <Checkbox label="TV" />
+  <Checkbox label="Home Phone" />
+</Box>
 ```
 
-```
-<Checkbox feedback='error' label="Choice B one two three four five six seven eight nine ten eleven twelve" />
-```
+
+### Getting feedback for an unchecked checkbox
+
+Use the feedback attribute to give the user feedback regarding a missed checked checkbox by highlighting the label and checkbox element.
+
 
 ```
-<Checkbox disabled label="Choice C" />
+  <Checkbox label="I agree to the terms and conditions" feedback="error" />
 ```

src/components/Image/Image.md

@@ -1,3 +1,3 @@
 ```jsx
-<Image src="image-example.jpg" rounded="corners" width={300} height={300} />
+<Image src="image-example.jpg" rounded="corners" width={300} height={300} alt="Image of co-workers collaborating" />
 ```