@gravity-ui/page-constructor 4.5.2 → 4.6.0

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WithChildren } from '../../models';
+import { QAProps } from '../../models/common';
 export interface HTMLProps {
     children?: string;
     block?: boolean;
@@ -7,12 +8,13 @@ export interface HTMLProps {
     itemProp?: string;
     id?: string;
 }
-declare const HTML: ({ children, block, className, itemProp, id }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp, id, qa, }: WithChildren<HTMLProps & QAProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
         __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
     itemProp: string | undefined;
     id: string | undefined;
+    'data-qa': string | undefined;
 }, HTMLElement> | null;
 export default HTML;

package/build/esm/components/HTML/HTML.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { hasBlockTag } from '../../utils';
-const HTML = ({ children, block = false, className, itemProp, id }) => {
+const HTML = ({ children, block = false, className, itemProp, id, qa, }) => {
     if (!children) {
         return null;
     }
@@ -9,6 +9,7 @@ const HTML = ({ children, block = false, className, itemProp, id }) => {
         className,
         itemProp,
         id,
+        'data-qa': qa,
     });
 };
 export default HTML;

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

@@ -1,5 +1,6 @@
 import { ClassNameProps, LinkProps, Tabbable, WithChildren } from '../../models';
+import { QAProps } from '../../models/common';
 import './Link.css';
-export type LinkFullProps = LinkProps & ClassNameProps & Tabbable;
+export type LinkFullProps = LinkProps & ClassNameProps & Tabbable & QAProps;
 declare const LinkBlock: (props: WithChildren<LinkFullProps>) => JSX.Element;
 export default LinkBlock;

package/build/esm/components/Link/Link.js

@@ -7,6 +7,7 @@ import { useMetrika } from '../../hooks/useMetrika';
 import { Chevron } from '../../icons';
 import { DefaultEventNames, } from '../../models';
 import { block, getLinkProps, setUrlTld } from '../../utils';
+import { getQaAttrubutes } from '../../utils/index';
 import BackLink from '../BackLink/BackLink';
 import FileLink from '../FileLink/FileLink';
 import './Link.css';
@@ -25,7 +26,8 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, } = props;
+    const qaAttributes = getQaAttrubutes(qa, ['normal']);
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);
     const { hostname } = useContext(LocationContext);
@@ -46,7 +48,7 @@ const LinkBlock = (props) => {
             case 'normal': {
                 const linkProps = getLinkProps(url, hostname, target);
                 const content = children || text;
-                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex }, linkProps), arrow ? (React.createElement(Fragment, null,
+                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (React.createElement(Fragment, null,
                     React.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     React.createElement(Icon, { className: b('arrow'), data: Chevron, size: getArrowSize(textSize) }))) : (content)));

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

@@ -1,9 +1,10 @@
 import { ClassNameProps, Modifiers } from '../../models';
-export interface YFMWrapperProps extends ClassNameProps {
+import { QAProps } from '../../models/common';
+export interface YFMWrapperProps extends ClassNameProps, QAProps {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
     id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, id }: YFMWrapperProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id, qa }: YFMWrapperProps) => JSX.Element;
 export default YFMWrapper;

package/build/esm/components/YFMWrapper/YFMWrapper.js

