<commit_before>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import DocsArticle from '../../DocsArticle';
import Example from '../Example';
import Section from 'grommet/components/Section';
import Box from 'grommet/components/Box';
import Paragraph from 'grommet/components/Paragraph';
import Button from 'grommet/components/Button';
import Animate from 'grommet/components/Animate';
import { updatePageTitle } from '../../utils/a11y';

Section.displayName = 'Section';
Animate.displayName = 'Animate';

export default class AnimateDoc extends Component {
  constructor () {
    super();
    this.state = {
      toggleFade: true,
      toggleSlide: true
    };
  }

  componentDidMount () {
    updatePageTitle('Animate');
  }

  render () {
    return (
      <DocsArticle title="Animate" colorIndex="neutral-3">

        <p>An animation wrapper to transition components in &amp; out.</p>
        <pre><code className="html hljs xml">
{`<Animate enter={...} leave={...}>
  <Box />
</Animate>`}
        </code></pre>

        <section>
          <h2>Options</h2>
          <dl>
            <dt><code>enter              {"{animation: , duration: , delay: }"}</code></dt>
            <dd>Animation when component is entering.</dd>
            <dt><code>leave              {"{animation: , duration: , delay: }"}</code></dt>
            <dd>Animation when component is leaving. Defaults to <code>enter</code> animation.</dd>
            <dt><code>visible            true|false</code></dt>
            <dd>Toggle visibility.</dd>
            <dt><code>component          {"{string}|{Component}"}</code></dt>
            <dd>Wrapping component. Defaults to <code>div</code>.</dd>
            <dt><code>childComponent     {"{string}|{Component}"}</code></dt>
            <dd>Wrapping child component. Defaults to <code>div</code>.</dd>
          </dl>
        </section>

        <section>
          <h2>Examples</h2>

          <Button
            label="Toggle"
            primary={true}
            onClick={() => this.setState({toggleFade: !this.state.toggleFade})}
          />
          <Example name="Fade" code={
            <Animate
              enter={{ animation: 'fade', duration: 1000 }}
              visible={this.state.toggleFade}
            >
              <Paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
              </Paragraph>
            </Animate>
          } />

          <Button
            label="Toggle"
            primary={true}
            onClick={() => this.setState({toggleSlide: !this.state.toggleSlide})}
          />
          <Example name="Slide" code={
            <Animate
              enter={{ animation: 'slide-up', duration: 1000 }}
              leave={{ animation: 'slide-down', duration: 1000 }}
              visible={this.state.toggleSlide}
            >
              <Paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
              </Paragraph>
            </Animate>
          } />
        </section>
      </DocsArticle>
    );
  }
};

AnimateDoc.contextTypes = {
  routePrefix: React.PropTypes.string.isRequired
};<commit_msg>Add animate boxes example<commit_after>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import DocsArticle from '../../DocsArticle';
import Example from '../Example';
import Section from 'grommet/components/Section';
import Tiles from 'grommet/components/Tiles';
import Box from 'grommet/components/Box';
import Paragraph from 'grommet/components/Paragraph';
import Button from 'grommet/components/Button';
import Animate from 'grommet/components/Animate';
import { updatePageTitle } from '../../utils/a11y';

Section.displayName = 'Section';
Animate.displayName = 'Animate';

export default class AnimateDoc extends Component {
  constructor () {
    super();
    this.state = {
      boxCount: 3,
      toggleFade: true,
      toggleSlide: true
    };
  }

  componentDidMount () {
    updatePageTitle('Animate');
  }

  render () {
    return (
      <DocsArticle title="Animate" colorIndex="neutral-3">

        <p>An animation wrapper to transition components in &amp; out.</p>
        <pre><code className="html hljs xml">
{`<Animate enter={...} leave={...}>
  <Box />
</Animate>`}
        </code></pre>

        <section>
          <h2>Options</h2>
          <dl>
            <dt><code>enter              {"{animation: , duration: , delay: }"}</code></dt>
            <dd>Animation when component is entering.</dd>
            <dt><code>leave              {"{animation: , duration: , delay: }"}</code></dt>
            <dd>Animation when component is leaving. Defaults to <code>enter</code> animation.</dd>
            <dt><code>visible            true|false</code></dt>
            <dd>Toggle visibility.</dd>
            <dt><code>component          {"{string}|{Component}"}</code></dt>
            <dd>Wrapping component. Defaults to <code>div</code>.</dd>
            <dt><code>childComponent     {"{string}|{Component}"}</code></dt>
            <dd>Wrapping child component. Defaults to <code>div</code>.</dd>
          </dl>
        </section>

        <section>
          <h2>Examples</h2>

          <Button
            label="Toggle"
            primary={true}
            onClick={() => this.setState({toggleFade: !this.state.toggleFade})}
          />
          <Example name="Fade" code={
            <Animate
              enter={{ animation: 'fade', duration: 1000 }}
              visible={this.state.toggleFade}
            >
              <Paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
              </Paragraph>
            </Animate>
          } />

          <Button
            label="Toggle"
            primary={true}
            onClick={() => this.setState({toggleSlide: !this.state.toggleSlide})}
          />
          <Example name="Slide" code={
            <Animate
              enter={{ animation: 'slide-up', duration: 1000 }}
              leave={{ animation: 'slide-down', duration: 1000 }}
              visible={this.state.toggleSlide}
            >
              <Paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
              </Paragraph>
            </Animate>
          } />

          <Button
            label="Add"
            primary={true}
            onClick={() => this.setState({boxCount: this.state.boxCount + 1})}
          />
          <Button
            label="Remove"
            onClick={() => this.setState({boxCount: this.state.boxCount - 1})}
          />
          <Example name="Boxes" code={
            <Animate
              enter={{ animation: 'slide-up', duration: 1000 }}
              component={Tiles}
              childComponent={Box}
            >
              {(this.state.boxCount > 0) &&
                new Array(this.state.boxCount).fill().map((c, i) => {
                  return <Box key={`box-${i}`} style={{ width: 50, height: 50 }} colorIndex="brand" />;
                })
              }
            </Animate>
          } />
        </section>
      </DocsArticle>
    );
  }
};

AnimateDoc.contextTypes = {
  routePrefix: React.PropTypes.string.isRequired
};
{'fraction_non_alphanumeric': 0.13360175695461202, 'fraction_numerical': 0.008052708638360176, 'mean_word_length': 1.904677533664068, 'pattern_counts': {'":': 0, '<': 147, '<?xml version=': 0, '>': 155, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2216039', 'n_tokens_mistral': 2368, 'n_tokens_neox': 2292, 'n_words': 566}