@megafon/ui-shared 3.4.1 → 4.0.0-beta.3

package/CHANGELOG.md

@@ -3,27 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.4.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.4.0...@megafon/ui-shared@3.4.1) (2022-06-07)
-
-**Note:** Version bump only for package @megafon/ui-shared
-
-
+# [4.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.0.0-beta.2...@megafon/ui-shared@4.0.0-beta.3) (2022-06-08)
 
 
+### Features
 
-# [3.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.5...@megafon/ui-shared@3.4.0) (2022-05-30)
+* **tabs:** update by new design ([0a8a175](https://github.com/MegafonWebLab/megafon-ui/commit/0a8a175aa5e30758742c1c663da8a406e30dc3dd))
 
 
-### Features
+### BREAKING CHANGES
 
-* **instructions:** add swipe to picture ([eb9eb09](https://github.com/MegafonWebLab/megafon-ui/commit/eb9eb0991444e113baf95d2d014d1c690cd1e99a))
-* **textwithicon:** add isFullWidth and centeringOnMobile props ([b86ad8b](https://github.com/MegafonWebLab/megafon-ui/commit/b86ad8b1ad5e41c87e83ebadeb3a0a157bc41a2c))
+* **tabs:** new prop autoWidth added
+size prop small vallue removed
+new sizes
 
 
 
 
 
-## [3.3.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.4...@megafon/ui-shared@3.3.5) (2022-05-27)
+# [4.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.0.0-beta.1...@megafon/ui-shared@4.0.0-beta.2) (2022-06-01)
 
 **Note:** Version bump only for package @megafon/ui-shared
 
@@ -31,35 +29,39 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [3.3.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.3...@megafon/ui-shared@3.3.4) (2022-05-24)
+# [4.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.0.0-beta.0...@megafon/ui-shared@4.0.0-beta.1) (2022-05-27)
 
+**Note:** Version bump only for package @megafon/ui-shared
 
-### Bug Fixes
 
-* **instructions:** remove css prorerty filter for image ([d4ee221](https://github.com/MegafonWebLab/megafon-ui/commit/d4ee22123565b82ec777c1526093a94251e59809))
-* **picturewithdescription:** fix clearing indents for first and last element ([d9263e3](https://github.com/MegafonWebLab/megafon-ui/commit/d9263e3670b2d493ec4bf194a2cdd6440d1ea86f))
 
 
 
+# [4.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.2.3-beta.1...@megafon/ui-shared@4.0.0-beta.0) (2022-05-24)
 
 
-## [3.3.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.2...@megafon/ui-shared@3.3.3) (2022-05-17)
+### Bug Fixes
 
-**Note:** Version bump only for package @megafon/ui-shared
+* **breadcrumbs:** change default color prop value from black to default ([9c2c0fc](https://github.com/MegafonWebLab/megafon-ui/commit/9c2c0fca7d559a67d3d167b2a8a3c30b420ab7da))
 
 
+### Features
 
+* **paragraph:** remove prop size; add new prop; add 'pale' option to colors ([ef15841](https://github.com/MegafonWebLab/megafon-ui/commit/ef15841474473739d3ac88da7a8737e183ff288a))
 
 
-## [3.3.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.1...@megafon/ui-shared@3.3.2) (2022-05-05)
+### BREAKING CHANGES
 
-**Note:** Version bump only for package @megafon/ui-shared
+* **paragraph:** prop 'size' is no longer exists.
+use component Caption instead of Paragraph size="small"
+* **breadcrumbs:** color is now depends on current theme. by default it matches content text color.
+for keep black color on light background use 'black' value for prop 'color'.
 
 
 
 
 
-## [3.3.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.0...@megafon/ui-shared@3.3.1) (2022-04-25)
+## [3.2.3-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.2.3-beta.0...@megafon/ui-shared@3.2.3-beta.1) (2022-05-06)
 
 **Note:** Version bump only for package @megafon/ui-shared
 
@@ -67,12 +69,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [3.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.2.2...@megafon/ui-shared@3.3.0) (2022-04-18)
+## [3.2.3-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.2.2...@megafon/ui-shared@3.2.3-beta.0) (2022-04-13)
 
-
-### Features
-
-* **videobanner:** add proprety for mobile video, use picture for background image ([c21c927](https://github.com/MegafonWebLab/megafon-ui/commit/c21c9278d2ff1e192195a5113d43d50753fd02c5))
+**Note:** Version bump only for package @megafon/ui-shared
 
 
 

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

@@ -26,7 +26,7 @@ var cn = cnCreate('mfui-breadcrumbs');
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var items = _ref.items,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'black' : _ref$color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
       className = _ref.className,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,

package/dist/es/components/DownloadLinks/DownloadLink.css

@@ -31,7 +31,7 @@ h5 {
 .mfui-download-link__info {
   margin: 0;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   color: var(--spbSky3);
   text-transform: uppercase;
 }

package/dist/es/components/Instructions/Instructions.css

@@ -89,9 +89,6 @@ h5 {
 .mfui-instructions__swiper-img {
   width: 100%;
   height: 100%;
-}
-.mfui-instructions__swiper-img_video {
-  /* hack for fix not white video background */
   -webkit-filter: brightness(108.5%);
           filter: brightness(108.5%);
 }

package/dist/es/components/Instructions/Instructions.js

@@ -78,19 +78,13 @@ var Instructions = function Instructions(_ref) {
       swiperInstance && swiperInstance.slideTo(ind);
     };
   }, [swiperInstance]);
-  var handleSlideChange = React.useCallback(function (_ref2) {
-    var activeIndex = _ref2.activeIndex;
-    setSlideIndex(activeIndex);
-  }, []);
   var renderVideo = React.useCallback(function (mediaUrl, index) {
     return /*#__PURE__*/React.createElement("video", _extends({
       loop: true,
       muted: true,
       autoPlay: true,
       playsInline: true,
-      className: cn('swiper-img', {
-        video: true
-      })
+      className: cn('swiper-img')
     }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/React.createElement("source", {
       src: mediaUrl,
       type: "video/mp4"
@@ -98,14 +92,12 @@ var Instructions = function Instructions(_ref) {
   }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
   var renderSlider = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(Swiper, {
-      noSwiping: false,
+      className: cn('swiper'),
       onSwiper: getSwiperInstance,
-      noSwipingClass: swiperSlideCn,
-      onSlideChange: handleSlideChange,
-      className: cn('swiper')
-    }, instructionItems.map(function (_ref3, i) {
-      var mediaUrl = _ref3.mediaUrl,
-          isVideo = _ref3.isVideo;
+      noSwipingClass: swiperSlideCn
+    }, instructionItems.map(function (_ref2, i) {
+      var mediaUrl = _ref2.mediaUrl,
+          isVideo = _ref2.isVideo;
       return /*#__PURE__*/React.createElement(SwiperSlide, {
         className: swiperSlideCn,
         key: i + mediaUrl
@@ -116,7 +108,7 @@ var Instructions = function Instructions(_ref) {
         className: cn('swiper-img', [instructionItemImg])
       })));
     }));
-  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, handleSlideChange]);
+  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
   var renderTitle = React.useCallback(function (resolution) {
     return /*#__PURE__*/React.createElement(Header, {
       className: cn('title', {
@@ -148,8 +140,8 @@ var Instructions = function Instructions(_ref) {
         'text-after': !!text,
         desktop: true
       })
-    }, instructionItems.map(function (_ref4, i) {
-      var itemTitle = _ref4.title;
+    }, instructionItems.map(function (_ref3, i) {
+      var itemTitle = _ref3.title;
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -177,8 +169,8 @@ var Instructions = function Instructions(_ref) {
       })
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('articles-title-block')
-    }, instructionItems.map(function (_ref5, i) {
-      var itemTitle = _ref5.title;
+    }, instructionItems.map(function (_ref4, i) {
+      var itemTitle = _ref4.title;
       return slideIndex === i && /*#__PURE__*/React.createElement("div", _extends({
         key: i,
         "data-index": i

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

@@ -37,7 +37,7 @@ h5 {
 }
 .mfui-page-title__badge {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   display: inline-block;
   margin-top: 16px;
   padding: 2px 14px;

package/dist/es/components/PictureWithDescription/PictureWithDescription.css

@@ -53,10 +53,10 @@ h5 {
   max-width: 550px;
   height: 100%;
 }
-.mfui-picture-with-description__content > :first-child {
+.mfui-picture-with-description__content :first-child {
   margin-top: 0 !important;
 }
-.mfui-picture-with-description__content > :last-child {
+.mfui-picture-with-description__content :last-child {
   margin-bottom: 0 !important;
 }
 @media screen and (min-width: 1024px) {

package/dist/es/components/Table/Table.css

@@ -45,6 +45,7 @@ h5 {
   }
 }
 .mfui-table__top-shadow {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -57,6 +58,7 @@ h5 {
   background: linear-gradient(359.94deg, rgba(0, 0, 0, 0.0001) 0.06%, rgba(0, 0, 0, 0.03) 38.08%, rgba(0, 0, 0, 0.08) 74.98%);
 }
 .mfui-table__left-shadow {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   bottom: 0;
@@ -68,6 +70,7 @@ h5 {
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.0001) 16.3%, rgba(0, 0, 0, 0.03) 51.81%, rgba(0, 0, 0, 0.08) 86.27%);
 }
 .mfui-table__bottom-gradient {
+  position: -webkit-sticky;
   position: sticky;
   bottom: 0;
   z-index: 1;
@@ -81,6 +84,7 @@ h5 {
   background: linear-gradient(to top, var(--base) 25%, rgba(255, 255, 255, 0));
 }
 .mfui-table__right-gradient {
+  position: -webkit-sticky;
   position: sticky;
   right: 0;
   z-index: 1;
@@ -121,7 +125,7 @@ h5 {
 }
 .mfui-table__row_head .mfui-table__cell {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   height: 72px;
   padding-bottom: 12px;
   color: var(--spbSky3);
@@ -138,6 +142,7 @@ h5 {
   min-width: 144px;
 }
 .mfui-table_fix-column .mfui-table__cell:first-child {
+  position: -webkit-sticky;
   position: sticky;
 }
 .mfui-table_fix-column .mfui-table__left-shadow {

package/dist/es/components/TextWithIcon/TextWithIcon.css

@@ -9,7 +9,7 @@ h5 {
   margin-bottom: 24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-text-with-icon_centering-on-mobile .mfui-text-with-icon__header {
+  .mfui-text-with-icon__header {
     text-align: center;
   }
 }

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

@@ -12,10 +12,6 @@ export interface ITextWithIconProps {
     };
     /** Дополнительный класс для корневого элемента */
     className?: string;
-    /** Включить растягивание на всю ширину контейнера */
-    isFullWidth?: boolean;
-    /** Выравнивание по центру на мобильных */
-    centeringOnMobile?: boolean;
     /** Допустимый дочерний компонент */
     children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
 }

package/dist/es/components/TextWithIcon/TextWithIcon.js

@@ -11,34 +11,19 @@ var TextWithIcon = function TextWithIcon(_ref) {
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       className = _ref.className,
-      _ref$isFullWidth = _ref.isFullWidth,
-      isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
-      _ref$centeringOnMobil = _ref.centeringOnMobile,
-      centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
       children = _ref.children;
-
-  var renderContent = function renderContent() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(Header, {
-      className: cn('header'),
-      as: "h5"
-    }, title), children);
-  };
-
-  var renderContentWithGrid = function renderContentWithGrid() {
-    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
-      mobile: '12',
-      tablet: '7',
-      desktop: '6',
-      wide: '6'
-    }, renderContent()));
-  };
-
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: cn({
-      'centering-on-mobile': centeringOnMobile
-    }, [className]),
+    className: cn([className]),
     ref: rootRef
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isFullWidth ? renderContent() : renderContentWithGrid());
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
+    mobile: '12',
+    tablet: '7',
+    desktop: '6',
+    wide: '6'
+  }, title && /*#__PURE__*/React.createElement(Header, {
+    className: cn('header'),
+    as: "h5"
+  }, title), children)));
 };
 
 TextWithIcon.propTypes = {
@@ -50,8 +35,6 @@ TextWithIcon.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
-  isFullWidth: PropTypes.bool,
-  centeringOnMobile: PropTypes.bool,
   className: PropTypes.string
 };
 export default TextWithIcon;

package/dist/es/components/TextWithIcon/TextWithIconItem.css

@@ -13,6 +13,14 @@ h5 {
       -ms-flex-align: center;
           align-items: center;
 }
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon-item {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
 .mfui-text-with-icon-item:not(:first-of-type) {
   margin-top: 16px;
 }
@@ -26,25 +34,16 @@ h5 {
   min-width: 40px;
   height: 40px;
   min-height: 40px;
-  margin-right: 16px;
   overflow: hidden;
 }
-@media screen and (max-width: 767px) {
-  .mfui-text-with-icon-item_centering-on-mobile {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+@media screen and (min-width: 768px) {
+  .mfui-text-with-icon-item__svg-icon {
+    margin-right: 16px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-text-with-icon-item_centering-on-mobile .mfui-text-with-icon-item__text {
+  .mfui-text-with-icon-item__text {
     margin-top: 12px;
     text-align: center;
   }
 }
-@media screen and (max-width: 767px) {
-  .mfui-text-with-icon-item_centering-on-mobile .mfui-text-with-icon-item__svg-icon {
-    margin-right: 0;
-  }
-}

package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts

@@ -11,8 +11,6 @@ export interface ITextWithIconItem {
     dataAttrs?: {
         root?: Record<string, string>;
     };
-    /** Выравнивание по центру на мобильных */
-    centeringOnMobile?: boolean;
     /** Дополнительный класс для корневого элемента */
     className?: string;
 }

package/dist/es/components/TextWithIcon/TextWithIconItem.js

@@ -10,13 +10,9 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
       icon = _ref.icon,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
-      _ref$centeringOnMobil = _ref.centeringOnMobile,
-      centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: cn({
-      'centering-on-mobile': centeringOnMobile
-    }, [className]),
+    className: cn([className]),
     ref: rootRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon')
@@ -34,7 +30,6 @@ TextWithIconItem.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
-  centeringOnMobile: PropTypes.bool,
   className: PropTypes.string
 };
 export default TextWithIconItem;

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

@@ -84,8 +84,9 @@ h5 {
 .mfui-video-banner__background-image {
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .mfui-video-banner__content {
   position: relative;
@@ -190,7 +191,7 @@ h5 {
 }
 .mfui-video-banner__cost {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   margin-bottom: 18px;
 }
 .mfui-video-banner__value {

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

@@ -78,8 +78,6 @@ interface IVideoBannerProps {
     videoSrc?: string;
     /** Тип видео */
     videoType?: VideoType;
-    /** Разрешить проигрывать видео на мобильном разрешении */
-    videoMobile?: boolean;
     /** Наличие звука в видео */
     isMuted?: boolean;
     /** Изображение для мобильного разрешения */

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

@@ -63,17 +63,20 @@ var VideoBanner = function VideoBanner(_ref2) {
       content = _ref2.content,
       _ref2$isMuted = _ref2.isMuted,
       isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
-      breadcrumbs = _ref2.breadcrumbs,
-      _ref2$videoMobile = _ref2.videoMobile,
-      videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
+      breadcrumbs = _ref2.breadcrumbs;
 
   var _React$useState = React.useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isMobile = _React$useState2[0],
       setIsMobile = _React$useState2[1];
 
+  var _React$useState3 = React.useState(imageMobile),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      imageSrc = _React$useState4[0],
+      setImageSrc = _React$useState4[1];
+
   var isVideoData = !!videoSrc && !!videoType;
-  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
+  var isRenderVideo = !isMobile && isVideoData;
   var renderContent = React.useCallback(function (_ref3) {
     var title = _ref3.title,
         description = _ref3.description,
@@ -186,8 +189,27 @@ var VideoBanner = function VideoBanner(_ref2) {
     }
   }, [videoType, videoSrc, isMuted, classes.video]);
   React.useEffect(function () {
+    var getImageSrc = function getImageSrc() {
+      var windowWidth = window.innerWidth;
+
+      switch (true) {
+        case windowWidth >= breakpoints.DESKTOP_MIDDLE_START:
+          return imageDesktopWide;
+
+        case windowWidth >= breakpoints.DESKTOP_SMALL_START && windowWidth <= breakpoints.DESKTOP_SMALL_END:
+          return imageDesktop;
+
+        case windowWidth >= breakpoints.MOBILE_BIG_START && windowWidth <= breakpoints.MOBILE_BIG_END:
+          return imageTablet;
+
+        default:
+          return imageMobile;
+      }
+    };
+
     var resizeHandler = function resizeHandler() {
       setIsMobile(window.innerWidth < breakpoints.DESKTOP_SMALL_START);
+      setImageSrc(getImageSrc());
     };
 
     var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
@@ -196,7 +218,7 @@ var VideoBanner = function VideoBanner(_ref2) {
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
-  }, [setIsMobile]);
+  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes.root]),
     ref: rootRef
@@ -213,20 +235,12 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("source", {
-    media: "(min-width: ".concat(breakpoints.DESKTOP_MIDDLE_START, "px)"),
-    srcSet: imageDesktopWide
-  }), /*#__PURE__*/React.createElement("source", {
-    media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
-    srcSet: imageDesktop
-  }), /*#__PURE__*/React.createElement("source", {
-    media: "(min-width: ".concat(breakpoints.MOBILE_BIG_START, "px)"),
-    srcSet: imageTablet
-  }), /*#__PURE__*/React.createElement("img", {
-    className: cn('background-image'),
-    src: imageMobile,
-    alt: ""
-  })))));
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    },
+    className: cn('background-image')
+  }))));
 };
 
 VideoBanner.propTypes = {
@@ -249,7 +263,6 @@ VideoBanner.propTypes = {
   }), PropTypes.any])]),
   videoSrc: PropTypes.string,
   videoType: PropTypes.oneOf(Object.values(VideoType)),
-  videoMobile: PropTypes.bool,
   content: PropTypes.shape({
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,

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

@@ -43,7 +43,7 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-breadcrumbs');
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var items = _ref.items,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'black' : _ref$color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
       className = _ref.className,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,

package/dist/lib/components/DownloadLinks/DownloadLink.css

@@ -31,7 +31,7 @@ h5 {
 .mfui-download-link__info {
   margin: 0;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   color: var(--spbSky3);
   text-transform: uppercase;
 }

package/dist/lib/components/Instructions/Instructions.css

@@ -89,9 +89,6 @@ h5 {
 .mfui-instructions__swiper-img {
   width: 100%;
   height: 100%;
-}
-.mfui-instructions__swiper-img_video {
-  /* hack for fix not white video background */
   -webkit-filter: brightness(108.5%);
           filter: brightness(108.5%);
 }

package/dist/lib/components/Instructions/Instructions.js

@@ -99,20 +99,13 @@ var Instructions = function Instructions(_ref) {
     };
   }, [swiperInstance]);
 
-  var handleSlideChange = _react["default"].useCallback(function (_ref2) {
-    var activeIndex = _ref2.activeIndex;
-    setSlideIndex(activeIndex);
-  }, []);
-
   var renderVideo = _react["default"].useCallback(function (mediaUrl, index) {
     return /*#__PURE__*/_react["default"].createElement("video", (0, _extends2["default"])({
       loop: true,
       muted: true,
       autoPlay: true,
       playsInline: true,
-      className: cn('swiper-img', {
-        video: true
-      })
+      className: cn('swiper-img')
     }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/_react["default"].createElement("source", {
       src: mediaUrl,
       type: "video/mp4"
@@ -121,14 +114,12 @@ var Instructions = function Instructions(_ref) {
 
   var renderSlider = _react["default"].useCallback(function () {
     return /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
-      noSwiping: false,
+      className: cn('swiper'),
       onSwiper: getSwiperInstance,
-      noSwipingClass: swiperSlideCn,
-      onSlideChange: handleSlideChange,
-      className: cn('swiper')
-    }, instructionItems.map(function (_ref3, i) {
-      var mediaUrl = _ref3.mediaUrl,
-          isVideo = _ref3.isVideo;
+      noSwipingClass: swiperSlideCn
+    }, instructionItems.map(function (_ref2, i) {
+      var mediaUrl = _ref2.mediaUrl,
+          isVideo = _ref2.isVideo;
       return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, {
         className: swiperSlideCn,
         key: i + mediaUrl
@@ -139,7 +130,7 @@ var Instructions = function Instructions(_ref) {
         className: cn('swiper-img', [instructionItemImg])
       })));
     }));
-  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, handleSlideChange]);
+  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
 
   var renderTitle = _react["default"].useCallback(function (resolution) {
     return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
@@ -175,8 +166,8 @@ var Instructions = function Instructions(_ref) {
         'text-after': !!text,
         desktop: true
       })
-    }, instructionItems.map(function (_ref4, i) {
-      var itemTitle = _ref4.title;
+    }, instructionItems.map(function (_ref3, i) {
+      var itemTitle = _ref3.title;
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -205,8 +196,8 @@ var Instructions = function Instructions(_ref) {
       })
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('articles-title-block')
-    }, instructionItems.map(function (_ref5, i) {
-      var itemTitle = _ref5.title;
+    }, instructionItems.map(function (_ref4, i) {
+      var itemTitle = _ref4.title;
       return slideIndex === i && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
         key: i,
         "data-index": i

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

@@ -37,7 +37,7 @@ h5 {
 }
 .mfui-page-title__badge {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   display: inline-block;
   margin-top: 16px;
   padding: 2px 14px;

package/dist/lib/components/PictureWithDescription/PictureWithDescription.css

@@ -53,10 +53,10 @@ h5 {
   max-width: 550px;
   height: 100%;
 }
-.mfui-picture-with-description__content > :first-child {
+.mfui-picture-with-description__content :first-child {
   margin-top: 0 !important;
 }
-.mfui-picture-with-description__content > :last-child {
+.mfui-picture-with-description__content :last-child {
   margin-bottom: 0 !important;
 }
 @media screen and (min-width: 1024px) {

package/dist/lib/components/Table/Table.css

@@ -45,6 +45,7 @@ h5 {
   }
 }
 .mfui-table__top-shadow {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -57,6 +58,7 @@ h5 {
   background: linear-gradient(359.94deg, rgba(0, 0, 0, 0.0001) 0.06%, rgba(0, 0, 0, 0.03) 38.08%, rgba(0, 0, 0, 0.08) 74.98%);
 }
 .mfui-table__left-shadow {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   bottom: 0;
@@ -68,6 +70,7 @@ h5 {
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.0001) 16.3%, rgba(0, 0, 0, 0.03) 51.81%, rgba(0, 0, 0, 0.08) 86.27%);
 }
 .mfui-table__bottom-gradient {
+  position: -webkit-sticky;
   position: sticky;
   bottom: 0;
   z-index: 1;
@@ -81,6 +84,7 @@ h5 {
   background: linear-gradient(to top, var(--base) 25%, rgba(255, 255, 255, 0));
 }
 .mfui-table__right-gradient {
+  position: -webkit-sticky;
   position: sticky;
   right: 0;
   z-index: 1;
@@ -121,7 +125,7 @@ h5 {
 }
 .mfui-table__row_head .mfui-table__cell {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   height: 72px;
   padding-bottom: 12px;
   color: var(--spbSky3);
@@ -138,6 +142,7 @@ h5 {
   min-width: 144px;
 }
 .mfui-table_fix-column .mfui-table__cell:first-child {
+  position: -webkit-sticky;
   position: sticky;
 }
 .mfui-table_fix-column .mfui-table__left-shadow {

package/dist/lib/components/TextWithIcon/TextWithIcon.css

@@ -9,7 +9,7 @@ h5 {
   margin-bottom: 24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-text-with-icon_centering-on-mobile .mfui-text-with-icon__header {
+  .mfui-text-with-icon__header {
     text-align: center;
   }
 }

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

@@ -12,10 +12,6 @@ export interface ITextWithIconProps {
     };
     /** Дополнительный класс для корневого элемента */
     className?: string;
-    /** Включить растягивание на всю ширину контейнера */
-    isFullWidth?: boolean;
-    /** Выравнивание по центру на мобильных */
-    centeringOnMobile?: boolean;
     /** Допустимый дочерний компонент */
     children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
 }

package/dist/lib/components/TextWithIcon/TextWithIcon.js

@@ -30,34 +30,19 @@ var TextWithIcon = function TextWithIcon(_ref) {
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       className = _ref.className,
-      _ref$isFullWidth = _ref.isFullWidth,
-      isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
-      _ref$centeringOnMobil = _ref.centeringOnMobile,
-      centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
       children = _ref.children;
-
-  var renderContent = function renderContent() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
-      className: cn('header'),
-      as: "h5"
-    }, title), children);
-  };
-
-  var renderContentWithGrid = function renderContentWithGrid() {
-    return /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
-      mobile: '12',
-      tablet: '7',
-      desktop: '6',
-      wide: '6'
-    }, renderContent()));
-  };
-
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn({
-      'centering-on-mobile': centeringOnMobile
-    }, [className]),
+    className: cn([className]),
     ref: rootRef
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isFullWidth ? renderContent() : renderContentWithGrid());
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    mobile: '12',
+    tablet: '7',
+    desktop: '6',
+    wide: '6'
+  }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
+    className: cn('header'),
+    as: "h5"
+  }, title), children)));
 };
 
 TextWithIcon.propTypes = {
@@ -69,8 +54,6 @@ TextWithIcon.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
-  isFullWidth: PropTypes.bool,
-  centeringOnMobile: PropTypes.bool,
   className: PropTypes.string
 };
 var _default = TextWithIcon;

package/dist/lib/components/TextWithIcon/TextWithIconItem.css

@@ -13,6 +13,14 @@ h5 {
       -ms-flex-align: center;
           align-items: center;
 }
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon-item {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
 .mfui-text-with-icon-item:not(:first-of-type) {
   margin-top: 16px;
 }
@@ -26,25 +34,16 @@ h5 {
   min-width: 40px;
   height: 40px;
   min-height: 40px;
-  margin-right: 16px;
   overflow: hidden;
 }
-@media screen and (max-width: 767px) {
-  .mfui-text-with-icon-item_centering-on-mobile {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+@media screen and (min-width: 768px) {
+  .mfui-text-with-icon-item__svg-icon {
+    margin-right: 16px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-text-with-icon-item_centering-on-mobile .mfui-text-with-icon-item__text {
+  .mfui-text-with-icon-item__text {
     margin-top: 12px;
     text-align: center;
   }
 }
-@media screen and (max-width: 767px) {
-  .mfui-text-with-icon-item_centering-on-mobile .mfui-text-with-icon-item__svg-icon {
-    margin-right: 0;
-  }
-}

package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts

@@ -11,8 +11,6 @@ export interface ITextWithIconItem {
     dataAttrs?: {
         root?: Record<string, string>;
     };
-    /** Выравнивание по центру на мобильных */
-    centeringOnMobile?: boolean;
     /** Дополнительный класс для корневого элемента */
     className?: string;
 }

package/dist/lib/components/TextWithIcon/TextWithIconItem.js

@@ -28,13 +28,9 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
       icon = _ref.icon,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
-      _ref$centeringOnMobil = _ref.centeringOnMobile,
-      centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn({
-      'centering-on-mobile': centeringOnMobile
-    }, [className]),
+    className: cn([className]),
     ref: rootRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon')
@@ -52,7 +48,6 @@ TextWithIconItem.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
-  centeringOnMobile: PropTypes.bool,
   className: PropTypes.string
 };
 var _default = TextWithIconItem;

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

@@ -84,8 +84,9 @@ h5 {
 .mfui-video-banner__background-image {
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .mfui-video-banner__content {
   position: relative;
@@ -190,7 +191,7 @@ h5 {
 }
 .mfui-video-banner__cost {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   margin-bottom: 18px;
 }
 .mfui-video-banner__value {

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

@@ -78,8 +78,6 @@ interface IVideoBannerProps {
     videoSrc?: string;
     /** Тип видео */
     videoType?: VideoType;
-    /** Разрешить проигрывать видео на мобильном разрешении */
-    videoMobile?: boolean;
     /** Наличие звука в видео */
     isMuted?: boolean;
     /** Изображение для мобильного разрешения */

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

@@ -95,17 +95,20 @@ var VideoBanner = function VideoBanner(_ref2) {
       content = _ref2.content,
       _ref2$isMuted = _ref2.isMuted,
       isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
-      breadcrumbs = _ref2.breadcrumbs,
-      _ref2$videoMobile = _ref2.videoMobile,
-      videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
+      breadcrumbs = _ref2.breadcrumbs;
 
   var _React$useState = _react["default"].useState(true),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       isMobile = _React$useState2[0],
       setIsMobile = _React$useState2[1];
 
+  var _React$useState3 = _react["default"].useState(imageMobile),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      imageSrc = _React$useState4[0],
+      setImageSrc = _React$useState4[1];
+
   var isVideoData = !!videoSrc && !!videoType;
-  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
+  var isRenderVideo = !isMobile && isVideoData;
 
   var renderContent = _react["default"].useCallback(function (_ref3) {
     var title = _ref3.title,
@@ -221,8 +224,27 @@ var VideoBanner = function VideoBanner(_ref2) {
   }, [videoType, videoSrc, isMuted, classes.video]);
 
   _react["default"].useEffect(function () {
+    var getImageSrc = function getImageSrc() {
+      var windowWidth = window.innerWidth;
+
+      switch (true) {
+        case windowWidth >= _uiHelpers.breakpoints.DESKTOP_MIDDLE_START:
+          return imageDesktopWide;
+
+        case windowWidth >= _uiHelpers.breakpoints.DESKTOP_SMALL_START && windowWidth <= _uiHelpers.breakpoints.DESKTOP_SMALL_END:
+          return imageDesktop;
+
+        case windowWidth >= _uiHelpers.breakpoints.MOBILE_BIG_START && windowWidth <= _uiHelpers.breakpoints.MOBILE_BIG_END:
+          return imageTablet;
+
+        default:
+          return imageMobile;
+      }
+    };
+
     var resizeHandler = function resizeHandler() {
       setIsMobile(window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START);
+      setImageSrc(getImageSrc());
     };
 
     var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
@@ -231,7 +253,7 @@ var VideoBanner = function VideoBanner(_ref2) {
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
-  }, [setIsMobile]);
+  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
 
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes.root]),
@@ -249,20 +271,12 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("picture", null, /*#__PURE__*/_react["default"].createElement("source", {
-    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
-    srcSet: imageDesktopWide
-  }), /*#__PURE__*/_react["default"].createElement("source", {
-    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
-    srcSet: imageDesktop
-  }), /*#__PURE__*/_react["default"].createElement("source", {
-    media: "(min-width: ".concat(_uiHelpers.breakpoints.MOBILE_BIG_START, "px)"),
-    srcSet: imageTablet
-  }), /*#__PURE__*/_react["default"].createElement("img", {
-    className: cn('background-image'),
-    src: imageMobile,
-    alt: ""
-  })))));
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    },
+    className: cn('background-image')
+  }))));
 };
 
 VideoBanner.propTypes = {
@@ -285,7 +299,6 @@ VideoBanner.propTypes = {
   }), PropTypes.any])]),
   videoSrc: PropTypes.string,
   videoType: PropTypes.oneOf(Object.values(VideoType)),
-  videoMobile: PropTypes.bool,
   content: PropTypes.shape({
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "3.4.1",
+  "version": "4.0.0-beta.3",
   "files": [
     "dist"
   ],
@@ -52,7 +52,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.2.2",
+    "@megafon/ui-icons": "^2.0.0-beta.1",
     "@svgr/core": "^2.4.1",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^3.10.1",
+    "@megafon/ui-core": "^4.0.0-beta.3",
     "@megafon/ui-helpers": "^2.1.2",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "ab5598d6f428c21c22d939ed586a3795b3d6467a"
+  "gitHead": "671bc9c3df88aa07361efdcaf196095f957fbf64"
 }