@gravity-ui/page-constructor 1.15.0-alpha.3 → 1.15.0-alpha.5

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

@@ -1,17 +1,18 @@
 import React from 'react';
 import { block } from '../../utils';
 import CardBase from '../../components/CardBase/CardBase';
+import { SubBlockType } from '../../models';
 import Image from '../../components/Image/Image';
 import { Content } from '../';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import './BasicCard.css';
 const b = block('basic-card');
 const BasicCard = (props) => {
-    const { url, title, text, border, icon, additionalInfo, links, buttons } = props;
+    const { url, title, text, border, icon, additionalInfo, links, buttons, blockName = SubBlockType.BasicCard, } = props;
     const iconProps = icon && getMediaImage(icon);
     return (React.createElement(CardBase, { className: b(), url: url, border: border },
         React.createElement(CardBase.Content, null,
             iconProps && React.createElement(Image, Object.assign({}, iconProps, { className: b('icon') })),
-            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s" }))));
+            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s", blockName: blockName }))));
 };
 export default BasicCard;

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

@@ -1,4 +1,4 @@
 import { CardWithImageProps } from '../../models';
 import './CardWithImage.css';
-declare const CardWithImage: ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }: CardWithImageProps) => JSX.Element;
+declare const CardWithImage: ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, blockName, }: CardWithImageProps) => JSX.Element;
 export default CardWithImage;

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import { block } from '../../utils';
+import { SubBlockType } from '../../models';
 import { Image, FullscreenImage } from '../../components';
 import { Content } from '../';
 import './CardWithImage.css';
 const b = block('card-with-image');
-const CardWithImage = ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }) => {
+const CardWithImage = ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, blockName = SubBlockType.CardWithImage, }) => {
     const unifiedLinks = links === null || links === void 0 ? void 0 : links.map((link) => (Object.assign(Object.assign({ theme: 'normal' }, link), { text: link.title, url: link.link })));
     return (React.createElement("div", { className: b(null, className) },
         React.createElement("div", { className: b('image', { border }) }, fullScreen ? (React.createElement(FullscreenImage, { src: image, imageClassName: b('image-item'), disableCompress: disableCompress })) : (React.createElement(Image, { className: b('image-item'), src: image, alt: 'card-image', disableCompress: disableCompress }))),
         React.createElement("div", { className: b('content') },
-            React.createElement(Content, { title: title, text: description, links: unifiedLinks, additionalInfo: additionalInfo, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 } }))));
+            React.createElement(Content, { title: title, text: description, links: unifiedLinks, additionalInfo: additionalInfo, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 }, blockName: blockName }))));
 };
 export default CardWithImage;

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

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { block } from '../../utils';
+import { SubBlockType, } from '../../models';
 import { Title, YFMWrapper, Button } from '../../components';
 import LinkBlock from '../../components/Link/Link';
 import { Col } from '../../grid';
@@ -34,7 +35,7 @@ function getButtonSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, } = props;
+    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, blockName = SubBlockType.Content, } = props;
     const titleProps = __rest(!title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
         : title, []);
@@ -49,7 +50,7 @@ const Content = (props) => {
                     'constructor-notice': true,
                     [`constructor-size-${size}`]: true,
                 } }))),
-        links && (React.createElement("div", { className: b('links') }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url })))))),
-        buttons && (React.createElement("div", { className: b('buttons') }, buttons.map((item) => (React.createElement(Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size) }))))))));
+        links && (React.createElement("div", { className: b('links') }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, blockName: blockName })))))),
+        buttons && (React.createElement("div", { className: b('buttons') }, buttons.map((item) => (React.createElement(Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), blockName: blockName }))))))));
 };
 export default Content;

package/build/esm/sub-blocks/HubspotForm/index.js

@@ -3,6 +3,7 @@ import { block } from '../../utils';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { MobileContext } from '../../context/mobileContext';
 import { useMetrika } from '../../hooks/useMetrika';
+import { SubBlockType } from '../../models';
 import { useHandleHubspotEvents, useAnalytics } from '../../hooks';
 import HubspotFormContainer from './HubspotFormContainer';
 import './HubspotForm.css';
@@ -10,7 +11,7 @@ const b = block('hubspot-form');
 const HubspotForm = (props) => {
     const { className, theme: themeProp, isMobile: isMobileProp, formId, formInstanceId, portalId, region, formClassName, pixelEvents, 
     // hubspotEvents, // TODO: decide how to handle them
-    analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, } = props;
+    analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, blockName = SubBlockType.HubspotForm, } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics();
     const { themeValue } = useContext(ThemeValueContext);
