import { Meta, Canvas, Story } from '@storybook/addon-docs'

<Meta
  title='Base Styles/Grid'
  parameters={{
    viewMode: 'docs',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/jtsOPNk1k4cWnumzkZgclD/Ripple-2.0-PoC?node-id=1286%3A17345',
    },
  }}
  decorators={[
    () => ({
      template: '<div class="rpl-storybook__grid"><story /></div>'
    }),
  ]}
/>

# Grid

## Column classes

### XS (0+) / Default
<Canvas>
  <Story name="Grid/Columns/XS - Default">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-12">Span 12</div>
      <div class="rpl-col-6">Span 6</div>
      <div class="rpl-col-6">Span 6</div>
    </div>
` }}}
  </Story>
</Canvas>

### S (576+)
<Canvas>
  <Story name="Grid/Columns/S">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-12-s">Span 12 - S</div>
      <div class="rpl-col-6-s">Span 6 - S</div>
      <div class="rpl-col-6-s">Span 6 - S</div>
      <div class="rpl-col-4-s">Span 4 - S</div>
      <div class="rpl-col-4-s">Span 4 - S</div>
      <div class="rpl-col-4-s">Span 4 - S</div>
      <div class="rpl-col-7-s">Span 7 - S</div>
      <div class="rpl-col-4-s  rpl-col-start-9-s">Span 4 - S, Start at 9 - S</div>
    </div>
` }}}
  </Story>
</Canvas>

### M (768+)
<Canvas>
  <Story name="Grid/Columns/M">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-12-m">Span 12 - M</div>
      <div class="rpl-col-6-m">Span 6 - M</div>
      <div class="rpl-col-6-m">Span 6 - M</div>
      <div class="rpl-col-4-m">Span 4 - M</div>
      <div class="rpl-col-4-m">Span 4 - M</div>
      <div class="rpl-col-4-m">Span 4 - M</div>
      <div class="rpl-col-7-m">Span 7 - M</div>
      <div class="rpl-col-4-m  rpl-col-start-9-m">Span 4 - M, Start at 9 - M</div>
    </div>
` }}}
  </Story>
</Canvas>

### L (992+)
<Canvas>
  <Story name="Grid/Columns/L">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-12-l">Span 12 - L</div>
      <div class="rpl-col-6-l">Span 6 - L</div>
      <div class="rpl-col-6-l">Span 6 - L</div>
      <div class="rpl-col-4-l">Span 4 - L</div>
      <div class="rpl-col-4-l">Span 4 - L</div>
      <div class="rpl-col-4-l">Span 4 - L</div>
      <div class="rpl-col-3-l">Span 3 - L</div>
      <div class="rpl-col-3-l">Span 3 - L</div>
      <div class="rpl-col-3-l">Span 3 - L</div>
      <div class="rpl-col-3-l">Span 3 - L</div>
      <div class="rpl-col-7-l">Span 7 - L</div>
      <div class="rpl-col-4-l  rpl-col-start-9-l">Span 4 - L, Start at 9 - L</div>
    </div>
` }}}
  </Story>
</Canvas>

### XL (1200+)
<Canvas>
  <Story name="Grid/Columns/XL">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-12-xl">Span 12 - XL</div>
      <div class="rpl-col-6-xl">Span 6 - XL</div>
      <div class="rpl-col-6-xl">Span 6 - XL</div>
      <div class="rpl-col-4-xl">Span 4 - XL</div>
      <div class="rpl-col-4-xl">Span 4 - XL</div>
      <div class="rpl-col-4-xl">Span 4 - XL</div>
      <div class="rpl-col-3-xl">Span 3 - XL</div>
      <div class="rpl-col-3-xl">Span 3 - XL</div>
      <div class="rpl-col-3-xl">Span 3 - XL</div>
      <div class="rpl-col-3-xl">Span 3 - XL</div>
      <div class="rpl-col-7-xl">Span 7 - XL</div>
      <div class="rpl-col-4-xl  rpl-col-start-9-xl">Span 4 - XL, Start at 9 - XL</div>
    </div>
