@gravity-ui/page-constructor 4.51.1 → 4.52.0

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -16,6 +16,7 @@ const utils_1 = require("../../utils");
 const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls"));
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const utils_2 = require("./utils");
+const youtube_1 = require("./utils/youtube");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
 // eslint-disable-next-line react/display-name
@@ -52,8 +53,15 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         if (!playerRef) {
             return;
         }
+        let play, pause, addEventListener;
         const videoInstance = playerRef.getInternalPlayer();
-        const { play, pause, addEventListener } = videoInstance;
+        if ((0, youtube_1.isYoutubePlayerInstance)(videoInstance)) {
+            ({ pauseVideo: pause, playVideo: play, addEventListener } = videoInstance);
+        }
+        else {
+            // it is assumed that `videoInstance` is HTMLVideoElement by default
+            ({ play, pause, addEventListener } = videoInstance);
+        }
         // eslint-disable-next-line consistent-return
         return {
             play: play.bind(videoInstance),

package/build/cjs/components/ReactPlayer/utils/youtube.d.ts

@@ -0,0 +1,2 @@
+import type { YouTubePlayer } from 'youtube-player/dist/types';
+export declare const isYoutubePlayerInstance: (playerInstance: Record<string, unknown> | YouTubePlayer) => playerInstance is YouTubePlayer;

package/build/cjs/components/ReactPlayer/utils/youtube.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isYoutubePlayerInstance = void 0;
+const isYoutubePlayerInstance = (playerInstance) => {
+    return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
+};
+exports.isYoutubePlayerInstance = isYoutubePlayerInstance;

package/build/cjs/constructor-items.d.ts

@@ -30,6 +30,7 @@ export declare const subBlockMap: {
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
     "price-card": (props: import("./models").PriceCardProps) => JSX.Element;
+    "image-card": (props: import("./models").ImageCardProps) => JSX.Element;
 };
 export declare const navItemMap: {
     button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;

package/build/cjs/constructor-items.js

@@ -39,6 +39,7 @@ exports.subBlockMap = {
     [models_1.SubBlockType.Content]: sub_blocks_1.Content,
     [models_1.SubBlockType.Quote]: sub_blocks_1.Quote,
     [models_1.SubBlockType.PriceCard]: sub_blocks_1.PriceCard,
+    [models_1.SubBlockType.ImageCard]: sub_blocks_1.ImageCard,
 };
 exports.navItemMap = {
     [models_1.NavigationItemType.Button]: NavigationItem_1.NavigationButton,

package/build/cjs/models/constructor-items/common.d.ts

@@ -62,6 +62,7 @@ export type ContentSize = 's' | 'l';
 export type ContentTextSize = 's' | 'm' | 'l';
 export type ContentTheme = 'default' | 'dark' | 'light';
 export type FileLinkType = 'vertical' | 'horizontal';
+export type ImageCardMargins = 's' | 'm';
 export interface Themable {
     theme?: TextTheme;
 }

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AnalyticsEventsBase, PixelEvent } from '../common';
 import { ContentBlockProps } from './blocks';
-import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -22,7 +22,8 @@ export declare enum SubBlockType {
      * @deprecated Will be removed, use BasicCard instead
      */
     Card = "card",
-    PriceCard = "price-card"
+    PriceCard = "price-card",
+    ImageCard = "image-card"
 }
 export declare enum IconPosition {
     Top = "top",
@@ -35,6 +36,10 @@ export interface PositionedIcon {
 export interface IconWrapperProps {
     icon?: PositionedIcon;
 }
+export declare enum ImageCardDirection {
+    Direct = "direct",
+    Reverse = "reverse"
+}
 export declare const SubBlockTypes: SubBlockType[];
 export interface DividerProps {
     size?: DividerSize;
@@ -137,6 +142,13 @@ export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     fullscreen?: boolean;
     icon?: PositionedIcon;
 }
+export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
+    image: ImageProps;
+    enableImageBorderRadius?: boolean;
+    margins?: ImageCardMargins;
+    direction?: ImageCardDirection;
+    backgroundColor?: string;
+}
 export type DividerModel = {
     type: SubBlockType.Divider;
 } & DividerProps;
@@ -167,5 +179,8 @@ export type BasicCardModel = {
 export type PriceCardModel = {
     type: SubBlockType.PriceCard;
 } & PriceCardProps;
-export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel;
+export type ImageCardModel = {
+    type: SubBlockType.ImageCard;
+} & ImageCardProps;
+export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel | ImageCardModel;
 export type SubBlock = SubBlockModels;

package/build/cjs/models/constructor-items/sub-blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubBlockTypes = exports.IconPosition = exports.SubBlockType = void 0;
+exports.SubBlockTypes = exports.ImageCardDirection = exports.IconPosition = exports.SubBlockType = void 0;
 var SubBlockType;
 (function (SubBlockType) {
     SubBlockType["Divider"] = "divider";
@@ -21,10 +21,16 @@ var SubBlockType;
      */
     SubBlockType["Card"] = "card";
     SubBlockType["PriceCard"] = "price-card";
+    SubBlockType["ImageCard"] = "image-card";
 })(SubBlockType = exports.SubBlockType || (exports.SubBlockType = {}));
 var IconPosition;
 (function (IconPosition) {
     IconPosition["Top"] = "top";
     IconPosition["Left"] = "left";
 })(IconPosition = exports.IconPosition || (exports.IconPosition = {}));
+var ImageCardDirection;
+(function (ImageCardDirection) {
+    ImageCardDirection["Direct"] = "direct";
+    ImageCardDirection["Reverse"] = "reverse";
+})(ImageCardDirection = exports.ImageCardDirection || (exports.ImageCardDirection = {}));
 exports.SubBlockTypes = Object.values(SubBlockType);

package/build/cjs/schema/constants.d.ts

@@ -1,6 +1,82 @@
 import { BlockType } from '../models';
 export declare const blockSchemas: Record<BlockType, object>;
 export declare const cardSchemas: {
+    'image-card': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            image: {
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
+            };
+            direction: {
+                type: string;
+                enum: string[];
+            };
+            margins: {
+                type: string;
+                enum: string[];
+            };
+            backgroundColor: {
+                type: string;
+            };
+            title: {
+                oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        urlTitle: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                    contentType?: undefined;
+                })[];
+            };
+            text: {
+                type: string;
+                contentType: string;
+                inputType: string;
+            };
+            border: {
+                type: string;
+                enum: string[];
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
     'price-card': {
         additionalProperties: boolean;
         required: string[];

package/build/cjs/schema/constants.js

@@ -4,7 +4,7 @@ exports.constructorCardSchemaNames = exports.constructorBlockSchemaNames = expor
 const blocks_1 = require("./validators/blocks");
 const sub_blocks_1 = require("./validators/sub-blocks");
 exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock), blocks_1.FilterBlock), blocks_1.FormBlock);
-exports.cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.BackgroundCard), sub_blocks_1.Quote), sub_blocks_1.BasicCard), sub_blocks_1.PriceCardBlock);
+exports.cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.BackgroundCard), sub_blocks_1.Quote), sub_blocks_1.BasicCard), sub_blocks_1.PriceCardBlock), sub_blocks_1.ImageCard);
 exports.constructorBlockSchemaNames = [
     'divider',
     'quote',
@@ -41,4 +41,5 @@ exports.constructorCardSchemaNames = [
     'basic-card',
     'layout-item',
     'price-card',
+    'image-card',
 ];

package/build/cjs/schema/validators/sub-blocks.d.ts

@@ -8,3 +8,4 @@ export * from '../../sub-blocks/Divider/schema';
 export * from '../../sub-blocks/BasicCard/schema';
 export * from '../../sub-blocks/PriceCard/schema';
 export * from '../../sub-blocks/HubspotForm/schema';
+export * from '../../sub-blocks/ImageCard/schema';

package/build/cjs/schema/validators/sub-blocks.js

@@ -11,3 +11,4 @@ tslib_1.__exportStar(require("../../sub-blocks/Divider/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/BasicCard/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/PriceCard/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/HubspotForm/schema"), exports);
+tslib_1.__exportStar(require("../../sub-blocks/ImageCard/schema"), exports);

package/build/cjs/sub-blocks/ImageCard/ImageCard.css

@@ -0,0 +1,59 @@
+.pc-image-card_border_shadow {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-image-card {
+  min-height: 248px;
+  height: 100%;
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--g-color-base-float);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  min-height: 1px;
+}
+.pc-image-card_border_line {
+  border: 1px solid var(--g-color-line-generic);
+}
+.pc-image-card .pc-image-card__content {
+  padding: 32px;
+}
+.pc-image-card .pc-image-card__image_inner {
+  width: 100%;
+  display: block;
+}
+.pc-image-card .pc-image-card__image_inner_radius {
+  border-radius: var(--pc-border-radius);
+}
+.pc-image-card .pc-image-card__image_margins_s {
+  padding: 4px;
+}
+.pc-image-card .pc-image-card__image_margins_s .pc-image-card__image_inner {
+  border-radius: calc(var(--pc-border-radius) - var(--pc-image-padding));
+}
+.pc-image-card .pc-image-card__image_margins_m {
+  padding: 32px;
+}
+.pc-image-card .pc-image-card__image_margins_m .pc-image-card__image_inner {
+  border-radius: initial;
+}
+.pc-image-card_with-content {
+  display: flex;
+  flex-direction: column;
+}
+.pc-image-card_with-content.pc-image-card_direction_direct .pc-image-card__image {
+  padding-bottom: 0;
+}
+.pc-image-card_with-content.pc-image-card_direction_direct .pc-image-card__content {
+  padding-top: 24px;
+}
+.pc-image-card_with-content.pc-image-card_direction_reverse {
+  flex-direction: column-reverse;
+}
+.pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__image {
+  padding-top: 0;
+}
+.pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__content {
+  padding-bottom: 24px;
+}

package/build/cjs/sub-blocks/ImageCard/ImageCard.d.ts

@@ -0,0 +1,3 @@
+import { ImageCardProps } from '../../models';
+declare const ImageCard: (props: ImageCardProps) => JSX.Element;
+export default ImageCard;

package/build/cjs/sub-blocks/ImageCard/ImageCard.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../components");
+const utils_1 = require("../../components/Media/Image/utils");
+const models_1 = require("../../models");
+const utils_2 = require("../../utils");
+const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
+const b = (0, utils_2.block)('image-card');
+const ImageCard = (props) => {
+    const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, } = props;
+    const hasContent = Boolean(text || title);
+    const imageProps = (0, utils_1.getMediaImage)(image);
+    return (react_1.default.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } },
+        react_1.default.createElement("div", { className: b('image', { margins }) },
+            react_1.default.createElement(components_1.Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
+        hasContent && (react_1.default.createElement("div", { className: b('content') },
+            react_1.default.createElement(Content_1.default, { title: title, text: text, colSizes: { all: 12, md: 12 }, size: "s" })))));
+};
+exports.default = ImageCard;

