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

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

stories.add('default', () => (
  <Section bgColor="gray">
    <FractionalGrid>
      <Article bgColor="white">1<sup>st</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('one column on multiple lines', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="1">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('one narrow column on a single line', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="1" narrow>
      <Article bgColor="white">1st</Article>
    </FractionalGrid>
  </Section>
))

stories.add('two columns on a single line', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="2">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('two columns on multiple lines', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="2">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
      <Article bgColor="white">4<sup>th</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('three columns on a single line', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="3">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
    </FractionalGrid>
  </Section>
))
stories.add('three columns on a single line not wrapping tablet', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="3ns">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('three columns on multiple lines with default justify', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="3">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
      <Article bgColor="white">4<sup>th</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('three columns on multiple lines with justify to start', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="3" justifyContent="start">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
      <Article bgColor="white">4<sup>th</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('three columns on multiple lines with justify to center', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="3" justifyContent="center">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
      <Article bgColor="white">4<sup>th</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('three columns on multiple lines with justify to end', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="3" justifyContent="end">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
      <Article bgColor="white">4<sup>th</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('four columns on a single line', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="4">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
      <Article bgColor="white">4<sup>th</sup></Article>
    </FractionalGrid>
  </Section>
))

stories.add('four columns on multiple lines', () => (
  <Section bgColor="gray">
    <FractionalGrid fractor="4">
      <Article bgColor="white">1<sup>st</sup></Article>
      <Article bgColor="white">2<sup>nd</sup></Article>
      <Article bgColor="white">3<sup>rd</sup></Article>
      <Article bgColor="white">4<sup>th</sup></Article>
      <Article bgColor="white">5<sup>th</sup></Article>
      <Article bgColor="white">6<sup>th</sup></Article>
      <Article bgColor="white">7<sup>th</sup></Article>
      <Article bgColor="white">8<sup>th</sup></Article>
    </FractionalGrid>
  </Section>
))

export default stories