feat(Divider): add divider docs (#514)

Author: kseniya57

src/content/components/uikit/Divider/DividerComponent.tsx

@@ -0,0 +1,27 @@
+import {Container, Divider, Flex, Label} from '@gravity-ui/uikit';
+import type {DividerProps} from '@gravity-ui/uikit';
+import React from 'react';
+
+type DividerComponentProps = Pick<DividerProps, 'orientation' | 'align' | 'children'>;
+
+export const DividerComponent = ({orientation, align, children}: DividerComponentProps) => {
+    const divider = (
+        <Divider orientation={orientation} align={align}>
+            {children}
+        </Divider>
+    );
+
+    return (
+        <Container>
+            <Flex gap={3} direction={orientation === 'horizontal' ? 'column' : 'row'}>
+                <Label>Label</Label>
+                {divider}
+                <Label>Label</Label>
+                {divider}
+                <Label>Label</Label>
+                {divider}
+                <Label>Label</Label>
+            </Flex>
+        </Container>
+    );
+};

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

@@ -0,0 +1,33 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'Divider'};
+
+export const dividerConfig = {
+    id: 'divider',
+    title: 'Divider',
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() => import('./DividerComponent').then((mod) => mod.DividerComponent)),
+        props: {
+            orientation: {
+                type: 'select',
+                values: mappingOptions(['horizontal', 'vertical']),
+                defaultValue: 'horizontal',
+            },
+            align: {
+                type: 'select',
+                values: mappingOptions(['start', 'center', 'end']),
+                defaultValue: 'start',
+            },
+            children: {
+                type: 'input',
+            },
+        },
+    },
+};

src/content/components/uikit/index.ts

@@ -13,6 +13,7 @@ import {buttonConfig} from './Button';
 import {cardConfig} from './Card';
 import {checkboxConfig} from './Checkbox';
 import {disclosureConfig} from './Disclosure';
+import {dividerConfig} from './Divider';
 import {dropdownMenuConfig} from './DropdownMenu';
 import {helpMarkConfig} from './HelpMark';
 import {hotkeyConfig} from './Hotkey';
@@ -64,6 +65,7 @@ const uikitComponents: Component[] = [
     cardConfig,
     checkboxConfig,
     disclosureConfig,
+    dividerConfig,
     dropdownMenuConfig,
     iconConfig,
     labelConfig,