@gravity-ui/page-constructor 2.10.0 → 2.12.0-alpha

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.11.0](https://github.com/gravity-ui/page-constructor/compare/v2.10.0...v2.11.0) (2023-04-25)
+
+
+### Features
+
+* add image context to use NextImage instead of normal img tag ([#313](https://github.com/gravity-ui/page-constructor/issues/313)) ([10841dc](https://github.com/gravity-ui/page-constructor/commit/10841dcbcc9bb16255dff57f4d79de94533a06c3))
+
+
+### Bug Fixes
+
+* **QuestionBlock:** fix itemprop parameter value for FaqPage microdata ([#316](https://github.com/gravity-ui/page-constructor/issues/316)) ([4395f8a](https://github.com/gravity-ui/page-constructor/commit/4395f8a78489ee254dfa25051d8f812a7ed0bf4b))
+
 ## [2.10.0](https://github.com/gravity-ui/page-constructor/compare/v2.9.0...v2.10.0) (2023-04-24)
 
 

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

@@ -12,7 +12,7 @@ const FaqMicrodataValues = {
     PageType: 'https://schema.org/FAQPage',
     QuestionType: 'https://schema.org/Question',
     QuestionProp: 'mainEntity',
-    QuestionTextProp: 'name',
+    QuestionTextProp: 'text',
     AnswerType: 'https://schema.org/Answer',
     AnswerProp: 'acceptedAnswer',
     AnswerTextProp: 'text',

package/build/cjs/blocks/Security/Security.js

@@ -17,7 +17,7 @@ const SecurityBlock = (props) => {
                     react_1.default.createElement(grid_1.Col, null,
                         react_1.default.createElement("h2", { className: b('title') }, title))),
                 points && (react_1.default.createElement(grid_1.Row, { className: b('points') }, points.map(({ text, link, img }, index) => (react_1.default.createElement(grid_1.Col, { key: index, className: b('point'), sizes: { sm: 4, all: 12 } },
-                    react_1.default.createElement("img", { className: b('point-icon'), src: img }),
+                    react_1.default.createElement(components_1.ImageBase, { className: b('point-icon'), src: img }),
                     react_1.default.createElement(components_1.HTML, { className: b('point-text'), block: true }, text),
                     link && (react_1.default.createElement(components_1.Link, { className: b('point-link'), text: link.text, url: link.url, theme: 'normal', arrow: true }))))))),
                 media && (react_1.default.createElement(grid_1.Row, { className: b('media') },

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

@@ -1,4 +1,5 @@
 import { ClassNameProps } from '../../models';
+export declare const qaIdByDefault = "qa-anchor";
 export interface AnchorProps extends ClassNameProps {
     id: string;
     dataQa?: string;

package/build/cjs/components/Anchor/Anchor.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.qaIdByDefault = void 0;
 const tslib_1 = require("tslib");
 //TODO move to cloud components
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('Anchor');
-const Anchor = ({ id, className, dataQa }) => (react_1.default.createElement("div", { id: id, className: b(null, className), "data-qa": dataQa }));
+exports.qaIdByDefault = 'qa-anchor';
+const Anchor = ({ id, className, dataQa }) => (react_1.default.createElement("div", { id: id, className: b(null, className), "data-qa": dataQa || exports.qaIdByDefault }));
 exports.default = Anchor;

package/build/cjs/components/BlockBase/BlockBase.js

@@ -7,8 +7,8 @@ const utils_1 = require("../../utils");
 const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
 const b = (0, utils_1.block)('block-base');
 const BlockBase = (props) => {
-    const { anchor, visible, children, className, resetPaddings } = props;
-    return (react_1.default.createElement(grid_1.Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true },
+    const { anchor, visible, children, className, resetPaddings, qa } = props;
+    return (react_1.default.createElement(grid_1.Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
         children));
 };

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

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

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

@@ -0,0 +1,44 @@
+"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 Anchor_1 = require("../../../components/Anchor/Anchor");
+const grid_1 = require("../../../grid");
+const BlockBase_1 = tslib_1.__importDefault(require("../BlockBase"));
+const qaId = 'block-base-component';
+describe('BlockBase', () => {
+    test('render component by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(component).not.toBeDisabled();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, className: className }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('should reset paddings', () => {
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, resetPaddings: true }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass('pc-block-base_reset-paddings');
+    });
+    test.each(new Array(...Object.values(grid_1.GridColumnSize)))('render with given "%s" size', (size) => {
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, visible: size }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass(`d-${size}-block`);
+    });
+    test('should have anchor', () => {
+        const anchor = {
+            text: 'anchor',
+            url: 'https://github.com/gravity-ui/',
+        };
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { anchor: anchor }));
+        const component = react_2.screen.getByTestId(Anchor_1.qaIdByDefault);
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('id', anchor.url);
+    });
+});

package/build/cjs/components/Button/Button.js

@@ -9,6 +9,7 @@ const useMetrika_1 = require("../../hooks/useMetrika");
 const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
+const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
@@ -36,7 +37,7 @@ const Button = (props) => {
         return react_1.default.createElement(uikit_1.StoreBadge, { className: buttonClass, platform: platform, lang: lang, url: url });
     }
     let icon;
-    let image = img && react_1.default.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
+    let image = img && react_1.default.createElement(ImageBase_1.default, { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
     if (theme === 'github') {
         icon = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.Github, size: 24, qa: utils_2.ICON_QA });
         image = undefined;

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

@@ -5,20 +5,21 @@ const react_1 = tslib_1.__importStar(require("react"));
 const constants_1 = require("../../constants");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const imageCompress_1 = require("../../utils/imageCompress");
+const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase"));
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
 const Image = (props) => {
     const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
-    const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
     const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
-    const imageSrc = src || desktop;
-    if (!imageSrc) {
+    const src = imageSrc || desktop;
+    if (!src) {
         return null;
     }
     const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
-        !(0, imageCompress_1.isCompressible)(imageSrc) ||
+        !(0, imageCompress_1.isCompressible)(src) ||
         imgLoadingError;
     return (react_1.default.createElement("picture", { className: containerClassName },
         mobile && (react_1.default.createElement(react_1.Fragment, null,
@@ -27,7 +28,7 @@ const Image = (props) => {
         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)` }))),
-        imageSrc && !disableWebp && react_1.default.createElement("source", { srcSet: checkWebP(imageSrc), type: "image/webp" }),
-        react_1.default.createElement("img", { className: className, src: imageSrc, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
+        src && !disableWebp && react_1.default.createElement("source", { srcSet: checkWebP(src), type: "image/webp" }),
+        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/ImageBase/ImageBase.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, MouseEventHandler } from 'react';
+import { ImageObjectProps } from '../../models';
+export interface ImageBaseProps extends Partial<ImageObjectProps> {
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler;
+    onError?: () => void;
+}
+export declare const ImageBase: (props: ImageBaseProps) => JSX.Element;
+export default ImageBase;

package/build/cjs/components/ImageBase/ImageBase.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageBase = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const imageContext_1 = require("../../context/imageContext/imageContext");
+const ImageBase = (props) => {
+    const { Image } = react_1.default.useContext(imageContext_1.ImageContext);
+    return Image ? react_1.default.createElement(Image, Object.assign({}, props)) : react_1.default.createElement("img", Object.assign({}, props));
+};
+exports.ImageBase = ImageBase;
+exports.default = exports.ImageBase;

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

@@ -4,6 +4,8 @@ export interface OverflowScrollerProps {
     className?: string;
     onScrollStart?: () => void;
     onScrollEnd?: () => void;
+    arrowSize?: number;
+    arrowClassName?: string;
 }
 export interface OverflowScrollerState {
     arrows: Arrow[];

package/build/cjs/components/OverflowScroller/OverflowScroller.js

@@ -8,6 +8,7 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('overflow-scroller');
 const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
+const DEFAULT_ARROW_SIZE = 18;
 class OverflowScroller extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -72,7 +73,7 @@ class OverflowScroller extends react_1.default.Component {
         window.removeEventListener('resize', this.checkOverflow);
     }
     render() {
-        const { className, children } = this.props;
+        const { className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE } = this.props;
         const { arrows, scrollValue } = this.state;
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
         const paddingLeft = arrows.includes('left');
@@ -83,8 +84,8 @@ class OverflowScroller extends react_1.default.Component {
             }) },
             react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
                 react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
-            arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
-                react_1.default.createElement(__1.ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
+            arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction) },
+                react_1.default.createElement(__1.ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
     }
 }
 exports.default = OverflowScroller;

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

@@ -16,6 +16,7 @@ export { default as FullWidthBackground } from './FullWidthBackground/FullWidthB
 export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 export { default as HeightCalculator } from './HeightCalculator/HeightCalculator';
 export { default as Image } from './Image/Image';
+export { default as ImageBase } from './ImageBase/ImageBase';
 export { default as Link } from './Link/Link';
 export { default as Links } from './Link/Links';
 export { default as Media } from './Media/Media';
@@ -36,3 +37,4 @@ export { default as HTML } from './HTML/HTML';
 export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
+export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/cjs/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullScreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.FullScreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.ImageBase = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -40,6 +40,8 @@ var HeightCalculator_1 = require("./HeightCalculator/HeightCalculator");
 Object.defineProperty(exports, "HeightCalculator", { enumerable: true, get: function () { return __importDefault(HeightCalculator_1).default; } });
 var Image_1 = require("./Image/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
+var ImageBase_1 = require("./ImageBase/ImageBase");
+Object.defineProperty(exports, "ImageBase", { enumerable: true, get: function () { return __importDefault(ImageBase_1).default; } });
 var Link_1 = require("./Link/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
 var Links_1 = require("./Link/Links");

package/build/cjs/containers/PageConstructor/Provider.d.ts

@@ -1,4 +1,5 @@
 import { AnalyticsContextProps } from '../../context/analyticsContext';
+import { ImageContextProps } from '../../context/imageContext';
 import { LocaleContextProps } from '../../context/localeContext';
 import { LocationContextProps } from '../../context/locationContext';
 import { MapsContextType } from '../../context/mapsContext/mapsContext';
@@ -17,5 +18,6 @@ export interface PageConstructorProviderProps {
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
     analytics?: AnalyticsContextProps;
+    image?: ImageContextProps;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

package/build/cjs/containers/PageConstructor/Provider.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const constants_1 = require("../../components/constants");
 const analyticsContext_1 = require("../../context/analyticsContext");
+const imageContext_1 = require("../../context/imageContext");
 const localeContext_1 = require("../../context/localeContext");
 const locationContext_1 = require("../../context/locationContext");
 const mapsContext_1 = require("../../context/mapsContext/mapsContext");
@@ -14,12 +15,13 @@ const projectSettingsContext_1 = require("../../context/projectSettingsContext")
 const ssrContext_1 = require("../../context/ssrContext");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, } = props;
+    const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, image = {}, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         react_1.default.createElement(ThemeValueContext_1.ThemeValueContext.Provider, { value: { themeValue: theme } }),
         react_1.default.createElement(projectSettingsContext_1.ProjectSettingsContext.Provider, { value: projectSettings }),
         react_1.default.createElement(localeContext_1.LocaleContext.Provider, { value: locale }),
+        react_1.default.createElement(imageContext_1.ImageContext.Provider, { value: image }),
         react_1.default.createElement(locationContext_1.LocationContext.Provider, { value: location }),
         react_1.default.createElement(mobileContext_1.MobileContext.Provider, { value: Boolean(isMobile) }),
         react_1.default.createElement(mapsContext_1.MapsContext.Provider, { value: mapsContext }),

package/build/cjs/context/imageContext/imageContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageBaseProps } from '../../components';
+export type Image = React.ComponentClass<ImageBaseProps> | React.FC<ImageBaseProps>;
+export type ImageContextProps = {
+    Image?: Image;
+};
+export declare const ImageContext: React.Context<ImageContextProps>;

package/build/cjs/context/imageContext/imageContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.ImageContext = react_1.default.createContext({});

package/build/cjs/context/imageContext/index.d.ts

@@ -0,0 +1 @@
+export * from './imageContext';

package/build/cjs/context/imageContext/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./imageContext"), exports);

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -39,6 +39,7 @@ export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;
+    qa?: string;
 }
 export interface LoadableProps {
     source: string;

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

@@ -10,7 +10,7 @@ const FaqMicrodataValues = {
     PageType: 'https://schema.org/FAQPage',
     QuestionType: 'https://schema.org/Question',
     QuestionProp: 'mainEntity',
-    QuestionTextProp: 'name',
+    QuestionTextProp: 'text',
     AnswerType: 'https://schema.org/Answer',
     AnswerProp: 'acceptedAnswer',
     AnswerTextProp: 'text',

package/build/esm/blocks/Security/Security.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AnimateBlock, FullWidthBackground, HTML, Link, Media } from '../../components';
+import { AnimateBlock, FullWidthBackground, HTML, ImageBase, Link, Media } from '../../components';
 import { Col, Grid, Row } from '../../grid';
 import { block } from '../../utils';
 import './Security.css';
@@ -14,7 +14,7 @@ export const SecurityBlock = (props) => {
                     React.createElement(Col, null,
                         React.createElement("h2", { className: b('title') }, title))),
                 points && (React.createElement(Row, { className: b('points') }, points.map(({ text, link, img }, index) => (React.createElement(Col, { key: index, className: b('point'), sizes: { sm: 4, all: 12 } },
-                    React.createElement("img", { className: b('point-icon'), src: img }),
+                    React.createElement(ImageBase, { className: b('point-icon'), src: img }),
                     React.createElement(HTML, { className: b('point-text'), block: true }, text),
                     link && (React.createElement(Link, { className: b('point-link'), text: link.text, url: link.url, theme: 'normal', arrow: true }))))))),
                 media && (React.createElement(Row, { className: b('media') },

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

@@ -1,5 +1,6 @@
 import { ClassNameProps } from '../../models';
 import './Anchor.css';
+export declare const qaIdByDefault = "qa-anchor";
 export interface AnchorProps extends ClassNameProps {
     id: string;
     dataQa?: string;

package/build/esm/components/Anchor/Anchor.js

@@ -3,5 +3,6 @@ import React from 'react';
 import { block } from '../../utils';
 import './Anchor.css';
 const b = block('Anchor');
-const Anchor = ({ id, className, dataQa }) => (React.createElement("div", { id: id, className: b(null, className), "data-qa": dataQa }));
+export const qaIdByDefault = 'qa-anchor';
+const Anchor = ({ id, className, dataQa }) => (React.createElement("div", { id: id, className: b(null, className), "data-qa": dataQa || qaIdByDefault }));
 export default Anchor;

package/build/esm/components/BlockBase/BlockBase.js

@@ -5,8 +5,8 @@ import Anchor from '../Anchor/Anchor';
 import './BlockBase.css';
 const b = block('block-base');
 const BlockBase = (props) => {
-    const { anchor, visible, children, className, resetPaddings } = props;
-    return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true },
+    const { anchor, visible, children, className, resetPaddings, qa } = props;
+    return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
         anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
         children));
 };

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

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

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { qaIdByDefault } from '../../../components/Anchor/Anchor';
+import { GridColumnSize } from '../../../grid';
+import BlockBase from '../BlockBase';
+const qaId = 'block-base-component';
+describe('BlockBase', () => {
+    test('render component by default', async () => {
+        render(React.createElement(BlockBase, { qa: qaId }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(component).not.toBeDisabled();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(BlockBase, { qa: qaId, className: className }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('should reset paddings', () => {
+        render(React.createElement(BlockBase, { qa: qaId, resetPaddings: true }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveClass('pc-block-base_reset-paddings');
+    });
+    test.each(new Array(...Object.values(GridColumnSize)))('render with given "%s" size', (size) => {
+        render(React.createElement(BlockBase, { qa: qaId, visible: size }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveClass(`d-${size}-block`);
+    });
+    test('should have anchor', () => {
+        const anchor = {
+            text: 'anchor',
+            url: 'https://github.com/gravity-ui/',
+        };
+        render(React.createElement(BlockBase, { anchor: anchor }));
+        const component = screen.getByTestId(qaIdByDefault);
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('id', anchor.url);
+    });
+});

package/build/esm/components/Button/Button.js

@@ -7,6 +7,7 @@ import { useMetrika } from '../../hooks/useMetrika';
 import { Github } from '../../icons';
 import { DefaultEventNames } from '../../models';
 import { block, setUrlTld } from '../../utils';
+import ImageBase from '../ImageBase/ImageBase';
 import { ICON_QA, toCommonSize, toCommonView } from './utils';
 import './Button.css';
 const b = block('button-block');
@@ -35,7 +36,7 @@ const Button = (props) => {
         return React.createElement(StoreBadge, { className: buttonClass, platform: platform, lang: lang, url: url });
     }
     let icon;
-    let image = img && React.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
+    let image = img && React.createElement(ImageBase, { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
     if (theme === 'github') {
         icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24, qa: ICON_QA });
         image = undefined;

package/build/esm/components/Image/Image.js

@@ -2,20 +2,21 @@ import React, { Fragment, useContext, useState } from 'react';
 import { BREAKPOINTS } from '../../constants';
 import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { isCompressible } from '../../utils/imageCompress';
+import ImageBase from '../ImageBase/ImageBase';
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
 const Image = (props) => {
     const projectSettings = useContext(ProjectSettingsContext);
-    const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
-    const imageSrc = src || desktop;
-    if (!imageSrc) {
+    const src = imageSrc || desktop;
+    if (!src) {
         return null;
     }
     const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
-        !isCompressible(imageSrc) ||
+        !isCompressible(src) ||
         imgLoadingError;
     return (React.createElement("picture", { className: containerClassName },
         mobile && (React.createElement(Fragment, null,
@@ -24,7 +25,7 @@ const Image = (props) => {
         tablet && (React.createElement(Fragment, null,
             !disableWebp && (React.createElement("source", { srcSet: checkWebP(tablet), type: "image/webp", media: `(max-width: ${BREAKPOINTS.md}px)` })),
             React.createElement("source", { srcSet: tablet, media: `(max-width: ${BREAKPOINTS.md}px)` }))),
-        imageSrc && !disableWebp && React.createElement("source", { srcSet: checkWebP(imageSrc), type: "image/webp" }),
-        React.createElement("img", { className: className, src: imageSrc, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
+        src && !disableWebp && React.createElement("source", { srcSet: checkWebP(src), type: "image/webp" }),
+        React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
 };
 export default Image;

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

@@ -0,0 +1,10 @@
+import { CSSProperties, MouseEventHandler } from 'react';
+import { ImageObjectProps } from '../../models';
+export interface ImageBaseProps extends Partial<ImageObjectProps> {
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler;
+    onError?: () => void;
+}
+export declare const ImageBase: (props: ImageBaseProps) => JSX.Element;
+export default ImageBase;

package/build/esm/components/ImageBase/ImageBase.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageContext } from '../../context/imageContext/imageContext';
+export const ImageBase = (props) => {
+    const { Image } = React.useContext(ImageContext);
+    return Image ? React.createElement(Image, Object.assign({}, props)) : React.createElement("img", Object.assign({}, props));
+};
+export default ImageBase;

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

@@ -5,6 +5,8 @@ export interface OverflowScrollerProps {
     className?: string;
     onScrollStart?: () => void;
     onScrollEnd?: () => void;
+    arrowSize?: number;
+    arrowClassName?: string;
 }
 export interface OverflowScrollerState {
     arrows: Arrow[];

package/build/esm/components/OverflowScroller/OverflowScroller.js

@@ -6,6 +6,7 @@ import './OverflowScroller.css';
 const b = block('overflow-scroller');
 const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
+const DEFAULT_ARROW_SIZE = 18;
 export default class OverflowScroller extends React.Component {
     constructor() {
         super(...arguments);
@@ -70,7 +71,7 @@ export default class OverflowScroller extends React.Component {
         window.removeEventListener('resize', this.checkOverflow);
     }
     render() {
-        const { className, children } = this.props;
+        const { className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE } = this.props;
         const { arrows, scrollValue } = this.state;
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
         const paddingLeft = arrows.includes('left');
@@ -81,7 +82,7 @@ export default class OverflowScroller extends React.Component {
             }) },
             React.createElement("div", { className: b(null, className), ref: this.containerRef },
                 React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
-            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
-                React.createElement(ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
+            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction) },
+                React.createElement(ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
     }
 }

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

@@ -16,6 +16,7 @@ export { default as FullWidthBackground } from './FullWidthBackground/FullWidthB
 export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 export { default as HeightCalculator } from './HeightCalculator/HeightCalculator';
 export { default as Image } from './Image/Image';
+export { default as ImageBase } from './ImageBase/ImageBase';
 export { default as Link } from './Link/Link';
 export { default as Links } from './Link/Links';
 export { default as Media } from './Media/Media';
@@ -36,3 +37,4 @@ export { default as HTML } from './HTML/HTML';
 export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
+export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/esm/components/index.js

@@ -16,6 +16,7 @@ export { default as FullWidthBackground } from './FullWidthBackground/FullWidthB
 export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 export { default as HeightCalculator } from './HeightCalculator/HeightCalculator';
 export { default as Image } from './Image/Image';
+export { default as ImageBase } from './ImageBase/ImageBase';
 export { default as Link } from './Link/Link';
 export { default as Links } from './Link/Links';
 export { default as Media } from './Media/Media';

package/build/esm/containers/PageConstructor/Provider.d.ts

@@ -1,4 +1,5 @@
 import { AnalyticsContextProps } from '../../context/analyticsContext';
+import { ImageContextProps } from '../../context/imageContext';
 import { LocaleContextProps } from '../../context/localeContext';
 import { LocationContextProps } from '../../context/locationContext';
 import { MapsContextType } from '../../context/mapsContext/mapsContext';
@@ -17,5 +18,6 @@ export interface PageConstructorProviderProps {
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
     analytics?: AnalyticsContextProps;
+    image?: ImageContextProps;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

package/build/esm/containers/PageConstructor/Provider.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import { DEFAULT_THEME } from '../../components/constants';
 import { AnalyticsContext } from '../../context/analyticsContext';
+import { ImageContext } from '../../context/imageContext';
 import { LocaleContext } from '../../context/localeContext';
 import { LocationContext } from '../../context/locationContext';
 import { MapsContext, initialMapValue } from '../../context/mapsContext/mapsContext';
@@ -10,12 +11,13 @@ import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 export const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, } = props;
+    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, image = {}, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         React.createElement(ThemeValueContext.Provider, { value: { themeValue: theme } }),
         React.createElement(ProjectSettingsContext.Provider, { value: projectSettings }),
         React.createElement(LocaleContext.Provider, { value: locale }),
+        React.createElement(ImageContext.Provider, { value: image }),
         React.createElement(LocationContext.Provider, { value: location }),
         React.createElement(MobileContext.Provider, { value: Boolean(isMobile) }),
         React.createElement(MapsContext.Provider, { value: mapsContext }),

package/build/esm/context/imageContext/imageContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageBaseProps } from '../../components';
+export type Image = React.ComponentClass<ImageBaseProps> | React.FC<ImageBaseProps>;
+export type ImageContextProps = {
+    Image?: Image;
+};
+export declare const ImageContext: React.Context<ImageContextProps>;

package/build/esm/context/imageContext/imageContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const ImageContext = React.createContext({});

package/build/esm/context/imageContext/index.d.ts

@@ -0,0 +1 @@
+export * from './imageContext';

package/build/esm/context/imageContext/index.js

@@ -0,0 +1 @@
+export * from './imageContext';

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

@@ -39,6 +39,7 @@ export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;
+    qa?: string;
 }
 export interface LoadableProps {
     source: string;

package/package.json

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

package/server/models/constructor-items/blocks.d.ts

@@ -39,6 +39,7 @@ export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;
+    qa?: string;
 }
 export interface LoadableProps {
     source: string;