@gravity-ui/page-constructor 1.2.5 → 1.3.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.3.0](https://github.com/gravity-ui/page-constructor/pull/35) (2022-10-25)
+
+
+### Features
+
+* add devices support to component Image and block Header
+
 ## [1.2.5](https://github.com/gravity-ui/page-constructor/compare/v1.2.4...v1.2.5) (2022-10-19)
 
 ### Bug Fixes

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, { className: b('image') }))))));
 };
 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

@@ -9,6 +9,7 @@ unpredictable css rules order in build */
   margin: 16px 0;
 }
 .pc-header-block_full-width {
+  --pc-border-radius: 0;
   padding: 16px 0;
   margin: 0 0 16px;
 }
@@ -124,6 +125,16 @@ unpredictable css rules order in build */
   top: 16px;
   z-index: 11;
 }
+.pc-header-block__background-media {
+  height: 100%;
+}
+.pc-header-block__background-media > div {
+  height: 100%;
+  width: 100%;
+}
+.pc-header-block__background-media > div:not(.pc-header-block__video) {
+  position: absolute;
+}
 .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
   position: absolute;
   top: 0;
@@ -142,19 +153,12 @@ unpredictable css rules order in build */
 .pc-header-block__background.pc-header-block__background_full-width-media > div, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media > div {
   max-width: none;
 }
-.pc-header-block__background.pc-header-block__background_full-width-media .pc-header-block__background-media, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media .pc-header-block__background-media {
-  height: 100%;
-}
 .pc-header-block__background.pc-header-block__background_full-width-media video, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media video {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }
-.pc-header-block__background_full-width-media {
-  --pc-border-radius: 0;
-}
 .pc-header-block__background_full-width {
-  --pc-border-radius: 0;
   left: 0;
   transform: none;
   max-width: none;
@@ -190,9 +194,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

@@ -4,40 +4,40 @@ exports.HeaderBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const utils_1 = require("../../utils");
-const guards_1 = require("../../models/guards");
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const utils_2 = require("./utils");
+const mobileContext_1 = require("../../context/mobileContext");
 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 Background = ({ background, isMobile }) => {
+    const { url, image, fullWidthMedia, video, color } = background;
+    const imageObject = url ? (0, utils_3.getMediaImage)(url) : image;
+    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
+    return (react_1.default.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color } }, renderMedia && (react_1.default.createElement(components_1.Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject })))));
 };
 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) => {
     const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
-    const hasMedia = Boolean(image || video);
+    const hasRightSideImage = Boolean(image || video);
     const curImageSize = imageSize || (0, utils_2.getImageSize)(width);
-    const titleSizes = hasMedia ? (0, utils_2.titleWithImageSizes)(curImageSize) : (0, utils_2.getTitleSizes)(width);
+    const titleSizes = hasRightSideImage ? (0, utils_2.titleWithImageSizes)(curImageSize) : (0, utils_2.getTitleSizes)(width);
     let curVerticalOffset = verticalOffset;
-    if (hasMedia && !verticalOffset) {
+    if (hasRightSideImage && !verticalOffset) {
         curVerticalOffset = 'm';
     }
     const backgroundThemed = background && (0, utils_1.getThemedValue)(background, theme);
     const imageThemed = image && (0, utils_1.getThemedValue)(image, theme);
     const videoThemed = video && (0, utils_1.getThemedValue)(video, theme);
-    const fullWidth = Boolean(backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth);
-    return (react_1.default.createElement("header", { className: b({
-            ['has-media']: hasMedia,
-            ['has-background']: Boolean(background),
-            ['full-width']: fullWidth,
-        }, className) },
+    const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
+    return (react_1.default.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
         backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
-        backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed }),
+        backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
         react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },
             breadcrumbs && (react_1.default.createElement(grid_1.Row, { className: b('breadcrumbs') },
                 react_1.default.createElement(grid_1.Col, null,
@@ -62,7 +62,7 @@ const HeaderBlock = (props) => {
                                     buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },
                                         react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
                                 children))),
-                    hasMedia && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
+                    hasRightSideImage && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
 };
 exports.HeaderBlock = HeaderBlock;
 exports.default = exports.HeaderBlock;