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/box.js

@@ -0,0 +1,71 @@
+// @flow
+import * as React from 'react'
+import { Grid, Col } from 'gymnast'
+import type { Spacing } from '../../src/types'
+import {
+  axonBlack,
+  axonGold,
+  nomuraGray,
+  bolt,
+  white,
+} from '../../src/dev/colors'
+
+const typeMap = {
+  A: 1,
+  B: 2,
+  C: 3,
+  D: 4,
+  E: 5,
+}
+
+export const colors = {
+  colors1: {
+    color: axonGold,
+    backgroundColor: axonBlack,
+  },
+  colors2: {
+    color: bolt,
+    backgroundColor: nomuraGray,
+  },
+  colors3: {
+    color: axonBlack,
+    backgroundColor: axonGold,
+  },
+  colors4: {
+    color: nomuraGray,
+    backgroundColor: bolt,
+  },
+  colors5: {
+    color: axonBlack,
+    backgroundColor: white,
+  },
+}
+
+type BoxProps = {
+  type: $Keys<typeof typeMap>,
+  style?: Object,
+  children?: React.Node,
+  value?: string,
+  margin?: Spacing,
+}
+
+export function Box({
+  children,
+  style = {},
+  type,
+  value = type,
+  ...props
+}: BoxProps) {
+  return (
+    <Col {...props}>
+      <Grid
+        padding={['L', 0]}
+        align="center"
+        justify="center"
+        style={{ ...style, ...colors[`colors${String(typeMap[type])}`] }}
+      >
+        {children || value}
+      </Grid>
+    </Col>
+  )
+}

storybook/shared/index.js

@@ -3,5 +3,5 @@ import loremIpsumTxt from './loremIpsum.txt'
 
 export { default as getMarginSelect } from './margin'
 export { default as getPositionSelect } from './position'
-export * from './components'
+export * from './box'
 export const loremIpsum = loremIpsumTxt

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>
 )