From ff35d412e1daf9692e7da3aeb5d25ec71f0336aa Mon Sep 17 00:00:00 2001
From: Sergey <148218517+qradle-yndx@users.noreply.github.com>
Date: Tue, 30 Jan 2024 12:44:27 +0300
Subject: [PATCH] feat: add yfm support for tabs block item caption (#785)

---
 src/blocks/Tabs/Tabs.scss                    | 17 ++++++++++++++++-
 src/blocks/Tabs/Tabs.tsx                     |  7 ++++++-
 src/blocks/Tabs/__stories__/Tabs.mdx         |  2 +-
 src/blocks/Tabs/__stories__/Tabs.stories.tsx |  2 +-
 src/blocks/Tabs/__stories__/data.json        |  2 +-
 5 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/blocks/Tabs/Tabs.scss b/src/blocks/Tabs/Tabs.scss
index 3c9ceb931..84466db6a 100644
--- a/src/blocks/Tabs/Tabs.scss
+++ b/src/blocks/Tabs/Tabs.scss
@@ -38,7 +38,22 @@ $block: '.#{$ns}tabs-block';
         @include text-size(body-2);
 
         margin: $indentXXS 0 0;
-        color: var(--g-color-text-secondary);
+
+        @include add-specificity(&) {
+            .yfm,
+            .yfm > * {
+                color: var(--g-color-text-secondary);
+            }
+
+            .yfm a {
+                color: var(--g-color-text-secondary);
+                text-decoration: underline;
+
+                &:hover {
+                    color: var(--g-color-text-primary);
+                }
+            }
+        }
     }
 
     &__col {
diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx
index 145259363..f5353b00f 100644
--- a/src/blocks/Tabs/Tabs.tsx
+++ b/src/blocks/Tabs/Tabs.tsx
@@ -9,6 +9,7 @@ import {getMediaImage} from '../../components/Media/Image/utils';
 import Media from '../../components/Media/Media';
 import Title from '../../components/Title/Title';
 import {getHeight} from '../../components/VideoBlock/VideoBlock';
+import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import {useTheme} from '../../context/theme';
 import {Col, GridColumnOrderClasses, Row} from '../../grid';
 import {TabsBlockProps} from '../../models';
@@ -121,7 +122,11 @@ export const TabsBlock = ({
             )}
             {activeTabData?.caption && (
                 <p className={b('caption')} id={captionId}>
-                    {activeTabData.caption}
+                    <YFMWrapper
+                        content={activeTabData.caption}
+                        modifiers={{constructor: true}}
+                        id={captionId}
+                    />
                 </p>
             )}
         </Col>
diff --git a/src/blocks/Tabs/__stories__/Tabs.mdx b/src/blocks/Tabs/__stories__/Tabs.mdx
index da3914b31..7db2bb5c6 100644
--- a/src/blocks/Tabs/__stories__/Tabs.mdx
+++ b/src/blocks/Tabs/__stories__/Tabs.mdx
@@ -31,6 +31,6 @@ import * as TabsStories from './Tabs.stories.tsx';
 - `buttons?: Button[]` — An array with button objects (see [Content blocks](?path=/docs/documentation-types--docs))
 - `image?: string | ImageObjectProps` — Image.
 - [`media: Media` — Media description](?path=/docs/documentation-types#media--imagevideodatalensyoutube)
-- `caption?: string` — Image caption.
+- `caption?: string` — Image caption (with YFM support)
 
 </StoryTemplate>
diff --git a/src/blocks/Tabs/__stories__/Tabs.stories.tsx b/src/blocks/Tabs/__stories__/Tabs.stories.tsx
index f4080b9d3..6612983e0 100644
--- a/src/blocks/Tabs/__stories__/Tabs.stories.tsx
+++ b/src/blocks/Tabs/__stories__/Tabs.stories.tsx
@@ -57,6 +57,7 @@ const DefaultArgs = {
         ...item,
         text: yfmTransform(item.text),
         additionalInfo: item.additionalInfo && yfmTransform(item.additionalInfo),
+        caption: item.caption && yfmTransform(item.caption),
     })),
 };
 
@@ -112,6 +113,5 @@ Caption.args = {
     ...DefaultArgs,
     items: DefaultArgs.items.map((item) => ({
         ...item,
-        caption: item.title,
     })),
 } as TabsBlockModel;
diff --git a/src/blocks/Tabs/__stories__/data.json b/src/blocks/Tabs/__stories__/data.json
index 88ca00916..f276d3ecb 100644
--- a/src/blocks/Tabs/__stories__/data.json
+++ b/src/blocks/Tabs/__stories__/data.json
@@ -141,7 +141,7 @@
               "image": "/story-assets/img_6-12_dark.png"
             }
           },
-          "caption": "Dolor sit amet",
+          "caption": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
           "text": "* Ut enim ad minim veniam\n* Ut enim ad minim veniam",
           "links": [
             {