docs: migrate Popover docs to csf3

Author: Nikolai Lopin

src/components/Popover/docs/Popover.stories.mdx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import { Popover } from '../Popover';
+import { Text } from '../../Text/Text';
+import { Button } from '../../Button/Button';
+import SettingsIcon from '../../../icons/options/SettingsIcon';
+import { Link } from '../../Link/Link';
+
+const meta: Meta<typeof Popover> = {
+    title: 'Components/Popover',
+    component: Popover,
+    argTypes: {
+        placement: {
+            options: [
+                'top-start',
+                'top-end',
+                'bottom-start',
+                'bottom-end',
+                'right-start',
+                'right-end',
+                'left-start',
+                'left-end',
+                'auto',
+                'auto-start',
+                'auto-end',
+                'top',
+                'left',
+                'right',
+                'bottom'
+            ],
+            defaultValue: 'bottom-start',
+            control: 'select'
+        },
+        offset: {
+            defaultValue: 5,
+            control: 'number'
+        },
+        padding: {
+            defaultValue: 0,
+            control: 'number'
+        }
+    },
+    args: {
+        content: <Text>Content for the Popover. Can contain Icons, Forms or other elements.</Text>,
+        children: 'Trigger'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {};
+
+export const WithButtonTrigger: Story = {
+    args: {
+        content: (
+            <Link href="free-now.com" target="_blank">
+                Open in Payment CRM
+            </Link>
+        ),
+        children: (
+            <Button size="small" variant="primary">
+                <SettingsIcon size={20} /> Manage Booking
+            </Button>
+        )
+    }
+};
+
+export const WithoutPadding: Story = {
+    args: {
+        padding: 0
+    }
+};

src/components/Popover/docs/Popover.stories.tsx

@@ -0,0 +1,50 @@
+import { Stories, ArgTypes, Meta, Primary } from '@storybook/blocks';
+import PopoverStories from './Popover.stories';
+
+<Meta of={PopoverStories} />
+
+# Popover
+
+**Primary UI element for content whose visibility can be toggled with a click on a trigger element**
+
+Renders a UI component that opens a popup dialog when user clicks on a trigger element.
+
+<Primary />
+
+## Properties
+
+<ArgTypes of={PopoverStories} />
+
+## Usage
+
+### Popover Trigger & Content
+
+Popover components consist of 2 main elements:
+
+-   **Popover Trigger** – an element that shows/hides the Popover.
+-   **Popover Content** – card with content that is toggled by the Trigger.
+
+For **Trigger** you can use just a plain string (for default variant), or following components from Wave:
+
+-   **&lt;Text&gt;**
+-   **&lt;Button&gt;**
+-   **&lt;Button&gt; with Icon**
+-   **&lt;Icon&gt;**
+-   **&lt;Link&gt;**
+
+The **Popover Content** acts as a container for any content: text, form, or anything else...
+
+### Difference from a Tooltip component
+
+-   Popover is toggled by clicking on (not hovering over) the Trigger. The second click (or click outside the Popover) hides the Popover.
+-   Popover scrolls with the page
+-   Popover content and trigger are not limited to text.
+
+### Style Props
+
+The Popover supports:
+
+-   **placement** prop for specifying the Popover content attachment in relation to the Popover trigger
+-   **offset** prop for the margin between Trigger and Popover card.
+
+<Stories includePrimary={false} />