import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number, select, text } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'
import Popover from './'
import { CustomAnimationDemoUI } from './Popover.utils.js'

<Meta
  title="Components/Overlay/Popover"
  component={Popover}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A9858',
    },
  }}
/>

# Popover

A Popover component is UI component that provides the user with additional context/actions when engaged.

Tooltip is powered by [react-tippy](https://github.com/atomiks/tippyjs-react) and [react-popper](https://github.com/popperjs/react-popper). You can see all available props that can be passed to [Tippy here](https://atomiks.github.io/tippyjs/v6/all-props).

<Canvas>
  <Story name="default">
    <div style={{ padding: '20%', textAlign: 'center' }}>
      <Popover
        animationDelay={number('animationDelay', 100)}
        animationDuration={number('animationDuration', 100)}
        closeOnEscPress={boolean('closeOnEscPress', true)}
        closeOnContentClick={boolean('closeOnContentClick', false)}
        onOpen={action('onOpen')}
        onClose={action('onClose')}
        isOpen={boolean('isOpen', true)}
        withArrow={boolean('withArrow', true)}
        triggerOn={select(
          'triggerOn',
          {
            click: 'click',
            hover: 'mouseenter',
          },
          'click'
        )}
        placement={select(
          'placement',
          {
            auto: 'auto',
            top: 'top',
            'top-start': 'top-start',
            'top-end': 'top-end',
            right: 'right',
            bottom: 'bottom',
            left: 'left',
          },
          'top'
        )}
        header={text('header', '')}
        content={text('content', 'Hello')}
        minWidth={number('minWidth', '')}
        maxWidth={number('maxWidth', '')}
        renderAnimation={children => (
          <CustomAnimationDemoUI className="animation">
            {children}
          </CustomAnimationDemoUI>
        )}
      >
        <div tabIndex="0">Popover Trigger</div>
      </Popover>
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: PL
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={Popover} />

### Custom Content

The contents of Popover can be customized by using `renderHeader` and/or `renderContent` for rendering.

```jsx
<Popover
  renderHeader={() => <Heading>My Title</Heading>}
  renderContent={() => (
    <div>
      <p>My Content</p>
    </div>
  )}
/>
```
