@gravity-ui/page-constructor 4.9.1-alpha.0 → 4.11.0

package/build/esm/components/Image/schema.js

@@ -9,6 +9,17 @@ const ImageBase = {
         type: 'boolean',
     },
 };
+const StyleBase = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: {
+        backgroundColor: { type: 'string' },
+        height: { type: ['string', 'number'] },
+        width: { type: ['string', 'number'] },
+        color: { type: 'string' },
+    },
+};
 export const ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
@@ -28,7 +39,7 @@ export const ImageObjectProps = {
     properties: Object.assign(Object.assign({}, ImageBase), { src: {
             type: 'string',
             pattern: imageUrlPattern,
-        } }),
+        }, style: StyleBase }),
 };
 export const ImageProps = {
     oneOf: [

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

@@ -21,9 +21,9 @@ export declare const blockMap: {
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
-    "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
+    "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, analyticsEvents, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.css

@@ -0,0 +1,38 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-constructor-block.pc-constructor-block_indentTop_0 {
+  margin-top: 0;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_xs {
+  margin-top: 16px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_s {
+  margin-top: 24px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_m {
+  margin-top: 32px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_l {
+  margin-top: 48px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_xl {
+  margin-top: 64px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_0 {
+  padding-bottom: 0;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_xs {
+  padding-bottom: 16px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_s {
+  padding-bottom: 24px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_m {
+  padding-bottom: 32px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_l {
+  padding-bottom: 48px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_xl {
+  padding-bottom: 64px;
+}

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BlockDecorationProps, ConstructorBlock as ConstructorBlockType, WithChildren } from '../../../../models';
+import './ConstructorBlock.css';
 interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
     data: ConstructorBlockType;
 }

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -3,10 +3,12 @@ import _ from 'lodash';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import { BlockDecoration } from '../../../../customization/BlockDecoration';
 import { block } from '../../../../utils';
+import './ConstructorBlock.css';
 const b = block('constructor-block');
 export const ConstructorBlock = ({ index = 0, data, children, }) => {
-    const { type } = data;
+    const { type, indent } = data;
     const blockBaseProps = useMemo(() => _.pick(data, ['anchor', 'visible', 'resetPaddings']), [data]);
+    const { top, bottom } = indent || { top: 'l', bottom: 'l' };
     return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
+        React.createElement(BlockBase, Object.assign({ className: b({ type, indentTop: top, indentBottom: bottom }) }, blockBaseProps), children)));
 };

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

@@ -32,6 +32,7 @@ export interface Childable {
 export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
+    /** @deprecated */
     resetPaddings?: boolean;
     qa?: string;
 }

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

@@ -287,7 +287,7 @@ export interface PriceDetailsListProps {
 export interface PriceDetailsProps {
     items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];
 }
-export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps {
+export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps, AnalyticsEventsBase {
 }
 export interface PriceFoldableDetailsProps {
     title: string;

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

@@ -71,13 +71,13 @@ export interface QuoteProps extends Themable, CardBaseProps {
     buttonText?: string;
     theme?: TextTheme;
 }
-export interface BackgroundCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
+export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
 }
-export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
     target?: string;
@@ -92,9 +92,9 @@ export interface BannerCardProps {
     theme?: TextTheme;
     button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
 }
-export interface MediaCardProps extends MediaProps, CardBaseProps {
+export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
 }
-export interface LayoutItemProps extends ClassNameProps {
+export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media: MediaProps;
     metaInfo?: string[];

package/build/esm/models/constructor.d.ts

@@ -6,7 +6,12 @@ export interface PageData {
 export interface Menu {
     title: string;
 }
-export type ConstructorBlock = ConstructorItem | CustomBlock;
+export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
+    indent?: {
+        top?: string;
+        bottom?: string;
+    };
+};
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];
     menu?: Menu;

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

@@ -205,6 +205,25 @@ export declare const cardSchemas: {
                             type: string;
                             pattern: string;
                         };
+                        style: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                backgroundColor: {
+                                    type: string;
+                                };
+                                height: {
+                                    type: string[];
+                                };
+                                width: {
+                                    type: string[];
+                                };
+                                color: {
+                                    type: string;
+                                };
+                            };
+                        };
                         alt: {
                             type: string;
                             contentType: string;
@@ -230,6 +249,87 @@ export declare const cardSchemas: {
                 type: string;
                 enum: string[];
             };
+            analyticsEvents: {
+                oneOf: ({
+                    optionName: string;
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                })[];
+            };
             title: {
                 oneOf: ({
                     type: string;
@@ -708,6 +808,87 @@ export declare const cardSchemas: {
         additionalProperties: boolean;
         required: never[];
         properties: {
+            analyticsEvents: {
+                oneOf: ({
+                    optionName: string;
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                })[];
+            };
             animated: {
                 type: string;
             };
@@ -852,84 +1033,6 @@ export declare const cardSchemas: {
             fullscreen: {
                 type: string;
             };
-            analyticsEvents: {
-                anyOf: ({
-                    type: string;
-                    additionalProperties: {
-                        type: string;
-                    };
-                    required: string[];
-                    properties: {
-                        name: {
-                            type: string;
-                        };
-                        type: {
-                            type: string;
-                        };
-                        counters: {
-                            type: string;
-                            additionalProperties: boolean;
-                            required: never[];
-                            properties: {
-                                include: {
-                                    type: string;
-                                    items: {
-                                        type: string;
-                                    };
-                                };
-                                exclude: {
-                                    type: string;
-                                    items: {
-                                        type: string;
-                                    };
-                                };
-                            };
-                        };
-                        context: {
-                            type: string;
-                        };
-                    };
-                } | {
-                    type: string;
-                    items: {
-                        type: string;
-                        additionalProperties: {
-                            type: string;
-                        };
-                        required: string[];
-                        properties: {
-                            name: {
-                                type: string;
-                            };
-                            type: {
-                                type: string;
-                            };
-                            counters: {
-                                type: string;
-                                additionalProperties: boolean;
-                                required: never[];
-                                properties: {
-                                    include: {
-                                        type: string;
-                                        items: {
-                                            type: string;
-                                        };
-                                    };
-                                    exclude: {
-                                        type: string;
-                                        items: {
-                                            type: string;
-                                        };
-                                    };
-                                };
-                            };
-                            context: {
-                                type: string;
-                            };
-                        };
-                    };
-                })[];
-            };
             border: {
                 type: string;
                 enum: string[];

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

@@ -6,11 +6,11 @@ import Content from '../Content/Content';
 import './BackgroundCard.css';
 const b = block('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, } = props;
     const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
-    return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType },
+    return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents },
         React.createElement(CardBase.Content, null,
             React.createElement(BackgroundImage, Object.assign({ className: b('image') }, getThemedValue(background, theme), { style: { backgroundColor } })),
             React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));

package/build/esm/sub-blocks/BackgroundCard/schema.d.ts

@@ -16,6 +16,25 @@ export declare const BackgroundCard: {
                             type: string;
                             pattern: string;
                         };
+                        style: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                backgroundColor: {
+                                    type: string;
+                                };
+                                height: {
+                                    type: string[];
+                                };
+                                width: {
+                                    type: string[];
+                                };
+                                color: {
+                                    type: string;
+                                };
+                            };
+                        };
                         alt: {
                             type: string;
                             contentType: string;
@@ -41,6 +60,87 @@ export declare const BackgroundCard: {
                 type: string;
                 enum: string[];
             };
+            analyticsEvents: {
+                oneOf: ({
+                    optionName: string;
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                })[];
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/esm/sub-blocks/BackgroundCard/schema.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { ImageObjectProps } from '../../components/Image/schema';
 import { BaseProps, CardBase, withTheme } from '../../schema/validators/common';
+import { AnalyticsEventSchema } from '../../schema/validators/event';
 import { ContentBase } from '../Content/schema';
 const BackgroundCardContentProps = _.omit(ContentBase, ['size']);
 export const BackgroundCard = {
@@ -14,6 +15,15 @@ export const BackgroundCard = {
             }, paddingBottom: {
                 type: 'string',
                 enum: ['s', 'm', 'l', 'xl'],
+            }, analyticsEvents: {
+                oneOf: [
+                    Object.assign(Object.assign({}, AnalyticsEventSchema), { optionName: 'single' }),
+                    {
+                        type: 'array',
+                        items: AnalyticsEventSchema,
+                        optionName: 'list',
+                    },
+                ],
             } }),
     },
 };

package/build/esm/sub-blocks/LayoutItem/LayoutItem.d.ts

@@ -1,4 +1,4 @@
 import { LayoutItemProps } from '../../models';
 import './LayoutItem.css';
-declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: LayoutItemProps) => JSX.Element;
+declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, analyticsEvents, }: LayoutItemProps) => JSX.Element;
 export default LayoutItem;

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

@@ -7,12 +7,12 @@ import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from './utils';
 import './LayoutItem.css';
 const b = block('layout-item');
 const LayoutItem = (_a) => {
-    var _b = _a.content, { links } = _b, content = __rest(_b, ["links"]), { metaInfo, media, border, fullscreen, className } = _a;
+    var _b = _a.content, { links } = _b, content = __rest(_b, ["links"]), { metaInfo, media, border, fullscreen, className, analyticsEvents } = _a;
     return (React.createElement("div", { className: b(null, className) },
         fullscreen && hasFullscreen(media) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(media) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = __rest(_a, ["className", "fullscreen"]);
-            return (React.createElement(Media, Object.assign({}, media, fullscreenMediaProps, { className: b('media', { border }, mediaClassName) })));
-        })) : (React.createElement(Media, Object.assign({}, media, { className: b('media', { border }) }))),
+            return (React.createElement(Media, Object.assign({}, media, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+        })) : (React.createElement(Media, Object.assign({}, media, { className: b('media', { border }), analyticsEvents: analyticsEvents }))),
         metaInfo && React.createElement(MetaInfo, { items: metaInfo, className: b('meta-info') }),
         React.createElement("div", { className: b('content') },
             React.createElement(Content, Object.assign({}, content, { links: getLayoutItemLinks(links), size: "s", colSizes: { all: 12, md: 12 } })))));