<commit_before>import React from 'react'
import styled from 'styled-components'
import { storiesOf } from '@storybook/react'

import Wrapper from './Wrapper'
import { Preformatted, Hightlight } from './Icon.stories'
import { Title } from '../src'
import { Row, Cell } from '../src/Grid'

const Block = styled.div`
  height: 50px;
  background: purple;
  border-radius: 3px;
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.5);

  display: flex;
  font-size: .7rem;
  font-family: Nunito Sans;
  font-weight: 300;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
`

storiesOf('Grid', module)
  .add('Default', () => (
    <div>
      <Title.H1>Grid</Title.H1>
      <p>
        <Row>
          <Cell>
            <Block>[1, 2, 3, 4, 6, 12]</Block>
          </Cell>

          <Cell size={[8, 2, 3, 4, 6, 6]}>
            <Block>[8, 2, 3, 4, 6, 6]</Block>
          </Cell>

          <Cell size={[null, null, null, null, null, 6]}>
            <Block>[1, 2, 3, 4, 6, 6]</Block>
          </Cell>

          <Cell size={[2]}>
            <Block>[2, 2, 3, 4, 6, 12]</Block>
          </Cell>
        </Row>
      </p>

      <Preformatted>
        <Hightlight code={
`
import { Row, Cell } from 'bonde-styleguide/Grid'

const Block = styled.div\`
  height: 50px;
  background: purple;
  border-radius: 3px;
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.5);

  font-size: 50px;
  font-weight: bold;
  justify-content: center;
  color: #BBBBBB;
\`

<Row>
  <Cell>
    <Block>[1, 2, 3, 4, 6, 12]</Block>
  </Cell>

  <Cell size={[8, 2, 3, 4, 6, 6]}>
    <Block>[8, 2, 3, 4, 6, 6]</Block>
  </Cell>

  <Cell size={[null, null, null, null, null, 6]}>
    <Block>[1, 2, 3, 4, 6, 6]</Block>
  </Cell>

  <Cell size={[2]}>
    <Block>[2, 2, 3, 4, 6, 12]</Block>
  </Cell>
</Row>`
        } />
      </Preformatted>


      <Title.H2>Cell</Title.H2>

      <Row>
        <Cell size={[8, 2, 3, 4, 6, 6]}>
          <Block>[8, 2, 3, 4, 6, 6]</Block>
        </Cell><commit_msg>docs(bonde-styleguide): grid nested structure [#154769299]<commit_after>import React from 'react'
import styled from 'styled-components'
import { storiesOf } from '@storybook/react'

import Wrapper from './Wrapper'
import { Preformatted, Hightlight } from './Icon.stories'
import { Title } from '../src'
import { Row, Cell } from '../src/Grid'

const Block = styled.div`
  background: purple;
  border-radius: 3px;
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.5);
  padding: 15px 0;
  display: flex;
  font-size: .7rem;
  font-family: Nunito Sans;
  font-weight: 300;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
`

storiesOf('Grid', module)
  .add('Default', () => (
    <div>
      <Title.H1>Grid</Title.H1>
      <p>
        <Row>
          <Cell>
            <Block>[1, 2, 3, 4, 6, 12]</Block>
          </Cell>

          <Cell size={[8, 2, 3, 4, 6, 6]}>
            <Block>[8, 2, 3, 4, 6, 6]</Block>
          </Cell>

          <Cell size={[null, null, null, null, null, 6]}>
            <Block>[1, 2, 3, 4, 6, 6]</Block>
          </Cell>

          <Cell size={[2]}>
            <Block>[2, 2, 3, 4, 6, 12]</Block>
          </Cell>
        </Row>
      </p>

      <Preformatted>
        <Hightlight code={
`import { Row, Cell } from 'bonde-styleguide/Grid'

const Block = styled.div\`
  height: 50px;
  background: purple;
  border-radius: 3px;
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.5);

  font-size: 50px;
  font-weight: bold;
  justify-content: center;
  color: #BBBBBB;
\`

<Row>
  <Cell>
    <Block>[1, 2, 3, 4, 6, 12]</Block>
  </Cell>

  <Cell size={[8, 2, 3, 4, 6, 6]}>
    <Block>[8, 2, 3, 4, 6, 6]</Block>
  </Cell>

  <Cell size={[null, null, null, null, null, 6]}>
    <Block>[1, 2, 3, 4, 6, 6]</Block>
  </Cell>

  <Cell size={[2]}>
    <Block>[2, 2, 3, 4, 6, 12]</Block>
  </Cell>
</Row>`
        } />
      </Preformatted>

      <Title.H1>Nested structure</Title.H1>

      <p>
        The red border is the root row and, the green border is the nested row.
      </p>

      <Row style={{ border: '2px solid red' }}>
        <Cell>
          <Block>1</Block>
        </Cell>
        <Cell size={[8]}>
          <Row style={{ border: '2px dashed green' }}>
            <Cell size={[6]}>
              <Block>8: 6</Block>
            </Cell>
            <Cell size={[3]}>
              <Block>8: 3</Block>
            </Cell>
            <Cell size={[3]}>
              <Block>8: 3</Block>
            </Cell>
          </Row>
        </Cell>
        <Cell size={[3]}>
          <Block>3</Block>
        </Cell>
      </Row>

      <Preformatted>
        <Hightlight code={
`<Row style={{ border: '2px solid red' }}>
  <Cell>
    <Block>1</Block>
  </Cell>
  <Cell size={[8]}>
    <Row style={{ border: '2px dashed green' }}>
      <Cell size={[6]}>
        <Block>8: 6</Block>
      </Cell>
      <Cell size={[3]}>
        <Block>8: 3</Block>
      </Cell>
      <Cell size={[3]}>
        <Block>8: 3</Block>
      </Cell>
    </Row>
  </Cell>
  <Cell size={[3]}>
    <Block>3</Block>
  </Cell>
</Row>`
        } />
      </Preformatted>


      <Title.H2>Cell</Title.H2>

      <Row>
        <Cell size={[8, 2, 3, 4, 6, 6]}>
          <Block>[8, 2, 3, 4, 6, 6]</Block>
        </Cell>
{'fraction_non_alphanumeric': 0.20130618517095658, 'fraction_numerical': 0.051094890510948905, 'mean_word_length': 1.9976971790443292, 'pattern_counts': {'":': 0, '<': 164, '<?xml version=': 0, '>': 166, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3428017', 'n_tokens_mistral': 2250, 'n_tokens_neox': 2015, 'n_words': 527}