@megafon/ui-shared 6.6.0 → 6.7.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.7.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.6.0...@megafon/ui-shared@6.7.0) (2024-10-15)
+
+
+### Features
+
+* **breadcrumbs:** add optional props disabledOnMobile and hasMarginTop ([898319a](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/898319adb83df6be862c4050b872902f05157be8))
+* **imagebanner:** add optional prop hasMarginTop ([4bb25e6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/4bb25e6bd0ecb9b3b2ebe9ec9582fc53bca485a8))
+
+
+
+
+
 # [6.6.0](/compare/@megafon/ui-shared@6.5.1...@megafon/ui-shared@6.6.0) (2024-10-02)
 
 

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -21,6 +21,9 @@ h5 {
 .mfui-v6-breadcrumbs_color_white .mfui-v6-breadcrumbs__item:before {
   color: var(--stcWhite);
 }
+.mfui-v6-breadcrumbs_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-breadcrumbs__item {
   position: relative;
   margin-right: 10px;

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

@@ -16,6 +16,10 @@ export declare type Props = {
     color?: TextColorType;
     /** Включить микроразметку */
     hasMicrodata?: boolean;
+    /** Отключить на разрешении < 768 px */
+    disabledOnMobile?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         item?: string;

package/dist/es/components/Breadcrumbs/Breadcrumbs.js

@@ -5,6 +5,7 @@ import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
+import useResolutions from "../../hooks/useResolutions";
 import BreadcrumbsItem, { TextColor } from "./components/BreadcrumbsItem";
 import "./Breadcrumbs.css";
 
@@ -23,10 +24,23 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs,
       _ref$hasMicrodata = _ref.hasMicrodata,
-      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+      _ref$disabledOnMobile = _ref.disabledOnMobile,
+      disabledOnMobile = _ref$disabledOnMobile === void 0 ? false : _ref$disabledOnMobile,
+      _ref$hasMarginTop = _ref.hasMarginTop,
+      hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop;
+
+  var _useResolutions = useResolutions(),
+      isMobile = _useResolutions.isMobile;
+
+  if (isMobile && disabledOnMobile) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      color: color
+      color: color,
+      'margin-top': hasMarginTop
     }, className)
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
     itemScope: true,
@@ -79,6 +93,7 @@ Breadcrumbs.propTypes = {
     href: PropTypes.string
   }).isRequired)]).isRequired,
   color: PropTypes.oneOf(Object.values(TextColor)),
-  hasMicrodata: PropTypes.bool
+  hasMicrodata: PropTypes.bool,
+  disabledOnMobile: PropTypes.bool
 };
 export default Breadcrumbs;

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

@@ -193,6 +193,9 @@ h5 {
     right: 24px;
   }
 }
+.mfui-v6-image-banner_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-image-banner_radius_rounded {
   border-radius: 24px;
 }

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

@@ -84,6 +84,8 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

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

@@ -91,6 +91,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       isImageFullWidth = _ref2.isImageFullWidth,
       badges = _ref2.badges,
       adBlock = _ref2.adBlock,
+      _ref2$hasMarginTop = _ref2.hasMarginTop,
+      hasMarginTop = _ref2$hasMarginTop === void 0 ? false : _ref2$hasMarginTop,
       _ref2$children = _ref2.children,
       children = _ref2$children === void 0 ? [] : _ref2$children;
 
@@ -160,7 +162,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      radius: radius
+      radius: radius,
+      'margin-top': hasMarginTop
     }, [className, classes.root]),
     ref: rootRef
   }), renderContent, hasImage && renderImage);
@@ -205,6 +208,7 @@ ImageBanner.propTypes = {
   autoHeight: PropTypes.bool,
   isImageFullWidth: PropTypes.bool,
   badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
-  adBlock: PropTypes.element
+  adBlock: PropTypes.element,
+  hasMarginTop: PropTypes.bool
 };
 export default ImageBanner;

package/dist/es/components/PageTitle/PageTitle.css

@@ -9,14 +9,6 @@ h5 {
   display: inline-block;
   width: 100%;
 }
-.mfui-v6-page-title__breadcrumbs {
-  margin-top: 32px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-v6-page-title__breadcrumbs {
-    display: none;
-  }
-}
 .mfui-v6-page-title__title {
   margin-top: 110px;
 }

package/dist/es/components/PageTitle/PageTitle.js

@@ -52,6 +52,8 @@ var PageTitle = function PageTitle(_ref) {
     className: cn([className]),
     ref: rootRef
   }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    disabledOnMobile: true,
+    hasMarginTop: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     items: breadcrumbs,
     dataAttrs: {

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -215,11 +215,6 @@ h5 {
   position: absolute;
   top: 32px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-v6-video-banner__breadcrumbs {
-    display: none;
-  }
-}
 .mfui-v6-video-banner__grid {
   width: 100%;
 }

package/dist/es/components/VideoBanner/VideoBanner.js

@@ -223,6 +223,7 @@ var VideoBanner = function VideoBanner(_ref2) {
   }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
   }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    disabledOnMobile: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,

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/Breadcrumbs/Breadcrumbs.css

