diff --git a/f2/.storybook/theme.js b/f2/.storybook/theme.js
index 70ea9f1df..2f619fa84 100644
--- a/f2/.storybook/theme.js
+++ b/f2/.storybook/theme.js
@@ -31,6 +31,6 @@ export default create({
inputTextColor: 'black',
inputBorderRadius: 4,
- brandTitle: 'Canada',
+ brandTitle: 'Canada.ca React',
brandUrl: '/',
})
diff --git a/f2/src/__stories__/Start.stories.mdx b/f2/src/__stories__/Start.stories.mdx
index d15b956d0..344a4ce1c 100644
--- a/f2/src/__stories__/Start.stories.mdx
+++ b/f2/src/__stories__/Start.stories.mdx
@@ -1,7 +1,90 @@
-import { Meta } from '@storybook/addon-docs/blocks'
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
+import ThemeDecorator from '../../.storybook/themeDecorator'
+import { Code } from '@chakra-ui/core'
-
+
-# Start
+# Getting started
-This documentation is meant to help build and modify pages.
+This documentation is meant to help build and modify pages and forms.
+
+---
+
+# Reading Stories
+
+You can access any documented component from the sidebar. Storybook is consisted of multiple `Stories`, which each correspond to a component or one of its variations.
+
+Each Story also lets you view a code preview showing how to use the component in code. You can copy it from there as well as a properties table when applicable. Shows property name, possible values and types, and default values when applicable.
+
+## Component variations
+
+If a component is missing, it has not been documented. You can create a Github issue to request that someone document the missing component, or you can create the documentation in your own branch.
+
+## Component views
+
+Each component proposes two alternate views: Canvas or Docs. These are accessible from the top navigation bar.
+
+The Canvas view lets you view a component on its own. This view also gives access to the addons panel at the bottom of the page.
+
+The Docs view provides more context for a component. It can be automagically generated or written in MDX (Markdown + JSX)
+
+---
+
+# Writing Stories
+
+Stories should be written in [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/). CSF Can be written in JSX. Stories written in JSX will automagically generate a Docs page.
+
+## MDX
+
+To start with MDX stories, you need a few basic imports.
+
+```jsx
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
+import ThemeDecorator from '../../../.storybook/themeDecorator'
+```
+
+Then add a Meta tag containing the title of your story. This title will display in the sidebar. add a decorator property to wrap your component in the ``. If you forget this step, you'll likely end up with funky looking stories.
+
+```jsx
+
+```
+
+Then you can write your story by alternating between Markdown syntax and JSX syntax. To add a component block, just use `` and ``. Every story should have a unique name.
+
+```jsx
+//With a code block
+
+
+
+
+
+
+//Without a code block
+
+
+
+```
+
+## JS
+
+Writing stories in JSX is very similar. You start with different imports.
+
+```jsx
+import React from 'react'
+import ThemeDecorator from '../../../.storybook/themeDecorator'
+```
+
+Then you need to export a story. This is similar to the MDX `` element
+
+```jsx
+export default {
+ title: 'Components/Button',
+ decorators: [ThemeDecorator],
+}
+```
+
+For each component variation, you want to export a unique story
+
+```jsx
+export const story = () =>
+```
diff --git a/f2/src/components/button/Button.stories.js b/f2/src/components/button/Button.stories.js
index 1ab6e550a..59da8105b 100644
--- a/f2/src/components/button/Button.stories.js
+++ b/f2/src/components/button/Button.stories.js
@@ -1,62 +1,52 @@
import React from 'react'
import ThemeDecorator from '../../../.storybook/themeDecorator'
-import { jsxDecorator } from 'storybook-addon-jsx'
-import { withKnobs, text, select } from '@storybook/addon-knobs'
import { Button } from '.'
import { NextAndCancelButtons } from '../next-and-cancel-buttons'
+import { Stack } from '@chakra-ui/core'
export default {
title: 'Components/Button',
- decorators: [jsxDecorator, ThemeDecorator, withKnobs],
-}
-
-const variantColors = {
- Green: 'green',
- Blue: 'blue',
- Red: 'red',
- Gray: 'gray',
- Black: 'black',
-}
-const variants = {
- Solid: 'solid',
- Ghost: 'ghost',
- Outline: 'outline',
- Link: 'link',
-}
-
-const icon = {
- After: {
- rightIcon: 'chevron-right',
- },
- Before: {
- leftIcon: 'attachment',
- },
- None: null,
+ decorators: [ThemeDecorator],
}
export const textButton = () => (
-