feat: add docs for Breadcrumbs

gravity-ui · Sep 8, 2023 · 57497e2 · 57497e2
1 parent 527e1ad
commit 57497e2
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 5 deletions.
diff --git a/src/content/components/uikit/Breadcrumbs/BreadcrumbsWrapper.tsx b/src/content/components/uikit/Breadcrumbs/BreadcrumbsWrapper.tsx
@@ -0,0 +1,36 @@
+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: () => {},
+                    },
+                ]}
+                firstDisplayedItemsCount={Number(props.firstDisplayedItemsCount)}
+                lastDisplayedItemsCount={Number(props.lastDisplayedItemsCount)}
+            />
+        </div>
+    );
+};
diff --git a/src/content/components/uikit/Breadcrumbs/index.ts 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
@@ -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,