import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as PopoverStories from "./Popover.stories";

<Meta of={PopoverStories} />

# Popover

The Popover component is a UI element that displays floating content when a trigger element is clicked. It's commonly used for contextual information, additional options, or interactive forms that don't require a full modal dialog.

## Usage

<Canvas of={PopoverStories.Documentation} source={ { code: `
import React from "react";
import { Popover } from "@webiny/admin-ui";

const PopoverExample = () => {
return (

<div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
  <Popover
    trigger={<p>Popover trigger</p>}
    content={
      <div className={"w-[260px]"}>
        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
      </div>
    }
    align="center"
    side="bottom"
    variant="subtle"
    arrow={false}
    close={false}
  />
</div>
); };

export default PopoverExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Popover/Popover.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={PopoverStories.Documentation} />

```tsx
import React from "react";
import { Popover } from "@webiny/admin-ui";

const PopoverExample = () => {
  return (
    <div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
      <Popover
        trigger={<p>Popover trigger</p>}
        content={
          <div className={"w-[260px]"}>
            <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus
            leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
          </div>
        }
        align="center"
        side="bottom"
        variant="subtle"
        arrow={false}
        close={false}
      />
    </div>
  );
};

export default PopoverExample;
```

## Examples

### Accent Variant

A popover with the accent color variant for higher contrast.

<Canvas of={PopoverStories.AccentVariant} source={ { code: `
import React from "react";
import { Popover } from "@webiny/admin-ui";

const AccentVariantExample = () => {
return (

<div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
  <Popover
    trigger={<p>Popover trigger</p>}
    content={
      <div className={"w-[260px]"}>
        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
      </div>
    }
    variant="accent"
  />
</div>
); };

export default AccentVariantExample;
` } } />

### With Arrow (Accent Variant)

A popover with an arrow pointing to the trigger element.

<Canvas of={PopoverStories.WithArrowAccentVariant} source={ { code: `
import React from "react";
import { Popover } from "@webiny/admin-ui";

const WithArrowAccentExample = () => {
return (

<div className="bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]">
  <Popover
    trigger={<p>Popover trigger</p>}
    content={
      <div className={"w-[260px]"}>
        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
      </div>
    }
    variant="accent"
    arrow={true}
  />
</div>
); };

export default WithArrowAccentExample;
` } } />

### Subtle Variant

A popover with the subtle variant, which is the default style.

<Canvas of={PopoverStories.SubtleVariant} source={ { code: `
import React from "react";
import { Popover } from "@webiny/admin-ui";

const SubtleVariantExample = () => {
return (

<div className="flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]">
  <Popover
    trigger={<p>Popover trigger</p>}
    content={
      <div className={"w-[260px]"}>
        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
      </div>
    }
    variant="subtle"
  />
</div>
); };

export default SubtleVariantExample;
` } } />

### With Arrow (Subtle Variant)

A subtle variant popover with an arrow pointing to the trigger element.

<Canvas of={PopoverStories.WithArrowSubtleVariant} source={ { code: `
import React from "react";
import { Popover } from "@webiny/admin-ui";

const WithArrowSubtleExample = () => {
return (

<div className="flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]">
  <Popover
    trigger={<p>Popover trigger</p>}
    content={
      <div className={"w-[260px]"}>
        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi lectus leo,
        dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.
      </div>
    }
    variant="subtle"
    arrow={true}
  />
</div>
); };

export default WithArrowSubtleExample;
` } } />