<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 Paragraph from 'grommet/components/Paragraph';
import Button from 'grommet/components/Button';
import Animate from 'grommet/components/Animate';
import ScrollAnimation from './samples/ScrollAnimation';
import BoxesAnimation from './samples/BoxesAnimation';
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>
          </dl>
        </section>

        <section>
          <h2>Examples</h2>

          <Button
            label="Toggle"
            primary={true}
            onClick={() => this.setState({toggleFade: !this.state.toggleFade})}
          /><commit_msg>Update animate docs<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 Paragraph from 'grommet/components/Paragraph';
import Button from 'grommet/components/Button';
import Animate from 'grommet/components/Animate';
import ScrollAnimation from './samples/ScrollAnimation';
import BoxesAnimation from './samples/BoxesAnimation';
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>component          {"{string}|{Component}"}</code></dt>
            <dd>Wrapping component. Defaults to <code>div</code>.</dd>
            <dt><code>visible            true|false</code></dt>
            <dd>Toggle visibility.</dd>
            <dt><code>keep               true|false</code></dt>
            <dd>Whether to keep or remove element from the DOM.</dd>
          </dl>
        </section>

        <section>
          <h2>Examples</h2>

          <Button
            label="Toggle"
            primary={true}
            onClick={() => this.setState({toggleFade: !this.state.toggleFade})}
          />
{'fraction_non_alphanumeric': 0.1540079457817247, 'fraction_numerical': 0.0070109838747370885, 'mean_word_length': 2.4740259740259742, 'pattern_counts': {'":': 0, '<': 105, '<?xml version=': 0, '>': 107, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, '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': '4609312', 'n_tokens_mistral': 1236, 'n_tokens_neox': 1202, 'n_words': 295}