import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as PopoverStories from './Popover.stories'

<Meta of={PopoverStories} />

# Popover

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Popover"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9:86401&mode=dev"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929552/Popover"

/>

<KAIOInstallation exportNames="Popover" />

## Overview

A popover displays rich content in a non-modal dialog to describe or add additional information when users hover over, focus on, or click an interactive element.
User can interact with popover content, including selecting text or clicking links.

**Use sparingly.**

<Canvas of={PopoverStories.Playground} />
<Controls of={PopoverStories.Playground} />

## How to use

```jsx
const [referenceElementRef, Popover] = usePopover()

return (
  <>
    <button type="button" ref={referenceElementRef}>
      Hello world
    </button>
    <Popover>Hello world</Popover>
  </>
)
```

The purpose of this hook is to abstract away some of the awkwardness with the
requirement of passing in refs with popper. We need to use `useState` instead
of `useRef`, which may not be immediately intuitive.

The popper documentation to help provide more context:
https://popper.js.org/react-popper/v2/hook/