@@ -5,5 +5,5 @@ import block from 'bem-cn-lite';
 import toSnakeCase from 'snakecase-keys';
 import { HTML } from '../../components';
 const yfm = block('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, id }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
 export default YFMWrapper;

package/build/esm/constructor-items.d.ts

@@ -26,7 +26,7 @@ export declare const subBlockMap: {
     "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
-    content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;
+    content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
 };
 export declare const navItemMap: {

package/build/esm/editor/components/AddBlock/AddBlock.css

@@ -23,7 +23,7 @@ unpredictable css rules order in build */
   transition: transform 0.2s;
   width: 76px;
   height: 40px;
-  color: var(--g-color-text-primary);
+  color: var(--pc-editor-control-icon-color);
   background-color: var(--pc-editor-base-color);
   border-radius: 8px;
 }

package/build/esm/editor/components/EditBlock/EditBlock.css

@@ -45,6 +45,7 @@ unpredictable css rules order in build */
   width: 48px;
   height: 32px;
   border-radius: 8px;
+  color: var(--pc-editor-control-icon-color);
   background-color: var(--pc-editor-control-color);
 }
 .pc-edit-block__control:hover {

package/build/esm/editor/components/Layout/Layout.css

@@ -4,7 +4,8 @@ body {
   --pc-editor-header-height: 48px;
   --pc-editor-divider-width: 12px;
   --pc-editor-base-color: var(--g-color-base-brand);
-  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
   --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }
 

package/build/esm/editor/containers/Form/Form.css

@@ -1,46 +1,26 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-editor-form {
-  --top-level-font-size: var(--g-text-display-2-font-size);
-  --top-level-line-height: var(--g-text-display-2-line-height);
-  --block-level-complex-propery-font-size: var(--g-text-body-3-font-size);
-  --block-level-complex-property-line-height: var(--g-text-body-3-line-height);
-  --complex-property-font-size: var(--g-text-body-2-font-size);
-  --complex-property-line-height: var(--g-text-body-2-line-height);
-  --property-font-size: var(--g-text-body-1-font-size);
-  --property-line-height: var(--g-text-body-1-line-height);
+  --block-name-font-size: var(--g-text-display-1-font-size);
+  --block-name-line-height: var(--g-text-display-1-line-height);
+  --property-name-font-size: var(--g-text-body-1-font-size);
+  --property-name-line-height: var(--g-text-body-1-line-height);
   --input-min-width: 150px;
   --property-title-width: 96px;
   --button-height: 48px;
-  --icon-size: 32px;
-  --icon-margin: 42px;
+  --icon-size: 28px;
+  --icon-margin: 8px;
   --property-font-weight: 500;
-  --header-text-size: var(--top-level-font-size);
-  --header-line-height: var(--top-level-line-height);
-  --text-size: var(--top-level-font-size);
-  --line-height: var(--top-level-line-height);
+  --header-text-size: var(--block-name-font-size);
+  --header-line-height: var(--block-name-line-height);
 }
 .pc-editor-form .df-use-search .df-use-search {
-  --button-height: 32px;
-  --icon-size: 20px;
-  --icon-margin: 30px;
-  --header-text-size: var(--block-level-complex-propery-font-size);
-  --header-line-height: var(--block-level-complex-property-line-height);
-  --text-size: var(--property-font-size);
-  --line-height: var(--property-line-height);
-  --property-font-weight: 400;
-}
-.pc-editor-form .df-use-search .df-use-search .df-use-search {
   --button-height: 28px;
   --icon-size: 16px;
-  --icon-margin: 25px;
+  --icon-margin: 0px;
+  --header-text-size: var(--property-name-font-size);
+  --header-line-height: var(--property-name-line-height);
   --property-font-weight: 400;
-  --header-text-size: var(--complex-property-font-size);
-  --header-line-height: var(--complex-property-line-height);
-  --text-size: var(--property-font-size);
-  --line-height: var(--property-line-height);
-  --oneof-text-size: var(--complex-propery-font-size);
-  --oneof-line-height: var(--complex-property-line-height);
 }
 .pc-editor-form .df-row {
   width: inherit;
@@ -49,8 +29,6 @@ unpredictable css rules order in build */
   width: var(--property-title-width);
 }
 .pc-editor-form .df-row__title {
-  font-size: var(--text-size);
-  line-height: var(--line-height);
   font-weight: var(--property-font-weight);
   white-space: nowrap;
 }
@@ -58,12 +36,13 @@ unpredictable css rules order in build */
   min-width: var(--input-min-width);
   min-height: var(--input-min-width);
 }
-.pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
+.pc-editor-form .df-simple-vertical-accordeon__header .yc-button,
+.pc-editor-form .df-simple-vertical-accordeon__title {
   font-size: var(--header-text-size);
   line-height: var(--header-line-height);
 }
 .pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
-  --g-button-height: var(--button-height);
+  --yc-button-height: var(--button-height);
   display: flex;
   justify-content: center;
   align-items: center;

package/build/esm/editor/styles/root.css

@@ -2,6 +2,7 @@ body {
   --pc-editor-header-height: 48px;
   --pc-editor-divider-width: 12px;
   --pc-editor-base-color: var(--g-color-base-brand);
-  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
   --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }

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

@@ -1,4 +1,6 @@
 import { ClassNameProps, ContentBlockProps } from '../../models';
+import { QAProps } from '../../models/common';
 import './Content.css';
-declare const Content: (props: ContentBlockProps & ClassNameProps) => JSX.Element;
+export type ContentProps = ContentBlockProps & ClassNameProps & QAProps;
+declare const Content: (props: ContentProps) => JSX.Element;
 export default Content;

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

@@ -3,6 +3,7 @@ import { Button, Title, YFMWrapper } from '../../components';
 import LinkBlock from '../../components/Link/Link';
 import { Col } from '../../grid';
 import { block } from '../../utils';
+import { getQaAttrubutes } from '../../utils/blocks';
 import ContentList from './ContentList/ContentList';
 import './Content.css';
 const b = block('content');
@@ -34,23 +35,24 @@ function getButtonSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, } = props;
+    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, } = props;
+    const qaAttributes = getQaAttrubutes(qa, ['links', 'link', 'buttons', 'button', 'list']);
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
         : title;
     const hasTitle = Boolean(title);
