Fixed Field, added container and layout to sb

f2/src/components/Field/Field.stories.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks'
+import ThemeDecorator from '../../../.storybook/themeDecorator'
+import FormDecorator from '../../../.storybook/formDecorator'
+import { withKnobs, boolean, text } from '@storybook/addon-knobs'
+import { Input } from '../input'
+import { TextArea } from '../text-area'
+import { Field } from '.'
+
+<Meta
+  title="Components/Field"
+  component={Field}
+  decorators={[ThemeDecorator, FormDecorator, withKnobs]}
+/>
+
+# Fields
+
+## Input
+
+<Preview>
+  <Story name="Input field">
+    <Field name="input" label="Label for an input field" component={Input} />
+  </Story>
+</Preview>
+
+## Text Area
+
+<Preview>
+  <Story name="Text area field">
+    <Field
+      name="textArea"
+      label="Label for a text area"
+      helperText="Helper text"
+      component={TextArea}
+    />
+  </Story>
+</Preview>
+
+##Props
+
+<Props of={Field} />

f2/src/components/Field/index.js

@@ -9,17 +9,10 @@ import { Field as FieldAdapter, useField } from 'react-final-form'
 import { UniqueID } from '../unique-id'
 import { Input } from '../input'
 
-export const Field = ({
-  name,
-  label,
-  helperText,
-  errorMessage,
-  component,
-  ...props
-}) => {
+export const Field = props => {
   const {
     meta: { invalid, submitFailed },
-  } = useField(name, {
+  } = useField(props.name, {
     subscription: {
       invalid: true,
       submitFailed: true,
@@ -35,17 +28,19 @@ export const Field = ({
             isInvalid={submitFailed && invalid}
             {...props}
           >
-            <FormLabel id={id} htmlFor={name}>
-              {label}
+            <FormLabel id={id} htmlFor={props.name}>
+              {props.label}
             </FormLabel>
-            {helperText && <FormHelperText>{helperText}</FormHelperText>}
-            {errorMessage && (
-              <FormErrorMessage>{errorMessage}</FormErrorMessage>
+            {props.helperText && (
+              <FormHelperText>{props.helperText}</FormHelperText>
+            )}
+            {props.errorMessage && (
+              <FormErrorMessage>{props.errorMessage}</FormErrorMessage>
             )}
             <FieldAdapter
-              name={name}
-              id={name}
-              component={component}
+              name={props.name}
+              id={props.name}
+              component={props.component}
               {...props}
             />
           </FormControl>

f2/src/components/container/container.stories.mdx

@@ -0,0 +1,46 @@
+import { Meta, Story, Props, Preview } from "@storybook/addon-docs/blocks";
+import ThemeDecorator from "../../../.storybook/themeDecorator";
+import { InfoCard, LandingBox } from ".";
+import { H1 } from "../header";
+import { P } from "../paragraph";
+import { Button } from "../button";
+import { Flex, Box } from "@chakra-ui/core";
+
+<Meta
+  title="Components/Container"
+  decorators={[ThemeDecorator]}
+  component={InfoCard}
+/>
+
+# Containers
+
+## Info Cards
+
+Info Cards can be used to create a call-to-action or content emphasis zone on a page. Cards are used to bring information forward on the page.
+
+The width of the card is controlled by the `columns` property. Refer to the [`<Layout>`](?path=/docs/layout--columns) component for explanation on the column layout.
+
+<Preview>
+  <Story name="Info Card">
+    <InfoCard
+      bg="gray.200"
+      color="black"
+      borderColor="gray.400"
+      spacing={6}
+      columns={{ base: 4 / 12 }}
+    >
+      <H1 mb={6}>Card heading</H1>
+      <P>Card body</P>
+    </InfoCard>
+  </Story>
+</Preview>
+
+<Props of={InfoCard} />
+
+## Box
+
+<Story name="Box">
+  <Box p={1} border="1px" minH="200px" borderColor="blue.300" bg="blue.100">
+    Box
+  </Box>
+</Story>

f2/src/components/layout/index.js

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types'
 import { Container } from '../container'
 import { Flex, Stack } from '@chakra-ui/core'
 
-export const Layout = ({ fluid, columns, noEffect, ...props }) => {
+export const Layout = props => {
   // scroll to the top of the page when this Layout renders
   useEffect(() => {
     window.scrollTo(0, 0)
   })
 
   return (
     <Container
-      {...(fluid
+      {...(props.fluid
         ? { w: '100%' }
         : {
             maxW: { sm: 540, md: 768, lg: 960, xl: 1200 },
@@ -22,17 +22,29 @@ export const Layout = ({ fluid, columns, noEffect, ...props }) => {
       {...props}
     >
       <Row>
-        <Column columns={columns}>{props.children}</Column>
+        <Column columns={props.columns}>{props.children}</Column>
       </Row>
     </Container>
   )
 }
 
-export const Column = ({ columns, ...props }) => {
+Layout.propTypes = {
+  fluid: PropTypes.bool,
+  columns: PropTypes.any,
+  noEffect: PropTypes.bool,
+}
+
+Layout.defaultProps = {
+  noEffect: false,
+  fluid: false,
+  columns: { base: 1 },
+}
+
+export const Column = props => {
   const col = {}
   //Turn fractions into %
-  Object.keys(columns).map(key => {
-    return (col[key] = columns[key] * 100 + '%')
+  Object.keys(props.columns).map(key => {
+    return (col[key] = props.columns[key] * 100 + '%')
   })
 
   // Keep width and mx after props to prevent them being overwritten
@@ -44,6 +56,7 @@ export const Column = ({ columns, ...props }) => {
       flexBasis={col}
       maxW={col}
       px={2}
+      {...props}
     >
       {props.children}
     </Stack>
@@ -58,17 +71,6 @@ export const Row = props => {
   )
 }
 
-Layout.propTypes = {
-  fluid: PropTypes.bool,
-  columns: PropTypes.any,
-}
-
-Layout.defaultProps = {
-  noEffect: false,
-  fluid: false,
-  columns: { base: 1 },
-}
-
 Column.defaultProps = {
   columns: { base: 1 },
 }

f2/src/components/layout/layout.stories.mdx

@@ -0,0 +1,124 @@
+import { Meta, Story, Props, Preview } from "@storybook/addon-docs/blocks";
+import ThemeDecorator from "../../../.storybook/themeDecorator";
+import { Layout, Row, Column } from ".";
+import { Box } from "@chakra-ui/core";
+
+<Meta title="Layout" decorators={[ThemeDecorator]} component={Layout} />
+
+# Layout
+
+The `<Layout>` component is used to control the layout of the pages. We are mainly using a single column layout, so the components is built for this specific task. You can also manually create multi-column layouts by leveraging the `<Row>` and `<Column>` components
+
+## Layout
+
+Layouts are a quick and easy way to create a single column layout. All children will be stacked in a single column. Use the `columns` property to set the layout's main column.
+
+<Preview>
+  <Story name="Layout">
+    <Layout columns={{ base: 8 / 12 }}>
+      <Box p={1} border="1px" borderColor="blue.300" bg="blue.100">
+        8 / 12
+      </Box>
+      <Box p={1} border="1px" borderColor="blue.300" bg="blue.100">
+        Children of layout
+      </Box>
+      <Box p={1} border="1px" borderColor="blue.300" bg="blue.100">
+        will stack
+      </Box>
+    </Layout>
+  </Story>
+</Preview>
+
+<Props of={Layout} />
+
+## Rows
+
+Rows will create a container in which you can place columns. When placing columns ion rows, they will automatically float in the
+
+## Columns
+
+Columns are expressed through fractions. The fractions are converted into percetages, therefroe the fractions you see in the code is just an easy way to remember how many columns your layout should occupy. Different breakpoints have different number of columns.
+
+<Story name="Columns">
+  <Row mb={4}>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+    <Column columns={{ base: 1 / 12 }}>
+      <Story id="components-container--box" />
+    </Column>
+  </Row>
+</Story>
+
+If a column does not fit, it will wrap to the next row. Rows do not have vertical spacing.
+
+<Preview>
+  <Story name="Columns Fractions">
+    <Row mb={4}>
+      <Column columns={{ base: 1 / 12 }}>
+        <Story id="components-container--box" />
+      </Column>
+      <Column columns={{ base: 2 / 12 }}>
+        <Story id="components-container--box" />
+      </Column>
+      <Column columns={{ base: 3 / 12 }}>
+        <Story id="components-container--box" />
+      </Column>
+      <Column columns={{ base: 4 / 12 }}>
+        <Story id="components-container--box" />
+      </Column>
+      <Column columns={{ base: 5 / 12 }}>
+        <Story id="components-container--box" />
+      </Column>
+    </Row>
+  </Story>
+</Preview>
+
+---
+
+### Responsive columns
+
+To create responsive layouts, place breakpoints in the columns property. Notice that our layouts have a different column denominator based on the breakpoints. You don't need to specify all breakpoints. The columns values will apply a min-width media query. This means if a layout is only specified as `base`, it will apply to all breakpoints and up.
+
+<Preview>
+  <Story name="Responsive columns">
+    <Row>
+      <Column columns={{ base: 1 / 4, md: 2 / 8, lg: 3 / 12 }}>
+        <Story id="components-container--box" />
+      </Column>
+      <Column columns={{ base: 1 / 4, md: 3 / 8, lg: 3 / 12 }}>
+        <Story id="components-container--box" />
+      </Column>
+    </Row>
+  </Story>
+</Preview>