<commit_before>import React from 'react';
import DocsArticle from '../../DocsArticle';
import Example from '../Example';
import Value from 'grommet/components/Value';
import GlobeIcon from 'grommet/components/icons/base/Globe';
import UpIcon from 'grommet/components/icons/base/LinkUp';

var inline =
      "<Value value={75} />";

var ValueDoc = React.createClass({
  render: function() {
    return (
      <DocsArticle title="Value" colorIndex="neutral-3">

        <p>Value component, focusing on a single number.</p>
        <pre><code className="html hljs xml">{inline}</code></pre>

        <section>
          <h2>Options</h2>
          <dl>
            <dt><code>a11yTitle      {"{string}"}</code></dt>
            <dd>
              Custom title used by screen readers. Default is "Title".
              Only used if onClick handler is specified.
            </dd>
            <dt><code>onClick        {"{func}"}</code></dt>
            <dd>Click handler.</dd>
            <dt><code>responsive     true|false</code></dt>
            <dd>Whether to only display the logo when the display area narrows.</dd>
          </dl>
        </section>

        <section>
          <h2>Examples</h2>

          <Example name="Default" code={
            <Value value={75} />
          } />

          <Example name="Units, Icon, Trend, Label, Color" code={
            <Value value={75} units="%"
              icon={<GlobeIcon colorIndex="neutral-1" />}
              trendIcon={<UpIcon colorIndex="neutral-1" />}
              label="World wide coverage" colorIndex="neutral-1" />
          } />

          <Example name="Large" code={
            <Value value={75} units="%"
              icon={<GlobeIcon size="large" colorIndex="neutral-1" />}
              trendIcon={<UpIcon size="large" colorIndex="neutral-1" />}
              label="World wide coverage" colorIndex="neutral-1" size="large" />
          } />

          <Example name="Small" code={
            <Value value={75} units="%"
              icon={<GlobeIcon />}
              trendIcon={<UpIcon size="small" colorIndex="ok" />}
              label="World wide coverage" size="small" />
          } />
        </section>

      </DocsArticle>
    );
  }
});

module.exports = ValueDoc;<commit_msg>Filled out options for ValueDoc.<commit_after>// (C) Copyright 2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import { Link } from 'react-router';
import DocsArticle from '../../DocsArticle';
import Example from '../Example';
import Value from 'grommet/components/Value';
import GlobeIcon from 'grommet/components/icons/base/Globe';
import UpIcon from 'grommet/components/icons/base/LinkUp';

const inline =
      "<Value value={75} />";

export default class ValueDoc extends Component {
  render () {
    return (
      <DocsArticle title="Value" colorIndex="neutral-3">

        <p>Value component, focusing on a single number.</p>
        <pre><code className="html hljs xml">{inline}</code></pre>

        <section>
          <h2>Options</h2>
          <dl>
            <dt><code>align        start|center|end</code></dt>
            <dd>The horizontal alignment of the label. Defaults
              to <code>center</code>.</dd>
            <dt><code>colorIndex   {"{category}-{index}"}</code></dt>
            <dd>The color identifier to use for the text color.
              For example: <code>"neutral-1"</code></dd>
            <dt><code>icon         {"{element}"}</code></dt>
            <dd>Optional icon element to place next to the value.
              See <Link to={this.context.routePrefix + "icon"}>Icon</Link>.</dd>
            <dt><code>label        {"{string}"}</code></dt>
            <dd>Optional short description of the value.</dd>
            <dt><code>onClick      {"{func}"}</code></dt>
            <dd>Click handler.</dd>
            <dt><code>size         small|medium|large</code></dt>
            <dd>The size of the value. Defaults to <code>medium</code>.</dd>
            <dt><code>trendIcon    {"{element}"}</code></dt>
            <dd>Optional icon element to place next to the value indicating
              the trend. For example, a <code>LinkUp</code> icon.
              See <Link to={this.context.routePrefix + "icon"}>Icon</Link>.</dd>
            <dt><code>value        {"{number}"}</code></dt>
            <dd>The value itself.</dd>
            <dt><code>units        {"{string}"}</code></dt>
            <dd>Optional units to display next to the value.</dd>
          </dl>
        </section>

        <section>
          <h2>Examples</h2>

          <Example name="Default" code={
            <Value value={75} />
          } />

          <Example name="Units, Icon, Trend, Label, Color" code={
            <Value value={75} units="%"
              icon={<GlobeIcon colorIndex="neutral-1" />}
              trendIcon={<UpIcon colorIndex="neutral-1" />}
              label="World wide coverage" colorIndex="neutral-1" />
          } />

          <Example name="Large" code={
            <Value value={75} units="%"
              icon={<GlobeIcon size="large" colorIndex="neutral-1" />}
              trendIcon={<UpIcon size="large" colorIndex="neutral-1" />}
              label="World wide coverage" colorIndex="neutral-1" size="large" />
          } />

          <Example name="Small" code={
            <Value value={75} units="%"
              icon={<GlobeIcon />}
              trendIcon={<UpIcon size="small" colorIndex="ok" />}
              label="World wide coverage" size="small" />
          } />
        </section>

      </DocsArticle>
    );
  }
}

ValueDoc.contextTypes = {
  routePrefix: React.PropTypes.string.isRequired
};
{'fraction_non_alphanumeric': 0.15943810359964883, 'fraction_numerical': 0.008604038630377524, 'mean_word_length': 2.059076262083781, 'pattern_counts': {'":': 0, '<': 153, '<?xml version=': 0, '>': 153, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '504496', 'n_tokens_mistral': 1664, 'n_tokens_neox': 1615, 'n_words': 383}