// @flow
import React from 'react';
import { FormList } from './form-list.component';
import { Box } from '../../../primitives';
import { Span } from '../../typography';
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: 'Forms/FormList',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const items = [
  <Box spacing={['pr3', 'pl3']}>
    <Span>first item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>second item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>third item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>fourth item</Span>
  </Box>,
  <Box spacing={['pr3', 'pl3']}>
    <Span>fifth item</Span>
  </Box>,
];

export const Default = () => <FormList items={items} />;

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={FormList} items={items.slice(0, 2)} />
);

export const MixinsStackee = () => (
  <StackeeChecker Component={FormList} items={items.slice(0, 2)} />
);
