From dc93876eac14b81c4d7d62c3f438f458262762c2 Mon Sep 17 00:00:00 2001
From: Nik Tverd <nn.tverd@gmail.com>
Date: Tue, 5 Dec 2023 16:15:37 +0600
Subject: [PATCH 1/4] feat: add border to media in media-block

---
 src/blocks/Media/Media.scss                    |  7 +++++++
 src/blocks/Media/Media.tsx                     | 18 ++++++++++++++----
 src/blocks/Media/__stories__/Media.mdx         |  4 +++-
 src/blocks/Media/__stories__/Media.stories.tsx | 14 +++++++++++++-
 src/blocks/Media/schema.ts                     |  7 +++++++
 src/components/MediaBase/MediaBase.tsx         |  3 +++
 src/models/constructor-items/blocks.ts         |  3 ++-
 src/models/constructor-items/common.ts         |  7 ++++++-
 styles/mixins.scss                             | 13 +++++++++++++
 9 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 src/blocks/Media/Media.scss

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<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>
     );
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
+
 </StoryTemplate>
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 3379e72e2..adf596ab2 100644
--- a/src/blocks/Media/schema.ts
+++ b/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 = {
diff --git a/src/components/MediaBase/MediaBase.tsx b/src/components/MediaBase/MediaBase.tsx
index 6aee0beb0..9e038b526 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,
         mediaOnlyColSizes = {all: 12, md: 8},
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
index 000027558..85e062558 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';
@@ -234,7 +235,7 @@ export interface MediaContentProps
     button?: ButtonProps;
 }
 
-export interface MediaBlockProps extends MediaBaseBlockProps {
+export interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {
     media: ThemeSupporting<MediaProps>;
 }
 
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
index 0100fae7a..fe30bd9e4 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;
@@ -476,3 +477,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);
+        }
+    }
+}

From f5215cfc141222cb4eaa4756c6a9d577cecd3414 Mon Sep 17 00:00:00 2001
From: Nik Tverd <nn.tverd@gmail.com>
Date: Tue, 19 Dec 2023 14:13:12 +0600
Subject: [PATCH 2/4] fixup! feat: add border to media in media-block

---
 src/blocks/Media/Media.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx
