import { storiesOf } from '@storybook/react'
import React from 'react'
import { Section, Article } from '@siteone/atoms'
import TwoToOneGrid from './TwoToOneGrid'

const stories = storiesOf('Layouts/TwoToOneGrid', module)

stories.add('default', () => (
  <Section bgColor="gray">
    <TwoToOneGrid>
      <Article bgColor="white">Two</Article>
      <Article bgColor="white">One</Article>
    </TwoToOneGrid>
  </Section>
))

stories.add('reverse', () => (
  <Section bgColor="gray">
    <TwoToOneGrid reverse>
      <Article bgColor="white">One</Article>
      <Article bgColor="white">Two</Article>
    </TwoToOneGrid>
  </Section>
))

export default stories