@gravity-ui/page-constructor 4.31.1 → 4.34.0

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const Link_1 = tslib_1.__importDefault(require("../../components/Link/Link"));
 const grid_1 = require("../../grid");
@@ -37,16 +38,18 @@ function getButtonSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, } = props;
+    const { title, titleId: titleIdFromProps, text, textId, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, } = props;
     const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['links', 'link', 'buttons', 'button', 'list']);
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
         : title;
     const hasTitle = Boolean(title);
+    const defaultTitleId = (0, uikit_1.useUniqId)();
+    const titleId = titleIdFromProps || defaultTitleId;
     return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes, qa: qaAttributes.container },
-        title && react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 } }),
+        title && (react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 }, id: titleId })),
         text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
-            react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
+            react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId }))),
         (list === null || list === void 0 ? void 0 : list.length) ? react_1.default.createElement(ContentList_1.default, { list: list, size: size, qa: qaAttributes.list }) : null,
         additionalInfo && (react_1.default.createElement("div", { className: b('notice') },
             react_1.default.createElement(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
@@ -54,7 +57,11 @@ const Content = (props) => {
                     'constructor-notice': true,
                     [`constructor-size-${size}`]: true,
                 } }))),
-        links && (react_1.default.createElement("div", { className: b('links'), "data-qa": qaAttributes.links }, links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, qa: qaAttributes.link })))))),
-        buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": qaAttributes.buttons }, buttons.map((item) => (react_1.default.createElement(components_1.Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: qaAttributes.button }))))))));
+        links && (react_1.default.createElement("div", { className: b('links'), "data-qa": qaAttributes.links }, links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, qa: qaAttributes.link, extraProps: {
+                'aria-describedby': link.urlTitle ? undefined : titleId,
+            } })))))),
+        buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": qaAttributes.buttons }, buttons.map((item) => (react_1.default.createElement(components_1.Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: qaAttributes.button, extraProps: {
+                'aria-describedby': item.urlTitle ? undefined : titleId,
+            } }))))))));
 };
 exports.default = Content;

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

@@ -239,16 +239,6 @@ unpredictable css rules order in build */
   font-weight: var(--g-text-body-font-weight);
   margin: 20px 0;
 }
-.pc-hubspot-form .hs-richtext a:focus {
-  box-shadow: 0 0 0 2px var(--g-color-line-focus);
-}
-.pc-hubspot-form .hs-richtext a:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-.pc-hubspot-form .hs-richtext a:focus {
-  outline: 0;
-  border-radius: var(--g-focus-border-radius);
-}
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
   font-size: var(--g-text-body-1-font-size);
@@ -390,6 +380,16 @@ unpredictable css rules order in build */
 .pc-hubspot-form_mobile .hs-button.primary {
   width: 80%;
 }
+.pc-hubspot-form a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.pc-hubspot-form a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.pc-hubspot-form a:focus {
+  outline: 0;
+  border-radius: var(--g-focus-border-radius);
+}
 .pc-hubspot-form_theme_dark {
   --g-color-line-focus: var(--pc-color-line-focus-dark);
 }

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/utils.d.ts

@@ -10,6 +10,7 @@ export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['lin
     target?: string | undefined;
     metrikaGoals?: import("../../models").MetrikaGoal | undefined;
     pixelEvents?: import("../../models").ButtonPixel | undefined;
+    extraProps?: import("react").HTMLProps<HTMLAnchorElement> | undefined;
     analyticsEvents?: {
         name: string;
         type?: string | undefined;

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

@@ -62,7 +62,6 @@ unpredictable css rules order in build */
 }
 .pc-quote__content_quote-type_chevron::before {
   position: absolute;
-  top: -1px;
   left: -10px;
   content: "«";
 }
@@ -71,7 +70,6 @@ unpredictable css rules order in build */
 }
 .pc-quote__content_quote-type_english-double::before {
   position: absolute;
-  top: -1px;
   left: -8px;
   content: "“";
 }

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,57 @@
+import React, { useCallback, useContext, 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);
+    }, []);
+    if (!formData) {
+        return null;
+    }
+    let formType;
+    if (isYandexDataForm(formData)) {
+        formType = FormBlockDataTypes.YANDEX;
+    }
+    else if (isHubspotDataForm(formData)) {
+        formType = FormBlockDataTypes.HUBSPOT;
+    }
+    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/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({ createDOMElement: true }, 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',
+                        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/Header.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useUniqId } from '@gravity-ui/uikit';
 import { Button, HTML, Media, RouterLink } from '../../components';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
 import { getMediaImage } from '../../components/Media/Image/utils';
@@ -32,6 +33,7 @@ export const HeaderBlock = (props) => {
     const imageThemed = image && getThemedValue(image, theme);
     const videoThemed = video && getThemedValue(video, theme);
     const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
+    const titleId = useUniqId();
     return (React.createElement("header", { className: b({
             ['has-media']: hasRightSideImage,
             ['full-width']: fullWidth,
@@ -54,7 +56,7 @@ export const HeaderBlock = (props) => {
                             React.createElement(Col, { sizes: titleSizes, className: b('content-inner') },
                                 overtitle && (React.createElement("div", { className: b('overtitle') },
                                     React.createElement(HTML, null, overtitle))),
-                                React.createElement("h1", { className: b('title') },
+                                React.createElement("h1", { className: b('title'), id: titleId },
                                     status,
                                     renderTitle ? renderTitle(title) : React.createElement(HTML, null, title)),
                                 description && (React.createElement("div", { className: b('description') },
@@ -63,7 +65,9 @@ export const HeaderBlock = (props) => {
                                             constructorTheme: textTheme,
                                         } }))),
                                 buttons && (React.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },
-                                    React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
+                                    React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl", extraProps: {
+                                            'aria-describedby': titleId,
+                                        } }, button))))))),
                                 children))),
                     hasRightSideImage && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
 };