diff --git a/src/blocks/Media/Media.scss b/src/blocks/Media/Media.scss new file mode 100644 index 000000000..523fdd2fb --- /dev/null +++ b/src/blocks/Media/Media.scss @@ -0,0 +1,7 @@ +@import '../../../styles/mixins'; + +$block: '.#{$ns}media-block'; + +#{$block} { + @include media-border(); +} diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx index d361f0ead..21236152d 100644 --- a/src/blocks/Media/Media.tsx +++ b/src/blocks/Media/Media.tsx @@ -4,19 +4,29 @@ import Media from '../../components/Media/Media'; import MediaBase from '../../components/MediaBase/MediaBase'; import {useTheme} from '../../context/theme'; import {MediaBlockProps} from '../../models'; -import {getThemedValue} from '../../utils'; +import {block, getThemedValue} from '../../utils'; + +import './Media.scss'; + +const b = block('media-block'); export const MediaBlock = (props: MediaBlockProps) => { - const {media} = props; + const {media, border = 'shadow', disableShadow} = props; + + const mediaBaseShadow = disableShadow || border !== 'shadow'; const [play, setPlay] = useState(false); const theme = useTheme(); const mediaThemed = getThemedValue(media, theme); return ( - setPlay(true)}> + setPlay(true)} disableShadow={mediaBaseShadow}> - + ); diff --git a/src/blocks/Media/__stories__/Media.mdx b/src/blocks/Media/__stories__/Media.mdx index ce80cf4ee..180b7ed2f 100644 --- a/src/blocks/Media/__stories__/Media.mdx +++ b/src/blocks/Media/__stories__/Media.mdx @@ -21,7 +21,7 @@ import * as MediaStories from './Media.stories.tsx'; `largeMedia?: boolean` — An image/video takes 8 columns. -`disableShadow?: boolean` — Disable shadow for the block. +`disableShadow?: boolean` — Disable shadow for the block (Deprecated). `additionalInfo?: string` — Gray text (with YFM support) @@ -29,4 +29,6 @@ import * as MediaStories from './Media.stories.tsx'; [`buttons?: Button[]` — An array with button objects](?path=/docs/documentation-types--docs#button) +`border?: 'shadow' | 'line' | 'none'` — Image border + diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx index 7dfe78c74..d645f3165 100644 --- a/src/blocks/Media/__stories__/Media.stories.tsx +++ b/src/blocks/Media/__stories__/Media.stories.tsx @@ -193,7 +193,9 @@ export const Video = VideoTemplate.bind({}); export const DataLens = ImageSliderTemplate.bind({}); export const Size = SizeTemplate.bind({}); export const Direction = DirectionTemplate.bind({}); +export const WithoutShadowDeprecated = ImageSliderTemplate.bind({}); export const WithoutShadow = ImageSliderTemplate.bind({}); +export const WithBorder = ImageSliderTemplate.bind({}); export const Iframe = IframeTemplate.bind({}); const DefaultArgs = { @@ -214,11 +216,21 @@ DataLens.args = { } as MediaBlockProps; Size.args = DefaultArgs as MediaBlockProps; Direction.args = DefaultArgs as MediaBlockProps; -WithoutShadow.args = { +WithoutShadowDeprecated.args = { ...DefaultArgs, ...data.withoutShadow.content, disableShadow: true, } as MediaBlockProps; +WithoutShadow.args = { + ...DefaultArgs, + ...data.withoutShadow.content, + border: 'none', +} as MediaBlockProps; +WithBorder.args = { + ...DefaultArgs, + ...data.withoutShadow.content, + border: 'line', +} as MediaBlockProps; Iframe.args = { ...DefaultArgs, } as MediaBlockProps; diff --git a/src/blocks/Media/schema.ts b/src/blocks/Media/schema.ts index a42ae9287..bb2107935 100644 --- a/src/blocks/Media/schema.ts +++ b/src/blocks/Media/schema.ts @@ -41,10 +41,17 @@ export const MediaBlockBaseProps = { mediaOnly: { type: 'boolean', }, + /** + * @deprecated use border='none' or border='line' instead + */ disableShadow: { type: 'boolean', }, button: ButtonBlock, + border: { + type: 'string', + enum: ['shadow', 'line', 'none'], + }, }; export const MediaBlock = { diff --git a/src/components/MediaBase/MediaBase.tsx b/src/components/MediaBase/MediaBase.tsx index 8666fb6db..baf2c36ba 100644 --- a/src/components/MediaBase/MediaBase.tsx +++ b/src/components/MediaBase/MediaBase.tsx @@ -27,6 +27,9 @@ export const MediaBase = (props: MediaBaseProps) => { mobileDirection = 'content-media', animated, mediaOnly, + /** + * @deprecated use custom class for media-component + */ disableShadow = false, onScroll, ...mediaContentProps diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 7710908e6..46231f582 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -34,6 +34,7 @@ import { ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, + WithBorder, YandexFormProps, } from './common'; import {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks'; @@ -233,7 +234,7 @@ export interface MediaContentProps button?: ButtonProps; } -export interface MediaBlockProps extends MediaBaseBlockProps { +export interface MediaBlockProps extends MediaBaseBlockProps, WithBorder { media: ThemeSupporting; } diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index 7ad962e6d..5ecc00147 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -386,7 +386,8 @@ export interface TitleItemBaseProps { } // card -export type CardBorder = 'shadow' | 'line' | 'none'; +export type MediaBorder = 'shadow' | 'line' | 'none'; +export type CardBorder = MediaBorder; export interface CardBaseProps { border?: CardBorder; @@ -475,3 +476,7 @@ export interface YandexFormProps extends AnalyticsEventsBase { metrikaGoals?: string | string[]; pixelEvents?: string | string[] | PixelEvent | PixelEvent[]; } + +export interface WithBorder { + border?: MediaBorder; +} diff --git a/styles/mixins.scss b/styles/mixins.scss index 48f46dd0b..10922bb11 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -616,3 +616,16 @@ unpredictable css rules order in build */ } } } + +@mixin media-border() { + &_border { + &_shadow { + @include image-shadow(); + } + + &_line { + border-radius: $borderRadius; + border: 1px solid var(--g-color-line-generic); + } + } +}