@megafon/ui-shared 6.0.0 → 6.1.1

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

@@ -698,13 +698,50 @@ h5 {
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-instructions__articles-title-block {
-    width: 55%;
+    width: 100%;
+    max-width: 530px;
   }
 }
+.mfui-instructions__articles-title-block_with-numeration {
+  text-align: left;
+}
 .mfui-instructions__articles-title {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-instructions__articles-num {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 16px;
+  border-radius: 50%;
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__articles-num {
+    display: none;
+  }
 }
 .mfui-instructions__picture_background_spbSky0 {
   border-radius: 12px;

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

@@ -96,6 +96,8 @@ export interface IInstructionsProps {
     arrowsTheme?: ArrowThemeType;
     /** Вертикальный порядок элементов на мобильных устройствах и планшетах */
     elementOrder?: ElementOrderType;
+    /** Показать нумерацию пунктов инструкции на мобильных устройствах */
+    showMobileNumeration?: boolean;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }

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

@@ -101,6 +101,7 @@ var Instructions = function Instructions(_ref) {
       arrowsTheme = _ref$arrowsTheme === void 0 ? arrowTheme.DARK : _ref$arrowsTheme,
       _ref$elementOrder = _ref.elementOrder,
       elementOrder = _ref$elementOrder === void 0 ? 'default' : _ref$elementOrder,
+      showMobileNumeration = _ref.showMobileNumeration,
       children = _ref.children;
 
   var _React$useState = _react["default"].useState(),
@@ -284,7 +285,7 @@ var Instructions = function Instructions(_ref) {
           className: cn('articles-item-dot-number')
         }, i + 1)), /*#__PURE__*/_react["default"].createElement("div", {
           className: cn('articles-item-title', [desktopItemTitle])
-        }, itemTitle))
+        }, (0, _uiHelpers.convert)(itemTitle, _uiHelpers.textConvertConfig)))
       );
     }));
   }, [desktopInstructionItem, desktopItemTitle, getActiveCustomClass, handleArticleClick, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, instructionItem, instructionItems, slideIndex, text]);
@@ -297,18 +298,22 @@ var Instructions = function Instructions(_ref) {
       "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('articles-title-block', {
-        reversed: isMobileReversed
+        reversed: isMobileReversed,
+        'with-numeration': showMobileNumeration
       })
     }, instructionItems.map(function (_ref6, i) {
       var itemTitle = _ref6.title;
-      return slideIndex === i && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+      return slideIndex === i && /*#__PURE__*/_react["default"].createElement("div", {
         key: i,
-        "data-index": i
-      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
-        className: cn('articles-title', [mobileItemTitle])
-      }), itemTitle);
+        "data-index": i,
+        className: cn('articles-title')
+      }, showMobileNumeration && /*#__PURE__*/_react["default"].createElement("span", {
+        className: cn('articles-num')
+      }, i + 1), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
+        className: cn('articles-title-text', [mobileItemTitle])
+      }), (0, _uiHelpers.convert)(itemTitle, _uiHelpers.textConvertConfig)));
     })));
