@gravity-ui/page-constructor 1.15.0-alpha.21 → 1.15.0-alpha.23

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

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 import { ContentBlockProps } from './blocks';
-import { AnalyticsEvent, PixelEvent } from '../common';
+import { AnalyticsEventsBase, PixelEvent } from '../common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -19,7 +19,11 @@ export declare enum SubBlockType {
      * @deprecated Will be moved to params use BasicCard instead
      */
     TutorialCard = "tutoral-card",
+    /**
+     * @deprecated Use LayoutItem
+     */
     CardWithImage = "card-with-image",
+    LayoutItem = "layout-item",
     BackgroundCard = "background-card",
     BasicCard = "basic-card",
     Content = "content",
@@ -34,7 +38,7 @@ export interface DividerProps {
     size?: DividerSize;
     border?: boolean;
 }
-export interface HubspotFormProps extends HubspotEventHandlers {
+export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {
     className?: string;
     theme?: ContentTheme;
     isMobile?: boolean;
@@ -61,8 +65,7 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     onLoad?: (arg: HubspotEventData) => void;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
-    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
-    context?: string;
+    createDOMElement?: boolean;
 }
 export interface PartnerProps extends CardBaseProps {
     text: string;
@@ -78,7 +81,6 @@ export interface QuoteProps extends Themable, CardBaseProps {
     author?: AuthorItem;
     buttonText?: string;
     theme?: TextTheme;
-    context?: string;
 }
 export interface NewsCardData {
     id: number;
@@ -113,7 +115,6 @@ export interface BannerCardProps {
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
     button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
-    context?: string;
 }
 export interface MediaCardProps extends MediaProps, CardBaseProps {
 }
@@ -121,7 +122,7 @@ export interface CardWithImageLinkProps extends Omit<LinkProps, 'text' | 'url'>
     title: string;
     link: string;
 }
-export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockProps, 'title' | 'additionalInfo' | 'buttons' | 'theme' | 'context'> {
+export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockProps, 'title' | 'additionalInfo' | 'buttons' | 'theme'> {
     image: string;
     description?: string;
     disableCompress?: boolean;
@@ -129,6 +130,13 @@ export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockPro
     fullScreen?: boolean;
     links?: CardWithImageLinkProps[];
 }
+export interface LayoutItemProps extends ClassNameProps {
+    content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
+    media: MediaProps;
+    metaInfo?: string[];
+    border?: boolean;
+    fullScreen?: boolean;
+}
 export type DividerModel = {
     type: SubBlockType.Divider;
 } & DividerProps;
@@ -141,6 +149,9 @@ export type NewsCardModel = {
 export type CardWithImageModel = {
     type: SubBlockType.CardWithImage;
 } & CardWithImageProps;
+export type LayoutItemModel = {
+    type: SubBlockType.CardWithImage;
+} & LayoutItemProps;
 export type TutorialCardModel = {
     type: SubBlockType.TutorialCard;
 } & TutorialCardProps;

package/server/models/constructor-items/sub-blocks.js

@@ -17,7 +17,11 @@ var SubBlockType;
      * @deprecated Will be moved to params use BasicCard instead
      */
     SubBlockType["TutorialCard"] = "tutoral-card";
+    /**
+     * @deprecated Use LayoutItem
+     */
     SubBlockType["CardWithImage"] = "card-with-image";
+    SubBlockType["LayoutItem"] = "layout-item";
     SubBlockType["BackgroundCard"] = "background-card";
     SubBlockType["BasicCard"] = "basic-card";
     SubBlockType["Content"] = "content";

package/server/text-transform/blocks.js

@@ -157,6 +157,23 @@ const config = {
             transformer: typografTransformer,
         },
     ],
+    [models_1.SubBlockType.LayoutItem]: [
+        {
+            fields: ['content'],
+            parser: parseContentLayout,
+            transformer: yfmTransformer,
+        },
+        {
+            fields: ['content'],
+            parser: parseContentLayoutTitle,
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['metaInfo'],
+            parser: (0, exports.createItemsParser)([]),
+            transformer: typografTransformer,
+        },
+    ],
     [models_1.SubBlockType.Quote]: {
         fields: ['text'],
         transformer: typografTransformer,

package/server/utils/hubspot.d.ts

@@ -1,4 +1,4 @@
-export type HubspotEventName = 'onBeforeFormInit' | 'onFormReady' | 'onFormSubmit' | 'onFormSubmitted' | `_${string}`;
+export type HubspotEventName = 'onBeforeFormInit' | 'onFormReady' | 'onFormSubmit' | 'onFormSubmitted' | 'onFormError' | `_${string}`;
 export interface HubspotEventData {
     type: HubspotEventName | string;
     eventName: HubspotEventName;
@@ -11,6 +11,7 @@ export interface HubspotEventHandlers {
     onBeforeSubmit?: (arg: HubspotEventData) => void;
     onSubmit?: (arg: HubspotEventData) => void;
     onLoad?: (arg: HubspotEventData) => void;
+    onSubmitError?: (arg: HubspotEventData) => void;
 }
 export declare function loopBackHabspotEvents(formId: string): ({ data, source, origin }: MessageEvent) => void;
 export declare function handleHubspotEvents(handlers: HubspotEventHandlers, formId: string): ({ data }: MessageEvent) => void;

package/server/utils/hubspot.js

@@ -25,7 +25,7 @@ function loopBackHabspotEvents(formId) {
 exports.loopBackHabspotEvents = loopBackHabspotEvents;
 function handleHubspotEvents(handlers, formId) {
     return ({ data }) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (!isHubspotEventData(data)) {
             return;
         }
@@ -49,6 +49,10 @@ function handleHubspotEvents(handlers, formId) {
                 (_d = handlers.onSubmit) === null || _d === void 0 ? void 0 : _d.call(handlers, data);
                 break;
             }
+            case 'onFormError': {
+                (_e = handlers.onSubmitError) === null || _e === void 0 ? void 0 : _e.call(handlers, data);
+                break;
+            }
             default:
                 break;
         }

package/styles/root.scss

@@ -17,6 +17,7 @@
     --pc-monochrome-button-background-color-hover: #393939;
     --pc-monochrome-button-color: var(--yc-color-text-light-primary);
     --pc-text-header-color: var(--yc-color-text-primary);
+    --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
 
     &.yc-root_theme_dark {
         --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbsItem.css

@@ -1,30 +0,0 @@
-@charset "UTF-8";
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-header-breadcrumbs-item__item {
-  display: inline-block;
-}
-.pc-header-breadcrumbs-item__text {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  outline: none;
-  color: var(--yc-color-text-link);
-  text-decoration: none;
-  cursor: pointer;
-  color: var(--yc-color-text-secondary);
-}
-.utilityfocus .pc-header-breadcrumbs-item__text:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-header-breadcrumbs-item__text:hover, .pc-header-breadcrumbs-item__text:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
-}
-.pc-header-breadcrumbs-item__text:after {
-  content: " / ";
-  margin: 0 8px 0 6px;
-  color: var(--yc-color-text-secondary);
-}
-.pc-header-breadcrumbs-item__text:hover {
-  color: var(--yc-color-text-primary);
-}

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbsItem.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-import { AnalyticsEvent, ButtonPixel, MetrikaGoal } from '../../models';
-type HeaderBreadcrumbsItemProps = {
-    url: string;
-    text: ReactNode;
-    metrikaGoals?: MetrikaGoal;
-    pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
-    context?: string;
-};
-export default function HeaderBreadcrumbsItem({ url, text, metrikaGoals, pixelEvents, analyticsEvents, }: HeaderBreadcrumbsItemProps): JSX.Element;
-export {};

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbsItem.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const utils_1 = require("../../utils");
-const models_1 = require("../../models");
-const useMetrika_1 = require("../../hooks/useMetrika");
-const hooks_1 = require("../../hooks");
-const blockPositionContext_1 = require("../../context/blockPositionContext");
-const b = (0, utils_1.block)('header-breadcrumbs-item');
-function HeaderBreadcrumbsItem({ url, text, metrikaGoals, pixelEvents, analyticsEvents, }) {
-    const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
-    const defaultEvent = (0, react_1.useMemo)(() => ({
-        name: 'header-breadcrumbs-click',
-        type: models_1.PredefinedEventTypes.Default,
-        context: context,
-        target: url,
-    }), [context, url]);
-    const handleAnalytics = (0, hooks_1.useAnalytics)(defaultEvent);
-    const onClick = () => {
-        handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics(analyticsEvents);
-    };
-    return (react_1.default.createElement("div", { className: b('item'), key: url },
-        react_1.default.createElement("a", { href: url, className: b('text'), onClick: onClick }, text)));
-}
-exports.default = HeaderBreadcrumbsItem;

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbsItem.css

@@ -1,30 +0,0 @@
-@charset "UTF-8";
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-header-breadcrumbs-item__item {
-  display: inline-block;
-}
-.pc-header-breadcrumbs-item__text {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  outline: none;
-  color: var(--yc-color-text-link);
-  text-decoration: none;
-  cursor: pointer;
-  color: var(--yc-color-text-secondary);
-}
-.utilityfocus .pc-header-breadcrumbs-item__text:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-header-breadcrumbs-item__text:hover, .pc-header-breadcrumbs-item__text:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
-}
-.pc-header-breadcrumbs-item__text:after {
-  content: " / ";
-  margin: 0 8px 0 6px;
-  color: var(--yc-color-text-secondary);
-}
-.pc-header-breadcrumbs-item__text:hover {
-  color: var(--yc-color-text-primary);
-}

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbsItem.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { AnalyticsEvent, ButtonPixel, MetrikaGoal } from '../../models';
-import './HeaderBreadcrumbsItem.css';
-type HeaderBreadcrumbsItemProps = {
-    url: string;
-    text: ReactNode;
-    metrikaGoals?: MetrikaGoal;
-    pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
-    context?: string;
-};
-export default function HeaderBreadcrumbsItem({ url, text, metrikaGoals, pixelEvents, analyticsEvents, }: HeaderBreadcrumbsItemProps): JSX.Element;
-export {};

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbsItem.js

@@ -1,25 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import { block } from '../../utils';
-import { PredefinedEventTypes } from '../../models';
-import { useMetrika } from '../../hooks/useMetrika';
-import { useAnalytics } from '../../hooks';
-import { BlockPositionContext } from '../../context/blockPositionContext';
-import './HeaderBreadcrumbsItem.css';
-const b = block('header-breadcrumbs-item');
-export default function HeaderBreadcrumbsItem({ url, text, metrikaGoals, pixelEvents, analyticsEvents, }) {
-    const handleMetrika = useMetrika();
-    const context = useContext(BlockPositionContext);
-    const defaultEvent = useMemo(() => ({
-        name: 'header-breadcrumbs-click',
-        type: PredefinedEventTypes.Default,
-        context: context,
-        target: url,
-    }), [context, url]);
-    const handleAnalytics = useAnalytics(defaultEvent);
-    const onClick = () => {
-        handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics(analyticsEvents);
-    };
-    return (React.createElement("div", { className: b('item'), key: url },
-        React.createElement("a", { href: url, className: b('text'), onClick: onClick }, text)));
-}