import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import Tooltip from './'
import KeyboardBadge from '../KeyboardBadge'
import {
  Default,
  CustomContent,
  ControlledTooltip,
} from './Tooltip.storiesHelpers'

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

# Tooltip

A Tooltip component is UI component that provides the user with additional context when engaged.

<Canvas>
  <Story name="default">
    <Default />
  </Story>
</Canvas>

#### Reference

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

<br />
<br />

### Props

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).

<ArgsTable of={Tooltip} />

### Stories

#### Without trigger wrapper

We wrap all children with a span to ensure that any children will work with Tippy.
It requires a forwardable ref to work correctly. Having a `span` ensure that Tippy can attach events to any children.
In some cases, we want to remove that span, the `withTriggerWrapper` will allow us to do exactly that:

**Warning:** If there is multiple children or if the children is not a valid React element, we will still wrap everything with a span

<Canvas>
  <Story name="without trigger wrapper">
    <div style={{ padding: '20%', textAlign: 'center' }}>
      <Tooltip title="Hello" withTriggerWrapper={false}>
        <button>No wrapping span Trigger</button>
      </Tooltip>
    </div>
  </Story>
</Canvas>

#### With custom content

<Canvas>
  <Story name="with custom content">
    <CustomContent />
  </Story>
</Canvas>

#### With keyboard badge

<Canvas>
  <Story name="with keyboard badge">
    <div style={{ padding: '20%', textAlign: 'center' }}>
      <Tooltip
        visible={true}
        title="sd fasdf asdf asdf asdf asdf asdfasdf asdf asdfasdf"
        badge="mod+A"
        withTriggerWrapper={false}
      >
        <button>No wrapping span Trigger</button>
      </Tooltip>
    </div>
  </Story>
</Canvas>

#### Controlled tooltip

<Canvas>
  <Story name="controlled tooltip">
    <ControlledTooltip />
  </Story>
</Canvas>