@@ -23,7 +24,11 @@ const HubspotForm = (props) => {
         onLoad,
         onSubmit: (e) => {
             handleMetrika === null || handleMetrika === void 0 ? void 0 : handleMetrika({ pixelEvents });
-            handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
+            handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents, {
+                name: 'default',
+                type: 'hubspot-form',
+                block: blockName,
+            });
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
         },
     }), [
@@ -34,6 +39,7 @@ const HubspotForm = (props) => {
         pixelEvents,
         handleAnalytics,
         analyticsEvents,
+        blockName,
         onSubmit,
     ]);
     useHandleHubspotEvents(handlers, formId);

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

@@ -1,4 +1,4 @@
 import { MediaCardProps } from '../../models';
 import './MediaCard.css';
-declare const MediaCard: ({ border, ...mediaProps }: MediaCardProps) => JSX.Element;
+declare const MediaCard: ({ border, blockName, ...mediaProps }: MediaCardProps) => JSX.Element;
 export default MediaCard;

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

@@ -1,13 +1,14 @@
 import { __rest } from "tslib";
 import React from 'react';
+import { SubBlockType } from '../../models';
 import { block } from '../../utils';
 import { Media, CardBase } from '../../components';
 import './MediaCard.css';
 const b = block('MediaCard');
 const MediaCard = (_a) => {
-    var { border } = _a, mediaProps = __rest(_a, ["border"]);
+    var { border, blockName = SubBlockType.MediaCard } = _a, mediaProps = __rest(_a, ["border", "blockName"]);
     return (React.createElement(CardBase, { className: b(), bodyClassName: b('body'), border: border },
         React.createElement(CardBase.Content, null,
-            React.createElement(Media, Object.assign({}, mediaProps)))));
+            React.createElement(Media, Object.assign({}, mediaProps, { blockName: blockName })))));
 };
 export default MediaCard;

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

@@ -1,20 +1,27 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { Button } from '@gravity-ui/uikit';
 import { block, getThemedValue } from '../../utils';
-import { AuthorType } from '../../models';
+import { AuthorType, SubBlockType } from '../../models';
 import { Author, Image, HTML } from '../../components';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { getMediaImage } from '../../components/Media/Image/utils';
+import { useAnalytics } from '../../hooks';
 import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {
-    const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
+    const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, blockName = SubBlockType.Quote, } = props;
     const { themeValue: theme } = useContext(ThemeValueContext);
     const imageThemed = getThemedValue(image, theme);
     const imageData = getMediaImage(imageThemed);
+    const handleAnalytics = useAnalytics();
+    const handleButtonClick = useCallback(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics([], {
+        name: 'default',
+        type: 'button',
+        block: blockName,
+    }), [blockName, handleAnalytics]);
     const renderFooter = Boolean(author || url) && (React.createElement("div", { className: b('author-wrapper') },
         author && (React.createElement(Author, { className: b('author', { theme: textTheme }), author: author, type: AuthorType.Line })),
-        url && buttonText && (React.createElement(Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }) }, buttonText))));
+        url && buttonText && (React.createElement(Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick }, buttonText))));
     return (React.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         React.createElement("div", { key: text, className: b('content-wrapper') },
             React.createElement("div", null,

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

@@ -64,6 +64,9 @@ export declare const Quote: {
                     };
                 };
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

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

@@ -15,6 +15,8 @@ export const Quote = {
             }, url: {
                 type: 'string',
                 pattern: urlPattern,
-            }, theme: ThemeProps, author: authorItem }),
+            }, theme: ThemeProps, author: authorItem, blockName: {
+                type: 'string',
+            } }),
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.15.0-alpha.3",
+  "version": "1.15.0-alpha.5",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/blocks.d.ts

