feat: add border to media in media-block (#722)

niktverd · web-flow · commit d960ea0c6166 · 2024-01-16T19:11:46.000+06:00
diff --git a/src/blocks/Map/Map.scss 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
@@ -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
@@ -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.scss 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
@@ -4,10 +4,19 @@ 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 {getMediaBorder} from '../../utils/borderSelector';
+
+import './Media.scss';
+
+const b = block('media-block');
 
 export const MediaBlock = (props: MediaBlockProps) => {
-    const {media} = props;
+    const {media, border, disableShadow} = props;
+    const borderSelected = getMediaBorder({
+        border,
+        disableShadow,
+    });
 
     const [play, setPlay] = useState<boolean>(false);
     const theme = useTheme();
@@ -16,7 +25,7 @@ export const MediaBlock = (props: MediaBlockProps) => {
     return (
         <MediaBase {...props} onScroll={() => setPlay(true)}>
             <MediaBase.Card>
-                <Media {...mediaThemed} playVideo={play} />
+                <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
@@ -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.
+`border?: 'shadow' | 'line' | 'none` — Select border of the block.
 
 `additionalInfo?: string` — Gray text (with YFM support)
 
@@ -33,4 +33,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
@@ -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
@@ -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/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
@@ -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.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
@@ -27,7 +27,6 @@ export const MediaBase = (props: MediaBaseProps) => {
         mobileDirection = 'content-media',
         animated,
         mediaOnly,
-        disableShadow = false,
         onScroll,
         mediaOnlyColSizes = {all: 12, md: 8},
         ...mediaContentProps
@@ -69,7 +68,7 @@ export const MediaBase = (props: MediaBaseProps) => {
                     </Col>
                     {card ? (
                         <Col sizes={mediaSizes}>
-                            <div className={b('card', {shadow: !disableShadow})}>{card}</div>
+                            <div>{card}</div>
                         </Col>
                     ) : null}
                 </Row>
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
@@ -35,6 +35,7 @@ import {
     ThemedMediaVideoProps,
     TitleItemBaseProps,
     TitleItemProps,
+    WithBorder,
     YandexFormProps,
 } from './common';
 import {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks';
@@ -227,7 +228,6 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mobileDirection?: MediaDirection;
     largeMedia?: boolean;
     mediaOnly?: boolean;
-    disableShadow?: boolean;
     mediaOnlyColSizes?: GridColumnSizesType;
 }
 
@@ -239,11 +239,11 @@ export interface MediaContentProps
     button?: ButtonProps;
 }
 
-export interface MediaBlockProps extends MediaBaseBlockProps {
+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
@@ -288,6 +288,7 @@ export type Coordinate = number[];
 
 export interface MapBaseProps {
     zoom?: number;
+    className?: string;
 }
 
 export interface GMapProps extends MapBaseProps {
@@ -386,7 +387,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 +478,11 @@ export interface YandexFormProps extends AnalyticsEventsBase {
     metrikaGoals?: string | string[];
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
 }
+
+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
@@ -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;
+};
diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -619,3 +619,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);
+        }
+    }
+}
