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) => ( - - - - - -); +import './Map.scss'; + +const b = block('map-block'); + +export const MapBlock = ({map, border, disableShadow, ...props}: MapBlockProps) => { + const borderSelected = getMediaBorder({ + border, + disableShadow, + }); + + return ( + + + + + + ); +}; 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(false); const theme = useTheme(); const mediaThemed = getThemedValue(media, theme); return ( - setPlay(true)} - border={mediaBorder} - disableShadow={disableShadow} - > + setPlay(true)}> - + ); 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 = (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 = (props) => { return (