@megafon/ui-shared 3.3.4 → 3.4.1

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 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
+
+
+
+
+
+# [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
+
+* **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))
+
+
+
+
+
+## [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.3.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.3...@megafon/ui-shared@3.3.4) (2022-05-24)
 
 

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

@@ -78,6 +78,10 @@ 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,
@@ -94,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
@@ -110,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', {
@@ -142,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
@@ -171,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/TextWithIcon/TextWithIcon.css

@@ -9,7 +9,7 @@ h5 {
   margin-bottom: 24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-text-with-icon__header {
+  .mfui-text-with-icon_centering-on-mobile .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,25 @@ 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_centering-on-mobile {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-text-with-icon-item__text {
+  .mfui-text-with-icon-item_centering-on-mobile .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,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/lib/components/Instructions/Instructions.js

@@ -99,6 +99,11 @@ 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,
@@ -116,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
@@ -132,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, {
@@ -168,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
@@ -198,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/TextWithIcon/TextWithIcon.css

@@ -9,7 +9,7 @@ h5 {
   margin-bottom: 24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-text-with-icon__header {
+  .mfui-text-with-icon_centering-on-mobile .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,25 @@ 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_centering-on-mobile {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-text-with-icon-item__text {
+  .mfui-text-with-icon-item_centering-on-mobile .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,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "3.3.4",
+  "version": "3.4.1",
   "files": [
     "dist"
   ],
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^3.8.0",
+    "@megafon/ui-core": "^3.10.1",
     "@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": "77f60008b45f182e67a18e4dcb80ede81af5893c"
+  "gitHead": "ab5598d6f428c21c22d939ed586a3795b3d6467a"
 }