// @flow
import React from 'react';
import { {{upperCamelCase componentName}} } from './{{dashCase componentName}}.component';
import type { {{upperCamelCase componentName}}Props } from './{{dashCase componentName}}.proptypes';
{{#block}}
import { MarginChecker } from '{{relativeToSrc path }}mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '{{relativeToSrc path }}mixins/spacing/story-support/padding-checker';
{{/block}}
{{#container}}
import { StackedChecker } from '{{relativeToSrc path }}mixins/stacking/story-support/stacked-checker';
{{/container}}
{{#fluid}}
import { StackeeChecker } from '{{relativeToSrc path }}mixins/stackee/story-support/stackee-checker';
{{/fluid}}
import docs from './{{dashCase componentName}}.mdx';

export default {
  component: {{upperCamelCase componentName}},
  title: '{{upperCamelCase componentName}}',
  parameters: {

    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: {{upperCamelCase componentName}}Props = {
  /* Add default props here */
};

export const Default = () => (
  <{{upperCamelCase componentName}} {...DEFAULT_PROPS} >Hello</{{upperCamelCase componentName}}>
);

{{#block}}
export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={ {{upperCamelCase componentName}} }>Hello</MarginChecker>
    <PaddingChecker Component={ {{upperCamelCase componentName}} }>Hello</PaddingChecker>
  </>
);
{{/block}}

{{#container}}
export const MixinsStacked = () => (
  <StackedChecker Component={ {{upperCamelCase componentName}} }/>
);
{{/container}}

{{#fluid}}
export const MixinsStackee = () => (
  <StackeeChecker Component={ {{upperCamelCase componentName}} }>Hello</StackeeChecker>
);
{{/fluid}}