` }}}
  </Story>
</Canvas>

## Example (simple)
<Canvas>
  <Story name="Grid/Example/Simple">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-12  rpl-col-6-m  rpl-col-3-l">Span 12 / 6 (M) / 3 (L)</div>
    </div>
` }}}
  </Story>
</Canvas>


## Example layout
<Canvas>
  <Story name="Grid/Example/Layout">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-12"><u>Header</u></div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-12  rpl-col-7-m  rpl-col-start-1-m">
        <p>
          Body content - Lorem ipsum dolor sit amet, consectetur adipiscing
          elit. Morbi rutrum id erat sed facilisis. Vestibulum sollicitudin nibh
          sit amet molestie consectetur. Proin rhoncus ultrices mauris, at
          egestas erat gravida quis. Curabitur laoreet, lectus non aliquet
          molestie, felis neque viverra magna, vitae cursus dui ante eu nisl.
        </p>
      </div>
      <div class="rpl-col-12  rpl-col-4-m  rpl-col-start-9-m">Side menu</div>
    </div>
` }}}
  </Story>
</Canvas>

## Modifiers

### No row gaps
<Canvas>
  <Story name="Grid/Modifiers/No row gap">
    {() => { return { template: `
    <div class="rpl-grid  rpl-grid--no-row-gap">
      <div class="rpl-col-12"><u>Header</u></div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-6  rpl-col-4-m  rpl-col-3-l">Menu item</div>
      <div class="rpl-col-12  rpl-col-7-m  rpl-col-start-1-m">
        <p>
          Body content - Lorem ipsum dolor sit amet, consectetur adipiscing
          elit. Morbi rutrum id erat sed facilisis. Vestibulum sollicitudin nibh
          sit amet molestie consectetur. Proin rhoncus ultrices mauris, at
          egestas erat gravida quis. Curabitur laoreet, lectus non aliquet
          molestie, felis neque viverra magna, vitae cursus dui ante eu nisl.
        </p>
      </div>
      <div class="rpl-col-12  rpl-col-4-m  rpl-col-start-9-m">Side menu</div>
    </div>
` }}}
  </Story>
</Canvas>

### Starting column
<Canvas>
  <Story name="Grid/Modifiers/Starting column">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-2  rpl-col-start-1">Start at 1st</div>
      <div class="rpl-col-2  rpl-col-start-2">Start at 2nd</div>
      <div class="rpl-col-2  rpl-col-start-3">Start at 3rd</div>
      <div class="rpl-col-2  rpl-col-start-4">Start at 4th</div>
      <div class="rpl-col-2  rpl-col-start-5">Start at 5th</div>
      <div class="rpl-col-2  rpl-col-start-6">Start at 6th</div>
      <div class="rpl-col-2  rpl-col-start-7">Start at 7th</div>
      <div class="rpl-col-2  rpl-col-start-8">Start at 8th</div>
      <div class="rpl-col-2  rpl-col-start-9">Start at 9th</div>
      <div class="rpl-col-2  rpl-col-start-10">Start at 10th</div>
      <div class="rpl-col-2  rpl-col-start-11">Start at 11th</div>
      <div class="rpl-col-1  rpl-col-start-12">Start at 12th</div>
    </div>
` }}}
  </Story>
</Canvas>

### Nested grids
<Canvas>
  <Story name="Grid/Modifiers/Nested grids">
    {() => { return { template: `
    <div class="rpl-grid">
      <div class="rpl-col-6">
        Parent 6 cols
        <div class="rpl-grid">
          <div class="rpl-col-2">
            Child 2 cols
          </div>
          <div class="rpl-col-3 rpl-col-start-4">
            Child 3 cols (start at 4)
            <div class="rpl-grid">
              <div class="rpl-col-1">
                Child 1 col
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rpl-col-4 rpl-col-start-9">
        Parent 4 cols
        <div class="rpl-grid">
          <div class="rpl-col-2">
            Child 2 cols
          </div>
        </div>
      </div>
    </div>
` }}}
  </Story>
</Canvas>
