feat(Popover): add popover docs (#507)

Author: kseniya57

src/content/components/uikit/Popover/PopoverComponent.tsx

@@ -0,0 +1,25 @@
+import {Button, Popover} from '@gravity-ui/uikit';
+import type {PopoverProps} from '@gravity-ui/uikit';
+import React from 'react';
+
+type PopupComponentProps = {
+    open?: boolean;
+    placement?: PopoverProps['placement'];
+    hasArrow?: boolean;
+    disabled?: boolean;
+    trigger?: PopoverProps['trigger'];
+};
+
+export const PopoverComponent = ({disabled, trigger, placement, hasArrow}: PopupComponentProps) => {
+    return (
+        <Popover
+            content="Content"
+            disabled={disabled}
+            trigger={trigger}
+            placement={placement}
+            hasArrow={hasArrow}
+        >
+            <Button>{trigger} me</Button>
+        </Popover>
+    );
+};

src/content/components/uikit/Popover/index.ts

@@ -0,0 +1,51 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'Popover'};
+
+export const popoverConfig = {
+    id: 'popover',
+    title: 'Popover',
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() => import('./PopoverComponent').then((mod) => mod.PopoverComponent)),
+        props: {
+            hasArrow: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            disabled: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            trigger: {
+                type: 'select',
+                values: mappingOptions(['click', 'hover']),
+                defaultValue: 'hover',
+            },
+            placement: {
+                type: 'select',
+                values: mappingOptions([
+                    'bottom-start',
+                    'bottom',
+                    'bottom-end',
+                    'top-start',
+                    'top',
+                    'top-end',
+                    'right-start',
+                    'right',
+                    'right-end',
+                    'left-start',
+                    'left',
+                    'left-end',
+                ]),
+                defaultValue: 'bottom',
+            },
+        },
+    },
+};

src/content/components/uikit/index.ts

@@ -23,6 +23,7 @@ import {overlayConfig} from './Overlay';
 import {paginationConfig} from './Pagination';
 import {paletteConfig} from './Palette';
 import {pinInputConfig} from './PinInput';
+import {popoverConfig} from './Popover';
 import {popupConfig} from './Popup';
 import {portalConfig} from './Portal';
 import {progressConfig} from './Progress';
@@ -69,6 +70,7 @@ const uikitComponents: Component[] = [
     paginationConfig,
     paletteConfig,
     pinInputConfig,
+    popoverConfig,
     popupConfig,
     portalConfig,
     progressConfig,