From e3ef64edf05c20573c61657af716cc8cc5e27ced Mon Sep 17 00:00:00 2001
From: Anton Vikulov <rndnm@yandex-team.ru>
Date: Fri, 8 Sep 2023 17:13:19 +0500
Subject: [PATCH] docs(Breadcrumbs): add readme

---
 src/components/Breadcrumbs/README.OLD.md |  43 ++++++++++
 src/components/Breadcrumbs/README.md     | 105 +++++++++++++++++++----
 2 files changed, 129 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Breadcrumbs/README.OLD.md

diff --git a/src/components/Breadcrumbs/README.OLD.md b/src/components/Breadcrumbs/README.OLD.md
new file mode 100644
index 0000000000..84e7bdc179
--- /dev/null
+++ b/src/components/Breadcrumbs/README.OLD.md
@@ -0,0 +1,43 @@
+## Breadcrumbs
+
+Breadcrumbs component. Can collapse breadcrumbs that cause overflow.
+
+### PropTypes
+
+| Name                     | Type       | Required | Default | Description                                                                                                                  |
+| :----------------------- | :--------- | :------: | :------ | :--------------------------------------------------------------------------------------------------------------------------- |
+| items                    | `Array`    |    ✓     |         | Breadcrumb items array `BreadcrumbsItem[]`                                                                                   |
+| className                | `String`   |          |         | CSS class name of root element                                                                                               |
+| renderRootContent        | `Function` |          |         | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`)                      |
+| renderItemContent        | `Function` |          |         | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` |
+| renderItemDivider        | `Function` |          |         | Custom render function of items separator `() => React.ReactNode;`                                                           |
+| lastDisplayedItemsCount  | `Enum`     |    ✓     |         | Number of items to display after items collapse control: `LastDisplayedItemsCount`                                           |
+| firstDisplayedItemsCount | `Enum`     |    ✓     |         | Number of items to display before items collapse control: `FirstDisplayedItemsCount`                                         |
+| popupStyle               | `String`   |          |         | Style of collapsed items popup `staircase`                                                                                   |
+
+### Examples
+
+```jsx
+const breadcrumbs = [
+  {
+    title: 'What is love',
+  },
+  {
+    title: "Baby don't hurt me",
+  },
+  {
+    title: "Don't hurt me",
+  },
+  {
+    title: 'No more',
+  },
+];
+
+return (
+  <Breadcrumbs
+    items={items}
+    lastDisplayedItemsCount={LastDisplayedItemsCount.One}
+    firstDisplayedItemsCount={FirstDisplayedItemsCount.One}
+  />
+);
+```
diff --git a/src/components/Breadcrumbs/README.md b/src/components/Breadcrumbs/README.md
index 84e7bdc179..ee5fa8e160 100644
--- a/src/components/Breadcrumbs/README.md
+++ b/src/components/Breadcrumbs/README.md
@@ -1,43 +1,110 @@
-## Breadcrumbs
+<!--GITHUB_BLOCK-->
 
-Breadcrumbs component. Can collapse breadcrumbs that cause overflow.
+# Breadcrumbs
 
-### PropTypes
+<!--/GITHUB_BLOCK-->
 
-| Name                     | Type       | Required | Default | Description                                                                                                                  |
-| :----------------------- | :--------- | :------: | :------ | :--------------------------------------------------------------------------------------------------------------------------- |
-| items                    | `Array`    |    ✓     |         | Breadcrumb items array `BreadcrumbsItem[]`                                                                                   |
-| className                | `String`   |          |         | CSS class name of root element                                                                                               |
-| renderRootContent        | `Function` |          |         | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`)                      |
-| renderItemContent        | `Function` |          |         | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` |
-| renderItemDivider        | `Function` |          |         | Custom render function of items separator `() => React.ReactNode;`                                                           |
-| lastDisplayedItemsCount  | `Enum`     |    ✓     |         | Number of items to display after items collapse control: `LastDisplayedItemsCount`                                           |
-| firstDisplayedItemsCount | `Enum`     |    ✓     |         | Number of items to display before items collapse control: `FirstDisplayedItemsCount`                                         |
-| popupStyle               | `String`   |          |         | Style of collapsed items popup `staircase`                                                                                   |
+```tsx
+import {Breadcrumbs} from '@gravity-ui/uikit';
+```
+
+`Breadcrumbs` can collapse breadcrumbs that cause overflow.
+
+## Appearance
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+<Breadcrumbs
+    items={[
+        {
+            text: 'Region',
+        },
+        {
+            text: 'Country',
+        },
+        {
+            text: 'City',
+        },
+        {
+            text: 'District',
+        },
+        {
+            text: 'Street',
+        },
+    ]}
+    firstDisplayedItemsCount={FirstDisplayedItemsCount.One}
+    lastDisplayedItemsCount={LastDisplayedItemsCount.One}
+/>
+`}
+>
+    <UIKit.Breadcrumbs
+        items={[
+            {
+                text: 'Region',
+            },
+            {
+                text: 'Country',
+            },
+            {
+                text: 'City',
+            },
+            {
+                text: 'District',
+            },
+            {
+                text: 'Street',
+            },
+        ]}
+        firstDisplayedItemsCount={1}
+        lastDisplayedItemsCount={1}
+    />
+</ExampleBlock>
+
+LANDING_BLOCK-->
 
-### Examples
+<!--GITHUB_BLOCK-->
 
 ```jsx
 const breadcrumbs = [
   {
-    title: 'What is love',
+    text: 'Region',
   },
   {
-    title: "Baby don't hurt me",
+    text: 'Country',
   },
   {
-    title: "Don't hurt me",
+    text: 'City',
   },
   {
-    title: 'No more',
+    text: 'District',
+  },
+  {
+    text: 'Street',
   },
 ];
 
 return (
   <Breadcrumbs
     items={items}
-    lastDisplayedItemsCount={LastDisplayedItemsCount.One}
     firstDisplayedItemsCount={FirstDisplayedItemsCount.One}
+    lastDisplayedItemsCount={LastDisplayedItemsCount.One}
   />
 );
 ```
+
+<!--/GITHUB_BLOCK-->
+
+## Properties
+
+| Name                     | Description                                                                                                                  | Type       | Default |
+| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------- | :--------- | :------ |
+| items                    | Breadcrumb items array `BreadcrumbsItem[]`                                                                                   | `Array`    |         |
+| className                | CSS class name of root element                                                                                               | `String`   |         |
+| renderRootContent        | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`)                      | `Function` |         |
+| renderItemContent        | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` | `Function` |         |
+| renderItemDivider        | Custom render function of items separator `() => React.ReactNode;`                                                           | `Function` |         |
+| firstDisplayedItemsCount | Number of items to display before items collapse control: `FirstDisplayedItemsCount`                                         | `Enum`     |         |
+| lastDisplayedItemsCount  | Number of items to display after items collapse control: `LastDisplayedItemsCount`                                           | `Enum`     |         |
+| popupStyle               | Style of collapsed items popup `staircase`                                                                                   | `String`   |         |