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

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

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
+import { Tabbable } from '../../models';
 export type Theme = 'default' | 'special';
-export interface BackLinkProps {
+export interface BackLinkProps extends Tabbable {
     url: string;
     title: ReactNode;
     theme?: Theme;

package/build/cjs/components/BackLink/BackLink.js

@@ -9,7 +9,7 @@ const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 function BackLink(props) {
     const { history } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
+    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, tabIndex, } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ShareButton, url);
     const backActionHandler = (0, react_1.useCallback)(async () => {
         handleAnalytics();
@@ -26,7 +26,7 @@ function BackLink(props) {
             history.push({ pathname: url });
         }
     }, [handleAnalytics, history, onClick, url]);
-    return (react_1.default.createElement(uikit_1.Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
+    return (react_1.default.createElement(uikit_1.Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined, tabIndex: tabIndex },
         react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowSidebar, size: 24 }),
         react_1.default.createElement("span", null, title)));
 }

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/FileLink/FileLink.js

@@ -41,13 +41,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, } = props;
+    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, } = props;
     const fileExt = getFileExt(href);
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
     return (react_1.default.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         react_1.default.createElement(uikit_1.Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         react_1.default.createElement("div", { className: b('link') },
-            react_1.default.createElement("a", Object.assign({ href: href }, (0, utils_1.getLinkProps)(href, hostname), { onClick: onClick }), text))));
+            react_1.default.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex }, (0, utils_1.getLinkProps)(href, hostname)), text))));
 };
 exports.default = FileLink;

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -25,7 +25,7 @@ const FullscreenImage = (props) => {
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Fullscreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
         isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             react_1.default.createElement("div", { className: b('modal-content') },
-                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.default)('close') },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };

package/build/cjs/components/FullscreenImage/i18n/en.json

@@ -1,3 +1,4 @@
 {
-  "img-alt": "Full screen image"
+  "img-alt": "Full screen image",
+  "close": "Close"
 }

package/build/cjs/components/FullscreenImage/i18n/ru.json

@@ -1,3 +1,4 @@
 {
-  "img-alt": "Полноэкранное изображение"
+  "img-alt": "Полноэкранное изображение",
+  "close": "Закрыть"
 }

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/i18n/en.json

@@ -1,3 +1,3 @@
 {
-  "img-alt": "Image alt"
+  "img-alt": ""
 }

package/build/cjs/components/Image/i18n/ru.json

@@ -1,3 +1,3 @@
 {
-  "img-alt": "Альтернатива изображению"
+  "img-alt": ""
 }

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;

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

@@ -12,6 +12,17 @@ const ImageBase = {
         type: 'boolean',
     },
 };
+const StyleBase = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: {
+        backgroundColor: { type: 'string' },
+        height: { type: ['string', 'number'] },
+        width: { type: ['string', 'number'] },
+        color: { type: 'string' },
+    },
+};
 exports.ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
@@ -31,7 +42,7 @@ exports.ImageObjectProps = {
     properties: Object.assign(Object.assign({}, ImageBase), { src: {
             type: 'string',
             pattern: exports.imageUrlPattern,
-        } }),
+        }, style: StyleBase }),
 };
 exports.ImageProps = {
     oneOf: [

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

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

package/build/cjs/components/Link/Link.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const localeContext_1 = require("../../context/localeContext/localeContext");
-const locationContext_1 = require("../../context/locationContext/locationContext");
+const localeContext_1 = require("../../context/localeContext");
+const locationContext_1 = require("../../context/locationContext");
 const hooks_1 = require("../../hooks");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
+const index_1 = require("../../utils/index");
 const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
 const FileLink_1 = tslib_1.__importDefault(require("../FileLink/FileLink"));
 const b = (0, utils_1.block)('link-block');
@@ -27,7 +28,8 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, } = props;
+    const qaAttributes = (0, index_1.getQaAttrubutes)(qa, ['normal']);
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Link, url);
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
@@ -41,14 +43,14 @@ const LinkBlock = (props) => {
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick });
+                return (react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick, tabIndex: tabIndex }));
             case 'file-link':
             case 'underline':
-                return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));
+                return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick, tabIndex: tabIndex }));
             case 'normal': {
                 const linkProps = (0, utils_1.getLinkProps)(url, hostname, target);
                 const content = children || text;
-                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps), arrow ? (react_1.default.createElement(react_1.Fragment, null,
+                return (react_1.default.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_1.default.createElement(react_1.Fragment, null,
                     react_1.default.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) }))) : (content)));

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

@@ -1,4 +1,4 @@
-import { MediaComponentImageProps } from '../../../models';
+import { MediaComponentImageProps, QAProps } from '../../../models';
 export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
@@ -7,6 +7,7 @@ export interface ImageAdditionProps {
 interface InnerImageProps {
     hasVideoFallback: boolean;
 }
-type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps;
+type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;
+export declare const defaultAnimatedDivQa = "animated-div";
 declare const Image: (props: ImageAllProps) => JSX.Element;
 export default Image;

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultAnimatedDivQa = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
@@ -12,8 +13,10 @@ const FullscreenImage_1 = tslib_1.__importDefault(require("../../FullscreenImage
 const Image_1 = tslib_1.__importDefault(require("../../Image/Image"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('media-component-image');
+exports.defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, } = props;
+    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, qa, } = props;
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
     const [scrollY, setScrollY] = (0, react_1.useState)(0);
     const [{ springScrollY }, springSetScrollY] = (0, react_spring_1.useSpring)(() => ({
         springScrollY: 0,
@@ -37,16 +40,16 @@ const Image = (props) => {
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const renderFullscreenImage = (item) => {
         const itemData = (0, utils_2.getMediaImage)(item);
-        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
+        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage })));
     };
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate || 'none' } },
-            react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
+        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate },
+            react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.backgroundImage }))));
     };
     const imageOnly = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }));
+        return (react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView })));
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;

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

@@ -1,7 +1,7 @@
-import { MediaProps } from '../../models';
+import { MediaProps, QAProps } from '../../models';
 import { ImageAdditionProps } from './Image/Image';
 import { VideoAdditionProps } from './Video/Video';
-export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps {
+export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
     youtubeClassName?: string;
 }

package/build/cjs/components/Media/Media.js

@@ -11,13 +11,13 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, } = props;
-    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
         let result = [];
         if (image) {
-            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen }));
+            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image }));
         }
         if (video) {
             const videoProps = {
@@ -35,10 +35,10 @@ const Media = (props) => {
                 setHasVideoFallback,
             };
             if (fullscreen) {
-                result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps)));
+                result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
             else {
-                result.push(react_1.default.createElement(Video_1.default, Object.assign({}, videoProps)));
+                result.push(react_1.default.createElement(Video_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
         }
         if (youtube) {
@@ -58,6 +58,9 @@ const Media = (props) => {
         imageClassName,
         isBackground,
         hasVideoFallback,
+        fullscreen,
+        qaAttributes.image,
+        qaAttributes.video,
         videoClassName,
         metrika,
         analyticsEvents,
@@ -66,9 +69,8 @@ const Media = (props) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
-        fullscreen,
     ]);
-    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
+    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };
 exports.Media = Media;
 exports.default = exports.Media;

package/build/cjs/components/Media/Video/Video.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MediaComponentVideoProps, PlayButtonProps } from '../../../models';
+import { MediaComponentVideoProps, PlayButtonProps, QAProps } from '../../../models';
 export interface VideoAdditionProps {
     playButton?: PlayButtonProps;
     customBarControlsClassName?: string;
@@ -10,6 +10,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps & QAProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;