<commit_before>// (C) Copyright 2014-2015 Hewlett-Packard Development Company, L.P.

var React = require('react');
var Tiles = require('grommet/components/Tiles');
var Tile = require('grommet/components/Tile');
var Header = require('grommet/components/Header');
var Footer = require('grommet/components/Footer');
var Menu = require('grommet/components/Menu');
var Edit = require('grommet/components/icons/Edit');
var GrommetDocument = require('grommet/components/Document');

var TileDoc = React.createClass({

  render: function() {
    var inline =
      "<Tiles>\n" +
      "  <Tile>\n" +
      "    <Header>\n" +
      "      ...\n" +
      "    </Header>\n" +
      "    ...\n" +
      "    <Footer>\n" +
      "      ...\n" +
      "    </Footer>\n" +
      "  </Tile>\n" +
      "  ...\n" +
      "</Tiles>";

    var richTiles = [
      <Tile key={1}>
        <Header>
          <h3>First</h3>
        </Header>
        hello
        <Footer>
          <span></span>
          <Menu icon={<Edit/>} align="right" direction="up">
            <a>action-1</a>
            <a>action-2</a>
            <a>action-3</a>
          </Menu>
        </Footer>
      </Tile>
      ,
      <Tile key={2}>
        <Header>
          <h3>Second</h3>
        </Header>
        hello
        <Footer>
          <span></span>
          <Menu icon={<Edit/>} align="right" direction="up">
            <a>action-1</a>
            <a>action-2</a>
            <a>action-3</a>
          </Menu>
        </Footer>
      </Tile>
      ,
      <Tile key={3}>
        <Header>
          <h3>Third</h3>
        </Header>
        hello
        <Footer>
          <span></span>
          <Menu icon={<Edit/>} align="right" direction="up">
            <a>action-1</a>
            <a>action-2</a>
            <a>action-3</a>
          </Menu>
        </Footer>
      </Tile>
    ];

    return (
      <GrommetDocument>
        <header>
          <h1>Tile(s)</h1>
          <p>Lay out equivalently sized tiles of content.</p>

          <pre><code className="html">{inline}</code></pre>
        </header>

        <section>
          <h2>Options</h2>
          <dl>
            <dt><code>fill        true|false</code></dt>
            <dd>Whether the contents expand to fill all of the available space.</dd>
            <dt><code>flush       true|false</code></dt>
            <dd>Whether the contents are flush with the left and right edges or not.
              Defaults to true.</dd>
            <dt><code>small       true|false</code></dt>
            <dd>Smaller sized version.</dd>
          </dl>
        </section>

        <section>
          <h2>Examples</h2>

          <h3>Simple</h3>
          <div className="example">
            <Tiles>
              <Tile>
                First
              </Tile>
              <Tile>
                Second
              </Tile>
              <Tile>
                Third
              </Tile>
            </Tiles>
          </div>
          <pre><code className="html">
            {"<Tiles>\n  <Tile>\n    ...\n  </Tile>\n  ...\n</Tiles>"}
          </code></pre>

          <h3>Headers and Footers</h3>
          <div className="example">
            <Tiles>
              {richTiles}
            </Tiles>
          </div>
          <pre><code className="html">
            {"<Tiles>\n  <Tile>\n    ...\n  </Tile>\n  ...\n</Tiles>"}
          </code></pre>

          <h3>Fill</h3>
          <div className="example">
            <Tiles fill={true}>
              {richTiles}
            </Tiles>
          </div>
          <pre><code className="html">
            {"<Tiles fill={true}>\n  ...\n</Tiles>"}
          </code></pre>

        </section>
      </GrommetDocument>
    );
  }
});

module.exports = TileDoc;
<commit_msg>fixed jslint warning in TilesDoc<commit_after>// (C) Copyright 2014-2015 Hewlett-Packard Development Company, L.P.