-    return (React.createElement(Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes },
+    return (React.createElement(Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes, qa: qaAttributes.container },
         title && React.createElement(Title, { className: b('title'), title: titleProps, colSizes: { all: 12 } }),
         text && (React.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
-        (list === null || list === void 0 ? void 0 : list.length) ? React.createElement(ContentList, { list: list, size: size }) : null,
+        (list === null || list === void 0 ? void 0 : list.length) ? React.createElement(ContentList, { list: list, size: size, qa: qaAttributes.list }) : null,
         additionalInfo && (React.createElement("div", { className: b('notice') },
             React.createElement(YFMWrapper, { content: additionalInfo, modifiers: {
                     constructor: true,
                     'constructor-notice': true,
                     [`constructor-size-${size}`]: true,
                 } }))),
-        links && (React.createElement("div", { className: b('links') }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url })))))),
-        buttons && (React.createElement("div", { className: b('buttons') }, buttons.map((item) => (React.createElement(Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size) }))))))));
+        links && (React.createElement("div", { className: b('links'), "data-qa": qaAttributes.links }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, qa: qaAttributes.link })))))),
+        buttons && (React.createElement("div", { className: b('buttons'), "data-qa": qaAttributes.buttons }, buttons.map((item) => (React.createElement(Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: qaAttributes.button }))))))));
 };
 export default Content;

package/build/esm/sub-blocks/Content/ContentList/ContentList.d.ts

@@ -1,8 +1,9 @@
 import { ContentItemProps, ContentSize } from '../../../models';
+import { QAProps } from '../../../models/common';
 import './ContentList.css';
 interface ContentListProps {
     list: ContentItemProps[];
     size: ContentSize;
 }
-declare const ContentList: ({ list, size }: ContentListProps) => JSX.Element;
+declare const ContentList: ({ list, size, qa }: ContentListProps & QAProps) => JSX.Element;
 export default ContentList;

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

@@ -5,6 +5,7 @@ import Image from '../../../components/Image/Image';
 import { getMediaImage } from '../../../components/Media/Image/utils';
 import { useTheme } from '../../../context/theme';
 import { block, getThemedValue } from '../../../utils';
+import { getQaAttrubutes } from '../../../utils/blocks';
 import './ContentList.css';
 const b = block('content-list');
 function getHeadingLevel(size) {
@@ -16,18 +17,19 @@ function getHeadingLevel(size) {
             return 'h3';
     }
 }
-const ContentList = ({ list, size }) => {
+const ContentList = ({ list, size, qa }) => {
     const theme = useTheme();
-    return (React.createElement("div", { className: b({ size }) }, list === null || list === void 0 ? void 0 : list.map((item) => {
+    const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);
+    return (React.createElement("div", { className: b({ size }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
         const { icon, title, text } = item;
         const iconThemed = getThemedValue(icon, theme);
         const iconData = getMediaImage(iconThemed);
         return (React.createElement("div", { className: b('item'), key: uuidv4() },
-            React.createElement(Image, Object.assign({}, iconData, { className: b('icon') })),
+            React.createElement(Image, Object.assign({}, iconData, { className: b('icon'), qa: qaAttributes.image })),
             React.createElement("div", null,
                 title &&
-                    React.createElement(getHeadingLevel(size), { className: b('title') }, title),
-                text && (React.createElement(YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true } })))));
+                    React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, title),
+                text && (React.createElement(YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
     })));
 };
 export default ContentList;

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

@@ -7,3 +7,4 @@ export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlock
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getQaAttrubutes: (qa?: string, customKeys?: Array<string>) => Record<string, string>;

package/build/esm/utils/blocks.js

@@ -1,3 +1,4 @@
+import { camelCase } from 'lodash';
 import { PCShareSocialNetwork } from '../models';
 const BLOCK_ELEMENTS = [
     'div',
@@ -36,6 +37,7 @@ const BLOCK_ELEMENTS = [
     'td',
 ];
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
 export function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -109,3 +111,13 @@ export const getShareLink = (url, type, title, text) => {
             return undefined;
     }
 };
+export const getQaAttrubutes = (qa, customKeys = []) => {
+    const attributes = {};
+    if (qa) {
+        const keys = QA_ATTRIBUTES_KEYS.concat(customKeys);
+        keys.forEach((key) => {
+            attributes[camelCase(key)] = `${qa}-${key}`;
+        });
+    }
+    return attributes;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.5.2",
+  "version": "4.6.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@gravity-ui/components": "^2.0.0",
-    "@gravity-ui/dynamic-forms": "^2.0.0",
+    "@gravity-ui/dynamic-forms": "^2.3.0",
     "@gravity-ui/i18n": "^1.0.0",
     "ajv": "^8.12.0",
     "bem-cn-lite": "^4.0.0",

package/server/utils/blocks.d.ts

@@ -7,3 +7,4 @@ export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlock
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getQaAttrubutes: (qa?: string, customKeys?: Array<string>) => Record<string, string>;

package/server/utils/blocks.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+exports.getQaAttrubutes = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+const lodash_1 = require("lodash");
 const models_1 = require("../models");
 const BLOCK_ELEMENTS = [
     'div',
@@ -39,6 +40,7 @@ const BLOCK_ELEMENTS = [
     'td',
 ];
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -120,3 +122,14 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
+const getQaAttrubutes = (qa, customKeys = []) => {
+    const attributes = {};
+    if (qa) {
+        const keys = QA_ATTRIBUTES_KEYS.concat(customKeys);
+        keys.forEach((key) => {
+            attributes[(0, lodash_1.camelCase)(key)] = `${qa}-${key}`;
+        });
+    }
+    return attributes;
+};
+exports.getQaAttrubutes = getQaAttrubutes;