import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import AnimateGroup from './'
import { Animate, Card } from '../index'

<Meta title="Utilities/Animation/AnimateGroup" component={AnimateGroup} />

# AnimateGroup

This component is a light wrapper for `TransitionGroup` from the [react-transition-group](https://github.com/reactjs/react-transition-group) library.

<Canvas>
  <Story name="default">
    <div>
      <p>Stagger fade in</p>
      <AnimateGroup stagger>
        <Animate sequence="fade">
          <div>Fade in</div>
        </Animate>
        <Animate sequence="fade left">
          <div>Fade in + left</div>
        </Animate>
        <Animate sequence="fade">
          <div>Fade in</div>
        </Animate>
        <Animate sequence="fade left">
          <div>Fade in + left</div>
        </Animate>
      </AnimateGroup>
    </div>
  </Story>
</Canvas>

#### Reference

- **Engineering**: Juan Pablo

<br />
<br />

### Props

<ArgsTable of={AnimateGroup} />

See `react-transition-group`'s [documentation](https://reactcommunity.org/react-transition-group/#TransitionGroup) for additional details.

## Stories

#### Expand

<Canvas>
  <Story name="expand">
    <div>
      <p>Stagger fade in</p>
      <div style={{ margin: 'auto', width: '80%' }}>
        <Card>
          <div>Card</div>
        </Card>
        <AnimateGroup stagger>
          <Animate sequence="fade up">
            <Card>
              <div>Expand, Up</div>
            </Card>
          </Animate>
          <Animate sequence="expand fade scale">
            <Card>
              <div>Expand, Fade, Scale</div>
            </Card>
          </Animate>
          <Animate sequence="expand fade left">
            <Card>
              <div>Expand, Fade, Left</div>
            </Card>
          </Animate>
          <Animate sequence="expand fade right">
            <Card>
              <div>Expand, Fade, Right</div>
            </Card>
          </Animate>
          <Animate sequence="expand fade down">
            <Card>
              <div>Expand, Fade, Down</div>
            </Card>
          </Animate>
        </AnimateGroup>
        <Card>
          <div>Card</div>
        </Card>
      </div>
    </div>
  </Story>
</Canvas>

#### Sequence

<Canvas>
  <Story name="sequence">
    <div>
      <p>Sequence defined by Group</p>
      <AnimateGroup stagger sequence="fade left">
        <Animate>
          <div>Element</div>
        </Animate>
        <Animate>
          <div>Element</div>
        </Animate>
        <Animate>
          <div>Element</div>
        </Animate>
        <Animate>
          <div>Element</div>
        </Animate>
        <Animate>
          <div>Element</div>
        </Animate>
      </AnimateGroup>
    </div>
  </Story>
</Canvas>
