import { select } from '@storybook/addon-knobs';
import * as React from 'react';
import Shelf from '.';
import Button from '../../Button';
import TextLink from '../../TextLink';

export default {
  title: 'Components|Layout/Shelf',
  component: Shelf,
};

export const index = () => (
  <Shelf
    gap={select(
      'Gap',
      {
        none: 'none',
        xxsmall: 'xxsmall',
        xsmall: 'xsmall',
        small: 'small',
        medium: 'medium',
        large: 'large',
      },
      'small',
    )}
    justifyContent={select(
      'JustifyContent',
      {
        'flex-start': 'flex-start',
        'flex-end': 'flex-end',
        'space-around': 'space-around',
        'space-between': 'space-between',
        'space-evenly': 'space-evenly',
        center: 'center',
      },
      'flex-start',
    )}
  >
    <Button>Button</Button>
    <Button appearance="secondary">Button</Button>
    <TextLink>Text link</TextLink>
  </Shelf>
);