@gravity-ui/page-constructor 2.8.3 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.9.0](https://github.com/gravity-ui/page-constructor/compare/v2.8.4...v2.9.0) (2023-04-19)
+
+
+### Features
+
+* **QuestionBlock:** add schema.org FAQ microdata ([#308](https://github.com/gravity-ui/page-constructor/issues/308)) ([cfca14a](https://github.com/gravity-ui/page-constructor/commit/cfca14a76b458bfa21daa452cb46cb966fae9e88))
+
+## [2.8.4](https://github.com/gravity-ui/page-constructor/compare/v2.8.3...v2.8.4) (2023-04-17)
+
+
+### Bug Fixes
+
+* **Content:** remove links margin ([#306](https://github.com/gravity-ui/page-constructor/issues/306)) ([62972b4](https://github.com/gravity-ui/page-constructor/commit/62972b445e28016fe250c0361c91b84324456fe6))
+
 ## [2.8.3](https://github.com/gravity-ui/page-constructor/compare/v2.8.2...v2.8.3) (2023-04-14)
 
 

package/build/cjs/blocks/Questions/Questions.js

@@ -8,6 +8,15 @@ const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('QuestionsBlock');
+const FaqMicrodataValues = {
+    PageType: 'https://schema.org/FAQPage',
+    QuestionType: 'https://schema.org/Question',
+    QuestionProp: 'mainEntity',
+    QuestionTextProp: 'name',
+    AnswerType: 'https://schema.org/Answer',
+    AnswerProp: 'acceptedAnswer',
+    AnswerTextProp: 'text',
+};
 const QuestionsBlock = (props) => {
     const { title, text, additionalInfo, links, buttons, items } = props;
     const [opened, setOpened] = (0, react_1.useState)([0]);
@@ -21,24 +30,24 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (react_1.default.createElement("div", { className: b() },
+    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 4 } },
                 react_1.default.createElement("div", { className: b('title') },
                     react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
-                return (react_1.default.createElement("div", { key: itemTitle, className: b('item') },
+                return (react_1.default.createElement("div", { key: itemTitle, className: b('item'), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType },
                     react_1.default.createElement("h4", { className: b('item-title'), onClick: () => toggleItem(index) },
-                        react_1.default.createElement(components_1.HTML, null, itemTitle),
+                        react_1.default.createElement(components_1.HTML, { itemProp: FaqMicrodataValues.QuestionTextProp }, itemTitle),
                         react_1.default.createElement(components_1.ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
                     react_1.default.createElement(components_1.Foldable, { isOpened: isOpened },
-                        react_1.default.createElement("div", { className: b('text') },
+                        react_1.default.createElement("div", { className: b('text'), itemScope: true, itemProp: FaqMicrodataValues.AnswerProp, itemType: FaqMicrodataValues.AnswerType },
                             react_1.default.createElement(components_1.YFMWrapper, { content: itemText, modifiers: {
                                     constructor: true,
                                     constructorListStyle: true,
                                     constructorListStyleDash: listStyle === 'dash',
-                                } }),
+                                }, itemProp: FaqMicrodataValues.QuestionTextProp }),
                             link && react_1.default.createElement(Link_1.default, Object.assign({}, link, { className: b('link') }))))));
             })))));
 };

package/build/cjs/components/AnimateBlock/AnimateBlock.d.ts

@@ -7,6 +7,7 @@ export interface AnimateBlockProps extends AnimateContextProps {
     className?: string;
     style?: CSSProperties;
     onScroll?: () => void;
+    qa?: string;
 }
 declare const AnimateBlock: (props: WithChildren<AnimateBlockProps>) => JSX.Element;
 export default AnimateBlock;

package/build/cjs/components/AnimateBlock/AnimateBlock.js

@@ -8,12 +8,12 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('AnimateBlock');
 const AnimateBlock = (props) => {
     const { animated } = (0, react_1.useContext)(AnimateContext_1.AnimateContext);
-    const { children, className, offset = 100, onScroll, style, animate = animated } = props;
+    const { children, className, offset = 100, onScroll, style, animate = animated, qa } = props;
     const [playAnimation, setPlayAnimation] = (0, react_1.useState)(false);
     const divClassName = animate
         ? b(null, `${playAnimation && 'animate'} ${className}`)
         : className;
-    return (react_1.default.createElement("div", { className: divClassName, style: style },
+    return (react_1.default.createElement("div", { className: divClassName, style: style, "data-qa": qa },
         react_1.default.createElement(react_waypoint_1.Waypoint
         // trigger animation if element is above screen
         , { 

package/build/cjs/components/AnimateBlock/__tests__/AnimateBlock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/AnimateBlock/__tests__/AnimateBlock.test.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const AnimateBlock_1 = tslib_1.__importDefault(require("../AnimateBlock"));
+const qaId = 'animate-block';
+describe('AnimateBlock', () => {
+    test('render AnimateBlock by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { qa: qaId }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { qa: qaId, className: className }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('use passed style', () => {
+        const style = { color: 'red' };
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { style: style, qa: qaId }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveStyle(style);
+    });
+    test('call onScroll', async () => {
+        const onScroll = jest.fn();
+        const user = user_event_1.default.setup();
+        (0, react_2.render)(react_1.default.createElement("div", { style: { paddingTop: 100000 } },
+            react_1.default.createElement(AnimateBlock_1.default, { onScroll: onScroll, qa: qaId })));
+        const component = react_2.screen.getByTestId(qaId);
+        await user.hover(component);
+        expect(onScroll).toHaveBeenCalledTimes(1);
+    });
+});

package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts

@@ -11,6 +11,7 @@ export interface ButtonTabsProps {
     activeTab?: string | null;
     onSelectTab?: (tabId: string | null) => void;
     tabSize?: ButtonSize;
+    qa?: string;
 }
 declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/build/cjs/components/ButtonTabs/ButtonTabs.js

@@ -5,7 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
 const index_1 = require("../index");
 const b = (0, utils_1.block)('button-tabs');
-const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', }) => {
+const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', qa, }) => {
     const activeTabId = (0, react_1.useMemo)(() => {
         if (activeTab) {
             return activeTab;
@@ -17,6 +17,6 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', }
             onSelectTab(tabId);
         }
     }, [onSelectTab]);
-    return (react_1.default.createElement("div", { className: b(null, className) }, items.map(({ id, title }) => (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
+    return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
 };
 exports.default = ButtonTabs;

package/build/cjs/components/ButtonTabs/__tests__/ButtonTabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/ButtonTabs/__tests__/ButtonTabs.test.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const ButtonTabs_1 = tslib_1.__importDefault(require("../ButtonTabs"));
+const qaId = 'button-tabs-component';
+const items = [
+    {
+        id: '0',
+        title: 'tab-1',
+    },
+    {
+        id: '1',
+        title: 'tab-2',
+    },
+    {
+        id: '2',
+        title: 'tab-3',
+    },
+];
+describe('ButtonTabs', () => {
+    test('render ButtonTabs by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId }));
+        const buttonTabs = react_2.screen.getByTestId(qaId);
+        expect(buttonTabs).toBeInTheDocument();
+        expect(buttonTabs).toBeVisible();
+        expect(buttonTabs).not.toBeDisabled();
+    });
+    test('has active tab', async () => {
+        const activeTabId = 1;
+        (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, activeTab: String(activeTabId) }));
+        const buttons = react_2.screen.getAllByRole('button');
+        buttons.forEach((button, index) => {
+            if (index === activeTabId) {
+                expect(button).toHaveClass('pc-button-tabs__item_active');
+            }
+            expect(button).toHaveClass('pc-button-block_theme_normal');
+        });
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, className: className }));
+        const buttonTabs = react_2.screen.getByTestId(qaId);
+        expect(buttonTabs).toHaveClass(className);
+    });
+    test('call onSelectTab', async () => {
+        const user = user_event_1.default.setup();
+        const handleOnClick = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, onSelectTab: handleOnClick }));
+        const buttons = react_2.screen.getAllByRole('button');
+        buttons.forEach(async (button, i) => {
+            await user.click(button);
+            expect(handleOnClick).toHaveBeenCalledTimes(i + 1);
+        });
+    });
+});

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

@@ -4,11 +4,13 @@ export interface HTMLProps {
     children?: string;
     block?: boolean;
     className?: string;
+    itemProp?: string;
 }
-declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => 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;
 }, HTMLElement> | null;
 export default HTML;

package/build/cjs/components/HTML/HTML.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const HTML = ({ children, block = false, className }) => {
+const HTML = ({ children, block = false, className, itemProp }) => {
     if (!children) {
         return null;
     }
     return react_1.default.createElement(block ? 'div' : 'span', {
         dangerouslySetInnerHTML: { __html: children },
         className,
+        itemProp,
     });
 };
 exports.default = HTML;

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

@@ -3,6 +3,7 @@ export interface YFMWrapperProps {
     className?: string;
     content: string;
     modifiers?: Modifiers;
+    itemProp?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
 export default YFMWrapper;

package/build/cjs/components/YFMWrapper/YFMWrapper.js

@@ -8,5 +8,5 @@ const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
 const components_1 = require("../../components");
 const yfm = (0, bem_cn_lite_1.default)('yfm');
-const YFMWrapper = ({ content, modifiers, className }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className) }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp }, content));
 exports.default = YFMWrapper;

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

