@gravity-ui/page-constructor 4.5.3 → 4.6.0

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.3",
+  "version": "4.6.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

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;