@gravity-ui/page-constructor 4.30.0 → 4.31.1-alpha.0

package/build/esm/blocks/Form/Form.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import { BackgroundImage, Title } from '../../components';
+import { MobileContext } from '../../context/mobileContext';
+import { Col, Grid, GridAlignItems, GridColumnSize, Row } from '../../grid';
+import { FormBlockDataTypes, FormBlockDirection, isHubspotDataForm, isYandexDataForm, } from '../../models';
+import { Content } from '../../sub-blocks';
+import { block } from '../../utils';
+import InnerForm from './InnerForm/InnerForm';
+import './Form.css';
+const b = block('form-block');
+const colSizes = { [GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12 };
+const FormBlock = (props) => {
+    var _a;
+    const { formData, title, textContent, direction = FormBlockDirection.Center, background } = props;
+    const [contentLoaded, setContentLoaded] = useState(false);
+    const isMobile = useContext(MobileContext);
+    const hasImage = background && (background.src || background.desktop);
+    const paddingBottom = background && ((_a = background.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) && !hasImage ? 'l' : 'm'; // bigger padding for case with background color and no image
+    const onContentLoad = useCallback(() => {
+        setContentLoaded(true);
+    }, []);
+    const formType = useMemo(() => {
+        if (isYandexDataForm(formData)) {
+            return FormBlockDataTypes.YANDEX;
+        }
+        if (isHubspotDataForm(formData)) {
+            return FormBlockDataTypes.HUBSPOT_INLINE;
+        }
+        return undefined;
+    }, [formData]);
+    if (!formData) {
+        return null;
+    }
+    return (React.createElement("div", { className: b({
+            'with-background': Boolean(background),
+            'form-type': formType,
+        }) },
+        background && (React.createElement(BackgroundImage, Object.assign({}, background, { className: b('media'), imageClassName: b('image') }))),
+        React.createElement(Grid, null,
+            React.createElement(Row, { alignItems: direction === FormBlockDirection.Center
+                    ? GridAlignItems.Center
+                    : GridAlignItems.Start, className: b('row', {
+                    direction,
+                    'padding-bottom': paddingBottom,
+                }) },
+                React.createElement(Col, { sizes: colSizes, className: b('content-col') }, textContent && (React.createElement("div", { className: b('content-wrapper') },
+                    React.createElement(Content, Object.assign({ theme: "default" }, textContent, { centered: direction === FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }))))),
+                React.createElement(Col, { sizes: colSizes, className: b('form-col') },
+                    React.createElement("div", { className: b('form-wrapper') },
+                        React.createElement("div", { className: b('full-form', {
+                                hidden: !contentLoaded,
+                            }) },
+                            title && (React.createElement(Title, { title: {
+                                    text: title,
+                                    textSize: 's',
+                                }, className: b('title', { mobile: isMobile }), colSizes: { all: 12 } })),
+                            React.createElement(InnerForm, { className: b('form'), formData: formData, onContentLoad: onContentLoad }))))))));
+};
+export default FormBlock;

package/build/esm/blocks/Form/HubspotInlineForm.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { HubspotFormProps } from '../../models';
+type Props = HubspotFormProps & {
+    onReady?: () => void;
+};
+declare const HubspotInlineForm: React.FC<Props>;
+export default HubspotInlineForm;

package/build/esm/blocks/Form/HubspotInlineForm.js

@@ -0,0 +1,12 @@
+import { __rest } from "tslib";
+import React from 'react';
+import useMount from '../../hooks/useMount';
+import { HubspotForm } from '../../sub-blocks';
+const HubspotInlineForm = (props) => {
+    const { onReady } = props, rest = __rest(props, ["onReady"]);
+    useMount(() => {
+        onReady === null || onReady === void 0 ? void 0 : onReady();
+    });
+    return React.createElement(HubspotForm, Object.assign({}, rest, { createDOMElement: true }));
+};
+export default HubspotInlineForm;

package/build/esm/blocks/Form/InnerForm/InnerForm.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FormBlockData } from '../../../models';
+interface InnerFormProps {
+    formData: FormBlockData;
+    onContentLoad: () => void;
+    className?: string;
+}
+declare const InnerForm: React.FC<InnerFormProps>;
+export default InnerForm;

package/build/esm/blocks/Form/InnerForm/InnerForm.js

@@ -0,0 +1,26 @@
+import { __rest } from "tslib";
+import React, { useEffect } from 'react';
+import { YandexForm } from '../../../components';
+import { isHubspotDataForm, isYandexDataForm } from '../../../models';
+import { HubspotForm } from '../../../sub-blocks';
+const InnerForm = (props) => {
+    const { formData, onContentLoad, className } = props;
+    useEffect(() => {
+        if (isHubspotDataForm(formData)) {
+            onContentLoad();
+        }
+    }, [onContentLoad, formData]);
+    if (isYandexDataForm(formData)) {
+        const _a = formData.yandex, { onLoad } = _a, rest = __rest(_a, ["onLoad"]);
+        return (React.createElement("div", { className: className },
+            React.createElement(YandexForm, Object.assign({}, rest, { onLoad: () => {
+                    onContentLoad();
+                    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+                } }))));
+    }
+    if (isHubspotDataForm(formData)) {
+        return React.createElement(HubspotForm, Object.assign({}, formData.hubspot));
+    }
+    return null;
+};
+export default InnerForm;

package/build/esm/blocks/Form/schema.d.ts

@@ -0,0 +1,202 @@
+export declare const FormBlock: {
+    'form-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            title: {
+                type: string;
+            };
+            formData: {
+                oneOf: ({
+                    type: string;
+                    optionName: string;
+                    properties: {
+                        yandex: {
+                            type: string;
+                            required: string[];
+                            properties: {
+                                id: {
+                                    type: string;
+                                };
+                                containerId: {
+                                    type: string;
+                                };
+                                type: {};
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        hubspot?: undefined;
+                    };
+                } | {
+                    type: string;
+                    optionName: string;
+                    properties: {
+                        hubspot: {
+                            type: string;
+                            required: string[];
+                            properties: {
+                                region: {
+                                    type: string;
+                                };
+                                portalId: {
+                                    type: string;
+                                };
+                                formId: {
+                                    type: string;
+                                };
+                                formInstanceId: {
+                                    type: string;
+                                };
+                                type: {};
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        yandex?: undefined;
+                    };
+                })[];
+            };
+            textContent: {
+                additionalProperties: boolean;
+                properties: Partial<{
+                    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;
+                    };
+                    additionalInfo: {
+                        type: string;
+                        contentType: string;
+                    };
+                    size: {
+                        type: string;
+                        enum: string[];
+                    };
+                    links: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                    buttons: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                    theme: {
+                        type: string;
+                        enum: string[];
+                    };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                }>;
+            };
+            direction: {
+                enum: string[];
+            };
+            image: {
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
+            };
+            backgroundColor: {
+                type: string;
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                    urlTitle: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            context: {
+                type: string;
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
+};

package/build/esm/blocks/Form/schema.js

@@ -0,0 +1,40 @@
+import omit from 'lodash/omit';
+import { ImageProps } from '../../components/Image/schema';
+import { YandexFormProps } from '../../components/YandexForm/schema';
+import { BlockBaseProps } from '../../schema/validators/common';
+import { ContentBase } from '../../sub-blocks/Content/schema';
+import { HubspotFormProps } from '../../sub-blocks/HubspotForm/schema';
+const FormBlockContentProps = omit(ContentBase, ['size', 'centered', 'colSizes']);
+export const FormBlock = {
+    'form-block': {
+        additionalProperties: false,
+        required: ['formData'],
+        properties: Object.assign(Object.assign({}, BlockBaseProps), { title: {
+                type: 'string',
+            }, formData: {
+                oneOf: [
+                    {
+                        type: 'object',
+                        optionName: 'yandex',
+                        properties: {
+                            yandex: YandexFormProps,
+                        },
+                    },
+                    {
+                        type: 'object',
+                        optionName: 'hubspot-inline',
+                        properties: {
+                            hubspot: HubspotFormProps,
+                        },
+                    },
+                ],
+            }, textContent: {
+                additionalProperties: false,
+                properties: FormBlockContentProps,
+            }, direction: {
+                enum: ['content-form', 'form-content', 'center'],
+            }, image: ImageProps, backgroundColor: {
+                type: 'string',
+            } }),
+    },
+};

package/build/esm/blocks/Header/schema.d.ts

@@ -1228,6 +1228,9 @@ export declare const HeaderBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -547,6 +547,9 @@ export declare const HeaderSliderBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Icons/schema.d.ts

@@ -127,6 +127,9 @@ export declare const IconsProps: {
                 url: {
                     type: string;
                 };
+                urlTitle: {
+                    type: string;
+                };
             };
         };
         visible: {
@@ -275,6 +278,9 @@ export declare const IconsBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Info/schema.d.ts

@@ -75,6 +75,9 @@ export declare const InfoBlock: {
                                 url: {
                                     type: string;
                                 };
+                                urlTitle: {
+                                    type: string;
+                                };
                                 resetMargin: {
                                     type: string;
                                 };
@@ -159,6 +162,9 @@ export declare const InfoBlock: {
                                 url: {
                                     type: string;
                                 };
+                                urlTitle: {
+                                    type: string;
+                                };
                                 resetMargin: {
                                     type: string;
                                 };

package/build/esm/blocks/Map/schema.d.ts

@@ -141,6 +141,9 @@ export declare const MapBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     primary: {
                         type: string;
                     };
@@ -389,6 +392,9 @@ export declare const MapBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -452,6 +458,9 @@ export declare const MapBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Media/schema.d.ts

@@ -280,6 +280,9 @@ export declare const MediaBlockBaseProps: {
             url: {
                 type: string;
             };
+            urlTitle: {
+                type: string;
+            };
             primary: {
                 type: string;
             };
@@ -528,6 +531,9 @@ export declare const MediaBlockBaseProps: {
                 url: {
                     type: string;
                 };
+                urlTitle: {
+                    type: string;
+                };
                 resetMargin: {
                     type: string;
                 };
@@ -591,6 +597,9 @@ export declare const MediaBlockBaseProps: {
             url: {
                 type: string;
             };
+            urlTitle: {
+                type: string;
+            };
         };
     };
     visible: {
@@ -904,6 +913,9 @@ export declare const MediaBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     primary: {
                         type: string;
                     };
@@ -1152,6 +1164,9 @@ export declare const MediaBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -1215,6 +1230,9 @@ export declare const MediaBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts

@@ -305,6 +305,9 @@ export declare const PromoFeaturesBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -331,6 +334,9 @@ export declare const PromoFeaturesBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Questions/schema.d.ts

@@ -36,6 +36,9 @@ export declare const QuestionsBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -97,6 +100,9 @@ export declare const QuestionsBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Slider/schema.d.ts

@@ -100,6 +100,9 @@ export declare const SliderBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -197,6 +200,9 @@ export declare const SliderBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Table/schema.d.ts

@@ -66,6 +66,9 @@ export declare const TableBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Tabs/schema.d.ts

@@ -279,6 +279,9 @@ export declare const tabsItem: {
                 url: {
                     type: string;
                 };
+                urlTitle: {
+                    type: string;
+                };
                 arrow: {
                     type: string;
                 };
@@ -427,6 +430,9 @@ export declare const tabsItem: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     resetMargin: {
                         type: string;
                     };
@@ -535,6 +541,9 @@ export declare const TabsBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -558,6 +567,9 @@ export declare const TabsBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/index.d.ts

@@ -16,3 +16,4 @@ export { default as CardLayoutBlock } from './CardLayout/CardLayout';
 export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
 export { default as ShareBlock } from './Share/Share';
 export { default as FilterBlock } from './FilterBlock/FilterBlock';
+export { default as FormBlock } from './Form/Form';

package/build/esm/blocks/index.js

@@ -16,3 +16,4 @@ export { default as CardLayoutBlock } from './CardLayout/CardLayout';
 export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
 export { default as ShareBlock } from './Share/Share';
 export { default as FilterBlock } from './FilterBlock/FilterBlock';
+export { default as FormBlock } from './Form/Form';

package/build/esm/components/Button/Button.d.ts

@@ -4,6 +4,7 @@ import './Button.css';
 export interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {
     className?: string;
     url?: string;
+    urlTitle?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;

package/build/esm/components/Button/Button.js

@@ -15,7 +15,7 @@ const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
     const { tld } = useContext(LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
+    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, urlTitle, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "urlTitle", "img", "onClick", "text", "width"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
     const onClick = useCallback((e) => {
@@ -44,7 +44,7 @@ const Button = (props) => {
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;
-    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined, width: width }, buttonProps),
+    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined, title: urlTitle, width: width }, buttonProps),
         icon && buttonImg.position === 'left' ? icon : null,
         React.createElement("span", { className: b('content') },
             image && buttonImg.position === 'left' ? image : null,