From 6707db48c70648eb49f5e093df4018f452820891 Mon Sep 17 00:00:00 2001
From: Viktor Rozaev <vrozaev@nebius.com>
Date: Fri, 15 Mar 2024 15:09:40 +0100
Subject: [PATCH] feat(Toc): added additional data-qa attributes inside
 component

---
 src/components/Toc/Toc.tsx             |  2 ++
 src/components/Toc/TocItem/TocItem.tsx | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
index eff6f10b93..45e541d547 100644
--- a/src/components/Toc/Toc.tsx
+++ b/src/components/Toc/Toc.tsx
@@ -29,6 +29,7 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
                             content={content}
                             value={value}
                             href={href}
+                            qa={qa ? `${qa}-item` : ''}
                             active={activeValue === value}
                             onClick={onUpdate}
                         />
@@ -46,6 +47,7 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
                                                 value={childrenValue}
                                                 href={childrenHref}
                                                 childItem={true}
+                                                qa={qa ? `${qa}-item` : ''}
                                                 active={activeValue === childrenValue}
                                                 onClick={onUpdate}
                                             />
diff --git a/src/components/Toc/TocItem/TocItem.tsx b/src/components/Toc/TocItem/TocItem.tsx
index d4765075ed..f41aaaba21 100644
--- a/src/components/Toc/TocItem/TocItem.tsx
+++ b/src/components/Toc/TocItem/TocItem.tsx
@@ -12,10 +12,11 @@ export interface TocItemProps extends TocItemType {
     childItem?: boolean;
     active?: boolean;
     onClick?: (value: string) => void;
+    qa?: string;
 }
 
 export const TocItem = (props: TocItemProps) => {
-    const {active = false, childItem = false, content, href, value, onClick} = props;
+    const {active = false, childItem = false, content, href, value, onClick, qa} = props;
 
     const handleClick = React.useCallback(() => {
         if (value === undefined || !onClick) {
@@ -44,5 +45,15 @@ export const TocItem = (props: TocItemProps) => {
             </a>
         );
 
-    return <div className={b('section', {child: childItem, active})}>{item}</div>;
+    let testId = '';
+
+    if (qa) {
+        testId = active ? qa : `${qa}-active`;
+    }
+
+    return (
+        <div className={b('section', {child: childItem, active})} data-qa={testId}>
+            {item}
+        </div>
+    );
 };