diff --git a/f2/src/components/Field/Field.stories.js b/f2/src/components/Field/Field.stories.js
deleted file mode 100644
index 91703bb69..000000000
--- a/f2/src/components/Field/Field.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import ThemeDecorator from '../../../.storybook/themeDecorator'
-import FormDecorator from '../../../.storybook/formDecorator'
-import { withKnobs } from '@storybook/addon-knobs'
-import { Field } from '.'
-import { Input } from '../input'
-import { TextArea } from '../text-area'
-
-export default {
- title: 'Components/Field',
- decorators: [ThemeDecorator, FormDecorator, withKnobs],
- component: Field,
-}
-
-export const input = () => (
-
-)
-
-export const textArea = () => (
-
-)
diff --git a/f2/src/components/Field/Field.stories.mdx b/f2/src/components/Field/Field.stories.mdx
new file mode 100644
index 000000000..4850ae184
--- /dev/null
+++ b/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 '.'
+
+
+
+# Fields
+
+## Input
+
+
+
+
+
+
+
+## Text Area
+
+
+
+
+
+
+
+##Props
+
+
diff --git a/f2/src/components/Field/index.js b/f2/src/components/Field/index.js
index f34fcab23..e8c53912f 100644
--- a/f2/src/components/Field/index.js
+++ b/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}
>
-
- {label}
+
+ {props.label}
- {helperText && {helperText}}
- {errorMessage && (
- {errorMessage}
+ {props.helperText && (
+ {props.helperText}
+ )}
+ {props.errorMessage && (
+ {props.errorMessage}
)}
diff --git a/f2/src/components/container/container.stories.js b/f2/src/components/container/container.stories.js
deleted file mode 100644
index 502514554..000000000
--- a/f2/src/components/container/container.stories.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import ThemeDecorator from '../../../.storybook/themeDecorator'
-import { withKnobs, number, text } from '@storybook/addon-knobs'
-import { InfoCard } from '.'
-import { H1 } from '../header'
-import { P } from '../paragraph'
-
-export default {
- title: 'Components/Container',
- decorators: [ThemeDecorator, withKnobs],
-}
-
-export const infoCard = () => {
- const columns = number('Columns / 12', 6)
- return (
-
- Card heading
-
- Card body
-
- )
-}
diff --git a/f2/src/components/container/container.stories.mdx b/f2/src/components/container/container.stories.mdx
new file mode 100644
index 000000000..8788209cf
--- /dev/null
+++ b/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";
+
+
+
+# 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 [``](?path=/docs/layout--columns) component for explanation on the column layout.
+
+
+
+
+ Card heading
+ Card body
+
+
+
+
+
+
+## Box
+
+
+
+ Box
+
+
diff --git a/f2/src/components/layout/index.js b/f2/src/components/layout/index.js
index fe3c8c17c..053530d06 100644
--- a/f2/src/components/layout/index.js
+++ b/f2/src/components/layout/index.js
@@ -3,7 +3,7 @@ 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)
@@ -11,7 +11,7 @@ export const Layout = ({ fluid, columns, noEffect, ...props }) => {
return (
{
{...props}
>
- {props.children}
+ {props.children}
)
}
-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}
@@ -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 },
}
diff --git a/f2/src/components/layout/layout.stories.mdx b/f2/src/components/layout/layout.stories.mdx
new file mode 100644
index 000000000..371be39e0
--- /dev/null
+++ b/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";
+
+
+
+# Layout
+
+The `` 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 `` and `` 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.
+
+
+
+
+
+ 8 / 12
+
+
+ Children of layout
+
+
+ will stack
+
+
+
+
+
+
+
+## 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+If a column does not fit, it will wrap to the next row. Rows do not have vertical spacing.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+---
+
+### 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.
+
+
+
+
+
+
+
+
+
+
+
+
+