feat: add yfm support for tabs block item caption (#785)

gravity-ui · Jan 30, 2024 · ff35d41 · ff35d41
1 parent 032ca0f
commit ff35d41
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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": [
             {