@gravity-ui/page-constructor 4.51.1 → 4.52.0

package/build/esm/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/esm/schema/constants.js

@@ -1,7 +1,7 @@
 import { BannerBlock, BannerCard, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './validators/blocks';
-import { BackgroundCard, BasicCard, Divider, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
+import { BackgroundCard, BasicCard, Divider, ImageCard, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
 export const 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({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), TableBlock), TabsBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock), FilterBlock), FormBlock);
-export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock);
+export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock), ImageCard);
 export const constructorBlockSchemaNames = [
     'divider',
     'quote',
@@ -38,4 +38,5 @@ export const constructorCardSchemaNames = [
     'basic-card',
     'layout-item',
     'price-card',
+    'image-card',
 ];

package/build/esm/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/esm/schema/validators/sub-blocks.js

@@ -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/esm/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/esm/sub-blocks/ImageCard/ImageCard.d.ts

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Image } from '../../components';
+import { getMediaImage } from '../../components/Media/Image/utils';
+import { ImageCardDirection } from '../../models';
+import { block } from '../../utils';
+import Content from '../Content/Content';
+import './ImageCard.css';
+const b = block('image-card');
+const ImageCard = (props) => {
+    const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, } = props;
+    const hasContent = Boolean(text || title);
+    const imageProps = getMediaImage(image);
+    return (React.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } },
+        React.createElement("div", { className: b('image', { margins }) },
+            React.createElement(Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
+        hasContent && (React.createElement("div", { className: b('content') },
+            React.createElement(Content, { title: title, text: text, colSizes: { all: 12, md: 12 }, size: "s" })))));
+};
+export default ImageCard;

package/build/esm/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/esm/sub-blocks/ImageCard/schema.js

@@ -0,0 +1,20 @@
+import pick from 'lodash/pick';
+import { BaseProps, CardBase } from '../../schema/validators/common';
+import { ImageProps } from '../../schema/validators/components';
+import { ContentBase } from '../Content/schema';
+const ImageCardBlockContentProps = pick(ContentBase, ['title', 'text']);
+export const ImageCard = {
+    'image-card': {
+        additionalProperties: false,
+        required: ['image'],
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BaseProps), CardBase), ImageCardBlockContentProps), { image: ImageProps, direction: {
+                type: 'string',
+                enum: ['direct', 'reverse'],
+            }, margins: {
+                type: 'string',
+                enum: ['s', 'm'],
+            }, backgroundColor: {
+                type: 'string',
+            } }),
+    },
+};

package/build/esm/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/esm/sub-blocks/index.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.51.1",
+  "version": "4.52.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -144,6 +144,7 @@
     "@types/sanitize-html": "2.6.1",
     "@types/uuid": "^9.0.0",
     "@types/webpack-env": "^1.18.1",
+    "@types/youtube-player": "^5.5.11",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^8.3.0",
     "css-loader": "^5.2.7",

package/server/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/server/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/server/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);