@megafon/ui-shared 4.0.0-beta.4 → 4.0.0-beta.7

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [4.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.0.0-beta.3...@megafon/ui-shared@4.0.0-beta.4) (2022-06-23)
+# [4.0.0-beta.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.0.0-beta.6...@megafon/ui-shared@4.0.0-beta.7) (2022-07-05)
 
 **Note:** Version bump only for package @megafon/ui-shared
 
@@ -11,25 +11,37 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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)
+# [4.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.4.3...@megafon/ui-shared@4.0.0-beta.6) (2022-06-29)
+
+
+### Bug Fixes
+
+* **breadcrumbs:** change default color prop value from black to default ([5c30998](https://github.com/MegafonWebLab/megafon-ui/commit/5c30998fe192be143add5af873c08cf51deb299e))
 
 
 ### Features
 
-* **tabs:** update by new design ([0a8a175](https://github.com/MegafonWebLab/megafon-ui/commit/0a8a175aa5e30758742c1c663da8a406e30dc3dd))
+* **paragraph:** remove prop size; add new prop; add 'pale' option to colors ([ffb6bc7](https://github.com/MegafonWebLab/megafon-ui/commit/ffb6bc709a4ef91536e359d5f9edc5501caf0c2c))
+* **tabs:** update by new design ([20ae2cc](https://github.com/MegafonWebLab/megafon-ui/commit/20ae2cc695e1245b9cd06fe37a9e4e3bb0c7eaae))
+* **text-with-icon:** delete centering in mobile resolution ([c68f98f](https://github.com/MegafonWebLab/megafon-ui/commit/c68f98f0b69cbe0e416de4d526c70c009213647e))
 
 
 ### BREAKING CHANGES
 
+* **text-with-icon:** centering in mobile resolution was removed according guides
 * **tabs:** new prop autoWidth added
 size prop small vallue removed
 new sizes
+* **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'.
+* **paragraph:** prop 'size' is no longer exists.
+use component Caption instead of Paragraph size="small"
 
 
 
 
 
-# [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)
+## [3.4.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.4.2...@megafon/ui-shared@3.4.3) (2022-06-28)
 
 **Note:** Version bump only for package @megafon/ui-shared
 
@@ -37,7 +49,7 @@ new sizes
 
 
 
-# [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)
+## [3.4.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.4.1...@megafon/ui-shared@3.4.2) (2022-06-21)
 
 **Note:** Version bump only for package @megafon/ui-shared
 
@@ -45,31 +57,47 @@ new sizes
 
 
 
-# [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.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
+
 
 
-### Bug Fixes
 
-* **breadcrumbs:** change default color prop value from black to default ([9c2c0fc](https://github.com/MegafonWebLab/megafon-ui/commit/9c2c0fca7d559a67d3d167b2a8a3c30b420ab7da))
+
+# [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)
 
 
 ### Features
 
-* **paragraph:** remove prop size; add new prop; add 'pale' option to colors ([ef15841](https://github.com/MegafonWebLab/megafon-ui/commit/ef15841474473739d3ac88da7a8737e183ff288a))
+* **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))
 
 
-### BREAKING CHANGES
 
-* **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.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.4...@megafon/ui-shared@3.3.5) (2022-05-27)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
 
 
 
-## [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)
+
+## [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)
+
+
+### 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))
+
+
+
+
+
+## [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)
 
 **Note:** Version bump only for package @megafon/ui-shared
 
@@ -77,7 +105,7 @@ for keep black color on light background use 'black' value for prop 'color'.
 
 
 
-## [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)
+## [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)
 
 **Note:** Version bump only for package @megafon/ui-shared
 
@@ -85,6 +113,25 @@ 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)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
+# [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)
+
+
+### Features
+
+* **videobanner:** add proprety for mobile video, use picture for background image ([c21c927](https://github.com/MegafonWebLab/megafon-ui/commit/c21c9278d2ff1e192195a5113d43d50753fd02c5))
+
+
+
+
+
 ## [3.2.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.2.1...@megafon/ui-shared@3.2.2) (2022-04-13)
 
 **Note:** Version bump only for package @megafon/ui-shared

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

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

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,7 +45,6 @@ h5 {
   }
 }
 .mfui-table__top-shadow {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -58,7 +57,6 @@ 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;
@@ -70,7 +68,6 @@ 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;
@@ -84,7 +81,6 @@ 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;
@@ -142,7 +138,6 @@ 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

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

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

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

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

@@ -11,19 +11,34 @@ 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([className]),
+    className: cn({
+      'centering-on-mobile': centeringOnMobile
+    }, [className]),
     ref: rootRef
-  }, 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)));
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isFullWidth ? renderContent() : renderContentWithGrid());
 };
 
 TextWithIcon.propTypes = {
@@ -35,6 +50,8 @@ 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,14 +13,6 @@ 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;
 }
@@ -34,16 +26,6 @@ h5 {
   min-width: 40px;
   height: 40px;
   min-height: 40px;
+  margin-right: 16px;
   overflow: hidden;
 }
-@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__text {
-    margin-top: 12px;
-    text-align: center;
-  }
-}

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

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

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

@@ -10,9 +10,13 @@ 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([className]),
+    className: cn({
+      'centering-on-mobile': centeringOnMobile
+    }, [className]),
     ref: rootRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon')
@@ -30,6 +34,7 @@ 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,9 +84,8 @@ h5 {
 .mfui-video-banner__background-image {
   width: 100%;
   height: 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .mfui-video-banner__content {
   position: relative;

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

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

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

@@ -63,20 +63,17 @@ var VideoBanner = function VideoBanner(_ref2) {
       content = _ref2.content,
       _ref2$isMuted = _ref2.isMuted,
       isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
-      breadcrumbs = _ref2.breadcrumbs;
+      breadcrumbs = _ref2.breadcrumbs,
+      _ref2$videoMobile = _ref2.videoMobile,
+      videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
 
   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 && isVideoData;
+  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
   var renderContent = React.useCallback(function (_ref3) {
     var title = _ref3.title,
         description = _ref3.description,
@@ -189,27 +186,8 @@ 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);
@@ -218,7 +196,7 @@ var VideoBanner = function VideoBanner(_ref2) {
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
-  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
+  }, [setIsMobile]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes.root]),
     ref: rootRef
@@ -235,12 +213,20 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundImage: "url(".concat(imageSrc, ")")
-    },
-    className: cn('background-image')
-  }))));
+  }), 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: ""
+  })))));
 };
 
 VideoBanner.propTypes = {
@@ -263,6 +249,7 @@ 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/Instructions/Instructions.css

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

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,7 +45,6 @@ h5 {
   }
 }
 .mfui-table__top-shadow {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -58,7 +57,6 @@ 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;
@@ -70,7 +68,6 @@ 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;
@@ -84,7 +81,6 @@ 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;
@@ -142,7 +138,6 @@ 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

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

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

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

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

@@ -30,19 +30,34 @@ 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([className]),
+    className: cn({
+      'centering-on-mobile': centeringOnMobile
+    }, [className]),
     ref: rootRef
-  }, (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)));
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isFullWidth ? renderContent() : renderContentWithGrid());
 };
 
 TextWithIcon.propTypes = {
@@ -54,6 +69,8 @@ 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,14 +13,6 @@ 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;
 }