index 21236152d..b237897f0 100644
--- a/src/blocks/Media/Media.tsx
+++ b/src/blocks/Media/Media.tsx
@@ -13,14 +13,14 @@ const b = block('media-block');
 export const MediaBlock = (props: MediaBlockProps) => {
     const {media, border = 'shadow', disableShadow} = props;
 
-    const mediaBaseShadow = disableShadow || border !== 'shadow';
+    const disableMediaBaseShadow = disableShadow || border !== 'shadow';
 
     const [play, setPlay] = useState<boolean>(false);
     const theme = useTheme();
     const mediaThemed = getThemedValue(media, theme);
 
     return (
-        <MediaBase {...props} onScroll={() => setPlay(true)} disableShadow={mediaBaseShadow}>
+        <MediaBase {...props} onScroll={() => setPlay(true)} disableShadow={disableMediaBaseShadow}>
             <MediaBase.Card>
                 <Media
                     {...mediaThemed}

From 50d51259c99938f5d579d43940d3a5f31e3e430d Mon Sep 17 00:00:00 2001
From: Nik Tverd <nn.tverd@gmail.com>
Date: Mon, 25 Dec 2023 15:57:26 +0600
Subject: [PATCH 3/4] fixup! fixup! feat: add border to media in media-block

---
 src/blocks/Media/Media.tsx              |  9 +++++++--
 src/components/MediaBase/MediaBase.scss |  9 +++++++++
 src/components/MediaBase/MediaBase.tsx  | 12 +++++++++++-
 src/models/constructor-items/blocks.ts  |  2 +-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx
index b237897f0..6acf2153c 100644
--- a/src/blocks/Media/Media.tsx
+++ b/src/blocks/Media/Media.tsx
@@ -13,14 +13,19 @@ const b = block('media-block');
 export const MediaBlock = (props: MediaBlockProps) => {
     const {media, border = 'shadow', disableShadow} = props;
 
-    const disableMediaBaseShadow = disableShadow || border !== 'shadow';
+    const mediaBorder = disableShadow && border === 'shadow' ? 'none' : border;
 
     const [play, setPlay] = useState<boolean>(false);
     const theme = useTheme();
     const mediaThemed = getThemedValue(media, theme);
 
     return (
-        <MediaBase {...props} onScroll={() => setPlay(true)} disableShadow={disableMediaBaseShadow}>
+        <MediaBase
+            {...props}
+            onScroll={() => setPlay(true)}
+            border={mediaBorder}
+            disableShadow={disableShadow}
+        >
             <MediaBase.Card>
                 <Media
                     {...mediaThemed}
diff --git a/src/components/MediaBase/MediaBase.scss b/src/components/MediaBase/MediaBase.scss
index 1c0c73687..cec08080b 100644
--- a/src/components/MediaBase/MediaBase.scss
+++ b/src/components/MediaBase/MediaBase.scss
@@ -21,6 +21,15 @@ $block: '.#{$ns}media-base';
         &_shadow {
             @include image-shadow();
         }
+
+        &_specialBorderRadius {
+            img,
+            video,
+            iframe,
+            .#{$ns}map {
+                border-radius: calc(#{$borderRadius} - 1px); // special for safari
+            }
+        }
     }
 
     &__row_reverse {
diff --git a/src/components/MediaBase/MediaBase.tsx b/src/components/MediaBase/MediaBase.tsx
index 9e038b526..db0f41ded 100644
--- a/src/components/MediaBase/MediaBase.tsx
+++ b/src/components/MediaBase/MediaBase.tsx
@@ -31,6 +31,7 @@ export const MediaBase = (props: MediaBaseProps) => {
          * @deprecated use custom class for media-component
          */
         disableShadow = false,
+        border = 'shadow',
         onScroll,
         mediaOnlyColSizes = {all: 12, md: 8},
         ...mediaContentProps
@@ -49,6 +50,8 @@ export const MediaBase = (props: MediaBaseProps) => {
 
     const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;
     const card = children.type === Card ? children?.props.children : null;
+    const isShadowDisabled = disableShadow || border !== 'shadow';
+    const specialBorderRadius = border === 'line';
 
     return (
         <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>
@@ -72,7 +75,14 @@ export const MediaBase = (props: MediaBaseProps) => {
                     </Col>
                     {card ? (
                         <Col sizes={mediaSizes}>
-                            <div className={b('card', {shadow: !disableShadow})}>{card}</div>
+                            <div
+                                className={b('card', {
+                                    shadow: !isShadowDisabled,
+                                    specialBorderRadius: specialBorderRadius,
+                                })}
+                            >
+                                {card}
+                            </div>
                         </Col>
                     ) : null}
                 </Row>
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
index 85e062558..eb303111e 100644
--- a/src/models/constructor-items/blocks.ts
+++ b/src/models/constructor-items/blocks.ts
@@ -218,7 +218,7 @@ export interface CompaniesBlockProps extends Animatable {
     images: ThemeSupporting<ImageDeviceProps>;
 }
 
-export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
+export interface MediaBaseBlockProps extends Animatable, MediaContentProps, WithBorder {
     direction?: MediaDirection;
     mobileDirection?: MediaDirection;
     largeMedia?: boolean;

From 234300c640296d71ea4a240250ccfc298c346cac Mon Sep 17 00:00:00 2001
From: Nik Tverd <nn.tverd@gmail.com>
Date: Tue, 16 Jan 2024 17:29:25 +0600
Subject: [PATCH 4/4] fixup! fixup! fixup! feat: add border to media in
 media-block

---
 src/blocks/Map/Map.scss                |  7 +++++++
 src/blocks/Map/Map.tsx                 | 27 +++++++++++++++++++-------
 src/blocks/Map/__stories__/Map.mdx     |  2 +-
 src/blocks/Media/Media.tsx             | 22 ++++++++-------------
 src/blocks/Media/__stories__/Media.mdx |  2 +-
 src/components/Map/GoogleMap.tsx       |  4 ++--
 src/components/Map/YMap/YandexMap.tsx  |  9 +++++++--
 src/components/MediaBase/MediaBase.tsx | 16 +--------------
 src/models/constructor-items/blocks.ts |  5 ++---
 src/models/constructor-items/common.ts |  5 +++++
 src/utils/borderSelector.ts            | 24 +++++++++++++++++++++++
 11 files changed, 78 insertions(+), 45 deletions(-)
 create mode 100644 src/blocks/Map/Map.scss
 create mode 100644 src/utils/borderSelector.ts

diff --git a/src/blocks/Map/Map.scss b/src/blocks/Map/Map.scss
new file mode 100644
index 000000000..87548c9e9
--- /dev/null
+++ b/src/blocks/Map/Map.scss
@@ -0,0 +1,7 @@
+@import '../../../styles/mixins';
+
+$block: '.#{$ns}map-block';
+
+#{$block} {
+    @include media-border();
+}
diff --git a/src/blocks/Map/Map.tsx b/src/blocks/Map/Map.tsx
index 5f0e3125e..d3d8ea7e8 100644
--- a/src/blocks/Map/Map.tsx
+++ b/src/blocks/Map/Map.tsx
@@ -3,13 +3,26 @@ import React from 'react';
 import Map from '../../components/Map/Map';
 import MediaBase from '../../components/MediaBase/MediaBase';
 import {MapBlockProps} from '../../models';
+import {block} from '../../utils';
+import {getMediaBorder} from '../../utils/borderSelector';
 
-export const MapBlock = ({map, ...props}: MapBlockProps) => (
-    <MediaBase {...props}>
-        <MediaBase.Card>
-            <Map {...map} />
-        </MediaBase.Card>
-    </MediaBase>
-);
+import './Map.scss';
+
+const b = block('map-block');
+
+export const MapBlock = ({map, border, disableShadow, ...props}: MapBlockProps) => {
+    const borderSelected = getMediaBorder({
+        border,
+        disableShadow,
+    });
+
+    return (
+        <MediaBase {...props}>
+            <MediaBase.Card>
+                <Map {...map} className={b({border: borderSelected})} />
+            </MediaBase.Card>
+        </MediaBase>
+    );
+};
 
 export default MapBlock;
diff --git a/src/blocks/Map/__stories__/Map.mdx b/src/blocks/Map/__stories__/Map.mdx
index 54dc37599..24f74fc8c 100644
--- a/src/blocks/Map/__stories__/Map.mdx
+++ b/src/blocks/Map/__stories__/Map.mdx
@@ -24,7 +24,7 @@ import * as MapStories from './Map.stories.tsx';
 
 `largeMedia?: boolean` — An image/video takes 8 columns.
 
-`disableShadow?: boolean` — Disable shadow for the block.
+`border?: 'shadow' | 'line' | 'none` — Select border of the block.
 
 `additionalInfo?: string` — Gray text (with YFM support)
 
diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx
index 6acf2153c..a0079b0d7 100644
--- a/src/blocks/Media/Media.tsx
+++ b/src/blocks/Media/Media.tsx
@@ -5,33 +5,27 @@ import MediaBase from '../../components/MediaBase/MediaBase';
 import {useTheme} from '../../context/theme';
 import {MediaBlockProps} from '../../models';
 import {block, getThemedValue} from '../../utils';
+import {getMediaBorder} from '../../utils/borderSelector';
 
 import './Media.scss';
 
 const b = block('media-block');
 
 export const MediaBlock = (props: MediaBlockProps) => {
-    const {media, border = 'shadow', disableShadow} = props;
-
-    const mediaBorder = disableShadow && border === 'shadow' ? 'none' : border;
+    const {media, border, disableShadow} = props;
+    const borderSelected = getMediaBorder({
+        border,
+        disableShadow,
+    });
 
     const [play, setPlay] = useState<boolean>(false);
     const theme = useTheme();
     const mediaThemed = getThemedValue(media, theme);
 
     return (
-        <MediaBase
-            {...props}
-            onScroll={() => setPlay(true)}
-            border={mediaBorder}
-            disableShadow={disableShadow}
-        >
+        <MediaBase {...props} onScroll={() => setPlay(true)}>
             <MediaBase.Card>
-                <Media
-                    {...mediaThemed}
-                    playVideo={play}
-                    className={b({border: disableShadow ? 'none' : border})}
-                />
+                <Media {...mediaThemed} playVideo={play} className={b({border: borderSelected})} />
             </MediaBase.Card>
         </MediaBase>
     );
diff --git a/src/blocks/Media/__stories__/Media.mdx b/src/blocks/Media/__stories__/Media.mdx
index 180b7ed2f..aaa6e2af6 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 (Deprecated).
+`border?: 'shadow' | 'line' | 'none` — Select border of the block.
 
 `additionalInfo?: string` — Gray text (with YFM support)
 
diff --git a/src/components/Map/GoogleMap.tsx b/src/components/Map/GoogleMap.tsx
index 9641023d3..395b6301e 100644
--- a/src/components/Map/GoogleMap.tsx
+++ b/src/components/Map/GoogleMap.tsx
@@ -30,7 +30,7 @@ function getScriptSrc(params: GoogleMapLinkParams) {
 }
 
 const GoogleMap: React.FC<GMapProps> = (props) => {
-    const {address, zoom} = props;
+    const {address, zoom, className} = props;
     const {apiKey, scriptSrc} = useContext(MapsContext);
     const {lang = Lang.Ru} = useContext(LocaleContext);
     const isMobile = useContext(MobileContext);
@@ -63,7 +63,7 @@ const GoogleMap: React.FC<GMapProps> = (props) => {
 
     return (
         <iframe
-            className={b()}
+            className={b(null, className)}
             ref={ref}
             style={{
                 height,
diff --git a/src/components/Map/YMap/YandexMap.tsx b/src/components/Map/YMap/YandexMap.tsx
index 2b81c34e0..0f15afea1 100644
--- a/src/components/Map/YMap/YandexMap.tsx
+++ b/src/components/Map/YMap/YandexMap.tsx
@@ -24,7 +24,7 @@ const DEFAULT_ZOOM = 9;
 const INITIAL_CENTER = [0, 0];
 
 const YandexMap: React.FC<YMapProps> = (props) => {
-    const {markers, zoom, id} = props;
+    const {markers, zoom, id, className} = props;
     const {apiKey, scriptSrc, nonce} = useContext(MapsContext);
     const isMobile = useContext(MobileContext);
 
@@ -108,7 +108,12 @@ const YandexMap: React.FC<YMapProps> = (props) => {
         >
             <div className={b('wrapper')}>
                 {/* hidden - to show the map after calculating the center */}
-                <div id={containerId} className={b({hidden: !ready})} ref={ref} style={{height}} />
+                <div
+                    id={containerId}
+                    className={b({hidden: !ready}, className)}
+                    ref={ref}
+                    style={{height}}
+                />
                 {loading ? <Spin size="xl" className={b('spinner')} /> : null}
             </div>
         </ErrorWrapper>
diff --git a/src/components/MediaBase/MediaBase.tsx b/src/components/MediaBase/MediaBase.tsx
index db0f41ded..0b0d75d18 100644
--- a/src/components/MediaBase/MediaBase.tsx
+++ b/src/components/MediaBase/MediaBase.tsx
@@ -27,11 +27,6 @@ export const MediaBase = (props: MediaBaseProps) => {
         mobileDirection = 'content-media',
         animated,
         mediaOnly,
-        /**
-         * @deprecated use custom class for media-component
-         */
-        disableShadow = false,
-        border = 'shadow',
         onScroll,
         mediaOnlyColSizes = {all: 12, md: 8},
         ...mediaContentProps
@@ -50,8 +45,6 @@ export const MediaBase = (props: MediaBaseProps) => {
 
     const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;
     const card = children.type === Card ? children?.props.children : null;
-    const isShadowDisabled = disableShadow || border !== 'shadow';
-    const specialBorderRadius = border === 'line';
 
     return (
         <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>
@@ -75,14 +68,7 @@ export const MediaBase = (props: MediaBaseProps) => {
                     </Col>
                     {card ? (
                         <Col sizes={mediaSizes}>
-                            <div
-                                className={b('card', {
-                                    shadow: !isShadowDisabled,
-                                    specialBorderRadius: specialBorderRadius,
-                                })}
-                            >
-                                {card}
-                            </div>
+                            <div>{card}</div>
                         </Col>
                     ) : null}
                 </Row>
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
index eb303111e..8a360b984 100644
--- a/src/models/constructor-items/blocks.ts
+++ b/src/models/constructor-items/blocks.ts
@@ -218,12 +218,11 @@ export interface CompaniesBlockProps extends Animatable {
     images: ThemeSupporting<ImageDeviceProps>;
 }
 
-export interface MediaBaseBlockProps extends Animatable, MediaContentProps, WithBorder {
+export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     direction?: MediaDirection;
     mobileDirection?: MediaDirection;
     largeMedia?: boolean;
     mediaOnly?: boolean;
-    disableShadow?: boolean;
     mediaOnlyColSizes?: GridColumnSizesType;
 }
 
@@ -239,7 +238,7 @@ export interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {
     media: ThemeSupporting<MediaProps>;
 }
 
-export interface MapBlockProps extends MediaBaseBlockProps {
+export interface MapBlockProps extends MediaBaseBlockProps, WithBorder {
     map: MapProps;
 }
 
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
index fe30bd9e4..d702499bf 100644
--- a/src/models/constructor-items/common.ts
+++ b/src/models/constructor-items/common.ts
@@ -288,6 +288,7 @@ export type Coordinate = number[];
 
 export interface MapBaseProps {
     zoom?: number;
+    className?: string;
 }
 
 export interface GMapProps extends MapBaseProps {
@@ -480,4 +481,8 @@ export interface YandexFormProps extends AnalyticsEventsBase {
 
 export interface WithBorder {
     border?: MediaBorder;
+    /**
+     * @deprecated use custom class for media-component
+     */
+    disableShadow?: boolean;
 }
diff --git a/src/utils/borderSelector.ts b/src/utils/borderSelector.ts
new file mode 100644
index 000000000..7d5428a3a
--- /dev/null
+++ b/src/utils/borderSelector.ts
@@ -0,0 +1,24 @@
+// This is a crutch
+// The crutch is created in order to help us to work with sites, which use
+// "disableShadow" flag in their content.
+// We have deprecated the flag.
+// We have to remove it after deleting of "disableShadow" and migration of projects content
+
+import {MediaBorder} from '../models';
+
+type GetMediaBorderArgs = {
+    border?: MediaBorder;
+    disableShadow?: boolean;
+};
+
+export const getMediaBorder = ({border, disableShadow}: GetMediaBorderArgs) => {
+    if (border) {
+        return border;
+    }
+
+    if (disableShadow) {
+        return 'none' as MediaBorder;
+    }
+
+    return 'shadow' as MediaBorder;
+};