@@ -109,6 +109,7 @@ export interface HeaderBlockProps {
     verticalOffset?: 's' | 'm' | 'l' | 'xl';
     breadcrumbs?: HeaderBreadCrumbsProps;
     status?: JSX.Element;
+    blockName?: string;
 }
 export type CalculatorProps = Animatable;
 export interface SimpleBlockProps extends Animatable, Childable {
@@ -127,6 +128,7 @@ export interface ExtendedFeaturesProps extends Animatable {
     title?: TitleProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
+    blockName?: string;
 }
 export interface PromoFeaturesItem {
     title: string;
@@ -139,6 +141,7 @@ export interface PromoFeaturesProps extends Animatable {
     title?: TitleProps | string;
     description?: string;
     theme?: 'grey' | 'default';
+    blockName?: string;
 }
 export interface QuestionItem {
     title: string;
@@ -163,6 +166,7 @@ export interface MediaContentProps {
     links?: LinkProps[];
     buttons?: ButtonProps[];
     size?: ContentSize;
+    blockName?: string;
 }
 export interface MediaBlockProps extends Animatable, MediaContentProps {
     media: ThemeSupporting<MediaProps>;
@@ -180,6 +184,7 @@ export interface PreviewBlockProps extends Animatable {
     ratioMediaContent?: PreviewRatioMediaContent;
     stopVideo?: boolean;
     showImmediately?: boolean;
+    blockName?: string;
 }
 export interface InfoBlockProps {
     theme?: TextTheme;
@@ -194,6 +199,7 @@ export interface InfoBlockProps {
     links?: Pick<LinkProps, 'text' | 'url'>[];
     leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
     rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
+    blockName?: string;
 }
 export interface SecurityBlockPoint {
     img: string;
@@ -209,6 +215,7 @@ export interface SecurityBlockProps extends Animatable {
     title: string;
     points?: SecurityBlockPoint[];
     media: MediaProps;
+    blockName?: string;
 }
 export interface TableProps {
     content: string[][];
@@ -235,6 +242,7 @@ export interface TabsBlockProps extends BlockHeaderProps, Animatable {
     centered?: boolean;
     direction?: MediaDirection;
     items: TabsBlockItem[];
+    blockName?: string;
 }
 export interface LinkTableBlockProps extends BlockHeaderProps {
     items: LinkProps[][];
@@ -264,6 +272,7 @@ export interface ContentLayoutBlockProps {
     };
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
+    blockName?: string;
 }
 export interface ContentBlockProps {
     title?: TitleBaseProps | string;
@@ -275,6 +284,7 @@ export interface ContentBlockProps {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
     theme?: ContentTheme;
+    blockName?: string;
 }
 export declare enum PCShareSocialNetwork {
     Vk = "vk",
@@ -286,6 +296,7 @@ export declare enum PCShareSocialNetwork {
 export interface ShareBlockProps {
     items: PCShareSocialNetwork[];
     title?: string;
+    blockName?: string;
 }
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;

package/server/models/constructor-items/common.d.ts

@@ -111,6 +111,7 @@ export interface MediaVideoProps {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
     analyticsEvents?: AnalyticsEvent[];
+    blockName?: string;
 }
 export interface LinkProps extends Stylable {
     url: string;
@@ -123,6 +124,7 @@ export interface LinkProps extends Stylable {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface FileLinkProps extends ClassNameProps {
     href: string;
@@ -171,6 +173,7 @@ export interface MediaComponentVideoProps {
     height?: number;
     metrika?: MetrikaVideo;
     analyticsEvents?: AnalyticsEvent[];
+    blockName?: string;
     previewImg?: string;
 }
 export interface MediaComponentYoutubeProps {
@@ -227,6 +230,7 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface PreviewContentItemProps {
     title: string;

package/server/models/constructor-items/sub-blocks.d.ts

@@ -62,6 +62,7 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
     analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface PartnerProps extends CardBaseProps {
     text: string;
@@ -77,6 +78,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
     author?: AuthorItem;
     buttonText?: string;
     theme?: TextTheme;
+    blockName?: string;
 }
 export interface NewsCardData {
     id: number;
@@ -111,6 +113,7 @@ export interface BannerCardProps {
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
     button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
+    blockName?: string;
 }
 export interface MediaCardProps extends MediaProps, CardBaseProps {
 }
@@ -118,7 +121,7 @@ export interface CardWithImageLinkProps extends Omit<LinkProps, 'text' | 'url'>
     title: string;
     link: string;
 }
-export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockProps, 'title' | 'additionalInfo' | 'buttons' | 'theme'> {
+export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockProps, 'title' | 'additionalInfo' | 'buttons' | 'theme' | 'blockName'> {
     image: string;
     description?: string;
     disableCompress?: boolean;