added getting started page to storybook

f2/.storybook/theme.js

@@ -31,6 +31,6 @@ export default create({
   inputTextColor: 'black',
   inputBorderRadius: 4,
 
-  brandTitle: 'Canada',
+  brandTitle: 'Canada.ca React',
   brandUrl: '/',
 })

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'
 
-<Meta title="1- Start" />
+<Meta id="1-start" title="Getting started" decorators={[ThemeDecorator]} />
 
-# 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 `<ThemeProvider>`. If you forget this step, you'll likely end up with funky looking stories.
+
+```jsx
+<Meta title="Title of your story" decorators={[ThemeDecorator]} />
+```
+
+Then you can write your story by alternating between Markdown syntax and JSX syntax. To add a component block, just use `<Preview>` and `<Story>`. Every story should have a unique name.
+
+```jsx
+//With a code block
+<Preview>
+  <Story name="Story">
+    <Component/>
+  </Story>
+</Preview>
+
+//Without a code block
+<Story name="Another Story">
+  <Component/>
+</Story>
+```
+
+## 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 `<Meta>` element
+
+```jsx
+export default {
+  title: 'Components/Button',
+  decorators: [ThemeDecorator],
+}
+```
+
+For each component variation, you want to export a unique story
+
+```jsx
+export const story = () => <Component />
+```

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 = () => (
-  <Button
-    variantColor={select('Variant Color', variantColors, 'green')}
-    variant={select('Variant', variants, 'solid')}
-  >
-    {text('Button text', 'Button')}
+  <Button variantColor="green" variant="solid">
+    Button
   </Button>
 )
 
 export const withIcon = () => (
-  <Button
-    variantColor={select('Variant Color', variantColors, 'green')}
-    variant={select('Variant', variants, 'solid')}
-    {...select('Icon', icon, icon.After)}
-  >
-    {text('Button text', 'Button')}
-  </Button>
+  <Stack spacing={4} direction="row">
+    <Button variantColor="green" variant="solid" rightIcon="chevron-right">
+      Start
+    </Button>
+    <Button variantColor="blue" variant="solid" leftIcon="attachment">
+      Add File
+    </Button>
+  </Stack>
+)
+
+export const variantColor = () => (
+  <Stack spacing={4} direction="row">
+    <Button variantColor="green" variant="solid">
+      Continue
+    </Button>
+    <Button variantColor="blue" variant="solid">
+      Primary
+    </Button>
+    <Button variantColor="gray" variant="solid">
+      Secondary
+    </Button>
+    <Button variantColor="black" variant="solid">
+      Call to action
+    </Button>
+    <Button variantColor="red" variant="solid">
+      Danger
+    </Button>
+  </Stack>
 )
 
 export const nextAndCancelButtons = () => (
-  <NextAndCancelButtons
-    button={text('Next Button Text', 'Continue')}
-    cancelRoute="/"
-  />
+  <NextAndCancelButtons button="Continue" cancelRoute="/" />
 )

f2/src/components/checkbox/checkbox.stories.mdx

@@ -1,74 +1,70 @@
 import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks'
-import LinkTo from '@storybook/addon-links/react';
+import LinkTo from '@storybook/addon-links/react'
 import ThemeDecorator from '../../../.storybook/themeDecorator'
 import FormDecorator from '../../../.storybook/formDecorator'
-import { withKnobs, boolean, text } from '@storybook/addon-knobs'
 import { CheckboxAdapter } from '.'
 import { Text } from '../text'
 import { Field } from '../Field'
 
 <Meta
   title="Components/Checkbox"
-  component={CheckboxAdapter}
-  decorators={[ThemeDecorator, FormDecorator, withKnobs]}
+  decorators={[ThemeDecorator, FormDecorator]}
 />
 
 # Checkboxes
 
 CheckboxAdapter are aware of their state. They will check themselves based on current state value. You can however set `defaultIsChecked` to true to set its initial value
 
 <Preview>
-<Story name="Checkbox">
-  <CheckboxAdapter name="checkbox" defaultIsChecked={true} >
-    You agree to the terms
-  </CheckboxAdapter>
-</Story>
+  <Story name="Checkbox">
+    <CheckboxAdapter name="checkbox" defaultIsChecked={true}>
+      You agree to the terms
+    </CheckboxAdapter>
+  </Story>
 </Preview>
 
+## Props 
+
 <Props of={CheckboxAdapter} />
 
 ## Progressive disclosure
 
 Anything can be passed in `conditionalField`. It will be displayed if the parent checkbox's value is true
+
 <Preview>
-<Story name="Conditional">
-  <CheckboxAdapter
-    name="withConditional"
-    isChecked={false}
-    conditionalField={text('Conditional Value', 'Yes you do!')}
-  >
-    {text('Label', 'You agree to the terms')}
-  </CheckboxAdapter>
-</Story>
+  <Story name="Conditional">
+    <CheckboxAdapter
+      name="withConditional"
+      isChecked={false}
+      conditionalField="Yes you do!"
+    >
+      You agree to the terms
+    </CheckboxAdapter>
+  </Story>
 </Preview>
 
 It is useful to pass in conditional fields. Refer to [Field](?path=/docs/field--input)
 
 <Preview>
-<Story name="Conditional Field">
-  <CheckboxAdapter
-    name="withConditional"
-    isChecked={false}
-    conditionalField={<Field name="condition" label="Are you sure?" />}
-  >
-    {text('Label', 'You agree to the terms')}
-  </CheckboxAdapter>
-</Story>
+  <Story name="Conditional Field">
+    <CheckboxAdapter 
+    name="withConditional" 
+    isChecked={false} 
+    conditionalField={<Field name="condition" label="Describe how it started." helperText="For example: It came from an advertisement, a pop-up window, or some other way." />} >
+      Other
+    </CheckboxAdapter>
+  </Story>
 </Preview>
 
-
 To add a description, just use a `<Text>` Component with some styling.
+
 <Preview>
-<Story name="With Description">
-  <CheckboxAdapter name="withConditional" isChecked={false}>
-    {text('Label', 'Devices and accounts')}
-    <Text as="span" d="block" fontSize="sm">
-      {text(
-        'Details',
-        'For example: iPhone 7, social media accounts, wireless network',
-      )}
-    </Text>
-  </CheckboxAdapter>
-</Story>
+  <Story name="With Description">
+    <CheckboxAdapter name="withConditional" isChecked={false}>
+      Devices and accounts
+      <Text as="span" d="block" fontSize="sm">
+        For example: iPhone 7, social media accounts, wireless network
+      </Text>
+    </CheckboxAdapter>
+  </Story>
 </Preview>
-