package/build/cjs/sub-blocks/ImageCard/schema.d.ts

@@ -0,0 +1,78 @@
+export declare const ImageCard: {
+    'image-card': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            image: {
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
+            };
+            direction: {
+                type: string;
+                enum: string[];
+            };
+            margins: {
+                type: string;
+                enum: string[];
+            };
+            backgroundColor: {
+                type: string;
+            };
+            title: {
+                oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        urlTitle: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                    contentType?: undefined;
+                })[];
+            };
+            text: {
+                type: string;
+                contentType: string;
+                inputType: string;
+            };
+            border: {
+                type: string;
+                enum: string[];
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
+};

package/build/cjs/sub-blocks/ImageCard/schema.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageCard = void 0;
+const tslib_1 = require("tslib");
+const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
+const common_1 = require("../../schema/validators/common");
+const components_1 = require("../../schema/validators/components");
+const schema_1 = require("../Content/schema");
+const ImageCardBlockContentProps = (0, pick_1.default)(schema_1.ContentBase, ['title', 'text']);
+exports.ImageCard = {
+    'image-card': {
+        additionalProperties: false,
+        required: ['image'],
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), ImageCardBlockContentProps), { image: components_1.ImageProps, direction: {
+                type: 'string',
+                enum: ['direct', 'reverse'],
+            }, margins: {
+                type: 'string',
+                enum: ['s', 'm'],
+            }, backgroundColor: {
+                type: 'string',
+            } }),
+    },
+};