var React = require('react');
var Tiles = require('grommet/components/Tiles');
var Tile = require('grommet/components/Tile');
var Header = require('grommet/components/Header');
var Footer = require('grommet/components/Footer');
var Menu = require('grommet/components/Menu');
var Edit = require('grommet/components/icons/Edit');
var GrommetDocument = require('grommet/components/Document');

var TileDoc = React.createClass({

  render: function() {
    var inline =
      "<Tiles>\n" +
      "  <Tile>\n" +
      "    <Header>\n" +
      "      ...\n" +
      "    </Header>\n" +
      "    ...\n" +
      "    <Footer>\n" +
      "      ...\n" +
      "    </Footer>\n" +
      "  </Tile>\n" +
      "  ...\n" +
      "</Tiles>";

    var richTiles = [
      (<Tile key={1}>
        <Header>
          <h3>First</h3>
        </Header>
        hello
        <Footer>
          <span></span>
          <Menu icon={<Edit/>} align="right" direction="up">
            <a>action-1</a>
            <a>action-2</a>
            <a>action-3</a>
          </Menu>
        </Footer>
      </Tile>),
      (<Tile key={2}>
        <Header>
          <h3>Second</h3>
        </Header>
        hello
        <Footer>
          <span></span>
          <Menu icon={<Edit/>} align="right" direction="up">
            <a>action-1</a>
            <a>action-2</a>
            <a>action-3</a>
          </Menu>
        </Footer>
      </Tile>),
      (<Tile key={3}>
        <Header>
          <h3>Third</h3>
        </Header>
        hello
        <Footer>
          <span></span>
          <Menu icon={<Edit/>} align="right" direction="up">
            <a>action-1</a>
            <a>action-2</a>
            <a>action-3</a>
          </Menu>
        </Footer>
      </Tile>)
    ];

    return (
      <GrommetDocument>
        <header>
          <h1>Tile(s)</h1>
          <p>Lay out equivalently sized tiles of content.</p>

          <pre><code className="html">{inline}</code></pre>
        </header>

        <section>
          <h2>Options</h2>
          <dl>
            <dt><code>fill        true|false</code></dt>
            <dd>Whether the contents expand to fill all of the available space.</dd>
            <dt><code>flush       true|false</code></dt>
            <dd>Whether the contents are flush with the left and right edges or not.
              Defaults to true.</dd>
            <dt><code>small       true|false</code></dt>
            <dd>Smaller sized version.</dd>
          </dl>
        </section>

        <section>
          <h2>Examples</h2>

          <h3>Simple</h3>
          <div className="example">
            <Tiles>
              <Tile>
                First
              </Tile>
              <Tile>
                Second
              </Tile>
              <Tile>
                Third
              </Tile>
            </Tiles>
          </div>
          <pre><code className="html">
            {"<Tiles>\n  <Tile>\n    ...\n  </Tile>\n  ...\n</Tiles>"}
          </code></pre>

          <h3>Headers and Footers</h3>
          <div className="example">
            <Tiles>
              {richTiles}
            </Tiles>
          </div>
          <pre><code className="html">
            {"<Tiles>\n  <Tile>\n    ...\n  </Tile>\n  ...\n</Tiles>"}
          </code></pre>

          <h3>Fill</h3>
          <div className="example">
            <Tiles fill={true}>
              {richTiles}
            </Tiles>
          </div>
          <pre><code className="html">
            {"<Tiles fill={true}>\n  ...\n</Tiles>"}
          </code></pre>

        </section>
      </GrommetDocument>
    );
  }
});

module.exports = TileDoc;

{'fraction_non_alphanumeric': 0.17735298022036372, 'fraction_numerical': 0.010088941988583566, 'mean_word_length': 1.3217257318952234, 'pattern_counts': {'":': 0, '<': 305, '<?xml version=': 0, '>': 305, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6977741', 'n_tokens_mistral': 2456, 'n_tokens_neox': 2372, 'n_words': 448}