feat(toc): Add toc label

demo/src/Components/DocPage/page-en.json

@@ -155,6 +155,11 @@
   "toc": {
     "title": "Yandex.Cloud overview",
     "href": "/docs/overview/",
+    "label": {
+      "title": "NEW",
+      "description": "This it new section",
+      "theme": "info"
+    },
     "items": [
       {
         "name": "Yandex.Cloud services",

demo/src/Components/DocPage/page-he.json

@@ -120,6 +120,11 @@
   "toc": {
     "title": "סקירת פלטפורמה",
     "href": "/docs/overview/",
+    "label": {
+      "title": "חדש",
+      "description": "זה זה סעיף חדש",
+      "theme": "info"
+    },
     "items": [
       {
         "name": "שירותי Yandex.Cloud",

demo/src/Components/DocPage/page-ru.json

@@ -120,6 +120,11 @@
   "toc": {
     "title": "Обзор платформы",
     "href": "/docs/overview/",
+    "label": {
+      "title": "Новое",
+      "description": "Это новый раздел",
+      "theme": "info"
+    },
     "items": [
       {
         "name": "Сервисы Яндекс.Облака",

src/components/Toc/Toc.tsx

@@ -10,6 +10,7 @@ import {isActiveItem, normalizeHash, normalizePath} from '../../utils';
 import {Controls, ControlsLayout} from '../Controls';
 import {HTML} from '../HTML';
 import {TocItem as Item} from '../TocItem';
+import TocLabel from '../TocLable/TocLabel';
 
 import {TocItemRegistry} from './TocItemRegistry';
 
@@ -207,7 +208,7 @@ class Toc extends React.Component<TocProps, TocState> {
     }
 
     private renderTop() {
-        const {router, title, href, tocTitleIcon, hideTocHeader, singlePage} = this.props;
+        const {router, title, href, tocTitleIcon, hideTocHeader, singlePage, label} = this.props;
         const {contentScrolled} = this.state;
         let topHeader;
 
@@ -243,6 +244,7 @@ class Toc extends React.Component<TocProps, TocState> {
                     </div>
                 ) : null}
                 {topHeader}
+                {label ? <TocLabel label={label} /> : null}
             </div>
         );
     }

src/components/TocLable/TocLabel.scss

@@ -0,0 +1,10 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.dc-toc-label {
+    margin-left: 10px;
+
+    [dir='rtl'] & {
+        margin-right: 10px;
+    }
+}

src/components/TocLable/TocLabel.tsx

@@ -0,0 +1,38 @@
+import React, {FC} from 'react';
+
+import {Label, Popover, useDirection} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+
+import {TocLabel as TocLabelType} from '../../models';
+
+import './TocLabel.scss';
+
+const b = block('dc-toc-label');
+
+interface TocLabelProps {
+    label: TocLabelType;
+}
+
+const TocLabel: FC<TocLabelProps> = ({label}) => {
+    const direction = useDirection();
+
+    let labelElement = null;
+    if (label?.title) {
+        labelElement = (
+            <Label size={'xs'} theme={label.theme} className={b()}>
+                {label.title}
+            </Label>
+        );
+        if (label.description) {
+            const placement = direction === 'rtl' ? 'left' : 'right';
+            labelElement = (
+                <Popover content={label.description} placement={placement} size={'s'}>
+                    {labelElement}
+                </Popover>
+            );
+        }
+    }
+    return labelElement;
+};
+
+export default TocLabel;

src/models/index.ts

@@ -1,3 +1,5 @@
+import {LabelProps} from '@gravity-ui/uikit/build/esm/components/Label/Label';
+
 import type {Loc} from '../config/i18n';
 
 export enum Theme {
@@ -96,13 +98,20 @@ export interface DocMeta {
     updatedAt?: string;
 }
 
+export interface TocLabel {
+    title: string;
+    description?: string;
+    theme?: LabelProps['theme'];
+}
+
 export interface TocData {
     title?: string;
     href: string;
     items: TocItem[];
     stage?: string;
     editable?: boolean;
     singlePage?: boolean;
+    label?: TocLabel;
 }
 
 export interface TocItem {