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

var React = require('react');
var LoginForm = require('ligo/components/LoginForm');
var Header = require('ligo/components/Header');
var Menu = require('ligo/components/Menu');
var Donut = require('ligo/components/Donut');
var SearchIcon = require('ligo/components/icons/Search');
var Logo = require('../Logo');

var PatternsHeader = React.createClass({
  render: function () {
    return (
      <header>
      <h1>Patterns</h1>

      <p>Interaction design patterns are task driven workflows commonly
      used throughout a user interface.  Designers and developers should
      follow the design pattern guidance in order to create consistent user
      experiences across the product suite. Once a user is familiar with
      the design patterns of your application they will come to expect the
      same experience for the same tasks in other applications.</p>
      </header>
    );
  }
});

var PatternsSection = React.createClass({
  render: function () {

    var genericSeries = [
      {label: 'Used', value: 10, units: 'TB'},
      {label: 'Available', value: 20, units: 'TB'}
    ];

    var statusSeries = [
      {label: 'Critical', value: 10, accentIndex: 'critical'},
      {label: 'Warning', value: 20, accentIndex: 'warning'},
      {label: 'OK', value: 70, accentIndex: 'ok'}
    ];

    return (
      <div>
  <section>
    <h2>Login</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam risus,
    fermentum at nisl pellentesque, iaculis mattis nisl. Duis dapibus.
    <a href="#/styleguide/login">Read more</a></p>

    <div className="example">
      <LoginForm rememberMe={true} forgotPassword={<a><PASSWORD>?</a>} />
    </div>

  </section>

  <section>
    <h2>Header</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam risus,
    fermentum at nisl pellentesque, iaculis mattis nisl. Duis dapibus.
    <a href="#/styleguide/header">Read more</a></p>

    <div className="example">
      <Header>
        <Logo />
        <h1>Title</h1>
        <Menu direction="left">
          <span>icon</span>
        </Menu>
      </Header>
    </div><commit_msg>use Gravatar in Patterns Header example<commit_after>// (C) Copyright 2014-2015 Hewlett-Packard Development Company, L.P.

var React = require('react');
var LoginForm = require('ligo/components/LoginForm');
var Header = require('ligo/components/Header');
var Menu = require('ligo/components/Menu');
var Donut = require('ligo/components/Donut');
var SearchIcon = require('ligo/components/icons/Search');
var Logo = require('../Logo');
var Gravatar = require('react-gravatar');

var PatternsHeader = React.createClass({
  render: function () {
    return (
      <header>
      <h1>Patterns</h1>

      <p>Interaction design patterns are task driven workflows commonly
      used throughout a user interface.  Designers and developers should
      follow the design pattern guidance in order to create consistent user
      experiences across the product suite. Once a user is familiar with
      the design patterns of your application they will come to expect the
      same experience for the same tasks in other applications.</p>
      </header>
    );
  }
});

var PatternsSection = React.createClass({
  render: function () {

    var genericSeries = [
      {label: 'Used', value: 10, units: 'TB'},
      {label: 'Available', value: 20, units: 'TB'}
    ];

    var statusSeries = [
      {label: 'Critical', value: 10, accentIndex: 'critical'},
      {label: 'Warning', value: 20, accentIndex: 'warning'},
      {label: 'OK', value: 70, accentIndex: 'ok'}
    ];

    return (
      <div>
  <section>
    <h2>Login</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam risus,
    fermentum at nisl pellentesque, iaculis mattis nisl. Duis dapibus.
    <a href="#/styleguide/login">Read more</a></p>

    <div className="example">
      <LoginForm rememberMe={true} forgotPassword={<a><PASSWORD>?</a>} />
    </div>

  </section>

  <section>
    <h2>Header</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam risus,
    fermentum at nisl pellentesque, iaculis mattis nisl. Duis dapibus.
    <a href="#/styleguide/header">Read more</a></p>

    <div className="example">
      <Header>
        <h1><Logo /> Title</h1>
        <Menu direction="left">
          <Gravatar email={'<EMAIL>'} size={48} />
        </Menu>
      </Header>
    </div>
{'fraction_non_alphanumeric': 0.13544668587896252, 'fraction_numerical': 0.011970738195522057, 'mean_word_length': 3.1700554528650646, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 81, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3723553', 'n_tokens_mistral': 1474, 'n_tokens_neox': 1402, 'n_words': 423}