-  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed]);
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed, showMobileNumeration]);
 
   var renderArrows = _react["default"].useCallback(function () {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiCore.NavArrow, {

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

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

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

@@ -0,0 +1 @@
+export declare const setRelAttribute: (rel?: string | undefined, target?: "_self" | "_blank" | "_parent" | "_top" | undefined) => string | undefined;

package/dist/lib/helpers/setRelAttribute.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setRelAttribute = void 0;
+
+var setRelAttribute = function setRelAttribute(rel, target) {
+  if (rel) {
+    return rel;
+  }
+
+  if (target !== '_self') {
+    return 'noreferrer noopener';
+  }
+
+  return undefined;
+};
+
+exports.setRelAttribute = setRelAttribute;

package/dist/lib/hooks/useResolutions.d.ts

@@ -0,0 +1,7 @@
+export declare type useResolutionsReturnType = {
+    isDesktop: boolean;
+    isMobile: boolean;
+    isTablet: boolean;
+};
+declare const useResolutions: () => useResolutionsReturnType;
+export default useResolutions;

package/dist/lib/hooks/useResolutions.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.concat.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var MOBILE_MIDDLE_END = _uiHelpers.breakpoints.MOBILE_MIDDLE_END,
+    MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START,
+    MOBILE_BIG_END = _uiHelpers.breakpoints.MOBILE_BIG_END,
+    DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START;
+
+var useResolutions = function useResolutions() {
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isMobile = _React$useState2[0],
+      setIsMobile = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(false),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      isTablet = _React$useState4[0],
+      setIsTablet = _React$useState4[1];
+
+  var _React$useState5 = _react["default"].useState(false),
+      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+      isDesktop = _React$useState6[0],
+      setIsDesktop = _React$useState6[1];
+
+  _react["default"].useEffect(function () {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    var _window = window,
+        matchMedia = _window.matchMedia;
+    var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
+    var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
+    var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
+
+    var handleResize = function handleResize() {
+      setIsMobile(mobileQuery.matches);
+      setIsTablet(tabletQuery.matches);
+      setIsDesktop(desktopQuery.matches);
+    };
+
+    handleResize();
+    mobileQuery.addEventListener('change', handleResize);
+    tabletQuery.addEventListener('change', handleResize);
+    desktopQuery.addEventListener('change', handleResize);
+    return function () {
+      mobileQuery.removeEventListener('change', handleResize);
+      tabletQuery.removeEventListener('change', handleResize);
+      desktopQuery.removeEventListener('change', handleResize);
+    };
+  }, []);
+
+  return {
+    isDesktop: isDesktop,
+    isMobile: isMobile,
+    isTablet: isTablet
+  };
+};
+
+var _default = useResolutions;
+exports["default"] = _default;

package/dist/lib/index.d.ts

@@ -7,6 +7,8 @@ export { default as BannerBox } from './components/BannerBox/BannerBox';
 export { default as BenefitsIcons } from './components/BenefitsIcons/BenefitsIcons';
 export { default as BenefitsIconsTile } from './components/BenefitsIcons/BenefitsIconsTile';
 export { default as BenefitsPictures } from './components/BenefitsPictures/BenefitsPictures';
+export { default as BlogBox } from './components/BlogBox/BlogBox';
+export { default as BlogBoxTile } from './components/BlogBox/components/BlogBoxTile';
 export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { default as BreadcrumbsItem } from './components/Breadcrumbs/components/BreadcrumbsItem';
 export { default as ButtonBanner } from './components/ButtonBanner/ButtonBanner';

package/dist/lib/index.js

@@ -57,6 +57,18 @@ Object.defineProperty(exports, "BenefitsPictures", {
     return _BenefitsPictures["default"];
   }
 });
+Object.defineProperty(exports, "BlogBox", {
+  enumerable: true,
+  get: function get() {
+    return _BlogBox["default"];
+  }
+});
+Object.defineProperty(exports, "BlogBoxTile", {
+  enumerable: true,
+  get: function get() {
+    return _BlogBoxTile["default"];
+  }
+});
 Object.defineProperty(exports, "Breadcrumbs", {
   enumerable: true,
   get: function get() {
@@ -298,6 +310,10 @@ var _BenefitsIconsTile = _interopRequireDefault(require("./components/BenefitsIc
 
 var _BenefitsPictures = _interopRequireDefault(require("./components/BenefitsPictures/BenefitsPictures"));
 
+var _BlogBox = _interopRequireDefault(require("./components/BlogBox/BlogBox"));
+
+var _BlogBoxTile = _interopRequireDefault(require("./components/BlogBox/components/BlogBoxTile"));
+
 var _Breadcrumbs = _interopRequireDefault(require("./components/Breadcrumbs/Breadcrumbs"));
 
 var _BreadcrumbsItem = _interopRequireDefault(require("./components/Breadcrumbs/components/BreadcrumbsItem"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "6.0.0",
+  "version": "6.1.1",
   "files": [
     "dist"
   ],
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^6.0.1",
+    "@megafon/ui-core": "^6.1.0",
     "@megafon/ui-helpers": "^2.6.0",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "7a9fef927d6f5c44bebc26f35828cecdf2d8f50e"
+  "gitHead": "e6cc92756fe3c9cb7157b8985ab4032c510e07a6"
 }