From 50e3621a09476ea4ec38fab2975d12654fe2a6f4 Mon Sep 17 00:00:00 2001
From: Sergey <148218517+qradle-yndx@users.noreply.github.com>
Date: Wed, 28 Feb 2024 15:28:07 +0300
Subject: [PATCH] feat: add border prop to tabs media item (#835)

---
 src/blocks/Tabs/Tabs.scss                    |  2 +-
 src/blocks/Tabs/Tabs.tsx                     |  5 +++--
 src/blocks/Tabs/__stories__/Tabs.mdx         |  1 +
 src/blocks/Tabs/__stories__/Tabs.stories.tsx |  9 +++++++++
 src/blocks/Tabs/__stories__/data.json        | 15 ++++++++++-----
 src/blocks/Tabs/schema.ts                    |  4 ++++
 src/models/constructor-items/blocks.ts       |  3 ++-
 7 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/blocks/Tabs/Tabs.scss b/src/blocks/Tabs/Tabs.scss
index 84466db6a..e93caf2c4 100644
--- a/src/blocks/Tabs/Tabs.scss
+++ b/src/blocks/Tabs/Tabs.scss
@@ -31,7 +31,7 @@ $block: '.#{$ns}tabs-block';
 
     &__image,
     &__media {
-        @include image-shadow();
+        @include media-border();
     }
 
     &__caption {
diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx
index f5353b00f..3eb29937d 100644
--- a/src/blocks/Tabs/Tabs.tsx
+++ b/src/blocks/Tabs/Tabs.tsx
@@ -80,6 +80,7 @@ export const TabsBlock = ({
 
     const showMedia = Boolean(activeTabData?.media || imageProps);
     const showText = Boolean(activeTabData?.text);
+    const border = activeTabData?.border || 'shadow';
 
     const textContent = activeTabData && showText && (
         <TabsTextContent
@@ -107,7 +108,7 @@ export const TabsBlock = ({
                         <Media
                             {...getThemedValue(activeTabData.media, theme)}
                             key={activeTab}
-                            className={b('media')}
+                            className={b('media', {border})}
                             playVideo={play}
                             height={mediaVideoHeight || undefined}
                             onImageLoad={handleImageHeight}
@@ -117,7 +118,7 @@ export const TabsBlock = ({
             </div>
             {imageProps && (
                 <Fragment>
-                    <FullscreenImage {...imageProps} imageClassName={b('image')} />
+                    <FullscreenImage {...imageProps} imageClassName={b('image', {border})} />
                 </Fragment>
             )}
             {activeTabData?.caption && (
diff --git a/src/blocks/Tabs/__stories__/Tabs.mdx b/src/blocks/Tabs/__stories__/Tabs.mdx
index 7db2bb5c6..e5c450fec 100644
--- a/src/blocks/Tabs/__stories__/Tabs.mdx
+++ b/src/blocks/Tabs/__stories__/Tabs.mdx
@@ -32,5 +32,6 @@ import * as TabsStories from './Tabs.stories.tsx';
 - `image?: string | ImageObjectProps` — Image.
 - [`media: Media` — Media description](?path=/docs/documentation-types#media--imagevideodatalensyoutube)
 - `caption?: string` — Image caption (with YFM support)
+- `border?: 'shadow' | 'line' | 'none` — Select border of the media.
 
 </StoryTemplate>
diff --git a/src/blocks/Tabs/__stories__/Tabs.stories.tsx b/src/blocks/Tabs/__stories__/Tabs.stories.tsx
index 6612983e0..b3b7189e0 100644
--- a/src/blocks/Tabs/__stories__/Tabs.stories.tsx
+++ b/src/blocks/Tabs/__stories__/Tabs.stories.tsx
@@ -50,6 +50,7 @@ export const TabsButtonsColSizes = ButtonsColSizesTemplate.bind({});
 export const Centered = DefaultTemplate.bind({});
 export const Direction = DirectionTemplate.bind({});
 export const Caption = DefaultTemplate.bind({});
+export const MediaBorder = DefaultTemplate.bind({});
 
 const DefaultArgs = {
     ...data.default.content,
@@ -115,3 +116,11 @@ Caption.args = {
         ...item,
     })),
 } as TabsBlockModel;
+
+MediaBorder.args = {
+    ...DefaultArgs,
+    items: DefaultArgs.items.map((item, index) => ({
+        ...item,
+        border: ['line', 'none', 'shadow'][index % 3],
+    })),
+} as TabsBlockModel;
diff --git a/src/blocks/Tabs/__stories__/data.json b/src/blocks/Tabs/__stories__/data.json
index f276d3ecb..4320d96ca 100644
--- a/src/blocks/Tabs/__stories__/data.json
+++ b/src/blocks/Tabs/__stories__/data.json
@@ -29,7 +29,8 @@
             "dark": {
               "image": "/story-assets/img_8-12_dark.png"
             }
-          }
+          },
+          "border": "shadow"
         },
         {
           "tabName": "Lorem ipsum",
@@ -69,7 +70,8 @@
               "theme": "normal",
               "arrow": true
             }
-          ]
+          ],
+          "border": "shadow"
         },
         {
           "tabName": "Ut enim",
@@ -111,7 +113,8 @@
               "theme": "normal",
               "arrow": true
             }
-          ]
+          ],
+          "border": "shadow"
         },
         {
           "tabName": "Consectetur adipiscing elit",
@@ -128,7 +131,8 @@
             }
           },
           "caption": "Consectetur adipiscing elit",
-          "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+          "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "border": "shadow"
         },
         {
           "tabName": "minim veniam",
@@ -150,7 +154,8 @@
               "theme": "normal",
               "arrow": true
             }
-          ]
+          ],
+          "border": "shadow"
         }
       ]
     }
diff --git a/src/blocks/Tabs/schema.ts b/src/blocks/Tabs/schema.ts
index af5e033d8..1a67c85ad 100644
--- a/src/blocks/Tabs/schema.ts
+++ b/src/blocks/Tabs/schema.ts
@@ -37,6 +37,10 @@ export const tabsItem = {
         //TODO deprecated
         link: LinkProps,
         image: withTheme(ImageProps),
+        border: {
+            type: 'string',
+            enum: ['shadow', 'line', 'none'],
+        },
     },
 };
 
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
index 2a5028da5..0449dbf4f 100644
--- a/src/models/constructor-items/blocks.ts
+++ b/src/models/constructor-items/blocks.ts
@@ -281,7 +281,8 @@ export interface TableBlockProps {
 }
 
 export interface TabsBlockItem
-    extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'> {
+    extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>,
+        WithBorder {
     tabName: string;
     /**
      * @deprecated Use array links from ContentBlockProps instead