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

<Meta
    title="Components/Disclosure"
    id="disclosure"
/>

# Disclosure

<Tagline>The disclosure component is used to create regions of content that can expand/collapse with a simple animation.</Tagline>

<ComponentInfo
    usage={"import { Disclosure, Content, DisclosureContext, useDisclosureContext } from \"@sharegate/orbit-ui\";"}
    ariaPath="disclosure"
    githubPath="/packages/components/src/disclosure/src"
/>

## Guidelines

### Accessibility

- The disclosure's trigger that shows and hides the content must be a [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) or have the [role button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role).

## Usage

### Default

A default disclosure using a button.

<Preview>
    <Story name="default">
        <Disclosure>
            <Button variant="secondary">EVE Online</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>

### Disclosure Context

A disclosure component can update his content based on the `isOpen` value of `useDisclosureContext` or access a `close` function.

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

### Disclosure arrow

You can use a [disclosure arrow](?path=/docs/disclosure-arrow--context) component to hint that activating the button will display additional content.

<Preview>
    <Story name="disclosure arrow">
        <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 component can handle `open` state in controlled mode.

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

## API

### Disclosure

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

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

### Content

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

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