@@ -34,16 +26,6 @@ h5 {
   min-width: 40px;
   height: 40px;
   min-height: 40px;
+  margin-right: 16px;
   overflow: hidden;
 }
-@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__text {
-    margin-top: 12px;
-    text-align: center;
-  }
-}

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

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

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

@@ -28,9 +28,13 @@ 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([className]),
+    className: cn({
+      'centering-on-mobile': centeringOnMobile
+    }, [className]),
     ref: rootRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon')
@@ -48,6 +52,7 @@ 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,9 +84,8 @@ h5 {
 .mfui-video-banner__background-image {
   width: 100%;
   height: 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .mfui-video-banner__content {
   position: relative;

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

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

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

@@ -95,20 +95,17 @@ var VideoBanner = function VideoBanner(_ref2) {
       content = _ref2.content,
       _ref2$isMuted = _ref2.isMuted,
       isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
-      breadcrumbs = _ref2.breadcrumbs;
+      breadcrumbs = _ref2.breadcrumbs,
+      _ref2$videoMobile = _ref2.videoMobile,
+      videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
 
   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 && isVideoData;
+  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
 
   var renderContent = _react["default"].useCallback(function (_ref3) {
     var title = _ref3.title,
@@ -224,27 +221,8 @@ 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);
@@ -253,7 +231,7 @@ var VideoBanner = function VideoBanner(_ref2) {
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
-  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
+  }, [setIsMobile]);
 
   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]),
@@ -271,12 +249,20 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      backgroundImage: "url(".concat(imageSrc, ")")
-    },
-    className: cn('background-image')
-  }))));
+  }), 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: ""
+  })))));
 };
 
 VideoBanner.propTypes = {
@@ -299,6 +285,7 @@ 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": "4.0.0-beta.4",
+  "version": "4.0.0-beta.7",
   "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": "^2.0.0-beta.1",
+    "@megafon/ui-icons": "^2.0.0-beta.2",
     "@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": "^4.0.0-beta.4",
+    "@megafon/ui-core": "^4.0.0-beta.6",
     "@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": "f0302119d184fe32ce8b4a7f74d02292feff9a4d"
+  "gitHead": "7c2d8ac800a977892811ac71bc542e7e193404da"
 }