From 67a5b3b189190b8d4bcc1c4cb0ad4cb46c624b07 Mon Sep 17 00:00:00 2001
From: Anton Vikulov <rndnm@yandex-team.ru>
Date: Fri, 8 Sep 2023 18:09:40 +0500
Subject: [PATCH] feat: add docs for Breadcrumbs

---
 .../uikit/Breadcrumbs/BreadcrumbsWrapper.tsx  | 34 +++++++++++++
 .../components/uikit/Breadcrumbs/index.ts     | 50 +++++++++++++++++++
 src/content/components/uikit/index.ts         |  7 +--
 3 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 src/content/components/uikit/Breadcrumbs/BreadcrumbsWrapper.tsx
 create mode 100644 src/content/components/uikit/Breadcrumbs/index.ts

diff --git a/src/content/components/uikit/Breadcrumbs/BreadcrumbsWrapper.tsx b/src/content/components/uikit/Breadcrumbs/BreadcrumbsWrapper.tsx
new file mode 100644
index 000000000000..2e2e296d6140
--- /dev/null
+++ b/src/content/components/uikit/Breadcrumbs/BreadcrumbsWrapper.tsx
@@ -0,0 +1,34 @@
+import {Breadcrumbs, BreadcrumbsProps} from '@gravity-ui/uikit';
+import {FC} from 'react';
+
+export const BreadcrumbsWrapper: FC<Omit<BreadcrumbsProps, 'items'>> = (props) => {
+    return (
+        <div style={{width: '220px'}}>
+            <Breadcrumbs
+                {...props}
+                items={[
+                    {
+                        text: 'Region',
+                        action: () => {},
+                    },
+                    {
+                        text: 'Country',
+                        action: () => {},
+                    },
+                    {
+                        text: 'City',
+                        action: () => {},
+                    },
+                    {
+                        text: 'District',
+                        action: () => {},
+                    },
+                    {
+                        text: 'Street',
+                        action: () => {},
+                    },
+                ]}
+            />
+        </div>
+    );
+};
diff --git a/src/content/components/uikit/Breadcrumbs/index.ts b/src/content/components/uikit/Breadcrumbs/index.ts
new file mode 100644
index 000000000000..6f8982911496
--- /dev/null
+++ b/src/content/components/uikit/Breadcrumbs/index.ts
@@ -0,0 +1,50 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'Breadcrumbs'};
+
+export const breadcrumbsConfig = {
+    id: 'breadcrumbs',
+    title: 'Breadcrumbs',
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('./BreadcrumbsWrapper').then((mod) => mod.BreadcrumbsWrapper),
+        ),
+        props: {
+            firstDisplayedItemsCount: {
+                type: 'radioButton',
+                values: [
+                    {
+                        value: 0,
+                        content: '0',
+                    },
+                    {
+                        value: 1,
+                        content: '1',
+                    },
+                ],
+                defaultValue: 0,
+            },
+            lastDisplayedItemsCount: {
+                type: 'radioButton',
+                values: [
+                    {
+                        value: 1,
+                        content: '1',
+                    },
+                    {
+                        value: 2,
+                        content: '2',
+                    },
+                ],
+                defaultValue: 1,
+            },
+        },
+    },
+};
diff --git a/src/content/components/uikit/index.ts b/src/content/components/uikit/index.ts
index b7cbee6f4fc3..0c3fe41bab96 100644
--- a/src/content/components/uikit/index.ts
+++ b/src/content/components/uikit/index.ts
@@ -5,6 +5,7 @@ import {Component, Lib} from '../types';
 
 import {alertConfig} from './Alert';
 import {arrowToggleConfig} from './ArrowToggle';
+import {breadcrumbsConfig} from './Breadcrumbs';
 import {buttonConfig} from './Button';
 import {cardConfig} from './Card';
 import {checkboxConfig} from './Checkbox';
@@ -38,11 +39,7 @@ const {config} = getLibById('uikit');
 const uikitComponents: Component[] = [
     alertConfig,
     arrowToggleConfig,
-    {
-        id: 'breadcrumbs',
-        title: 'Breadcrumbs',
-        isComingSoon: true,
-    },
+    breadcrumbsConfig,
     buttonConfig,
     cardConfig,
     checkboxConfig,