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 && ( {imageProps && ( - + )} {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. 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 { + extends Omit, + WithBorder { tabName: string; /** * @deprecated Use array links from ContentBlockProps instead