feat: set media size instead of media large in media block

src/blocks/Map/__stories__/Map.mdx

@@ -22,7 +22,7 @@ import * as MapStories from './Map.stories.tsx';
 
 `mobileDirection: 'media-content' | 'content-media'` - Relative position of map and content for touch
 
-`largeMedia?: boolean` — An image/video takes 8 columns.
+`mediaSize?: 'default' | 'small' | 'large'` — An image/video takes 6, 4, 8 columns.
 
 `disableShadow?: boolean` — Disable shadow for the block.
 

src/blocks/Map/__stories__/Map.stories.tsx

@@ -17,7 +17,7 @@ export default {
     title: 'Blocks/Map',
     component: MapBlock,
     args: {
-        largeMedia: false,
+        mediaSize: 'default',
         mediaOnly: false,
         size: 'l',
     },
@@ -75,21 +75,30 @@ const SizeTemplate: StoryFn<MapBlockModel> = (args) => (
                     },
                     {
                         ...args,
-                        largeMedia: true,
-                        title: data.size.largeMediaTitle,
+                        mediaSize: 'small',
+                        title: data.size.smallMediaTitle,
                         map: {
                             ...data.ymap,
                             id: 'common-places-2',
                         },
                     },
+                    {
+                        ...args,
+                        mediaSize: 'large',
+                        title: data.size.largeMediaTitle,
+                        map: {
+                            ...data.ymap,
+                            id: 'common-places-3',
+                        },
+                    },
                     {
                         ...args,
                         mediaOnly: true,
                         description: undefined,
                         title: data.size.mediaOnlyTitle,
                         map: {
                             ...data.ymap,
-                            id: 'common-places-3',
+                            id: 'common-places-4',
                         },
                     },
                 ],

src/blocks/Map/__stories__/data.json

@@ -55,6 +55,7 @@
   },
   "size": {
     "defaultMediaTitle": "Default map",
+    "smallMediaTitle": "Small map",
     "largeMediaTitle": "Large map",
     "mediaOnlyTitle": "map Only"
   },

src/blocks/Media/__stories__/Media.mdx

@@ -19,7 +19,7 @@ import * as MediaStories from './Media.stories.tsx';
 
 `direction: 'media-content' | 'content-media'` — Relative position of media and content.
 
-`largeMedia?: boolean` — An image/video takes 8 columns.
+`mediaSize?: 'default' | 'small' | 'large'` — An image/video takes 6, 4, 8 columns.
 
 `disableShadow?: boolean` — Disable shadow for the block.
 

src/blocks/Media/__stories__/Media.stories.tsx

