// @flow
import React from 'react';
import { FormList } from './form-list.component';
import { Box } from '../../../primitives';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';

import docs from './form-list.mdx';

export default {
  component: FormList,
  title: 'Components/Layout Containers/FormList',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => (
  <FormList>
    <Box spacing={['pr3', 'pl3']}>first item</Box>
    <Box spacing={['pr3', 'pl3']}>second item</Box>
    <Box spacing={['pr3', 'pl3']}>third item</Box>
    <Box spacing={['pr3', 'pl3']}>fourth item</Box>
    <Box spacing={['pr3', 'pl3']}>fifth item</Box>
  </FormList>
);

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={FormList}>
    <Box spacing={['pr3', 'pl3']}>first item</Box>
    <Box spacing={['pr3', 'pl3']}>second item</Box>
  </MarginChecker>
);

export const MixinsStackee = () => (
  <StackeeChecker Component={FormList}>
    <Box spacing={['pr3', 'pl3']}>first item</Box>
    <Box spacing={['pr3', 'pl3']}>second item</Box>
  </StackeeChecker>
);