@@ -21,6 +21,9 @@ h5 {
 .mfui-v6-breadcrumbs_color_white .mfui-v6-breadcrumbs__item:before {
   color: var(--stcWhite);
 }
+.mfui-v6-breadcrumbs_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-breadcrumbs__item {
   position: relative;
   margin-right: 10px;

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

@@ -16,6 +16,10 @@ export declare type Props = {
     color?: TextColorType;
     /** Включить микроразметку */
     hasMicrodata?: boolean;
+    /** Отключить на разрешении < 768 px */
+    disabledOnMobile?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         item?: string;

package/dist/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -21,6 +21,8 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _useResolutions2 = _interopRequireDefault(require("../../hooks/useResolutions"));
+
 var _BreadcrumbsItem = _interopRequireWildcard(require("./components/BreadcrumbsItem"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -44,10 +46,23 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs,
       _ref$hasMicrodata = _ref.hasMicrodata,
-      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+      _ref$disabledOnMobile = _ref.disabledOnMobile,
+      disabledOnMobile = _ref$disabledOnMobile === void 0 ? false : _ref$disabledOnMobile,
+      _ref$hasMarginTop = _ref.hasMarginTop,
+      hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop;
+
+  var _useResolutions = (0, _useResolutions2["default"])(),
+      isMobile = _useResolutions.isMobile;
+
+  if (isMobile && disabledOnMobile) {
+    return null;
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn({
-      color: color
+      color: color,
+      'margin-top': hasMarginTop
     }, className)
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
     itemScope: true,
@@ -100,7 +115,8 @@ Breadcrumbs.propTypes = {
     href: _propTypes["default"].string
   }).isRequired)]).isRequired,
   color: _propTypes["default"].oneOf(Object.values(_BreadcrumbsItem.TextColor)),
-  hasMicrodata: _propTypes["default"].bool
+  hasMicrodata: _propTypes["default"].bool,
+  disabledOnMobile: _propTypes["default"].bool
 };
 var _default = Breadcrumbs;
 exports["default"] = _default;

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

@@ -193,6 +193,9 @@ h5 {
     right: 24px;
   }
 }
+.mfui-v6-image-banner_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-image-banner_radius_rounded {
   border-radius: 24px;
 }

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

@@ -84,6 +84,8 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

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

@@ -119,6 +119,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       isImageFullWidth = _ref2.isImageFullWidth,
       badges = _ref2.badges,
       adBlock = _ref2.adBlock,
+      _ref2$hasMarginTop = _ref2.hasMarginTop,
+      hasMarginTop = _ref2$hasMarginTop === void 0 ? false : _ref2$hasMarginTop,
       _ref2$children = _ref2.children,
       children = _ref2$children === void 0 ? [] : _ref2$children;
 
@@ -194,7 +196,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      radius: radius
+      radius: radius,
+      'margin-top': hasMarginTop
     }, [className, classes.root]),
     ref: rootRef
   }), renderContent, hasImage && renderImage);
@@ -239,7 +242,8 @@ ImageBanner.propTypes = {
   autoHeight: PropTypes.bool,
   isImageFullWidth: PropTypes.bool,
   badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
-  adBlock: PropTypes.element
+  adBlock: PropTypes.element,
+  hasMarginTop: PropTypes.bool
 };
 var _default = ImageBanner;
 exports["default"] = _default;

package/dist/lib/components/PageTitle/PageTitle.css

@@ -9,14 +9,6 @@ h5 {
   display: inline-block;
   width: 100%;
 }
-.mfui-v6-page-title__breadcrumbs {
-  margin-top: 32px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-v6-page-title__breadcrumbs {
-    display: none;
-  }
-}
 .mfui-v6-page-title__title {
   margin-top: 110px;
 }

package/dist/lib/components/PageTitle/PageTitle.js

@@ -72,6 +72,8 @@ var PageTitle = function PageTitle(_ref) {
     className: cn([className]),
     ref: rootRef
   }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+    disabledOnMobile: true,
+    hasMarginTop: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     items: breadcrumbs,
     dataAttrs: {

package/dist/lib/components/VideoBanner/VideoBanner.css

@@ -215,11 +215,6 @@ h5 {
   position: absolute;
   top: 32px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-v6-video-banner__breadcrumbs {
-    display: none;
-  }
-}
 .mfui-v6-video-banner__grid {
   width: 100%;
 }

package/dist/lib/components/VideoBanner/VideoBanner.js

@@ -260,6 +260,7 @@ var VideoBanner = function VideoBanner(_ref2) {
   }), /*#__PURE__*/_react["default"].createElement(_uiCore.ContentArea, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('wrapper')
   }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {
+    disabledOnMobile: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,

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": "6.6.0",
+  "version": "6.7.0",
   "files": [
     "dist"
   ],
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^6.4.0",
+    "@megafon/ui-core": "^6.4.1",
     "@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": "b1eeb93c7ce3fb201938cc46130367d0334c2914"
+  "gitHead": "45875cd1687c3cbd725b497b508cd33a083228d8"
 }