import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { Button } from "@components/button";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Disclosure, DisclosureArrow, InnerDisclosureArrow } from "@components/disclosure";
import { Div } from "@components/html";
import { Text } from "@components/typography";

<Meta
    title="Components/DisclosureArrow"
    id="disclosure-arrow"
/>

# DisclosureArrow

<Tagline>A top / bottom pointing arrow to hint that activating the trigger will display additional content.</Tagline>

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

## Usage

### Disclosure context

When a disclosure arrow is nested in a component implementing a `DisclosureContext`, the arrow will automatically change direction when `isOpen` state change.

<Preview>
    <Story name="context">
        <Disclosure>
            <Button variant="secondary">
                <Text>EVE Online</Text>
                <DisclosureArrow slot="end-icon" />
            </Button>
            <Div>Eve Online is a space-based, persistent world massively multiplayer online role-playing game (MMORPG) developed and published by CCP Games. Players of Eve Online can participate in a number of in-game professions and activities, including mining, piracy, manufacturing, trading, exploration, and combat (both player versus environment and player versus player). The game contains a total of 7,800 star systems that can be visited by players.</Div>
        </Disclosure>
    </Story>
</Preview>

### Controlled

A disclosure arrow can handle `open` state in controlled mode.

<Preview filePath="/disclosure/docs/ControlledDisclosureArrow" />

## API

### DisclosureArrow

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

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