import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { EnumTable } from "../../storybook-components/EnumTable";
import { Banner } from "./Banner";
import { Link } from "../Link";
import { STATUS_VARIANT } from "../../types";
import { Tooltip } from "../Tooltip";

export const variants = Object.values(STATUS_VARIANT);

<Meta title="Components/Feedback/Banner" component={Banner} />

# Banner

Banner can be used to draw attention to a message with an optional status (danger, warning, and success) and icon.

```jsx
import { Banner } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Banner">
    <Banner
      title="You are inviting this person to be a Comply User"
      className="mb-4"
    >
      By adding this person as a Comply User, they’ll receive an invite to join
      your Aptible Comply organization. Once this user accepts their invitation,
      they’ll be able to complete workforce training, own assets, and complete
      tickets.
    </Banner>
  </Story>
</Preview>

## `Banner` Custom Props

These are the custom props that extend `BoxProps`. Full list of props <a href="#all-banner-props">below</a>.

<Props of={Banner} />
<EnumTable enums={{ STATUS_VARIANT }} />

## Demos

### Status Variants

<Preview>
  <Story name="Banner Variants">
    {variants.map((variant) => (
      <Banner
        key={variant}
        title="You are inviting this person to be a Comply User"
        className="mb-4"
        variant={STATUS_VARIANT[variant.toUpperCase()]}
      >
        By adding this person as a Comply User, they’ll receive an invite to
        join your Aptible Comply organization. Once this user accepts their
        invitation, they’ll be able to complete workforce training, own assets,
        and complete tickets.
      </Banner>
    ))}
  </Story>
</Preview>

### Status Variants With Icons

<Preview>
  <Story name="Banners with Icons">
    {variants.map((variant) => (
      <Banner
        key={variant}
        title="You are inviting this person to be a Comply User"
        className="mb-4"
        variant={STATUS_VARIANT[variant.toUpperCase()]}
        withIcon
      >
        By adding this person as a Comply User, they’ll receive an invite to
        join your Aptible Comply organization. Once this user accepts their
        invitation, they’ll be able to complete workforce training, own assets,
        and complete tickets.
      </Banner>
    ))}
  </Story>
</Preview>

### No Title

<Preview>
  <Story name="Banner without title">
    <Banner>
      By adding this person as a Comply User, they’ll receive an invite to join
      your Aptible Comply organization. Once this user accepts their invitation,
      they’ll be able to complete workforce training, own assets, and complete
      tickets.
    </Banner>
  </Story>
</Preview>

### No Title + Icon

<Preview>
  <Story name="Banner no title plus icon">
    <Banner variant={STATUS_VARIANT.DANGER} withIcon className="inline-block">
      Error: E0000011 (Invalid token provided)
      <Link href="/" className="ml-2">
        Help
      </Link>
    </Banner>
  </Story>
</Preview>

### As a Tooltip

<Preview>
  <Story name="As a Tooltip">
    <Tooltip
      referenceElement={
        <Banner
          variant={STATUS_VARIANT.DANGER}
          withIcon
          className="inline-block"
        >
          Error: E0000011 (Invalid token provided)
        </Banner>
      }
    >
      Error: E0000011 (Invalid token provided)
    </Tooltip>
  </Story>
</Preview>

## All `Banner` Props

<Props of={Banner} />