@megafon/ui-shared 2.0.0-beta.223 → 2.0.0-beta.227

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

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-beta-instructions__title_resolution_mobile {
-  text-align: center;
   margin-bottom: 32px;
+  text-align: center;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-beta-instructions__title_resolution_mobile {
@@ -67,10 +67,10 @@ h5 {
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-instructions__picture {
-    width: 50%;
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -103,15 +103,15 @@ h5 {
   .mfui-beta-instructions__img-wrapper:before {
     content: '';
     position: absolute;
-    display: block;
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
+    z-index: 2;
+    display: block;
     width: 324px;
     height: 1px;
     margin: 0 auto;
     background: #D8D8D8;
-    z-index: 2;
   }
 }
 .mfui-beta-instructions__device-screen {
@@ -136,8 +136,8 @@ h5 {
 .mfui-beta-instructions_mask_android .mfui-beta-instructions__swiper {
   position: absolute;
   top: 59px;
-  left: 0;
   right: 0;
+  left: 0;
   width: 204px;
   height: 363px;
   margin: auto;
@@ -171,45 +171,50 @@ h5 {
 }
 .mfui-beta-instructions_mask_new-iphone .mfui-beta-instructions__device-screen {
   position: relative;
+  z-index: 2;
   width: 100%;
   height: 490px;
   margin: auto;
   background: url('./img/newIphone.png') 50% no-repeat;
   background-size: contain;
-  z-index: 2;
 }
 .mfui-beta-instructions_mask_new-iphone .mfui-beta-instructions__swiper {
   position: absolute;
   top: 14px;
-  left: 0;
   right: 0;
+  left: 0;
+  z-index: 1;
   width: 214px;
   height: 462px;
   margin: auto;
-  overflow: hidden;
   border-radius: 20px;
-  z-index: 1;
+  overflow: hidden;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-instructions_mask_iphone-12 .mfui-beta-instructions__img-wrapper:before {
+    display: none;
+  }
 }
 .mfui-beta-instructions_mask_iphone-12 .mfui-beta-instructions__device-screen {
   position: relative;
+  z-index: 2;
   width: 100%;
   height: 490px;
   margin: auto;
   background: url('./img/iphone12.png') 50% no-repeat;
   background-size: contain;
-  z-index: 2;
 }
 .mfui-beta-instructions_mask_iphone-12 .mfui-beta-instructions__swiper {
   position: absolute;
   top: 14px;
-  left: 0;
   right: 0;
+  left: 0;
+  z-index: 1;
   width: 214px;
   height: 462px;
   margin: auto;
-  overflow: hidden;
   border-radius: 20px;
-  z-index: 1;
+  overflow: hidden;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-beta-instructions_mask_laptop .mfui-beta-instructions__img-wrapper {
@@ -273,8 +278,8 @@ h5 {
 .mfui-beta-instructions_mask_laptop .mfui-beta-instructions__swiper {
   position: absolute;
   top: 50%;
-  left: 50%;
   right: 0;
+  left: 50%;
   width: 78%;
   margin: auto;
   overflow: hidden;
@@ -306,10 +311,10 @@ h5 {
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-instructions__articles {
-    width: 50%;
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -318,16 +323,26 @@ h5 {
   }
 }
 .mfui-beta-instructions__articles-list {
-  list-style-type: none;
-  padding: 0;
   margin: 0;
+  padding: 0;
+  list-style-type: none;
 }
 .mfui-beta-instructions__articles-list_text-after {
   margin-bottom: 48px;
 }
+@media screen and (min-width: 1024px) {
+  .mfui-beta-instructions__articles-list_mobile {
+    display: none;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-instructions__articles-list_desktop {
+    display: none;
+  }
+}
 .mfui-beta-instructions__articles-item {
-  opacity: 0.5;
   position: relative;
+  opacity: 0.5;
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-instructions__articles-item {
@@ -345,9 +360,9 @@ h5 {
 .mfui-beta-instructions__articles-item:hover .mfui-beta-instructions__articles-item-dot:before,
 .mfui-beta-instructions__articles-item_active .mfui-beta-instructions__articles-item-dot:before {
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   background: #00B956;
 }
 @media screen and (min-width: 1024px) {
@@ -361,16 +376,16 @@ h5 {
   display: inline-block;
   width: 40px;
   height: 40px;
+  border-radius: 50%;
+  font-weight: 500;
   font-size: 15px;
   line-height: 40px;
-  font-weight: 500;
   text-align: center;
-  border-radius: 50%;
   -webkit-box-shadow: inset 0 0 0 1px #B2B2B2;
           box-shadow: inset 0 0 0 1px #B2B2B2;
   cursor: pointer;
 }
-@media screen and (max-width: 370px) {
+@media screen and (max-width: 479px) {
   .mfui-beta-instructions__articles-item-dot,
   .mfui-beta-instructions__articles-dot {
     min-width: 40px;
@@ -381,12 +396,12 @@ h5 {
   content: '';
   position: absolute;
   top: 50%;
-  left: 50%;
   right: 50%;
   bottom: 50%;
+  left: 50%;
+  border-radius: 50%;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
-  border-radius: 50%;
 }
 .mfui-beta-instructions__articles-item-dot-number,
 .mfui-beta-instructions__articles-dot-number {
@@ -412,8 +427,8 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  padding: 0;
   margin: 0;
+  padding: 0;
   list-style-type: none;
 }
 .mfui-beta-instructions__articles-dots_text-after {
@@ -432,11 +447,6 @@ h5 {
     margin-right: 40px;
   }
 }
-@media screen and (max-width: 370px) {
-  .mfui-beta-instructions__articles-dot {
-    margin-right: 12px;
-  }
-}
 .mfui-beta-instructions__articles-dot:hover,
 .mfui-beta-instructions__articles-dot_active {
   color: #FFFFFF;
@@ -444,9 +454,9 @@ h5 {
 .mfui-beta-instructions__articles-dot:hover:before,
 .mfui-beta-instructions__articles-dot_active:before {
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   background: #00B956;
 }
 .mfui-beta-instructions__articles-dot:last-child {

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

@@ -15,8 +15,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _lodash = _interopRequireDefault(require("lodash.throttle"));
-
 var _htmr = _interopRequireDefault(require("htmr"));
 
 var _react2 = require("swiper/react");
@@ -27,7 +25,6 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var THROTTLE_MILLISECONDS = 100;
 var pictureAlignTypes = {
   LEFT: 'left',
   RIGHT: 'right'
@@ -75,11 +72,6 @@ var Instructions = function Instructions(_ref) {
       slideIndex = _React$useState4[0],
       setSlideIndex = _React$useState4[1];
 
-  var _React$useState5 = _react["default"].useState(false),
-      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-      isMobile = _React$useState6[0],
-      setIsMobile = _React$useState6[1];
-
   var getSwiperInstance = _react["default"].useCallback(function (swiper) {
     setSwiperInstance(swiper);
     getSwiper && getSwiper(swiper);
@@ -93,11 +85,6 @@ var Instructions = function Instructions(_ref) {
     return articleIndex === activeIndex ? "".concat(instructionItem, " ").concat(activeInstructionItem) : instructionItem;
   }, [instructionItem, activeInstructionItem]);
 
-  var handleResize = _react["default"].useCallback(function () {
-    var isMobileScreen = window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START;
-    setIsMobile(isMobileScreen);
-  }, []);
-
   var handleArticleClick = _react["default"].useCallback(function (ind) {
     return function () {
       setSlideIndex(ind);
@@ -168,7 +155,8 @@ var Instructions = function Instructions(_ref) {
   var renderDesktopArticles = _react["default"].useCallback(function () {
     return /*#__PURE__*/_react["default"].createElement("ul", {
       className: cn('articles-list', {
-        'text-after': !!text
+        'text-after': !!text,
+        desktop: true
       })
     }, instructionItems.map(function (_ref3, ind) {
       var itemTitle = _ref3.title;
@@ -190,7 +178,11 @@ var Instructions = function Instructions(_ref) {
   }, [instructionItems, slideIndex, handleArticleClick, text]);
 
   var renderMobileArticles = _react["default"].useCallback(function () {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('articles-list', {
+        mobile: true
+      })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('articles-title-block')
     }, instructionItems.map(function (_ref4, ind) {
       var itemTitle = _ref4.title;
@@ -216,15 +208,6 @@ var Instructions = function Instructions(_ref) {
     })));
   }, [instructionItems, slideIndex, handleArticleClick, text]);
 
-  _react["default"].useEffect(function () {
-    var handleSetThrottled = (0, _lodash["default"])(handleResize, THROTTLE_MILLISECONDS);
-    handleResize();
-    window.addEventListener('resize', handleSetThrottled);
-    return function () {
-      window.removeEventListener('resize', handleSetThrottled);
-    };
-  }, [handleResize]);
-
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: cn({
       mask: pictureMask
@@ -244,7 +227,7 @@ var Instructions = function Instructions(_ref) {
     className: cn('articles', {
       align: pictureAlign
     })
-  }, renderTitle('desktop'), isMobile ? renderMobileArticles() : renderDesktopArticles(), text && renderText())))));
+  }, renderTitle('desktop'), renderMobileArticles(), renderDesktopArticles(), text && renderText())))));
 };
 
 Instructions.propTypes = {

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

@@ -41,37 +41,37 @@ h5 {
   display: inline-block;
   margin-top: 16px;
   padding: 2px 14px;
+  color: #FFFFFF;
   font-weight: 500;
   background-color: #731982;
-  color: #FFFFFF;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-page-title__breadcrumbs + .mfui-beta-page-title__badge {
+  .mfui-beta-page-title__badge_under-breadcrumbs {
     margin-top: 32px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-page-title__breadcrumbs + .mfui-beta-page-title__badge {
+  .mfui-beta-page-title__badge_under-breadcrumbs {
     margin-top: 24px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-page-title__breadcrumbs + .mfui-beta-page-title__badge {
+  .mfui-beta-page-title__badge_under-breadcrumbs {
     margin-top: 16px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-page-title__breadcrumbs + .mfui-beta-page-title__title {
+  .mfui-beta-page-title__title_under-breadcrumbs {
     margin-top: 60px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-page-title__breadcrumbs + .mfui-beta-page-title__title {
+  .mfui-beta-page-title__title_under-breadcrumbs {
     margin-top: 50px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-page-title__breadcrumbs + .mfui-beta-page-title__title {
+  .mfui-beta-page-title__title_under-breadcrumbs {
     margin-top: 45px;
   }
 }

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

@@ -35,14 +35,16 @@ var PageTitle = function PageTitle(_ref) {
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       rootRef = _ref.rootRef;
+  var isBreadcrumbs = !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length);
   var renderPageTitle = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
-      items: breadcrumbs,
-      className: cn('breadcrumbs', [classes.breadcrumbs])
-    }), badge && /*#__PURE__*/React.createElement("div", {
-      className: cn('badge')
+    return /*#__PURE__*/React.createElement(React.Fragment, null, badge && /*#__PURE__*/React.createElement("div", {
+      className: cn('badge', {
+        'under-breadcrumbs': isBreadcrumbs
+      })
     }, badge), /*#__PURE__*/React.createElement(_uiCore.Header, {
-      className: cn('title'),
+      className: cn('title', {
+        'under-breadcrumbs': isBreadcrumbs && !badge
+      }),
       as: "h1"
     }, title));
   }, [breadcrumbs, classes, badge, title]);
@@ -57,7 +59,10 @@ var PageTitle = function PageTitle(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cn([className]),
     ref: rootRef
-  }, isFullWidth ? renderPageTitle() : renderPageTitleWithGrid());
+  }, (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+    items: breadcrumbs,
+    className: cn('breadcrumbs', [classes.breadcrumbs])
+  }), isFullWidth ? renderPageTitle() : renderPageTitleWithGrid());
 };
 
 PageTitle.propTypes = {

package/dist/lib/components/Partners/Partners.css

@@ -46,8 +46,8 @@ h5 {
   position: absolute;
   top: 50%;
   left: 50%;
+  max-width: 100%;
+  max-height: 100%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  max-height: 100%;
-  max-width: 100%;
 }

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

@@ -34,10 +34,10 @@ h5 {
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-picture-with-description__picture {
-    width: 50%;
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -61,10 +61,10 @@ h5 {
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-picture-with-description__articles {
-    width: 50%;
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {

package/dist/lib/components/Property/Property.css

@@ -35,19 +35,19 @@ h5 {
   display: flex;
 }
 .mfui-beta-property__icon {
+  display: inline-block;
   width: 24px;
   height: 24px;
-  overflow: hidden;
   margin-right: 9px;
   margin-left: 1px;
-  display: inline-block;
+  overflow: hidden;
   vertical-align: bottom;
 }
 .mfui-beta-property__badge {
-  border-radius: 2px;
-  font-size: 12px;
   padding: 2px 8px;
+  border-radius: 2px;
   color: #FFFFFF;
+  font-size: 12px;
   background: #FFA717;
 }
 .mfui-beta-property__inner {
@@ -70,18 +70,18 @@ h5 {
   width: 100%;
 }
 .mfui-beta-property__value-wrapper {
-  width: 35%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  width: 35%;
 }
 @media screen and (max-width: 479px) {
   .mfui-beta-property__value-wrapper {
@@ -90,10 +90,10 @@ h5 {
   }
 }
 .mfui-beta-property__value-wrapper_merged {
-  border-left: 1px solid #D8D8D8;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  border-left: 1px solid #D8D8D8;
 }
 .mfui-beta-property__desc {
   margin-top: 8px;
@@ -105,9 +105,9 @@ h5 {
   max-width: 234px;
   white-space: pre-line;
   text-align: right;
+  font-weight: 500;
   font-size: 18px;
   line-height: 24px;
-  font-weight: 500;
   letter-spacing: 0.5px;
 }
 @media screen and (min-width: 1280px) {

package/dist/lib/components/Property/PropertyDescription.css

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-beta-property-description__collapse {
-  font-size: 12px;
   color: #34AAF2;
+  font-size: 12px;
   -webkit-text-decoration: underline dashed #34AAF2;
           text-decoration: underline dashed #34AAF2;
   cursor: pointer;

package/dist/lib/components/Steps/Steps.css

@@ -7,8 +7,8 @@ h5 {
 }
 .mfui-beta-steps {
   width: 66%;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 @media screen and (min-width: 1280px) {
   .mfui-beta-steps {
@@ -24,9 +24,9 @@ h5 {
   margin-bottom: 40px;
 }
 .mfui-beta-steps__list {
-  list-style: none;
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 .mfui-beta-steps__item {
   margin-bottom: 48px;

package/dist/lib/components/Steps/StepsItem.css

@@ -17,19 +17,19 @@ h5 {
   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;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background-color: #00B956;
   color: #FFFFFF;
+  background-color: #00B956;
 }
 .mfui-beta-steps-item__text-wrapper {
   padding-top: 8px;

package/dist/lib/components/StoreBanner/StoreBanner.css

@@ -29,8 +29,8 @@ h5 {
   background-image: url('./img/new-iphone.png');
 }
 .mfui-beta-store-banner_mask_new-iphone .mfui-beta-store-banner__screen {
-  z-index: 1;
   top: 13px;
+  z-index: 1;
   width: 87%;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
@@ -110,9 +110,9 @@ h5 {
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-store-banner__content {
+    padding-right: 15px;
     padding-bottom: 32px;
     padding-left: 15px;
-    padding-right: 15px;
     text-align: center;
   }
 }
@@ -122,12 +122,12 @@ h5 {
   background-size: cover;
 }
 .mfui-beta-store-banner__device-wrapper {
-  width: 235px;
   position: relative;
   bottom: calc(2 * (32px - 1px));
+  width: 235px;
   height: calc(100% + 2 * 32px + 30px);
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
   overflow: hidden;
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
@@ -187,17 +187,17 @@ h5 {
     height: 35px;
   }
 }
-.mfui-beta-store-banner__store-link_app-store {
+.mfui-beta-store-banner__store-link:not(:last-child) {
   margin-right: 16px;
   margin-bottom: 10px;
 }
 .mfui-beta-store-banner__stores {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
@@ -220,3 +220,46 @@ h5 {
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
+.mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code {
+    width: 120px;
+    height: 120px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code {
+    max-width: 88px;
+    max-height: 88px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code + .mfui-beta-store-banner__stores {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    max-width: 305px;
+  }
+}
+.mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code + .mfui-beta-store-banner__stores .mfui-beta-store-banner__store-link {
+  margin-right: 16px;
+}
+.mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code + .mfui-beta-store-banner__stores .mfui-beta-store-banner__store-link:not(:first-child) {
+  margin-right: 0;
+}
+.mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link {
+  width: 119px;
+  height: 35px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link:not(:first-child) {
+    margin-right: 0;
+  }
+}