feat(ActionTooltip): add ActionTooltip docs (#509)

Author: kseniya57

src/content/components/uikit/ActionTooltip/ActionTooltipComponent.tsx

@@ -0,0 +1,32 @@
+import {ActionTooltip, Button} from '@gravity-ui/uikit';
+import type {ActionTooltipProps} from '@gravity-ui/uikit';
+import React from 'react';
+
+type ActionTooltipComponentProps = Pick<
+    ActionTooltipProps,
+    'title' | 'description' | 'hotkey' | 'disabled' | 'placement'
+> & {
+    trigger: ActionTooltipProps['trigger'] | 'hover';
+};
+
+export const ActionTooltipComponent = ({
+    title,
+    description,
+    hotkey,
+    disabled,
+    trigger,
+    placement,
+}: ActionTooltipComponentProps) => {
+    return (
+        <ActionTooltip
+            title={title}
+            description={description}
+            hotkey={hotkey}
+            trigger={trigger === 'hover' ? undefined : trigger}
+            placement={placement}
+            disabled={disabled}
+        >
+            <Button>{trigger ?? 'hover'} me</Button>
+        </ActionTooltip>
+    );
+};

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

@@ -0,0 +1,61 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'ActionTooltip'};
+
+export const actionTooltipConfig = {
+    id: 'action-tooltip',
+    title: 'ActionTooltip',
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('./ActionTooltipComponent').then((mod) => mod.ActionTooltipComponent),
+        ),
+        props: {
+            title: {
+                type: 'input',
+                defaultValue: 'Title',
+            },
+            description: {
+                type: 'input',
+                defaultValue: 'Description',
+            },
+            hotkey: {
+                type: 'input',
+                defaultValue: 'shift+t',
+            },
+            disabled: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            trigger: {
+                type: 'select',
+                values: mappingOptions(['focus', '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

@@ -4,6 +4,7 @@ import {getLibConfigById} from '../../../libs/config';
 import {Component, Lib} from '../types';
 
 import {accordionConfig} from './Accordion';
+import {actionTooltipConfig} from './ActionTooltip';
 import {alertConfig} from './Alert';
 import {arrowToggleConfig} from './ArrowToggle';
 import {avatarConfig} from './Avatar';
@@ -54,6 +55,7 @@ const uikitComponents: Component[] = [
     alertConfig,
     arrowToggleConfig,
     avatarConfig,
+    actionTooltipConfig,
     breadcrumbsConfig,
     buttonConfig,
     cardConfig,