From ca2ee29b3483cbe73e568117c6e8ae2734870d2a Mon Sep 17 00:00:00 2001
From: Gleb Voitenko <v8tenko@gmail.com>
Date: Tue, 19 Nov 2024 14:05:58 +0300
Subject: [PATCH] feat: add deprecated option in toc item

---
 src/components/TocItem/TocItem.scss | 17 +++++++++++++++++
 src/components/TocItem/TocItem.tsx  | 12 ++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/TocItem/TocItem.scss b/src/components/TocItem/TocItem.scss
index ca595810..b513a8fa 100644
--- a/src/components/TocItem/TocItem.scss
+++ b/src/components/TocItem/TocItem.scss
@@ -52,6 +52,8 @@ $visibleStartPadding: 12px;
         font-size: inherit;
         font-weight: inherit;
 
+        position: relative;
+        padding: 7px 12px 7px 18px;
         box-sizing: border-box;
         word-break: break-word;
         background-color: transparent;
@@ -77,6 +79,21 @@ $visibleStartPadding: 12px;
             @include mixins.text-size(body-1);
         }
 
+        &_deprecated {
+            span {
+                width: 90%;
+                display: block;
+            }
+
+            svg {
+                position: absolute;
+                top: 50%;
+                right: 6px;
+                transform: translateY(-50%);
+                opacity: 0.6;
+            }
+        }
+
         &_clicable {
             cursor: pointer;
 
diff --git a/src/components/TocItem/TocItem.tsx b/src/components/TocItem/TocItem.tsx
index 04a7ac77..38601fe1 100644
--- a/src/components/TocItem/TocItem.tsx
+++ b/src/components/TocItem/TocItem.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import block from 'bem-cn-lite';
 import {Button} from '@gravity-ui/uikit';
+import {Ban} from '@gravity-ui/icons';
 
 import {useTranslation} from '../../hooks';
 import {TocItem as ITocItem} from '../../models';
@@ -19,12 +20,13 @@ export interface TocItemProps extends ITocItem {
     active: boolean;
     expandable: boolean;
     expanded: boolean;
+    deprecated?: boolean;
     toggleItem: (id: string, opened: boolean) => void;
 }
 
 export const TocItem: React.FC<TocItemProps> = React.forwardRef(
     (
-        {id, name, href, active, expandable, expanded, toggleItem, labeled},
+        {id, name, href, active, expandable, expanded, toggleItem, labeled, deprecated},
         ref: React.ForwardedRef<HTMLButtonElement>,
     ) => {
         const handleClick = () => {
@@ -33,7 +35,12 @@ export const TocItem: React.FC<TocItemProps> = React.forwardRef(
 
         const {t} = useTranslation('toc-nav-panel');
 
-        const text = <span>{name}</span>;
+        const deprecatedIcon = deprecated ? <Ban /> : null;
+        const text = (
+            <span>
+                {name} {deprecatedIcon}
+            </span>
+        );
         const icon = expandable ? (
             <ToggleArrow className={b('icon')} open={expanded} thin={true} />
         ) : null;
@@ -46,6 +53,7 @@ export const TocItem: React.FC<TocItemProps> = React.forwardRef(
             clicable: Boolean(expandable || href),
             active,
             labeled,
+            deprecated,
         };
 
         const content = React.createElement(