import React from 'react';
import Flex from './index';
import { DecorativePattern } from 'src/helpers';

export default {
  title: 'Core/Layout/Flex',
  component: Flex
};

const Template = args => (
  <Flex width="100%" justifyContent="stretch" {...args}>
    <Flex direction="column" alignItems="stretch">
      <h6>left</h6>
      <DecorativePattern />
    </Flex>
    <Flex direction="column" alignItems="stretch">
      <h6>right</h6>
      <DecorativePattern />
    </Flex>
  </Flex>
);

export const Default = Template.bind({});
Default.args = {
  alignItems: 'flex-start'
};