feat: add border prop to tabs media item (#835)

gravity-ui · Feb 28, 2024 · 50e3621 · 50e3621
1 parent b70f80d
commit 50e3621
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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