package/build/cjs/sub-blocks/index.d.ts

@@ -9,3 +9,4 @@ export { default as BasicCard } from './BasicCard/BasicCard';
 export { default as Content } from './Content/Content';
 export { default as HubspotForm } from './HubspotForm';
 export { default as PriceCard } from './PriceCard/PriceCard';
+export { default as ImageCard } from './ImageCard/ImageCard';

package/build/cjs/sub-blocks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PriceCard = exports.HubspotForm = exports.Content = exports.BasicCard = exports.BackgroundCard = exports.LayoutItem = exports.BannerCard = exports.MediaCard = exports.PriceDetailed = exports.Quote = exports.Divider = void 0;
+exports.ImageCard = exports.PriceCard = exports.HubspotForm = exports.Content = exports.BasicCard = exports.BackgroundCard = exports.LayoutItem = exports.BannerCard = exports.MediaCard = exports.PriceDetailed = exports.Quote = exports.Divider = void 0;
 var Divider_1 = require("./Divider/Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });
 var Quote_1 = require("./Quote/Quote");
@@ -26,3 +26,5 @@ var HubspotForm_1 = require("./HubspotForm");
 Object.defineProperty(exports, "HubspotForm", { enumerable: true, get: function () { return __importDefault(HubspotForm_1).default; } });
 var PriceCard_1 = require("./PriceCard/PriceCard");
 Object.defineProperty(exports, "PriceCard", { enumerable: true, get: function () { return __importDefault(PriceCard_1).default; } });
+var ImageCard_1 = require("./ImageCard/ImageCard");
+Object.defineProperty(exports, "ImageCard", { enumerable: true, get: function () { return __importDefault(ImageCard_1).default; } });

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -12,6 +12,7 @@ import { block } from '../../utils';
 import CustomBarControls from './CustomBarControls';
 import i18n from './i18n';
 import { checkYoutubeVideos } from './utils';
+import { isYoutubePlayerInstance } from './utils/youtube';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
@@ -49,8 +50,15 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         if (!playerRef) {
             return;
         }
+        let play, pause, addEventListener;
         const videoInstance = playerRef.getInternalPlayer();
-        const { play, pause, addEventListener } = videoInstance;
+        if (isYoutubePlayerInstance(videoInstance)) {
+            ({ pauseVideo: pause, playVideo: play, addEventListener } = videoInstance);
+        }
+        else {
+            // it is assumed that `videoInstance` is HTMLVideoElement by default
+            ({ play, pause, addEventListener } = videoInstance);
+        }
         // eslint-disable-next-line consistent-return
         return {
             play: play.bind(videoInstance),

package/build/esm/components/ReactPlayer/utils/youtube.d.ts

@@ -0,0 +1,2 @@
+import type { YouTubePlayer } from 'youtube-player/dist/types';
+export declare const isYoutubePlayerInstance: (playerInstance: Record<string, unknown> | YouTubePlayer) => playerInstance is YouTubePlayer;

package/build/esm/components/ReactPlayer/utils/youtube.js

@@ -0,0 +1,3 @@
+export const isYoutubePlayerInstance = (playerInstance) => {
+    return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
+};

package/build/esm/constructor-items.d.ts

@@ -30,6 +30,7 @@ export declare const subBlockMap: {
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
     "price-card": (props: import("./models").PriceCardProps) => JSX.Element;
+    "image-card": (props: import("./models").ImageCardProps) => JSX.Element;
 };
 export declare const navItemMap: {
     button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;

package/build/esm/constructor-items.js

@@ -2,7 +2,7 @@ import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, Exten
 import { BlockType, NavigationItemType, SubBlockType } from './models';
 import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
 import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
-import { BackgroundCard, BannerCard, BasicCard, Content, Divider, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
+import { BackgroundCard, BannerCard, BasicCard, Content, Divider, ImageCard, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
     [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
@@ -35,6 +35,7 @@ export const subBlockMap = {
     [SubBlockType.Content]: Content,
     [SubBlockType.Quote]: Quote,
     [SubBlockType.PriceCard]: PriceCard,
+    [SubBlockType.ImageCard]: ImageCard,
 };
 export const navItemMap = {
     [NavigationItemType.Button]: NavigationButton,

package/build/esm/models/constructor-items/common.d.ts

@@ -62,6 +62,7 @@ export type ContentSize = 's' | 'l';
 export type ContentTextSize = 's' | 'm' | 'l';
 export type ContentTheme = 'default' | 'dark' | 'light';
 export type FileLinkType = 'vertical' | 'horizontal';
+export type ImageCardMargins = 's' | 'm';
 export interface Themable {
     theme?: TextTheme;
 }

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AnalyticsEventsBase, PixelEvent } from '../common';
 import { ContentBlockProps } from './blocks';
-import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -22,7 +22,8 @@ export declare enum SubBlockType {
      * @deprecated Will be removed, use BasicCard instead
      */
     Card = "card",
-    PriceCard = "price-card"
+    PriceCard = "price-card",
+    ImageCard = "image-card"
 }
 export declare enum IconPosition {
     Top = "top",
@@ -35,6 +36,10 @@ export interface PositionedIcon {
 export interface IconWrapperProps {
     icon?: PositionedIcon;
 }
+export declare enum ImageCardDirection {
+    Direct = "direct",
+    Reverse = "reverse"
+}
 export declare const SubBlockTypes: SubBlockType[];
 export interface DividerProps {
     size?: DividerSize;
@@ -137,6 +142,13 @@ export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     fullscreen?: boolean;
     icon?: PositionedIcon;
 }
+export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
+    image: ImageProps;
+    enableImageBorderRadius?: boolean;
+    margins?: ImageCardMargins;
+    direction?: ImageCardDirection;
+    backgroundColor?: string;
+}
 export type DividerModel = {
     type: SubBlockType.Divider;
 } & DividerProps;
@@ -167,5 +179,8 @@ export type BasicCardModel = {
 export type PriceCardModel = {
     type: SubBlockType.PriceCard;
 } & PriceCardProps;
-export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel;
+export type ImageCardModel = {
+    type: SubBlockType.ImageCard;
+} & ImageCardProps;
+export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel | ImageCardModel;
 export type SubBlock = SubBlockModels;

package/build/esm/models/constructor-items/sub-blocks.js

@@ -18,10 +18,16 @@ export var SubBlockType;
      */
     SubBlockType["Card"] = "card";
     SubBlockType["PriceCard"] = "price-card";
+    SubBlockType["ImageCard"] = "image-card";
 })(SubBlockType || (SubBlockType = {}));
 export var IconPosition;
 (function (IconPosition) {
     IconPosition["Top"] = "top";
     IconPosition["Left"] = "left";
 })(IconPosition || (IconPosition = {}));
+export var ImageCardDirection;
+(function (ImageCardDirection) {
+    ImageCardDirection["Direct"] = "direct";
+    ImageCardDirection["Reverse"] = "reverse";
+})(ImageCardDirection || (ImageCardDirection = {}));
 export const SubBlockTypes = Object.values(SubBlockType);