import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { {{upperCamelCase componentName}} } from './{{dashCase componentName}}.component';
import { FlowPropsTable, ExternalReferenceLink } from '{{relativeToSrc path }}../utils/storybook/docs-support';

<Meta title="{{upperCamelCase componentName}}" component={ {{upperCamelCase componentName}} } />

# {{titleCase componentName}}

Description of your component.

## Stories

### Default

<Canvas>
  <Story id="{{toStoryIdPrefix componentName}}--default" />
</Canvas>

## Supported Property Mixins

{{#block}}
Spacing:

<Canvas>
  <Story id="{{toStoryIdPrefix componentName}}--mixins-spacing" />
</Canvas>
{{/block}}

{{#container}}
Stacking:

<Canvas>
  <Story id="{{toStoryIdPrefix componentName}}--mixins-stacked" />
</Canvas>
{{/container}}

{{#fluid}}
Stackee:

<Canvas>
  <Story id="{{toStoryIdPrefix componentName}}--mixins-stackee" />
</Canvas>
{{/fluid}}

## Props

<FlowPropsTable ofComponent={ {{upperCamelCase componentName}} } />

## External Reference

<ExternalReferenceLink
  src=""
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/{{ path }}/{{dashCase componentName}}"
  type="github"
/>