@@ -42,10 +42,6 @@ unpredictable css rules order in build */
 }
 .pc-content__link {
   display: block;
-  margin-right: 32px;
-}
-.pc-content__link:last-child {
-  margin-right: 0;
 }
 .pc-content_centered.pc-content_centered {
   margin: 0 auto;

package/build/esm/blocks/Questions/Questions.js

@@ -6,6 +6,15 @@ import { Content } from '../../sub-blocks';
 import { block } from '../../utils';
 import './Questions.css';
 const b = block('QuestionsBlock');
+const FaqMicrodataValues = {
+    PageType: 'https://schema.org/FAQPage',
+    QuestionType: 'https://schema.org/Question',
+    QuestionProp: 'mainEntity',
+    QuestionTextProp: 'name',
+    AnswerType: 'https://schema.org/Answer',
+    AnswerProp: 'acceptedAnswer',
+    AnswerTextProp: 'text',
+};
 const QuestionsBlock = (props) => {
     const { title, text, additionalInfo, links, buttons, items } = props;
     const [opened, setOpened] = useState([0]);
@@ -19,24 +28,24 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (React.createElement("div", { className: b() },
+    return (React.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
         React.createElement(Row, null,
             React.createElement(Col, { sizes: { all: 12, md: 4 } },
                 React.createElement("div", { className: b('title') },
                     React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
             React.createElement(Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
-                return (React.createElement("div", { key: itemTitle, className: b('item') },
+                return (React.createElement("div", { key: itemTitle, className: b('item'), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType },
                     React.createElement("h4", { className: b('item-title'), onClick: () => toggleItem(index) },
-                        React.createElement(HTML, null, itemTitle),
+                        React.createElement(HTML, { itemProp: FaqMicrodataValues.QuestionTextProp }, itemTitle),
                         React.createElement(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
                     React.createElement(Foldable, { isOpened: isOpened },
-                        React.createElement("div", { className: b('text') },
+                        React.createElement("div", { className: b('text'), itemScope: true, itemProp: FaqMicrodataValues.AnswerProp, itemType: FaqMicrodataValues.AnswerType },
                             React.createElement(YFMWrapper, { content: itemText, modifiers: {
                                     constructor: true,
                                     constructorListStyle: true,
                                     constructorListStyleDash: listStyle === 'dash',
-                                } }),
+                                }, itemProp: FaqMicrodataValues.QuestionTextProp }),
                             link && React.createElement(Link, Object.assign({}, link, { className: b('link') }))))));
             })))));
 };

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

@@ -7,6 +7,7 @@ export interface AnimateBlockProps extends AnimateContextProps {
     className?: string;
     style?: CSSProperties;
     onScroll?: () => void;
+    qa?: string;
 }
 declare const AnimateBlock: (props: WithChildren<AnimateBlockProps>) => JSX.Element;
 export default AnimateBlock;

package/build/esm/components/AnimateBlock/AnimateBlock.js

@@ -5,12 +5,12 @@ import { block } from '../../utils';
 const b = block('AnimateBlock');
 const AnimateBlock = (props) => {
     const { animated } = useContext(AnimateContext);
-    const { children, className, offset = 100, onScroll, style, animate = animated } = props;
+    const { children, className, offset = 100, onScroll, style, animate = animated, qa } = props;
     const [playAnimation, setPlayAnimation] = useState(false);
     const divClassName = animate
         ? b(null, `${playAnimation && 'animate'} ${className}`)
         : className;
-    return (React.createElement("div", { className: divClassName, style: style },
+    return (React.createElement("div", { className: divClassName, style: style, "data-qa": qa },
         React.createElement(Waypoint
         // trigger animation if element is above screen
         , { 

package/build/esm/components/AnimateBlock/__tests__/AnimateBlock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/components/AnimateBlock/__tests__/AnimateBlock.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AnimateBlock from '../AnimateBlock';
+const qaId = 'animate-block';
+describe('AnimateBlock', () => {
+    test('render AnimateBlock by default', async () => {
+        render(React.createElement(AnimateBlock, { qa: qaId }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(AnimateBlock, { qa: qaId, className: className }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('use passed style', () => {
+        const style = { color: 'red' };
+        render(React.createElement(AnimateBlock, { style: style, qa: qaId }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveStyle(style);
+    });
+    test('call onScroll', async () => {
+        const onScroll = jest.fn();
+        const user = userEvent.setup();
+        render(React.createElement("div", { style: { paddingTop: 100000 } },
+            React.createElement(AnimateBlock, { onScroll: onScroll, qa: qaId })));
+        const component = screen.getByTestId(qaId);
+        await user.hover(component);
+        expect(onScroll).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -12,6 +12,7 @@ export interface ButtonTabsProps {
     activeTab?: string | null;
     onSelectTab?: (tabId: string | null) => void;
     tabSize?: ButtonSize;
+    qa?: string;
 }
 declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -3,7 +3,7 @@ import { block } from '../../utils';
 import { Button } from '../index';
 import './ButtonTabs.css';
 const b = block('button-tabs');
-const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', }) => {
+const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', qa, }) => {
     const activeTabId = useMemo(() => {
         if (activeTab) {
             return activeTab;
@@ -15,6 +15,6 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', }
             onSelectTab(tabId);
         }
     }, [onSelectTab]);
-    return (React.createElement("div", { className: b(null, className) }, items.map(({ id, title }) => (React.createElement(Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
+    return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (React.createElement(Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
 };
 export default ButtonTabs;

package/build/esm/components/ButtonTabs/__tests__/ButtonTabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/components/ButtonTabs/__tests__/ButtonTabs.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ButtonTabs from '../ButtonTabs';
+const qaId = 'button-tabs-component';
+const items = [
+    {
+        id: '0',
+        title: 'tab-1',
+    },
+    {
+        id: '1',
+        title: 'tab-2',
+    },
+    {
+        id: '2',
+        title: 'tab-3',
+    },
+];
+describe('ButtonTabs', () => {
+    test('render ButtonTabs by default', async () => {
+        render(React.createElement(ButtonTabs, { items: items, qa: qaId }));
+        const buttonTabs = screen.getByTestId(qaId);
+        expect(buttonTabs).toBeInTheDocument();
+        expect(buttonTabs).toBeVisible();
+        expect(buttonTabs).not.toBeDisabled();
+    });
+    test('has active tab', async () => {
+        const activeTabId = 1;
+        render(React.createElement(ButtonTabs, { items: items, qa: qaId, activeTab: String(activeTabId) }));
+        const buttons = screen.getAllByRole('button');
+        buttons.forEach((button, index) => {
+            if (index === activeTabId) {
+                expect(button).toHaveClass('pc-button-tabs__item_active');
+            }
+            expect(button).toHaveClass('pc-button-block_theme_normal');
+        });
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(ButtonTabs, { items: items, qa: qaId, className: className }));
+        const buttonTabs = screen.getByTestId(qaId);
+        expect(buttonTabs).toHaveClass(className);
+    });
+    test('call onSelectTab', async () => {
+        const user = userEvent.setup();
+        const handleOnClick = jest.fn();
+        render(React.createElement(ButtonTabs, { items: items, qa: qaId, onSelectTab: handleOnClick }));
+        const buttons = screen.getAllByRole('button');
+        buttons.forEach(async (button, i) => {
+            await user.click(button);
+            expect(handleOnClick).toHaveBeenCalledTimes(i + 1);
+        });
+    });
+});

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

@@ -4,11 +4,13 @@ export interface HTMLProps {
     children?: string;
     block?: boolean;
     className?: string;
+    itemProp?: string;
 }
-declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => 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;
 }, HTMLElement> | null;
 export default HTML;

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

@@ -1,11 +1,12 @@
 import React from 'react';
-const HTML = ({ children, block = false, className }) => {
+const HTML = ({ children, block = false, className, itemProp }) => {
     if (!children) {
         return null;
     }
     return React.createElement(block ? 'div' : 'span', {
         dangerouslySetInnerHTML: { __html: children },
         className,
+        itemProp,
     });
 };
 export default HTML;

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

@@ -3,6 +3,7 @@ export interface YFMWrapperProps {
     className?: string;
     content: string;
     modifiers?: Modifiers;
+    itemProp?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => 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 }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className) }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp }, content));
 export default YFMWrapper;

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

@@ -42,10 +42,6 @@ unpredictable css rules order in build */
 }
 .pc-content__link {
   display: block;
-  margin-right: 32px;
-}
-.pc-content__link:last-child {
-  margin-right: 0;
 }
 .pc-content_centered.pc-content_centered {
   margin: 0 auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {