@gravity-ui/page-constructor 1.2.1 → 1.2.3-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.2.3](https://github.com/gravity-ui/page-constructor/compare/v1.2.2...v1.2.3) (2022-10-14)
+
+
+### Bug Fixes
+
+* content links margin ([6977b96](https://github.com/gravity-ui/page-constructor/commit/6977b9601e3936ba5293eadeeaeccd640814125f))
+
+## [1.2.2](https://github.com/gravity-ui/page-constructor/compare/v1.2.1...v1.2.2) (2022-10-14)
+
+
+### Bug Fixes
+
+* change p margin for size s ([#29](https://github.com/gravity-ui/page-constructor/issues/29)) ([dcb1c2a](https://github.com/gravity-ui/page-constructor/commit/dcb1c2acba20659a8f536f4bd7401dc54b4d7b71))
+
 ## [1.2.1](https://github.com/gravity-ui/page-constructor/compare/v1.2.0...v1.2.1) (2022-10-14)
 
 

package/build/cjs/blocks/Companies/Companies.js

@@ -5,21 +5,17 @@ const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const utils_1 = require("../../utils");
 const AnimateBlock_1 = (0, tslib_1.__importDefault)(require("../../components/AnimateBlock/AnimateBlock"));
-const constants_1 = require("../../constants");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const components_1 = require("../../components");
 const b = (0, utils_1.block)('companies-block');
 const CompaniesBlock = ({ title, images, animated }) => {
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const themedImages = (0, utils_1.getThemedValue)(images, theme) || {};
-    const { desktop, mobile, tablet, alt } = themedImages;
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), offset: 150, animate: animated },
         react_1.default.createElement("div", { className: b('content') },
             react_1.default.createElement("h2", { className: b('title') }, title),
             react_1.default.createElement("div", { className: b('images') },
-                react_1.default.createElement("picture", null,
-                    react_1.default.createElement("source", { srcSet: desktop, media: `(min-width: ${constants_1.BREAKPOINTS.md}px)` }),
-                    react_1.default.createElement("source", { srcSet: tablet, media: `(min-width: ${constants_1.BREAKPOINTS.sm}px)` }),
-                    react_1.default.createElement("img", { className: b('image'), srcSet: mobile, alt: alt }))))));
+                react_1.default.createElement(components_1.Image, Object.assign({}, themedImages))))));
 };
 exports.CompaniesBlock = CompaniesBlock;
 exports.default = exports.CompaniesBlock;

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

@@ -4,6 +4,7 @@ exports.ContentLayoutBlock = void 0;
 const schema_1 = require("../../sub-blocks/Content/schema");
 const utils_1 = require("../../schema/validators/utils");
 const common_1 = require("../../schema/validators/common");
+const schema_2 = require("../../components/Image/schema");
 exports.ContentLayoutBlock = {
     'content-layout-block': {
         additionalProperties: false,
@@ -12,7 +13,7 @@ exports.ContentLayoutBlock = {
                     type: 'string',
                     enum: common_1.contentSizes,
                 },
-                background: common_1.ImageObjectProps,
+                background: schema_2.ImageObjectProps,
                 centered: {
                     type: 'boolean',
                 },

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

@@ -189,9 +189,6 @@ unpredictable css rules order in build */
   .pc-header-block_has-media .pc-header-block__content {
     padding-top: 48px;
   }
-  .pc-header-block_has-background .pc-header-block__background-img {
-    display: none;
-  }
   .pc-header-block .pc-header-block__content_vertical-offset_s, .pc-header-block .pc-header-block__content_vertical-offset_m, .pc-header-block .pc-header-block__content_vertical-offset_l, .pc-header-block .pc-header-block__content_vertical-offset_xl {
     padding: calc(96px - 16px) 0;
   }

package/build/cjs/blocks/Header/Header.js

@@ -11,10 +11,15 @@ const utils_2 = require("./utils");
 const YFMWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/YFMWrapper/YFMWrapper"));
 const HeaderBreadcrumbs_1 = (0, tslib_1.__importDefault)(require("../../components/HeaderBreadcrumbs/HeaderBreadcrumbs"));
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const utils_3 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('header-block');
 const Background = ({ background }) => {
-    const { url, color, disableCompress, fullWidth, fullWidthMedia } = background;
-    return (0, guards_1.headerHasMediaBackground)(background) ? (react_1.default.createElement(components_1.BackgroundMedia, Object.assign({}, background, { mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (react_1.default.createElement(components_1.BackgroundImage, { src: url, className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color }, disableCompress: disableCompress }));
+    const { url, color, disableCompress, fullWidth, fullWidthMedia, image } = background;
+    const imageObject = (url && (0, utils_3.getMediaImage)(url)) || image;
+    if (imageObject && disableCompress) {
+        imageObject.disableCompress = disableCompress;
+    }
+    return (0, guards_1.headerHasMediaBackground)(background) ? (react_1.default.createElement(components_1.BackgroundMedia, Object.assign({}, background, { mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (react_1.default.createElement(components_1.BackgroundImage, Object.assign({}, imageObject, { className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color } })));
 };
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 const HeaderBlock = (props) => {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderBlock = exports.HeaderProperties = void 0;
 const common_1 = require("../../schema/validators/common");
 const utils_1 = require("../../schema/validators/utils");
+const schema_1 = require("../../components/Image/schema");
 const HeaderMedia = {
     type: 'object',
     additionalProperties: false,
@@ -28,7 +29,7 @@ exports.HeaderProperties = {
         type: 'string',
         enum: ['default', 'large'],
     },
-    image: (0, common_1.withTheme)(common_1.ImageProps),
+    image: (0, common_1.withTheme)(schema_1.ImageProps),
     video: (0, common_1.withTheme)(common_1.VideoProps),
     backLink: {
         type: 'object',

package/build/cjs/blocks/Tabs/Tabs.js

@@ -13,6 +13,7 @@ const FullscreenImage_1 = (0, tslib_1.__importDefault)(require("../../components
 const Media_1 = (0, tslib_1.__importDefault)(require("../../components/Media/Media"));
 const Links_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Links"));
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const utils_2 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('TabsBlock');
 const TabsBlock = ({ items, title, description, animated }) => {
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
@@ -23,7 +24,7 @@ const TabsBlock = ({ items, title, description, animated }) => {
     let imageProps;
     if (activeTabData) {
         const themedImage = (0, utils_1.getThemedValue)(activeTabData.image, theme);
-        imageProps = typeof themedImage === 'string' ? { src: themedImage } : themedImage;
+        imageProps = themedImage && (0, utils_2.getMediaImage)(themedImage);
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
@@ -36,7 +37,7 @@ const TabsBlock = ({ items, title, description, animated }) => {
                 } },
                 (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
                 imageProps && (react_1.default.createElement(react_1.Fragment, null,
-                    react_1.default.createElement(FullscreenImage_1.default, { imageClassName: b('image'), src: (imageProps && imageProps.src) || 'default_image', alt: imageProps && imageProps.alt, disableCompress: imageProps === null || imageProps === void 0 ? void 0 : imageProps.disableCompress }),
+                    react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
                     activeTabData && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)))))),
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content') },
                 react_1.default.createElement("div", { className: b('content-wrapper', {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsBlock = exports.tabsItem = void 0;
 const utils_1 = require("../../schema/validators/utils");
 const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../../components/Image/schema");
 exports.tabsItem = {
     type: 'object',
     additionalProperties: false,
@@ -27,7 +28,7 @@ exports.tabsItem = {
         //TODO deprecated
         link: common_1.LinkProps,
         links: (0, utils_1.filteredArray)(common_1.LinkProps),
-        image: (0, common_1.withTheme)(common_1.ImageProps),
+        image: (0, common_1.withTheme)(schema_1.ImageProps),
     },
 };
 exports.TabsBlock = {

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

@@ -6,9 +6,9 @@ const utils_1 = require("../../utils");
 const Image_1 = (0, tslib_1.__importDefault)(require("../Image/Image"));
 const b = (0, utils_1.block)('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, alt, disableCompress, className, imageClassName, style, hide } = props;
+    const { children, src, desktop, className, imageClassName, style, hide } = props;
     return (react_1.default.createElement("div", { className: b(null, className), style: style },
-        src && !hide && (react_1.default.createElement(Image_1.default, { className: b('img', imageClassName), src: src, alt: alt, disableCompress: disableCompress })),
+        (src || desktop) && !hide && react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName) })),
         children && react_1.default.createElement("div", { className: b('container') }, children)));
 };
 exports.default = BackgroundImage;

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

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
-import { ImageProps } from '../Image/Image';
-export interface FullScreenImageProps extends ImageProps {
+import { ImageOwnProps } from '../Image/Image';
+export interface FullScreenImageProps extends ImageOwnProps {
     imageClassName?: string;
     modalImageClass?: string;
     imageStyle?: CSSProperties;

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

@@ -1,11 +1,9 @@
 import { CSSProperties, MouseEventHandler } from 'react';
-export interface ImageProps {
-    src: string;
-    alt?: string;
-    disableCompress?: boolean;
+import { ImageDeviceProps, ImageObjectProps } from '../../models';
+export interface ImageOwnProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
 }
-declare const Image: (props: ImageProps) => JSX.Element | null;
+declare const Image: (props: ImageOwnProps) => JSX.Element | null;
 export default Image;

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

@@ -3,21 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
+const constants_1 = require("../../constants");
 const Image = (props) => {
     const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
-    const { src, alt, disableCompress, style, className, onClick } = props;
+    const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick } = props;
     const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
-    if (!src) {
+    const imageSrc = src || desktop;
+    if (!imageSrc) {
         return null;
     }
     // TODO: Temporary solution for .svg images
     const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
-        src.endsWith('.svg') ||
+        imageSrc.endsWith('.svg') ||
         imgLoadingError;
-    const webp = src.endsWith('.webp') ? src : src + '.webp';
+    const webp = imageSrc.endsWith('.webp') ? src : src + '.webp';
     return (react_1.default.createElement("picture", null,
         disableWebp ? null : react_1.default.createElement("source", { srcSet: webp, type: "image/webp" }),
-        react_1.default.createElement("img", { className: className, src: src, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
+        mobile && react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }),
+        tablet && react_1.default.createElement("source", { srcSet: tablet, media: `(max-width: ${constants_1.BREAKPOINTS.md}px)` }),
+        react_1.default.createElement("img", { className: className, src: imageSrc, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
 };
 exports.default = Image;

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

@@ -0,0 +1,52 @@
+export declare const ImageDeviceProps: {
+    type: string;
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        desktop: {
+            type: string;
+        };
+        tablet: {
+            type: string;
+        };
+        mobile: {
+            type: string;
+        };
+        alt: {
+            type: string;
+        };
+        disableCompress: {
+            type: string;
+        };
+    };
+};
+export declare const ImageObjectProps: {
+    type: string;
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        src: {
+            type: string;
+            pattern: string;
+        };
+        alt: {
+            type: string;
+        };
+        disableCompress: {
+            type: string;
+        };
+    };
+};
+export declare const ImageProps: {
+    oneOf: ({
+        type: string;
+        properties: {
+            when: {
+                type: string;
+            };
+        };
+    } | {
+        type: string;
+        pattern: string;
+    })[];
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageProps = exports.ImageObjectProps = exports.ImageDeviceProps = void 0;
+const utils_1 = require("../../schema/validators/utils");
+const common_1 = require("../../schema/validators/common");
+exports.ImageDeviceProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['desktop', 'mobile'],
+    properties: {
+        desktop: { type: 'string' },
+        tablet: {
+            type: 'string',
+        },
+        mobile: {
+            type: 'string',
+        },
+        alt: {
+            type: 'string',
+        },
+        disableCompress: {
+            type: 'boolean',
+        },
+    },
+};
+exports.ImageObjectProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['src'],
+    properties: {
+        src: {
+            type: 'string',
+            pattern: common_1.urlPattern,
+        },
+        alt: {
+            type: 'string',
+        },
+        disableCompress: {
+            type: 'boolean',
+        },
+    },
+};
+exports.ImageProps = {
+    oneOf: [
+        {
+            type: 'string',
+            pattern: common_1.urlPattern,
+        },
+        (0, utils_1.filteredItem)(Object.assign({}, exports.ImageObjectProps)),
+        (0, utils_1.filteredItem)(Object.assign({}, exports.ImageDeviceProps)),
+    ],
+};

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

@@ -36,16 +36,16 @@ const Image = (props) => {
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const imageSlider = (imageArray) => (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => {
         const itemData = (0, utils_1.getMediaImage)(item);
-        return (react_1.default.createElement(FullscreenImage_1.default, { key: itemData.src, src: itemData.src, alt: itemData.alt, imageClassName: imageClass, imageStyle: { height } }));
+        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
     })));
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_1.getMediaImage)(oneImage);
         return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate } },
-            react_1.default.createElement(BackgroundImage_1.default, { className: imageClass, src: imageData.src, style: { height }, disableCompress: imageData.disableCompress })));
+            react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
     };
     const imageOnly = (oneImage) => {
         const imageData = (0, utils_1.getMediaImage)(oneImage);
-        return (react_1.default.createElement(Image_1.default, { className: imageClass, src: imageData.src, alt: imageData.alt, style: { height }, disableCompress: imageData.disableCompress }));
+        return react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

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

@@ -1,2 +1,2 @@
-import { ImageObjectProps, ImageProps } from '../../../models';
-export declare function getMediaImage(image: ImageProps): ImageObjectProps;
+import { ImageProps } from '../../../models';
+export declare function getMediaImage(image: ImageProps): import("../../../models").ImageObjectProps | import("../../../models").ImageDeviceProps;

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -51,13 +51,21 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--yc-color-text-secondary);
 }
-.yfm_constructor.yfm_constructor p,
-.yfm_constructor.yfm_constructor li {
+.yfm_constructor.yfm_constructor ul,
+.yfm_constructor.yfm_constructor ol,
+.yfm_constructor.yfm_constructor li,
+.yfm_constructor.yfm_constructor p {
   margin: 0 0 12px;
 }
 .yfm_constructor.yfm_constructor p strong {
   font-weight: 500;
 }
+.yfm_constructor.yfm_constructor_size_s ul,
+.yfm_constructor.yfm_constructor_size_s ol,
+.yfm_constructor.yfm_constructor_size_s li,
+.yfm_constructor.yfm_constructor_size_s p {
+  margin-bottom: 8px;
+}
 
 .yfm_constructor_theme_dark p {
   color: var(--yc-color-text-light-primary);
@@ -109,13 +117,17 @@ unpredictable css rules order in build */
   background-color: var(--yc-color-base-generic);
 }
 
+.yfm_constructor_table {
+  /* stylelint-enable declaration-no-important */
+}
 .yfm_constructor_table table {
   border: 0;
   table-layout: fixed;
 }
 .yfm_constructor_table thead,
 .yfm_constructor_table tr {
-  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+  /* stylelint-disable declaration-no-important */
+  background-color: transparent !important;
 }
 .yfm_constructor_table tbody tr {
   border-top: 1px solid var(--yc-color-line-generic);
@@ -125,7 +137,7 @@ unpredictable css rules order in build */
   min-width: 120px;
   width: 120px;
   box-sizing: content-box;
-  white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
+  white-space: inherit !important;
 }
 .yfm_constructor_table td:first-child,
 .yfm_constructor_table th:first-child {
@@ -133,7 +145,7 @@ unpredictable css rules order in build */
   width: 172px;
 }
 .yfm_constructor_table th {
-  text-align: left !important; /* stylelint-disable-line declaration-no-important */
+  text-align: left !important;
 }
 
 .pc-page-constructor {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps } from './common';
+import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps, ImageProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { BannerCardProps, SubBlock } from './sub-blocks';
@@ -79,7 +79,8 @@ export interface HeaderSliderBlockProps extends Omit<SliderProps, 'title' | 'des
 }
 interface HeaderBackgroundProps {
     color?: string;
-    url?: string;
+    url?: ImageProps;
+    /** @deprecated put it in url props instead */
     disableCompress?: boolean;
 }
 export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {
@@ -151,12 +152,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
 export interface CompaniesBlockProps extends Animatable {
     title: string;
-    images: ThemeSupporting<{
-        desktop: string;
-        tablet: string;
-        mobile: string;
-        alt?: string;
-    }>;
+    images: ThemeSupporting<ImageDeviceProps>;
 }
 export interface MediaContentProps {
     title: string;

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

@@ -81,17 +81,21 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export interface ImageObjectProps {
-    src: string;
+export interface ImageInfoProps {
     alt?: string;
     disableCompress?: boolean;
 }
-export declare type ImageProps = string | ImageObjectProps;
+export interface ImageObjectProps extends ImageInfoProps {
+    src: string;
+}
+export interface ImageDeviceProps extends ImageInfoProps {
+    desktop: string;
+    mobile: string;
+    tablet?: string;
+}
+export declare type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export declare type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
-    src?: string;
-    alt?: string;
-    disableCompress?: boolean;
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps> {
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;

package/build/cjs/schema/validators/common.d.ts

@@ -159,36 +159,6 @@ export declare const JustifyProps: {
     type: string;
     enum: string[];
 };
-export declare const ImageObjectProps: {
-    type: string;
-    additionalProperties: boolean;
-    required: string[];
-    properties: {
-        src: {
-            type: string;
-            pattern: string;
-        };
-        alt: {
-            type: string;
-        };
-        disableCompress: {
-            type: string;
-        };
-    };
-};
-export declare const ImageProps: {
-    oneOf: ({
-        type: string;
-        properties: {
-            when: {
-                type: string;
-            };
-        };
-    } | {
-        type: string;
-        pattern: string;
-    })[];
-};
 export declare const DataLensObjectProps: {
     type: string;
     additionalProperties: boolean;

package/build/cjs/schema/validators/common.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.ImageProps = exports.ImageObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.PlayIconProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.urlPattern = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
-const utils_1 = require("./utils");
+exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.PlayIconProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.urlPattern = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
 const pixel_1 = require("./pixel");
 const models_1 = require("../../models");
+const schema_1 = require("../../components/Image/schema");
 exports.mediaDirection = ['media-content', 'content-media'];
 exports.textSize = ['s', 'm', 'l'];
 exports.containerSizesArray = ['sm', 'md', 'lg', 'xl', 'all'];
@@ -130,32 +130,6 @@ exports.JustifyProps = {
     type: 'string',
     enum: ['start', 'center', 'end'],
 };
-exports.ImageObjectProps = {
-    type: 'object',
-    additionalProperties: false,
-    required: ['src'],
-    properties: {
-        src: {
-            type: 'string',
-            pattern: exports.urlPattern,
-        },
-        alt: {
-            type: 'string',
-        },
-        disableCompress: {
-            type: 'boolean',
-        },
-    },
-};
-exports.ImageProps = {
-    oneOf: [
-        {
-            type: 'string',
-            pattern: exports.urlPattern,
-        },
-        (0, utils_1.filteredItem)(Object.assign({}, exports.ImageObjectProps)),
-    ],
-};
 exports.DataLensObjectProps = {
     type: 'object',
     additionalProperties: false,
@@ -172,7 +146,7 @@ exports.DataLensProps = {
 };
 exports.BackgroundProps = {
     additionalProperties: false,
-    properties: Object.assign(Object.assign({}, exports.AnimatableProps), { image: exports.ImageProps, color: {
+    properties: Object.assign(Object.assign({}, exports.AnimatableProps), { image: schema_1.ImageProps, color: {
             type: 'string',
         }, video: exports.VideoProps, height: {
             type: 'number',
@@ -441,7 +415,7 @@ exports.MediaProps = {
         type: 'string',
     },
     image: {
-        anyOf: [exports.ImageProps, { type: 'array', items: exports.ImageProps }],
+        anyOf: [schema_1.ImageProps, { type: 'array', items: schema_1.ImageProps }],
     },
     video: exports.VideoProps,
     youtube: {

package/build/cjs/sub-blocks/BackgroundCard/schema.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const common_1 = require("../../schema/validators/common");
 const schema_1 = require("../../components/CardBase/schema");
 const schema_2 = require("../Content/schema");
+const schema_3 = require("../../components/Image/schema");
 const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
 const BackgroundCardContentProps = lodash_1.default.omit(schema_2.ContentBase, ['size']);
 exports.BackgroundCard = {
@@ -13,7 +14,7 @@ exports.BackgroundCard = {
         required: ['title', 'text'],
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), schema_1.CardBase), BackgroundCardContentProps), { url: {
                 type: 'string',
-            }, background: (0, common_1.withTheme)(common_1.ImageObjectProps), backgroundColor: {
+            }, background: (0, common_1.withTheme)(schema_3.ImageObjectProps), backgroundColor: {
                 type: 'string',
             }, paddingBottom: {
                 type: 'string',

package/build/cjs/sub-blocks/BasicCard/BasicCard.js

@@ -13,7 +13,7 @@ const BasicCard = (props) => {
     const iconProps = icon && (0, utils_2.getMediaImage)(icon);
     return (react_1.default.createElement(CardBase_1.default, { className: b(), url: url, border: border },
         react_1.default.createElement(CardBase_1.default.Content, null,
-            iconProps && (react_1.default.createElement(Image_1.default, { src: iconProps.src, alt: iconProps.alt, className: b('icon'), disableCompress: iconProps.disableCompress })),
+            iconProps && react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { className: b('icon') })),
             react_1.default.createElement(__1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s" }))));
 };
 exports.default = BasicCard;

package/build/cjs/sub-blocks/BasicCard/schema.js

@@ -6,6 +6,7 @@ const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
 const common_1 = require("../../schema/validators/common");
 const schema_1 = require("../../components/CardBase/schema");
 const schema_2 = require("../Content/schema");
+const schema_3 = require("../../components/Image/schema");
 const BasicCardContentProps = lodash_1.default.omit(schema_2.ContentBase, ['size', 'theme']);
 exports.BasicCard = {
     'basic-card': {
@@ -13,6 +14,6 @@ exports.BasicCard = {
         required: ['url'],
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), schema_1.CardBase), BasicCardContentProps), { url: {
                 type: 'string',
-            }, icon: common_1.ImageProps }),
+            }, icon: schema_3.ImageProps }),
     },
 };