@gravity-ui/page-constructor 4.28.1 → 4.29.1-alpha.0

package/build/cjs/sub-blocks/HubspotForm/schema.d.ts

@@ -0,0 +1,22 @@
+export declare const HubspotFormProps: {
+    type: string;
+    required: string[];
+    properties: {
+        region: {
+            type: string;
+        };
+        portalId: {
+            type: string;
+        };
+        formId: {
+            type: string;
+        };
+        formInstanceId: {
+            type: string;
+        };
+        type: {};
+        when: {
+            type: string;
+        };
+    };
+};

package/build/cjs/sub-blocks/HubspotForm/schema.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HubspotFormProps = void 0;
+const common_1 = require("../../schema/validators/common");
+exports.HubspotFormProps = {
+    type: 'object',
+    required: ['portalId', 'formId'],
+    properties: Object.assign(Object.assign({}, common_1.BaseProps), { region: {
+            type: 'string',
+        }, portalId: {
+            type: 'string',
+        }, formId: {
+            type: 'string',
+        }, formInstanceId: {
+            type: 'string',
+        } }),
+};

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts

@@ -270,6 +270,9 @@ export declare const LayoutItem: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };

package/build/cjs/sub-blocks/Quote/Quote.css

@@ -60,14 +60,23 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
 }
-.pc-quote__content::before {
+.pc-quote__content_quote-type_chevron::before {
   position: absolute;
   top: -1px;
   left: -10px;
   content: "«";
 }
-.pc-quote__text::after {
-  content: "».";
+.pc-quote__content_quote-type_chevron .pc-quote__text::after {
+  content: "»";
+}
+.pc-quote__content_quote-type_english-double::before {
+  position: absolute;
+  top: -1px;
+  left: -8px;
+  content: "“";
+}
+.pc-quote__content_quote-type_english-double .pc-quote__text::after {
+  content: "”";
 }
 .pc-quote__image {
   width: 100%;

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

@@ -11,7 +11,7 @@ const models_1 = require("../../models");
 const utils_2 = require("../../utils");
 const b = (0, utils_2.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, urlTitle, buttonText, quoteType = models_1.QuoteType.Chevron, } = props;
     const theme = (0, theme_1.useTheme)();
     const imageThemed = (0, utils_2.getThemedValue)(image, theme);
     const imageData = (0, utils_1.getMediaImage)(imageThemed);
@@ -19,12 +19,13 @@ const Quote = (props) => {
     const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics(), [handleAnalytics]);
     const renderFooter = Boolean(author || url) && (react_1.default.createElement("div", { className: b('author-wrapper') },
         author && (react_1.default.createElement(components_1.Author, { className: b('author', { theme: textTheme }), author: author, type: models_1.AuthorType.Line })),
-        url && buttonText && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick }, buttonText))));
+        url && buttonText && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, title: urlTitle }, buttonText))));
+    const logoProps = (0, utils_1.getMediaImage)(logo);
     return (react_1.default.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         react_1.default.createElement("div", { key: text, className: b('content-wrapper') },
             react_1.default.createElement("div", null,
-                react_1.default.createElement(components_1.Image, { className: b('logo'), src: logo }),
-                react_1.default.createElement("div", { className: b('content') },
+                react_1.default.createElement(components_1.Image, Object.assign({ className: b('logo') }, logoProps)),
+                react_1.default.createElement("div", { className: b('content', { 'quote-type': quoteType }) },
                     react_1.default.createElement("span", { className: b('text') },
                         react_1.default.createElement(components_1.HTML, null, text)))),
             renderFooter),

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

@@ -32,8 +32,18 @@ export declare const Quote: {
                 })[];
             };
             logo: {
-                type: string;
-                pattern: string;
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
             };
             color: {
                 type: string;
@@ -41,6 +51,9 @@ export declare const Quote: {
             url: {
                 type: string;
             };
+            urlTitle: {
+                type: string;
+            };
             buttonText: {
                 type: string;
             };
@@ -61,8 +74,18 @@ export declare const Quote: {
                         contentType: string;
                     };
                     avatar: {
-                        type: string;
-                        pattern: string;
+                        oneOf: ({
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            pattern: string;
+                            optionName: string;
+                        })[];
                     };
                     description: {
                         type: string;
@@ -70,6 +93,10 @@ export declare const Quote: {
                     };
                 };
             };
+            quoteType: {
+                type: string;
+                enum: import("../..").QuoteType[];
+            };
             type: {};
             when: {
                 type: string;

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

@@ -10,15 +10,17 @@ exports.Quote = {
         properties: Object.assign(Object.assign({}, common_1.BaseProps), { text: {
                 type: 'string',
                 contentType: 'text',
-            }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: {
-                type: 'string',
-                pattern: schema_1.imageUrlPattern,
-            }, color: {
+            }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: schema_1.ImageProps, color: {
                 type: 'string',
             }, url: {
                 type: 'string',
+            }, urlTitle: {
+                type: 'string',
             }, buttonText: {
                 type: 'string',
-            }, theme: common_1.ThemeProps, author: common_1.authorItem }),
+            }, theme: common_1.ThemeProps, author: common_1.authorItem, quoteType: {
+                type: 'string',
+                enum: common_1.quoteTypes,
+            } }),
     },
 };

package/build/cjs/text-transform/transformers.js

@@ -44,7 +44,9 @@ function transformBlock(lang, blocksConfig, block, plugins) {
         });
     }
     if ('children' in block && block.children) {
-        block.children = transformBlocks(block.children, lang, blocksConfig);
+        block.children = transformBlocks(block.children, lang, blocksConfig, {
+            plugins,
+        });
     }
     return block;
 }

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