@@ -19,7 +19,7 @@ export default {
     title: 'Blocks/Media',
     component: Media,
     args: {
-        largeMedia: false,
+        mediaSize: 'default',
         mediaOnly: false,
         size: 'l',
     },
@@ -110,7 +110,12 @@ const SizeTemplate: StoryFn<MediaBlockModel> = (args) => (
                 },
                 {
                     ...args,
-                    largeMedia: true,
+                    mediaSize: 'small',
+                    title: data.size.smallMediaTitle,
+                },
+                {
+                    ...args,
+                    mediaSize: 'large',
                     title: data.size.largeMediaTitle,
                 },
                 {
@@ -154,7 +159,13 @@ const IframeTemplate: StoryFn<MediaBlockModel> = (args) => (
                 {
                     ...args,
                     ...data.iframe.default.content,
-                    largeMedia: true,
+                    mediaSize: 'small',
+                    title: data.size.smallMediaTitle,
+                },
+                {
+                    ...args,
+                    ...data.iframe.default.content,
+                    mediaSize: 'large',
                     title: data.size.largeMediaTitle,
                 },
                 {
@@ -172,7 +183,13 @@ const IframeTemplate: StoryFn<MediaBlockModel> = (args) => (
                 {
                     ...args,
                     ...data.iframe.withoutMargins.content,
-                    largeMedia: true,
+                    mediaSize: 'small',
+                    title: data.iframe.withoutMargins.smallMediaTitle,
+                },
+                {
+                    ...args,
+                    ...data.iframe.withoutMargins.content,
+                    mediaSize: 'large',
                     title: data.iframe.withoutMargins.largeMediaTitle,
                 },
                 {

src/blocks/Media/__stories__/data.json

@@ -300,6 +300,7 @@
     },
     "withoutMargins": {
       "defaultMediaTitle": "Media Iframe without margins",
+      "smallMediaTitle": "Small Media Iframe without margins",
       "largeMediaTitle": "Large Media Iframe without margins",
       "mediaOnlyTitle": "Media Iframe Only  without margins",
       "content": {
@@ -323,6 +324,7 @@
   },
   "size": {
     "defaultMediaTitle": "Default Media",
+    "smallMediaTitle": "Small Media",
     "largeMediaTitle": "Large Media",
     "mediaOnlyTitle": "Media Only"
   },

src/blocks/Media/schema.ts

@@ -6,6 +6,7 @@ import {
     ButtonBlock,
     MediaProps,
     mediaDirection,
+    mediaSize,
     withTheme,
 } from '../../schema/validators/common';
 import {ContentBase} from '../../sub-blocks/Content/schema';
@@ -35,8 +36,9 @@ export const MediaBlockBaseProps = {
         type: 'string',
         enum: mediaDirection,
     },
-    largeMedia: {
-        type: 'boolean',
+    mediaSize: {
+        type: 'string',
+        enum: mediaSize,
     },
     mediaOnly: {
         type: 'boolean',

src/components/MediaBase/MediaBase.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement, useMemo} from 'react';
+import React, {ReactElement, useCallback, useMemo} from 'react';
 
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import {Col, Grid, GridColumnSize, Row} from '../../grid';
@@ -22,7 +22,7 @@ interface MediaBaseProps extends MediaBaseBlockProps {
 export const MediaBase = (props: MediaBaseProps) => {
     const {
         children,
-        largeMedia,
+        mediaSize,
         direction = 'content-media',
         mobileDirection = 'content-media',
         animated,
@@ -33,15 +33,42 @@ export const MediaBase = (props: MediaBaseProps) => {
     } = props;
     const {title, description} = mediaContentProps;
 
+    const getSize = useCallback(
+        (isMedia: boolean) => {
+            if (isMedia) {
+                if (mediaSize === 'large') {
+                    return 8;
+                } else if (mediaSize === 'small') {
+                    return 4;
+                }
+                return 6;
+            } else {
+                if (mediaSize === 'large') {
+                    return 4;
+                } else if (mediaSize === 'small') {
+                    return 8;
+                }
+                return 6;
+            }
+        },
+        [mediaSize],
+    );
+
     const mediaSizes = useMemo(() => {
         return mediaOnly
             ? {[GridColumnSize.All]: 12}
-            : {[GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12};
-    }, [mediaOnly, largeMedia]);
+            : {
+                  [GridColumnSize.Md]: getSize(true),
+                  [GridColumnSize.All]: 12,
+              };
+    }, [mediaOnly, getSize]);
 
     const contentSizes = useMemo(() => {
-        return {[GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12};
-    }, [largeMedia]);
+        return {
+            [GridColumnSize.Md]: getSize(false),
+            [GridColumnSize.All]: 12,
+        };
+    }, [getSize]);
 
     const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;
     const card = children.type === Card ? children?.props.children : null;

src/models/constructor-items/blocks.ts

@@ -27,6 +27,7 @@ import {
     MapProps,
     MediaDirection,
     MediaProps,
+    MediaSize,
     TextSize,
     TextTheme,
     ThemedImage,
@@ -220,7 +221,7 @@ export interface CompaniesBlockProps extends Animatable {
 export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     direction?: MediaDirection;
     mobileDirection?: MediaDirection;
-    largeMedia?: boolean;
+    mediaSize?: MediaSize;
     mediaOnly?: boolean;
     disableShadow?: boolean;
 }

src/models/constructor-items/common.ts

@@ -72,6 +72,7 @@ export type ColumnsCount = 1 | 2 | 3 | 4;
 export type LegendTableMarkerType = 'disk' | 'tick';
 export type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';
 export type MediaDirection = 'media-content' | 'content-media';
+export type MediaSize = 'default' | 'small' | 'large';
 export type PriceDescriptionColor = 'cornflower' | 'black';
 export type ContentSize = 's' | 'l';
 export type ContentTextSize = 's' | 'm' | 'l';

src/schema/validators/common.ts

@@ -11,6 +11,7 @@ import {AnalyticsEventSchema} from './event';
 import {pixelEvents} from './pixel';
 
 export const mediaDirection = ['media-content', 'content-media'];
+export const mediaSize = ['default', 'small', 'large'];
 export const textSize = ['s', 'm', 'l'];
 export const containerSizesArray = ['sm', 'md', 'lg', 'xl', 'all'];
 export const sliderSizesArray = ['sm', 'md', 'lg', 'xl'];