@gravity-ui/page-constructor 4.3.0 → 4.3.12-alpha.3

package/README.md

@@ -386,3 +386,7 @@ export const MyAppEditor = ({initialContent, onChange, transformContent}: MyAppE
   <Editor content={initialContent} onChange={onChange} transformContent={transformContent} />
 );
 ```
+
+## Tests
+
+Comprehensive documentation is available at the provided [link](./test-utils/docs/README.md).

package/build/cjs/blocks/CardLayout/CardLayout.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardLayoutBlockProps as CardLayoutBlockParams, WithChildren } from '../../models';
-export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>>;
+import { CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps, WithChildren } from '../../models';
+export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>> & ClassNameProps;
 declare const CardLayout: React.FC<CardLayoutBlockProps>;
 export default CardLayout;

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -11,7 +11,7 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = (0, utils_1.block)('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
     (title || description) && react_1.default.createElement(components_1.Title, { title: title, subtitle: description }),
     react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 exports.default = CardLayout;

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

@@ -15,6 +15,25 @@ export declare const ContentLayoutBlock: {
                         type: string;
                         pattern: string;
                     };
+                    style: {
+                        type: string;
+                        additionalProperties: boolean;
+                        required: never[];
+                        properties: {
+                            backgroundColor: {
+                                type: string;
+                            };
+                            height: {
+                                type: string[];
+                            };
+                            width: {
+                                type: string[];
+                            };
+                            color: {
+                                type: string;
+                            };
+                        };
+                    };
                     alt: {
                         type: string;
                         contentType: string;
@@ -153,6 +172,25 @@ export declare const ContentLayoutBlock: {
                             type: string;
                             pattern: string;
                         };
+                        style: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                backgroundColor: {
+                                    type: string;
+                                };
+                                height: {
+                                    type: string[];
+                                };
+                                width: {
+                                    type: string[];
+                                };
+                                color: {
+                                    type: string;
+                                };
+                            };
+                        };
                         alt: {
                             type: string;
                             contentType: string;

package/build/cjs/blocks/Header/Header.css

@@ -75,10 +75,6 @@ unpredictable css rules order in build */
 }
 .pc-header-block__description {
   margin-top: 16px;
-  font-weight: normal;
-  font-size: var(--g-text-caption-2-font-size);
-  line-height: var(--g-text-caption-2-line-height);
-  margin-block-end: var(--g-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
@@ -170,9 +166,7 @@ unpredictable css rules order in build */
 .pc-header-block__overtitle {
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
-  margin-block-start: var(--g-text-body-3-line-height);
   margin-bottom: 8px;
-  font-weight: 400;
 }
 .pc-header-block__overtitle a {
   outline: none;

package/build/cjs/blocks/Icons/Icons.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../components");
 const locationContext_1 = require("../../context/locationContext");
+const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('icons-block');
 const getItemContent = (item) => (react_1.default.createElement(react_1.Fragment, null,
@@ -11,11 +12,16 @@ const getItemContent = (item) => (react_1.default.createElement(react_1.Fragment
     react_1.default.createElement("p", { className: b('text') }, item.text)));
 const Icons = ({ title, size = 's', items }) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const handleAnalytics = (0, hooks_1.useAnalytics)();
+    const onClick = (0, react_1.useCallback)(({ analyticsEvents, url }) => {
+        handleAnalytics(analyticsEvents, { url });
+    }, [handleAnalytics]);
     return (react_1.default.createElement("div", { className: b({ size }) },
         title && react_1.default.createElement(components_1.Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
         items.map((item) => {
             const itemContent = getItemContent(item);
-            return item.url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: item.url, href: item.url }, (0, utils_1.getLinkProps)(item.url, hostname)), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: item.url }, itemContent));
+            const { url, text } = item;
+            return url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, (0, utils_1.getLinkProps)(url, hostname), { onClick: () => onClick(item) }), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: url }, itemContent));
         })));
 };
 exports.default = Icons;

package/build/cjs/blocks/Icons/schema.d.ts

@@ -29,6 +29,87 @@ export declare const IconsProps: {
                         type: string;
                     };
                 };
+                analyticsEvents: {
+                    oneOf: ({
+                        optionName: string;
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            additionalProperties: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                                context: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                    })[];
+                };
             };
         };
         animated: {
@@ -96,6 +177,87 @@ export declare const IconsBlock: {
                             type: string;
                         };
                     };
+                    analyticsEvents: {
+                        oneOf: ({
+                            optionName: string;
+                            type: string;
+                            additionalProperties: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                                context: {
+                                    type: string;
+                                };
+                            };
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties: {
+                                    type: string;
+                                };
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    type: {
+                                        type: string;
+                                    };
+                                    counters: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: never[];
+                                        properties: {
+                                            include: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                            exclude: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                    context: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            optionName: string;
+                        })[];
+                    };
                 };
             };
             animated: {

package/build/cjs/blocks/Icons/schema.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconsBlock = exports.IconsProps = void 0;
 const common_1 = require("../../schema/validators/common");
+const event_1 = require("../../schema/validators/event");
 exports.IconsProps = {
     additionalProperties: false,
     required: ['size', 'items'],
@@ -30,6 +31,16 @@ exports.IconsProps = {
                         type: 'string',
                     },
                 },
+                analyticsEvents: {
+                    oneOf: [
+                        Object.assign(Object.assign({}, event_1.AnalyticsEventSchema), { optionName: 'single' }),
+                        {
+                            type: 'array',
+                            items: event_1.AnalyticsEventSchema,
+                            optionName: 'list',
+                        },
+                    ],
+                },
             },
         } }),
 };

package/build/cjs/blocks/Slider/Arrow/Arrow.js

@@ -4,9 +4,10 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const ToggleArrow_1 = tslib_1.__importDefault(require("../../../components/ToggleArrow/ToggleArrow"));
 const utils_1 = require("../../../utils");
+const i18n_1 = tslib_1.__importDefault(require("../i18n"));
 const b = (0, utils_1.block)('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
-    react_1.default.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
+    react_1.default.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type), "aria-label": (0, i18n_1.default)(`arrow-${type}`) },
         react_1.default.createElement("span", { className: b('icon-wrapper') },
             react_1.default.createElement(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 exports.default = Arrow;

package/build/cjs/blocks/Slider/Slider.css

@@ -134,6 +134,7 @@ unpredictable css rules order in build */
   justify-content: center;
 }
 .pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__accessible-bar,
 .pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
@@ -155,13 +156,15 @@ unpredictable css rules order in build */
 .pc-SliderBlock__dot_active {
   background-color: var(--g-color-line-generic-active);
 }
-.pc-SliderBlock__bar {
+.pc-SliderBlock__bar, .pc-SliderBlock__accessible-bar {
   position: absolute;
   top: 12px;
   left: 0;
   width: 24px;
   height: 8px;
   border-radius: var(--pc-border-radius);
+}
+.pc-SliderBlock__bar {
   transition: left 0.3s;
   background-color: var(--pc-color-line-generic-active-solid);
 }

package/build/cjs/blocks/Slider/Slider.js

@@ -121,27 +121,53 @@ const SliderBlock = (props) => {
             slider.slickGoTo(nextIndex);
         }
     }, [slider, currentIndex, slidesCountByBreakpoint]);
+    const barSlidesCount = childrenCount - slidesToShowCount + 1;
+    const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
+    const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
     const renderBar = () => {
-        const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
-        const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
         return (slidesCountByBreakpoint > 1 && (react_1.default.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
     };
+    // renders additional bar, not visible in the layout but visible for screenreaders
+    const renderAccessibleBar = (index) => {
+        return (
+        // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
+        react_1.default.createElement(react_1.Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 1 && (react_1.default.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
+                left: barPosition,
+                width: barWidth,
+            } }))));
+    };
     const renderDot = (index) => {
-        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+        const currentIndexDiff = index - currentIndex;
+        let currentSlideNumber;
+        if (0 <= currentIndexDiff && currentIndexDiff < slidesToShowCount) {
+            currentSlideNumber = currentIndex + 1;
+        }
+        else if (currentIndexDiff >= slidesToShowCount) {
+            currentSlideNumber = index - slidesToShowCount + 2;
+        }
+        else {
+            currentSlideNumber = index + 1;
+        }
+        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": (slidesCountByBreakpoint > 1 &&
+                0 <= currentIndexDiff &&
+                currentIndexDiff < slidesToShowCount) ||
+                undefined, "aria-label": `Slide ${currentSlideNumber} of ${barSlidesCount}` }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {
             return null;
         }
+        const dotsList = Array(childrenCount)
+            .fill(null)
+            .map((_item, index) => renderDot(index));
+        dotsList.splice(currentIndex, 0, renderAccessibleBar(currentIndex));
         return (react_1.default.createElement("div", { className: b('dots', dotsClassName) },
             react_1.default.createElement("ul", { className: b('dots-list') },
                 renderBar(),
-                Array(childrenCount)
-                    .fill(null)
-                    .map((_item, index) => renderDot(index)))));
+                dotsList)));
     };
     const renderDisclaimer = () => {
         return disclaimer ? (react_1.default.createElement("div", { className: b('disclaimer', { size: disclaimer.size || 'm' }) }, disclaimer.text)) : null;

package/build/cjs/blocks/Slider/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Next",
+  "arrow-left": "Previous"
+}

package/build/cjs/blocks/Slider/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/blocks/Slider/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'SliderBlock';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/blocks/Slider/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Дальше",
+  "arrow-left": "Назад"
+}

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

@@ -1,3 +1,4 @@
 import { BackgroundImageProps, WithChildren } from '../../models';
+export declare const qaIdByDefault = "background-image";
 declare const BackgroundImage: (props: WithChildren<BackgroundImageProps>) => JSX.Element;
 export default BackgroundImage;

package/build/cjs/components/BackgroundImage/BackgroundImage.js

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.qaIdByDefault = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
+exports.qaIdByDefault = 'background-image';
 const b = (0, utils_1.block)('storage-background-image');
 const BackgroundImage = (props) => {
     const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
-    return (react_1.default.createElement("div", { className: b(null, className), style: style, "data-qa": qa },
-        (src || desktop) && !hide && react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName) })),
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa || exports.qaIdByDefault);
+    return (react_1.default.createElement("div", { className: b(null, className), style: style, "data-qa": qa || exports.qaIdByDefault },
+        (src || desktop) && !hide && (react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName), qa: qaAttributes.image }))),
         children && react_1.default.createElement("div", { className: b('container') }, children)));
 };
 exports.default = BackgroundImage;

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

@@ -1,3 +1,3 @@
 import { BackgroundMediaProps } from '../../models';
-declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, fullWidthMedia, ...props }: BackgroundMediaProps) => JSX.Element;
+declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, fullWidthMedia, qa, ...props }: BackgroundMediaProps) => JSX.Element;
 export default BackgroundMedia;

package/build/cjs/components/BackgroundMedia/BackgroundMedia.js

@@ -8,10 +8,11 @@ const AnimateBlock_1 = tslib_1.__importDefault(require("../AnimateBlock/AnimateB
 const Media_1 = tslib_1.__importDefault(require("../Media/Media"));
 const b = (0, utils_1.block)('BackgroundMedia');
 const BackgroundMedia = (_a) => {
-    var { className, color, animated, parallax = true, video, mediaClassName, fullWidthMedia } = _a, props = tslib_1.__rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName", "fullWidthMedia"]);
+    var { className, color, animated, parallax = true, video, mediaClassName, fullWidthMedia, qa } = _a, props = tslib_1.__rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName", "fullWidthMedia", "qa"]);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
-        react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'media');
+    return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), style: { backgroundColor: color }, animate: animated, qa: qaAttributes.animate },
+        react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, qa: qaAttributes.media }, Object.assign({ height: 720, color,
             parallax, video: isMobile ? undefined : video }, props)))));
 };
 exports.default = BackgroundMedia;

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

@@ -17,6 +17,11 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
             onSelectTab(tabId, e);
         }
     }, [onSelectTab]);
-    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) })))));
+    return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => {
+        const isActive = id === activeTabId;
+        return (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: isActive }), key: title, size: tabSize, onClick: handleClick(id), extraProps: {
+                'aria-current': isActive,
+            } }));
+    })));
 };
 exports.default = ButtonTabs;

package/build/cjs/components/CardBase/CardBase.css

@@ -22,9 +22,6 @@ unpredictable css rules order in build */
 .pc-card-base-block_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
-.pc-card-base-block_border_line, .pc-card-base-block_border_none {
-  cursor: default;
-}
 @media (min-width: 577px) {
   .slick-slide:not(.slick-active) .pc-card-base-block {
     box-shadow: none;
@@ -80,7 +77,10 @@ a.pc-card-base-block_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
 a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
-  cursor: default;
+  transition: transform 0.3s ease-out;
+}
+a.pc-card-base-block_border_line:hover, a.pc-card-base-block_border_none:hover {
+  transform: translateY(-8px);
 }
 a.pc-card-base-block_border_shadow {
   transition: transform 0.3s ease-out;

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

@@ -1,16 +1,20 @@
 import React from 'react';
 import { WithChildren } from '../../models';
+import { QAProps } from '../../models/common';
 export interface HTMLProps {
     children?: string;
     block?: boolean;
     className?: string;
     itemProp?: string;
+    id?: string;
 }
-declare const HTML: ({ children, block, className, itemProp }: 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/cjs/components/HTML/HTML.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
-const HTML = ({ children, block = false, className, itemProp }) => {
+const HTML = ({ children, block = false, className, itemProp, id, qa, }) => {
     if (!children) {
         return null;
     }
@@ -11,6 +11,8 @@ const HTML = ({ children, block = false, className, itemProp }) => {
         dangerouslySetInnerHTML: { __html: children },
         className,
         itemProp,
+        id,
+        'data-qa': qa,
     });
 };
 exports.default = HTML;

package/build/cjs/components/Image/Image.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const constants_1 = require("../../constants");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
+const utils_1 = require("../../utils");
 const imageCompress_1 = require("../../utils/imageCompress");
 const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase"));
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
@@ -18,18 +19,19 @@ const Image = (props) => {
     if (!src) {
         return null;
     }
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'display-source');
     const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
         !(0, imageCompress_1.isCompressible)(src) ||
         imgLoadingError;
     return (react_1.default.createElement("picture", { className: containerClassName, "data-qa": qa },
         mobile && (react_1.default.createElement(react_1.Fragment, null,
-            !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
-            react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),
+            !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)`, "data-qa": qaAttributes.mobileWebpSource })),
+            react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)`, "data-qa": qaAttributes.mobileSource }))),
         tablet && (react_1.default.createElement(react_1.Fragment, null,
-            !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(tablet), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.md}px)` })),
-            react_1.default.createElement("source", { srcSet: tablet, media: `(max-width: ${constants_1.BREAKPOINTS.md}px)` }))),
-        src && !disableWebp && react_1.default.createElement("source", { srcSet: checkWebP(src), type: "image/webp" }),
+            !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(tablet), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.md}px)`, "data-qa": qaAttributes.tabletWebpSource })),
+            react_1.default.createElement("source", { srcSet: tablet, media: `(max-width: ${constants_1.BREAKPOINTS.md}px)`, "data-qa": qaAttributes.tabletSource }))),
+        src && !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.displaySource })),
         react_1.default.createElement(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
 };
 exports.default = Image;

package/build/cjs/components/Image/schema.d.ts

@@ -34,6 +34,25 @@ export declare const ImageObjectProps: {
             type: string;
             pattern: string;
         };
+        style: {
+            type: string;
+            additionalProperties: boolean;
+            required: never[];
+            properties: {
+                backgroundColor: {
+                    type: string;
+                };
+                height: {
+                    type: string[];
+                };
+                width: {
+                    type: string[];
+                };
+                color: {
+                    type: string;
+                };
+            };
+        };
         alt: {
             type: string;
             contentType: string;