fixup! fixup! fixup! feat: add border to media in media-block

gravity-ui · Jan 16, 2024 · 234300c · 234300c
1 parent 50d5125
commit 234300c
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 45 deletions.
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.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
@@ -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
@@ -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.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
@@ -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
@@ -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
@@ -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;
+};