import { boolean, select } from '@storybook/addon-knobs';
import * as React from 'react';
import Stack from '.';
import ButtonGroup from '../ButtonGroup';
import Button from '../../Button/index';
import { Heading, Text } from '../../Text/index';

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

export const index = () => (
  <Stack
    gap={select(
      'Gap',
      {
        none: 'none',
        xsmall: 'xsmall',
        small: 'small',
        medium: 'medium',
        large: 'large',
      },
      'medium',
    )}
    dividers={boolean('Dividers', false)}
  >
    <Heading>Heading</Heading>
    <Text>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, vel ducimus. Doloremque
      possimus, veniam quam repellat mollitia consectetur libero nemo, repudiandae dicta sapiente
      optio facere similique officia beatae reiciendis consequuntur!
    </Text>
    <ButtonGroup>
      <Button>Button</Button>
      <Button appearance="secondary">Button</Button>
    </ButtonGroup>
  </Stack>
);