@@ -58,6 +58,9 @@ export declare const BannerCardProps: {
                 url: {
                     type: string;
                 };
+                urlTitle: {
+                    type: string;
+                };
                 primary: {
                     type: string;
                 };
@@ -354,6 +357,9 @@ export declare const BannerBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     primary: {
                         type: string;
                     };
@@ -651,6 +657,9 @@ export declare const BannerCard: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     primary: {
                         type: string;
                     };

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

@@ -34,6 +34,9 @@ export declare const CardLayoutProps: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     resetMargin: {
                         type: string;
                     };
@@ -60,6 +63,9 @@ export declare const CardLayoutProps: {
                 url: {
                     type: string;
                 };
+                urlTitle: {
+                    type: string;
+                };
             };
         };
         visible: {
@@ -115,6 +121,9 @@ export declare const CardLayoutBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -141,6 +150,9 @@ export declare const CardLayoutBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

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

@@ -83,6 +83,9 @@ export declare const ContentLayoutBlock: {
                                 url: {
                                     type: string;
                                 };
+                                urlTitle: {
+                                    type: string;
+                                };
                                 resetMargin: {
                                     type: string;
                                 };
@@ -224,6 +227,9 @@ export declare const ContentLayoutBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

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

@@ -26,6 +26,9 @@ export declare const ExtendedFeaturesItem: {
                 url: {
                     type: string;
                 };
+                urlTitle: {
+                    type: string;
+                };
                 arrow: {
                     type: string;
                 };
@@ -196,6 +199,9 @@ export declare const ExtendedFeaturesBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -222,6 +228,9 @@ export declare const ExtendedFeaturesBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

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

@@ -90,6 +90,9 @@ export declare const FilterProps: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                     resetMargin: {
                         type: string;
                     };
@@ -116,6 +119,9 @@ export declare const FilterProps: {
                 url: {
                     type: string;
                 };
+                urlTitle: {
+                    type: string;
+                };
             };
         };
         visible: {
@@ -200,6 +206,9 @@ export declare const FilterBlock: {
                         url: {
                             type: string;
                         };
+                        urlTitle: {
+                            type: string;
+                        };
                         resetMargin: {
                             type: string;
                         };
@@ -226,6 +235,9 @@ export declare const FilterBlock: {
                     url: {
                         type: string;
                     };
+                    urlTitle: {
+                        type: string;
+                    };
                 };
             };
             visible: {

package/build/esm/blocks/Form/Form.css

@@ -0,0 +1,136 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-form-block {
+  border-radius: 32px;
+  position: relative;
+}
+.pc-form-block__title {
+  margin: 0 0 24px 10px;
+}
+.pc-form-block__title_mobile {
+  margin-left: 4px;
+}
+.pc-form-block__full-form {
+  background-color: var(--g-color-base-background);
+  padding: 48px 64px 48px calc(64px - 10px);
+  border-radius: var(--pc-border-radius);
+}
+.pc-form-block__media {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 32px;
+}
+.pc-form-block__image {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.pc-form-block__row_direction_form-content {
+  flex-direction: row-reverse;
+}
+.pc-form-block__row_direction_center {
+  padding-top: 64px;
+  padding-bottom: 48px;
+  flex-direction: column;
+}
+.pc-form-block__row_direction_center .pc-form-block__content-wrapper {
+  margin-bottom: 32px;
+}
+.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__full-form {
+  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
+}
+.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper {
+  padding: 48px 0 64px 64px;
+}
+.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper {
+  padding: 48px 64px 64px 0;
+}
+.pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__form-wrapper {
+  padding: 16px 0 24px 16px;
+}
+.pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__form-wrapper {
+  padding: 16px 16px 24px 0;
+}
+.pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper {
+  padding: 64px;
+}
+@media (min-width: 1081px) {
+  .pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__content-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__content-col {
+    flex: 1 0 0;
+  }
+  .pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__form, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__form, .pc-form-block_form-type_yandex .pc-form-block__row_direction_center .pc-form-block__form {
+    min-width: 475px;
+  }
+  .pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__form-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__form-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_center .pc-form-block__form-col {
+    max-width: initial;
+    width: fit-content;
+  }
+}
+@media (max-width: 1081px) and (min-width: 769px) {
+  .pc-form-block__row {
+    flex-direction: column;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    max-width: 609px;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__center,
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__center,
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    margin: 0 auto;
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper {
+    padding-top: 0;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    text-align: center;
+    padding-bottom: 32px;
+  }
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    padding: 0 0 32px 0;
+  }
+}
+@media (max-width: 769px) {
+  .pc-form-block__full-form {
+    padding: 32px;
+  }
+  .pc-form-block_with-background .pc-form-block__row, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row {
+    padding: 0;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    padding: 0;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    padding-bottom: 32px;
+    margin-bottom: 0;
+  }
+  .pc-form-block_with-background {
+    padding: 0 8px;
+  }
+  .pc-form-block_with-background .pc-form-block__row {
+    padding-top: 48px;
+  }
+  .pc-form-block_with-background .pc-form-block__row_padding-bottom_m {
+    padding-bottom: 32px;
+  }
+  .pc-form-block_with-background .pc-form-block__row_padding-bottom_l {
+    padding-bottom: 48px;
+  }
+  .pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_center .pc-form-block__content-wrapper {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+  .pc-form-block_with-background .pc-form-block__row_direction_form-content, .pc-form-block_with-background .pc-form-block__row_direction_content-form {
+    padding-top: 32px;
+  }
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { FormBlockProps } from '../../models';
+import './Form.css';
+declare const FormBlock: React.FC<FormBlockProps>;
+export default FormBlock;

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;