@megafon/ui-shared 5.14.0 → 5.15.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.15.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.14.0...@megafon/ui-shared@5.15.0) (2024-07-01)
+
+
+### Bug Fixes
+
+* **banner:** fix banner height ([b2315de](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/b2315de6ce1bd08dacf3f80bdf9d07a45de480b5))
+
+
+### Features
+
+* **banner, imagebanner:** update components ([c6e8d6b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/c6e8d6bf308a6d179b768aceba23e564d17f3d64))
+
+
+
+
+
 # [5.14.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.13.0...@megafon/ui-shared@5.14.0) (2024-06-26)
 
 

package/dist/es/components/ImageBanner/ImageBanner.css

@@ -7,26 +7,29 @@ h5 {
 }
 .mfui-image-banner {
   position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   overflow: hidden;
 }
 @media screen and (min-width: 1024px) {
   .mfui-image-banner {
-    height: 420px;
-    padding: 0 80px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner__wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-    height: 100%;
+    height: 420px;
+    padding: 0 80px;
   }
 }
 .mfui-image-banner__picture {
@@ -68,11 +71,11 @@ h5 {
 .mfui-image-banner__background-image {
   display: block;
   max-width: 100%;
-  max-height: 250px;
+  max-height: 150px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-image-banner__background-image {
-    max-height: 280px;
+    max-height: 230px;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -95,11 +98,6 @@ h5 {
     text-align: center;
   }
 }
-@media screen and (max-width: 1023px) {
-  .mfui-image-banner_bottom-offset .mfui-image-banner__content {
-    padding-bottom: 72px;
-  }
-}
 .mfui-image-banner__description {
   margin-top: 16px;
   white-space: pre-wrap;

package/dist/es/components/ImageBanner/ImageBanner.d.ts

@@ -54,11 +54,15 @@ export interface IImageBannerProps {
     /** Ссылка на корневой элемент */
     rootRef?: Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string | React.ReactNode | React.ReactNode[];
+    title?: string | React.ReactNode | React.ReactNode[];
     /** Текст-описание */
     description?: string | React.ReactNode | React.ReactNode[];
     /** Строка со стоимостью услуги */
     cost?: string;
+    /** Тег заголовка на разрешении экрана 0-767 */
+    headerLevelMobile?: 'h1' | 'h2';
+    /** Тег заголовка на разрешении экрана 768+ */
+    headerLevel?: 'h1' | 'h2';
     /** Фоновый цвет */
     backgroundColor?: BackgroundColorType;
     /** Радиус границы */
@@ -81,10 +85,8 @@ export interface IImageBannerProps {
     isImageFullWidth?: boolean;
     /** Данные для блока с бейджами */
     badges?: PriceBadgePropsType[];
-    /** Дополнительный отступ снизу при использовании в баннере */
-    hasBottomOffset?: boolean;
     /** Элемент блока с рекламой */
-    adBlock?: JSX.Element;
+    adBlock?: JSX.Element | null;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.array.map.js";
@@ -77,6 +78,10 @@ var ImageBanner = function ImageBanner(_ref2) {
       title = _ref2.title,
       description = _ref2.description,
       cost = _ref2.cost,
+      _ref2$headerLevelMobi = _ref2.headerLevelMobile,
+      headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
+      _ref2$headerLevel = _ref2.headerLevel,
+      headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
       _ref2$backgroundColor = _ref2.backgroundColor,
       backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
       _ref2$radius = _ref2.radius,
@@ -85,17 +90,36 @@ var ImageBanner = function ImageBanner(_ref2) {
       isImageFullWidth = _ref2.isImageFullWidth,
       _ref2$badges = _ref2.badges,
       badges = _ref2$badges === void 0 ? [] : _ref2$badges,
-      hasBottomOffset = _ref2.hasBottomOffset,
       adBlock = _ref2.adBlock,
       _ref2$children = _ref2.children,
       children = _ref2$children === void 0 ? [] : _ref2$children;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isMobile = _React$useState2[0],
+      setIsMobile = _React$useState2[1];
+
+  React.useEffect(function () {
+    var mediaQuery = window.matchMedia("(max-width: ".concat(breakpoints.MOBILE_MIDDLE_END, "px)"));
+
+    var handleMediaChange = function handleMediaChange(_ref3) {
+      var matches = _ref3.matches;
+      setIsMobile(matches);
+    };
+
+    setIsMobile(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleMediaChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
   var renderBadges = !!badges.length && /*#__PURE__*/React.createElement("div", {
     className: cn('badges', [classes.badges])
-  }, badges.map(function (_ref3) {
-    var text = _ref3.text,
-        iconType = _ref3.iconType;
+  }, badges.map(function (_ref4) {
+    var text = _ref4.text,
+        iconType = _ref4.iconType;
     return /*#__PURE__*/React.createElement(PriceBadge, {
       className: classes.badge,
       theme: navTheme,
@@ -112,7 +136,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(Header, {
     className: cn('title', [classes.title]),
-    color: "inherit"
+    color: "inherit",
+    as: isMobile ? headerLevelMobile : headerLevel
   }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(Header, {
     className: cn('description', [classes.description]),
     as: "h5",
@@ -142,13 +167,10 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      'bottom-offset': hasBottomOffset && !hasImage,
       radius: radius
     }, [className, classes.root]),
     ref: rootRef
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrapper')
-  }, renderContent, hasImage && renderImage));
+  }), renderContent, hasImage && renderImage);
 };
 
 ImageBanner.propTypes = {
@@ -171,9 +193,11 @@ ImageBanner.propTypes = {
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   cost: PropTypes.string,
+  headerLevelMobile: PropTypes.oneOf(['h1', 'h2']),
+  headerLevel: PropTypes.oneOf(['h1', 'h2']),
   backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
   radius: PropTypes.oneOf(Object.values(Radius)),
   imageMobile: PropTypes.string,
@@ -188,7 +212,6 @@ ImageBanner.propTypes = {
     iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
     text: PropTypes.string.isRequired
   }).isRequired),
-  hasBottomOffset: PropTypes.bool,
   adBlock: PropTypes.element
 };
 export default ImageBanner;

package/dist/es/helpers/getColumnConfig.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

package/dist/lib/components/ImageBanner/ImageBanner.css

@@ -7,26 +7,29 @@ h5 {
 }
 .mfui-image-banner {
   position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   overflow: hidden;
 }
 @media screen and (min-width: 1024px) {
   .mfui-image-banner {
-    height: 420px;
-    padding: 0 80px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner__wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-    height: 100%;
+    height: 420px;
+    padding: 0 80px;
   }
 }
 .mfui-image-banner__picture {
@@ -68,11 +71,11 @@ h5 {
 .mfui-image-banner__background-image {
   display: block;
   max-width: 100%;
-  max-height: 250px;
+  max-height: 150px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-image-banner__background-image {
-    max-height: 280px;
+    max-height: 230px;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -95,11 +98,6 @@ h5 {
     text-align: center;
   }
 }
-@media screen and (max-width: 1023px) {
-  .mfui-image-banner_bottom-offset .mfui-image-banner__content {
-    padding-bottom: 72px;
-  }
-}
 .mfui-image-banner__description {
   margin-top: 16px;
   white-space: pre-wrap;

package/dist/lib/components/ImageBanner/ImageBanner.d.ts

@@ -54,11 +54,15 @@ export interface IImageBannerProps {
     /** Ссылка на корневой элемент */
     rootRef?: Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string | React.ReactNode | React.ReactNode[];
+    title?: string | React.ReactNode | React.ReactNode[];
     /** Текст-описание */
     description?: string | React.ReactNode | React.ReactNode[];
     /** Строка со стоимостью услуги */
     cost?: string;
+    /** Тег заголовка на разрешении экрана 0-767 */
+    headerLevelMobile?: 'h1' | 'h2';
+    /** Тег заголовка на разрешении экрана 768+ */
+    headerLevel?: 'h1' | 'h2';
     /** Фоновый цвет */
     backgroundColor?: BackgroundColorType;
     /** Радиус границы */
@@ -81,10 +85,8 @@ export interface IImageBannerProps {
     isImageFullWidth?: boolean;
     /** Данные для блока с бейджами */
     badges?: PriceBadgePropsType[];
-    /** Дополнительный отступ снизу при использовании в баннере */
-    hasBottomOffset?: boolean;
     /** Элемент блока с рекламой */
-    adBlock?: JSX.Element;
+    adBlock?: JSX.Element | null;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

package/dist/lib/components/ImageBanner/ImageBanner.js

@@ -9,6 +9,8 @@ exports["default"] = exports.ImageVerticalAlign = exports.NavTheme = exports.Rad
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
@@ -105,6 +107,10 @@ var ImageBanner = function ImageBanner(_ref2) {
       title = _ref2.title,
       description = _ref2.description,
       cost = _ref2.cost,
+      _ref2$headerLevelMobi = _ref2.headerLevelMobile,
+      headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
+      _ref2$headerLevel = _ref2.headerLevel,
+      headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
       _ref2$backgroundColor = _ref2.backgroundColor,
       backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
       _ref2$radius = _ref2.radius,
@@ -113,18 +119,38 @@ var ImageBanner = function ImageBanner(_ref2) {
       isImageFullWidth = _ref2.isImageFullWidth,
       _ref2$badges = _ref2.badges,
       badges = _ref2$badges === void 0 ? [] : _ref2$badges,
-      hasBottomOffset = _ref2.hasBottomOffset,
       adBlock = _ref2.adBlock,
       _ref2$children = _ref2.children,
       children = _ref2$children === void 0 ? [] : _ref2$children;
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isMobile = _React$useState2[0],
+      setIsMobile = _React$useState2[1];
+
+  _react["default"].useEffect(function () {
+    var mediaQuery = window.matchMedia("(max-width: ".concat(_uiHelpers.breakpoints.MOBILE_MIDDLE_END, "px)"));
+
+    var handleMediaChange = function handleMediaChange(_ref3) {
+      var matches = _ref3.matches;
+      setIsMobile(matches);
+    };
+
+    setIsMobile(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleMediaChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
 
   var renderBadges = !!badges.length && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('badges', [classes.badges])
-  }, badges.map(function (_ref3) {
-    var text = _ref3.text,
-        iconType = _ref3.iconType;
+  }, badges.map(function (_ref4) {
+    var text = _ref4.text,
+        iconType = _ref4.iconType;
     return /*#__PURE__*/_react["default"].createElement(_uiCore.PriceBadge, {
       className: classes.badge,
       theme: navTheme,
@@ -143,7 +169,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
     className: cn('title', [classes.title]),
-    color: "inherit"
+    color: "inherit",
+    as: isMobile ? headerLevelMobile : headerLevel
   }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
     className: cn('description', [classes.description]),
     as: "h5",
@@ -175,13 +202,10 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      'bottom-offset': hasBottomOffset && !hasImage,
       radius: radius
     }, [className, classes.root]),
     ref: rootRef
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('wrapper')
-  }, renderContent, hasImage && renderImage));
+  }), renderContent, hasImage && renderImage);
 };
 
 ImageBanner.propTypes = {
@@ -204,9 +228,11 @@ ImageBanner.propTypes = {
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   cost: PropTypes.string,
+  headerLevelMobile: PropTypes.oneOf(['h1', 'h2']),
+  headerLevel: PropTypes.oneOf(['h1', 'h2']),
   backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
   radius: PropTypes.oneOf(Object.values(Radius)),
   imageMobile: PropTypes.string,
@@ -221,7 +247,6 @@ ImageBanner.propTypes = {
     iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
     text: PropTypes.string.isRequired
   }).isRequired),
-  hasBottomOffset: PropTypes.bool,
   adBlock: PropTypes.element
 };
 var _default = ImageBanner;

package/dist/lib/helpers/getColumnConfig.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "files": [
     "dist"
   ],
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^5.16.0",
+    "@megafon/ui-core": "^5.17.0",
     "@megafon/ui-helpers": "^2.6.0",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "0d4f96ecbc805db6a1b2200dd9adbb707349d474"
+  "gitHead": "426c7d8e65c13746f9cc1c895a2e7e1b4b08316a"
 }