import { ArgsTable, Meta } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { InnerTransition } from "@components/transition";

<Meta
    title="Components/Transition"
    id="transition"
/>

# Transition

<Tagline>A transition component allow enter/leave CSS transitions for React elements.</Tagline>

<ComponentInfo
    usage={"import { Transition } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/transition/src"
/>

## Usage

> This is a not a component to handle all kind of generic transitions. This component is specialized for *enter* and *leave* transitions.

By default, a transition will enter and leave instantly. To animate your enter/leave transition specify a CSS class for the `enter` and `leave` props.

<Preview filePath="/transition/docs/ControlledTransition" />

## API

### Transition

<ComponentInfo
    usage={"import { Transition } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerTransition.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTransition} sort="alpha" />
