import { Alert, AlertTrigger, InnerAlert } from "@components/alert";
import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { Button } from "@components/button";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Content, InnerContent } from "@components/placeholders";
import { Heading, InnerHeading } from "@components/typography";

<Meta
    title="Components/Alert"
    id="alert"
/>

# Alert

<Tagline>An alert is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.</Tagline>

<ComponentInfo
    usage={"import { Alert, Heading, Content, useAlertTriggerContext } from \"@sharegate/orbit-ui\";"}
    ariaPath="alertdialog"
    githubPath="/packages/components/src/alert/src"
/>

## Guidelines

### When to use

- To display a confirmation message, an error, or a warning.

### Accessibility

#### Announcement

- [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) and [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) defaults to the alert `<Heading>` and `<Content>` values.
- You can overwrite them by setting `aria-label` and `aria-describedby` props on the alert.

#### Focus

- If the alert calls for an action, make sure to set the focus correctly to avoid any unwanted action.
- You can use the `autoFocusButton` prop on the alert to specify which control should have the initial focus.
- If your alert is destructive, you can offer a secondary button _Cancel_ and set the focus to the secondary button with `autoFocusButton="secondary"`.

## Usage

### Default

An alert must have an heading, some content and a primary button label.

<Preview>
    <Story name="default">
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonLabel="Yes">
                <Heading>Autopilot</Heading>
                <Content>Are you sure you want to engage autopilot?</Content>
            </Alert>
        </AlertTrigger>
    </Story>
</Preview>

### Secondary button

An alert can have a secondary button.

<Preview>
    <Story name="secondary button">
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert
                primaryButtonLabel="Yes"
                secondaryButtonLabel="Postpone"
            >
                <Heading>Autopilot</Heading>
                <Content>Are you sure you want to engage autopilot?</Content>
            </Alert>
        </AlertTrigger>
    </Story>
</Preview>

### Cancel button

An alert can have a cancel button.

<Preview>
    <Story name="cancel button">
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert
                primaryButtonLabel="Yes"
                cancelButtonLabel="No"
            >
                <Heading>Autopilot</Heading>
                <Content>Are you sure you want to engage autopilot?</Content>
            </Alert>
        </AlertTrigger>
    </Story>
</Preview>

### Disabled buttons

An alert primary and secondary buttons can be disabled.

<Preview>
    <Story name="disabled buttons">
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert
                primaryButtonLabel="Yes"
                primaryButtonDisabled
                secondaryButtonLabel="Postpone"
            >
                <Heading>Autopilot</Heading>
                <Content>Are you sure you want to engage autopilot?</Content>
            </Alert>
        </AlertTrigger>
    </Story>
</Preview>

### Confirmation

Use a confirmation alert when a non destructive action is required from a user.

<Preview>
    <Story name="confirmation">
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert
                variant="confirmation"
                primaryButtonLabel="Yes"
                cancelButtonLabel="No"
            >
                <Heading>Autopilot</Heading>
                <Content>Are you sure you want to engage autopilot?</Content>
            </Alert>
        </AlertTrigger>
    </Story>
</Preview>

### Destructive

Use a destructive alert to confirm a permanent change, like deleting data.

<Preview>
    <Story name="destructive">
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert
                variant="destructive"
                primaryButtonLabel="Yes"
                cancelButtonLabel="No"
            >
                <Heading>Eject</Heading>
                <Content>Are you sure you want to eject into the void?</Content>
            </Alert>
        </AlertTrigger>
    </Story>
</Preview>

### Warning

Use a warning alert to inform of a significant change.

<Preview>
    <Story name="warning">
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert
                variant="warning"
                primaryButtonLabel="Ok"
                secondaryButtonLabel="Diagnose"
            >
                <Heading>Low carburant</Heading>
                <Content>The space shuttle will be out of carburant in an hour.</Content>
            </Alert>
        </AlertTrigger>
    </Story>
</Preview>

### Negative

Use a negative alert to inform that something went wrong, like a server error.

<Preview>
    <Story name="negative">
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert
                variant="negative"
                primaryButtonLabel="Retry"
                cancelButtonLabel="Cancel"
            >
                <Heading>Network error</Heading>
                <Content>Something went wrong while connecting to NASA network. Please try again in a few minutes.</Content>
            </Alert>
        </AlertTrigger>
    </Story>
</Preview>

### Controlled

The `open` state can be handled in controlled mode.

<Preview filePath="/alert/docs/ControlledAlert" />

## API

### Alert

<ComponentInfo
    usage={"import { Alert } from \"@sharegate/orbit-ui\";"}
    slots={["heading", "content"]}
    inherits={[InnerAlert.defaultElement, "styled-component"]}
    compact
/>

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

### Heading

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

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

### Content

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

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