feat: add border to media in media-block

Author: niktverd

src/blocks/Media/Media.scss

@@ -0,0 +1,7 @@
+@import '../../../styles/mixins';
+
+$block: '.#{$ns}media-block';
+
+#{$block} {
+    @include media-border();
+}

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<boolean>(false);
     const theme = useTheme();
     const mediaThemed = getThemedValue(media, theme);
 
     return (
-        <MediaBase {...props} onScroll={() => setPlay(true)}>
+        <MediaBase {...props} onScroll={() => setPlay(true)} disableShadow={mediaBaseShadow}>
             <MediaBase.Card>
-                <Media {...mediaThemed} playVideo={play} />
+                <Media
+                    {...mediaThemed}
+                    playVideo={play}
+                    className={b({border: disableShadow ? 'none' : border})}
+                />
             </MediaBase.Card>
         </MediaBase>
     );

src/blocks/Media/__stories__/Media.mdx

@@ -21,12 +21,14 @@ 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)
 
 [`links?: Link[]` — An array with link objects](?path=/docs/documentation-types--docs#link)
 
 [`buttons?: Button[]` — An array with button objects](?path=/docs/documentation-types--docs#button)
 
+`border?: 'shadow' | 'line' | 'none'` — Image border
+
 </StoryTemplate>

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;

src/blocks/Media/schema.ts

@@ -42,11 +42,18 @@ export const MediaBlockBaseProps = {
     mediaOnly: {
         type: 'boolean',
     },
+    /**
+     * @deprecated use border='none' or border='line' instead
+     */
     disableShadow: {
         type: 'boolean',
     },
     button: ButtonBlock,
     mediaOnlyColSizes: containerSizesObject,
+    border: {
+        type: 'string',
+        enum: ['shadow', 'line', 'none'],
+    },
 };
 
 export const MediaBlock = {

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,
         mediaOnlyColSizes = {all: 12, md: 8},

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';
@@ -234,7 +235,7 @@ export interface MediaContentProps
     button?: ButtonProps;
 }
 
-export interface MediaBlockProps extends MediaBaseBlockProps {
+export interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {
     media: ThemeSupporting<MediaProps>;
 }
 

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;
@@ -476,3 +477,7 @@ export interface YandexFormProps extends AnalyticsEventsBase {
     metrikaGoals?: string | string[];
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
 }
+
+export interface WithBorder {
+    border?: MediaBorder;
+}

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);
+        }
+    }
+}