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 } from "@components/typography";
import { InnerMessage, Message } from "@components/message";
import { TextLink } from "@components/link";

<Meta
    title="Components/Message"
    id="message"
/>

# Message

<Tagline>A message is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.</Tagline>

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

## Guidelines

### When to use

- To provide feedback such as success, warning, error etc.
- To confirm an action.
- To incite the user to take an action, if this action does not require to interrupt the user flow.

### Content

- Be short. Limit your content to one sentence when possible.
- Provide a path of action. Don't let the user wonder what's next.
- Use copy that is easily scannable.
- Link to the appropriate documentation when additional context is needed.

### Accessibility

- Text should be descriptive and complete enough to be understood without relying on the icon. Using an icon to carry information will make it non-accessible.

### Message vs Alert

- If the user flow has to be interrupted, use an [alert](?path=/docs/alert--default-story).

## Usage

### Default

A default message.

<Preview>
    <Story name="default">
        <Message>We offer the safest space travel of the industry!</Message>
    </Story>
</Preview>

### Rich content

A message can also accept rich content.

<Preview>
    <Story name="rich content">
        <Message>
            <Content>
                <Heading>Travel with us!</Heading>
                We offer the safest space travel of the industry. Consult our safety policy <TextLink href="#">here</TextLink>.
            </Content>
        </Message>
    </Story>
</Preview>

### Action

A message can accept an action [button](?path=/docs/button--default-story).

<Preview>
    <Story name="action">
        <Message>
            <Content>We offer the safest space travel of the industry!</Content>
            <Button>Book now</Button>
        </Message>
    </Story>
</Preview>

### Dismissable

A message can be dismissable by specifying an `onDismiss` handler.

<Preview>
    <Story name="dismissable">
        <Message onDismiss={() => {}}>We offer the safest space travel of the industry!</Message>
    </Story>
</Preview>

### Informative

Use an informative message to notify a user of a change that's relevant for them to achieve their current goal.

<Preview>
    <Story name="informative">
        <Message variant="informative" onDismiss={() => {}}>
            <Content>We offer the safest space travel of the industry!</Content>
            <Button>Book now</Button>
        </Message>
    </Story>
</Preview>

### Warning

Use the warning variant message to help a user avoid an issue.

<Preview>
    <Story name="warning">
        <Message variant="warning" onDismiss={() => {}}>
            <Content>We are having trouble contacting the email server.</Content>
            <Button>Retry</Button>
        </Message>
    </Story>
</Preview>

### Positive

Use the positive variant to inform a user that an action has completed successfuly.

<Preview>
    <Story name="positive">
        <Message variant="positive" onDismiss={() => {}}>
            <Content>Your email to <strong>booking@spacetravel.com</strong> has been sent!</Content>
            <Button>Undo</Button>
        </Message>
    </Story>
</Preview>

### Negative

Use the negative variant to help a user understand a critical issue at the system level.

<Preview>
    <Story name="negative">
        <Message variant="negative" onDismiss={() => {}}>
            <Content>Cannot contact email server.</Content>
            <Button>Retry</Button>
        </Message>
    </Story>
</Preview>

### Controlled

A message can handle `show` state in controlled mode.

<Preview filePath="/message/docs/ControlledMessage" />

## Props

### Message

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

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

### Content

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

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