Passing children to Checkboard component (#703)

* Added feature to pass down children to Checkboard component

* Added tests for passed down children in checkboard

src/components/common/Checkboard.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { isValidElement } from 'react'
 import reactCSS from 'reactcss'
 import * as checkboard from '../../helpers/checkboard'
 
-export const Checkboard = ({ white, grey, size, renderers, borderRadius, boxShadow }) => {
+export const Checkboard = ({ white, grey, size, renderers, borderRadius, boxShadow, children }) => {
   const styles = reactCSS({
     'default': {
       grid: {
@@ -12,11 +12,8 @@ export const Checkboard = ({ white, grey, size, renderers, borderRadius, boxShad
         background: `url(${ checkboard.get(white, grey, size, renderers.canvas) }) center left`,
       },
     },
-  })
-
-  return (
-    <div style={ styles.grid } />
-  )
+  })  
+  return isValidElement(children)?React.cloneElement(children, { ...children.props, style: {...children.props.style,...styles.grid}}):<div style={styles.grid}/>;
 }
 
 Checkboard.defaultProps = {

src/components/common/__snapshots__/spec.js.snap

@@ -130,6 +130,33 @@ exports[`Alpha renders correctly 1`] = `
 </div>
 `;
 
+exports[`Checkboard renders children correctly 1`] = `
+<button
+  style={
+    Object {
+      "MozBorderRadius": undefined,
+      "MozBoxShadow": undefined,
+      "OBorderRadius": undefined,
+      "OBoxShadow": undefined,
+      "WebkitBorderRadius": undefined,
+      "WebkitBoxShadow": undefined,
+      "background": "url(null) center left",
+      "borderRadius": undefined,
+      "bottom": "0px",
+      "boxShadow": undefined,
+      "left": "0px",
+      "msBorderRadius": undefined,
+      "msBoxShadow": undefined,
+      "position": "absolute",
+      "right": "0px",
+      "top": "0px",
+    }
+  }
+>
+  Click
+</button>
+`;
+
 exports[`Checkboard renders correctly 1`] = `
 <div
   style={

src/components/common/spec.js

@@ -33,6 +33,13 @@ test('Checkboard renders correctly', () => {
   expect(tree).toMatchSnapshot()
 })
 
+test('Checkboard renders children correctly', () => {
+  const tree = renderer.create(
+    <Checkboard><button>Click</button></Checkboard>,
+  ).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
 // test('Checkboard renders on server correctly', () => {
 //   const tree = renderer.create(
 //     <Checkboard renderers={{ canvas }} />