docs(storybook): Remove extra wrappers

- Replace additional (unnecessary) wrappers for `Grid`, `Col` and `Layout`
- Replace by applying styles directly
- This makes the documentation reflect more accurately reflex's behavior

Closes #339

storybook/shared/components.js

@@ -1,12 +1,7 @@
 // @flow
 import * as React from 'react'
-import {
-  Col as GymnastCol,
-  Grid as GymnastGrid,
-  Layout as GymnastLayout,
-  Root,
-} from 'gymnast'
-import type { Spacing, Height } from '../../src/types'
+import { Grid } from 'gymnast'
+import type { Spacing } from '../../src/types'
 import {
   axonBlack,
   axonGold,
@@ -23,7 +18,7 @@ const typeMap = {
   E: 5,
 }
 
-const colors = {
+export const colors = {
   colors1: {
     color: axonGold,
     backgroundColor: axonBlack,
@@ -46,37 +41,18 @@ const colors = {
   },
 }
 
-type Dev = 1 | 2 | 3 | 4 | 5 | void
 type BoxProps = {
   type: $Keys<typeof typeMap>,
   style?: Object,
   children?: React.Node,
   value?: string,
   margin?: Spacing,
 }
-type Props = {
-  dev?: Dev,
-  style?: Object,
-}
-
-function withDev(Component: *) {
-  return function WrappedDevMode({ dev, style = {}, ...props }: Props) {
-    return (
-      <Component
-        {...props}
-        style={{ ...style, ...colors[`colors${String(dev)}`] }}
-      />
-    )
-  }
-}
 
-export const Col = withDev(GymnastCol)
-export const Grid = withDev(GymnastGrid)
-export const Layout = withDev(GymnastLayout)
 export function Box({
   children,
   margin,
-  style,
+  style = {},
   type,
   value = type,
   ...props
@@ -87,26 +63,13 @@ export function Box({
       {...props}
     >
       <Grid
-        dev={typeMap[type]}
         padding={['L', 0]}
         align="center"
         justify="center"
-        style={style}
+        style={{ ...style, ...colors[`colors${String(typeMap[type])}`] }}
       >
         {children || value}
       </Grid>
     </Grid>
   )
 }
-export function RootLayout({
-  height = 'parent',
-  ...props
-}: {
-  height?: Height,
-}) {
-  return (
-    <Layout height={height}>
-      <Root {...props} />
-    </Layout>
-  )
-}

storybook/stories/components/card/base.js

@@ -1,66 +1,69 @@
 // @flow
 import * as React from 'react'
-import { Grid, Col, RootLayout } from '../../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { colors } from '../../../shared'
 
 export default () => (
-  <RootLayout>
-    <Grid>
-      <Col>
-        <h1>Consistent Padding</h1>
-      </Col>
+  <Layout height="parent">
+    <Root>
+      <Grid>
+        <Col>
+          <h1>Consistent Padding</h1>
+        </Col>
 
-      <Grid size={3} margin="0 L/2">
-        <Grid dev={2} padding="L L/2 0" margin="0 L/2">
-          <Col dev={4}>All around padding</Col>
+        <Grid size={3} margin="0 L/2">
+          <Grid style={colors.colors2} padding="L L/2 0" margin="0 L/2">
+            <Col style={colors.colors4}>All around padding</Col>
+          </Grid>
         </Grid>
-      </Grid>
-      <Grid size={3} margin="0 L/2">
-        <Grid>
-          <Grid dev={2}>Full Bleed</Grid>
+        <Grid size={3} margin="0 L/2">
+          <Grid>
+            <Grid style={colors.colors2}>Full Bleed</Grid>
+          </Grid>
         </Grid>
-      </Grid>
-
-      <Grid margin="L L/2">
-        <h1>Mixed Padding</h1>
-      </Grid>
 
-      <Col size={6}>
-        <Grid size={8} dev={2} padding="L L/2 0">
-          <Col>Padding</Col>
+        <Grid margin="L L/2">
+          <h1>Mixed Padding</h1>
         </Grid>
-        <Grid size={4} dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-      </Col>
 
-      <Col size={6}>
-        <Grid size={4} dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-        <Grid size={4} dev={2} padding="L L/2 0">
-          <Col>Padding</Col>
-        </Grid>
-        <Grid size={4} dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-      </Col>
+        <Col size={6}>
+          <Grid size={8} style={colors.colors2} padding="L L/2 0">
+            <Col>Padding</Col>
+          </Grid>
+          <Grid size={4} style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+        </Col>
 
-      <Col size={6}>
-        <Grid size={4} dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-        <Grid size={8} dev={2} padding="L L/2 0">
-          <Col>Padding</Col>
-        </Grid>
-      </Col>
-      <Col size={6}>
-        <Grid dev={2} padding="L L/2 0">
-          <Col>Padding</Col>
-        </Grid>
-        <Grid dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-      </Col>
-    </Grid>
-  </RootLayout>
+        <Col size={6}>
+          <Grid size={4} style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+          <Grid size={4} style={colors.colors2} padding="L L/2 0">
+            <Col>Padding</Col>
+          </Grid>
+          <Grid size={4} style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+        </Col>
+
+        <Col size={6}>
+          <Grid size={4} style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+          <Grid size={8} style={colors.colors2} padding="L L/2 0">
+            <Col>Padding</Col>
+          </Grid>
+        </Col>
+        <Col size={6}>
+          <Grid style={colors.colors2} padding="L L/2 0">
+            <Col>Padding</Col>
+          </Grid>
+          <Grid style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+        </Col>
+      </Grid>
+    </Root>
+  </Layout>
 )