import { Meta, ArgTypes, Story, Canvas } from "@storybook/addon-docs/blocks";
import * as PopoverStories from "./Popover.stories";
import { Popover } from "./Popover";

<Meta of={PopoverStories} />

# Popover

The `Popover` component is used to display popup tooltips with additional information for users. Children of the Popover become tooltip contents and `trigger` is a render prop for the element that will present the Popover when clicked.

When presented, the Popover will align horizontally with the centre of the trigger element, and by default it will appear below.

You can dismiss a Popover by clicking the close icon, clicking outside, or by pressing `Enter` or `Escape` keys.

Focus always remains on the element that triggers the Popover; its content should not accept focus.

## Install

```bash
yarn add @simplybusiness/mobius
```

### Default

In this example a Button is the trigger and simple text is displayed in the Popover.

```jsx
import { Popover } from "@simplybusiness/mobius";

return (
  <Popover
    trigger={<Button variant="primary">If only I had more information</Button>}
  >
    No way! Now I know everything I need to 🚀.
  </Popover>
);
```

<Story of={PopoverStories.Default} />

### With Custom Trigger

This is a customised trigger as used in the Quote Comparison Page, which has a large, clickable link (text and icon).

```jsx
import { Popover, Button, Flex } from "@simplybusiness/mobius";

return (
  <Popover
    trigger={
      <Button variant="ghost">
        <Flex>
          <span>Occurrence Limit</span>
          <QuestionIcon />
        </Flex>
      </Button>
    }
  >
    This is the maximum amount of money you&apos;ll get to cover a single
    incident that occurs during the policy period, regardless of when it&apos;s
    reported.
  </Popover>
);
```

<Canvas of={PopoverStories.CustomTrigger} />

## Props

<ArgTypes of={Popover} />

## Component HTML Structure and Class names

The following HTML is rendered for Popover toggle:

```html
<button class="mobius-popover__toggle">If only I had more information</button>
```

Popover content:

```html
<div class="mobius-popover__container">
  <div class="mobius-popover">
    <header class="mobius-popover__header">
      <button class="mobius-popover__close-button" aria-label="Close">
        <svg class="mobius-popover__close-icon">...</svg>
      </button>
    </header>
    <div class="mobius-popover__body">
      No way! Now I know everything I need to 🚀.
    </div>
  </div>
</div>
```
