From a3bcdc1fcd6da5eaa395b7703866e01aae2b6b2a Mon Sep 17 00:00:00 2001 From: Anton Vikulov Date: Mon, 25 Mar 2024 15:13:07 +0500 Subject: [PATCH 1/2] feat(toc): Add toc label --- demo/src/Components/DocPage/page-en.json | 5 ++++ demo/src/Components/DocPage/page-he.json | 5 ++++ demo/src/Components/DocPage/page-ru.json | 5 ++++ src/components/Toc/Toc.tsx | 4 ++- src/components/TocLable/TocLabel.scss | 10 +++++++ src/components/TocLable/TocLabel.tsx | 38 ++++++++++++++++++++++++ src/models/index.ts | 9 ++++++ 7 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 src/components/TocLable/TocLabel.scss create mode 100644 src/components/TocLable/TocLabel.tsx diff --git a/demo/src/Components/DocPage/page-en.json b/demo/src/Components/DocPage/page-en.json index f540e792..cac3bf4a 100644 --- a/demo/src/Components/DocPage/page-en.json +++ b/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", diff --git a/demo/src/Components/DocPage/page-he.json b/demo/src/Components/DocPage/page-he.json index 9aea66b8..89d6f715 100644 --- a/demo/src/Components/DocPage/page-he.json +++ b/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", diff --git a/demo/src/Components/DocPage/page-ru.json b/demo/src/Components/DocPage/page-ru.json index 478ff891..a17ef3ac 100644 --- a/demo/src/Components/DocPage/page-ru.json +++ b/demo/src/Components/DocPage/page-ru.json @@ -120,6 +120,11 @@ "toc": { "title": "Обзор платформы", "href": "/docs/overview/", + "label": { + "title": "Новое", + "description": "Это новый раздел", + "theme": "info" + }, "items": [ { "name": "Сервисы Яндекс.Облака", diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx index 7e2f296a..22cd945f 100644 --- a/src/components/Toc/Toc.tsx +++ b/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 { } 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 { ) : null} {topHeader} + {label ? : null} ); } diff --git a/src/components/TocLable/TocLabel.scss b/src/components/TocLable/TocLabel.scss new file mode 100644 index 00000000..628ea162 --- /dev/null +++ b/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; + } +} diff --git a/src/components/TocLable/TocLabel.tsx b/src/components/TocLable/TocLabel.tsx new file mode 100644 index 00000000..ff66f5c4 --- /dev/null +++ b/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 = ({label}) => { + const direction = useDirection(); + + let labelElement = null; + if (label?.title) { + labelElement = ( + + ); + if (label.description) { + const placement = direction === 'rtl' ? 'left' : 'right'; + labelElement = ( + + {labelElement} + + ); + } + } + return labelElement; +}; + +export default TocLabel; diff --git a/src/models/index.ts b/src/models/index.ts index e54b8889..d17a69a2 100644 --- a/src/models/index.ts +++ b/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,6 +98,12 @@ export interface DocMeta { updatedAt?: string; } +export interface TocLabel { + title: string; + description?: string; + theme?: LabelProps['theme']; +} + export interface TocData { title?: string; href: string; @@ -103,6 +111,7 @@ export interface TocData { stage?: string; editable?: boolean; singlePage?: boolean; + label?: TocLabel; } export interface TocItem { From f35d7c81592069f050443832f606be4876210eb9 Mon Sep 17 00:00:00 2001 From: Anton Vikulov Date: Mon, 25 Mar 2024 16:35:21 +0500 Subject: [PATCH 2/2] fix: add offset for wrapper --- src/components/TocLable/TocLabel.scss | 8 +++++--- src/components/TocLable/TocLabel.tsx | 12 +++++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/TocLable/TocLabel.scss b/src/components/TocLable/TocLabel.scss index 628ea162..be8fa84c 100644 --- a/src/components/TocLable/TocLabel.scss +++ b/src/components/TocLable/TocLabel.scss @@ -2,9 +2,11 @@ @import '../../styles/mixins'; .dc-toc-label { - margin-left: 10px; + &_offset { + margin-left: 10px; - [dir='rtl'] & { - margin-right: 10px; + [dir='rtl'] & { + margin-right: 10px; + } } } diff --git a/src/components/TocLable/TocLabel.tsx b/src/components/TocLable/TocLabel.tsx index ff66f5c4..d4e4b71a 100644 --- a/src/components/TocLable/TocLabel.tsx +++ b/src/components/TocLable/TocLabel.tsx @@ -18,15 +18,21 @@ const TocLabel: FC = ({label}) => { let labelElement = null; if (label?.title) { + const hasDescription = Boolean(label.description); labelElement = ( -