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

package/CHANGELOG.md

@@ -3,6 +3,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-beta.227](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.226...@megafon/ui-shared@2.0.0-beta.227) (2021-09-27)
+
+
+### Bug Fixes
+
+* **.stylelintrc.json:** move .stylelint.json to root and extends package configs from it ([ae5eac3](https://github.com/MegafonWebLab/megafon-ui/commit/ae5eac3dbbbea00413cea6b45ecbc22babb723c4))
+* **buttonbanner.less:** fix [@media](https://github.com/media) query position ([955b9b4](https://github.com/MegafonWebLab/megafon-ui/commit/955b9b416933078340e7ad9482073da25ba3a0eb))
+* **textboxpicture:** fix modifiers names ([52e713d](https://github.com/MegafonWebLab/megafon-ui/commit/52e713d60edb8da68a0dafe62df08baec6ad23bf))
+* **ui-shared:** add frontend-presets configs; fix stylelint errors ([06df02d](https://github.com/MegafonWebLab/megafon-ui/commit/06df02d5218c611282fa5aea079bca46afcdbd56))
+
+
+
+
+
+# [2.0.0-beta.226](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.225...@megafon/ui-shared@2.0.0-beta.226) (2021-09-20)
+
+
+### Bug Fixes
+
+* add frontend-presets for ui-core package and fix stylelint errors ([752bce5](https://github.com/MegafonWebLab/megafon-ui/commit/752bce59cfd31494e85c11faa4795ca7ee89adcc))
+
+
+### Features
+
+* **card:** extend type of title and text props ([e275054](https://github.com/MegafonWebLab/megafon-ui/commit/e275054d304ee8870186b21e2e871a94a0e59ca2))
+* **textboxpictures:** add TextBoxPicture component, should be used only in TexBox component ([a88265f](https://github.com/MegafonWebLab/megafon-ui/commit/a88265f5938f8a27fe51b7cb39fa14ef2e4bdb7f))
+
+
+
+
+
+# [2.0.0-beta.225](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.224...@megafon/ui-shared@2.0.0-beta.225) (2021-09-14)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
+# [2.0.0-beta.224](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.223...@megafon/ui-shared@2.0.0-beta.224) (2021-09-13)
+
+
+### Bug Fixes
+
+* **instructions:** removed javascript resolution tracking ([7cfaddb](https://github.com/MegafonWebLab/megafon-ui/commit/7cfaddb3cda52c671b5541e42ff29bd5864809a5))
+
+
+### Features
+
+* **benefitsicons:** added classes for Grid and GridColumn ([be71f0c](https://github.com/MegafonWebLab/megafon-ui/commit/be71f0c32ae6e721c30baaa895acca7220a217c0))
+* **instructions:** fix style for Instructions ([acb53fa](https://github.com/MegafonWebLab/megafon-ui/commit/acb53fa8e8574c22631d89edf02c0503d091f72d))
+* **instructions:** fix style for iphone 12 mask ([4ae746b](https://github.com/MegafonWebLab/megafon-ui/commit/4ae746b9a347acaf5de29fdbc82082474d7ffcb7))
+* **pagetitle:** removed breadcrumbs from grid ([04c2c79](https://github.com/MegafonWebLab/megafon-ui/commit/04c2c794061dea920a7db6ed2f1303bbe48127b6))
+* **storebanner:** added new store button and update StoreBanner ([c13f37b](https://github.com/MegafonWebLab/megafon-ui/commit/c13f37bf8d2e5ed61f4d43c0e1d19eb4375a8c15))
+
+
+
+
+
 # [2.0.0-beta.223](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.222...@megafon/ui-shared@2.0.0-beta.223) (2021-08-30)
 
 

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

@@ -14,6 +14,8 @@ export interface IBenefitsIcons {
     classes?: {
         root?: string;
         item?: string;
+        grid?: string;
+        gridColumn?: string;
     };
 }
 declare const BenefitsIcons: React.FC<IBenefitsIcons>;

package/dist/es/components/BenefitsIcons/BenefitsIcons.js

@@ -125,13 +125,16 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement(Grid, {
+    className: classes.grid,
     guttersLeft: "medium",
     hAlign: hAlign
   }, items.map(function (_ref2, i) {
     var title = _ref2.title,
         text = _ref2.text,
         icon = _ref2.icon;
-    return /*#__PURE__*/React.createElement(GridColumn, _extends({}, getColumnConfig(iconPosition, items.length, i), {
+    return /*#__PURE__*/React.createElement(GridColumn, _extends({
+      className: classes.gridColumn
+    }, getColumnConfig(iconPosition, items.length, i), {
       key: i
     }), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
       className: classes.item,

package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-beta-benefits-icons {
-  font-size: 10px;
   overflow: hidden;
+  font-size: 10px;
 }
 .mfui-beta-benefits-icons__inner {
   margin-bottom: -48px;

package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css

@@ -23,8 +23,8 @@ h5 {
   margin-bottom: 0;
 }
 .mfui-beta-benefits-icons-tile__svg-icon {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   overflow: hidden;
 }
 .mfui-beta-benefits-icons-tile_icon-position_left-side {

package/dist/es/components/BenefitsPictures/BenfitsPictures.css

@@ -11,8 +11,8 @@ h5 {
 }
 .mfui-beta-benefits-pictures__img_h-align_center {
   display: block;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 .mfui-beta-benefits-pictures__title {
   margin-bottom: 12px;

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -26,8 +26,8 @@ h5 {
 }
 .mfui-beta-breadcrumbs__item {
   position: relative;
-  padding-left: 22px;
   margin-right: 10px;
+  padding-left: 22px;
 }
 .mfui-beta-breadcrumbs__item:before {
   content: '→';

package/dist/es/components/ButtonBanner/ButtonBanner.css

@@ -19,9 +19,9 @@ h5 {
 .mfui-beta-button-banner:before {
   content: '';
   position: absolute;
-  left: 0;
   top: 0;
   bottom: 0;
+  left: 0;
   width: 12px;
   background-color: #00B956;
   border-radius: 0 12px 12px 0;
@@ -33,8 +33,8 @@ h5 {
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-button-banner:before {
-    bottom: auto;
     right: 0;
+    bottom: auto;
     width: auto;
     height: 12px;
   }
@@ -45,8 +45,8 @@ h5 {
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-button-banner__content {
-    text-align: center;
     padding: 36px 16px 32px;
+    text-align: center;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
@@ -65,8 +65,6 @@ h5 {
   }
 }
 .mfui-beta-button-banner__media {
-  overflow: hidden;
-  height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -76,9 +74,11 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  height: 100%;
+  padding: 0 20px;
+  overflow: hidden;
   background-repeat: no-repeat;
   background-position: center;
-  padding: 0 20px;
   border-radius: 0 8px 8px 0;
 }
 @media screen and (max-width: 767px) {

package/dist/es/components/Card/Card.css

@@ -10,10 +10,10 @@ h5 {
   display: -ms-flexbox;
   display: flex;
   border-radius: 8px;
+  overflow: hidden;
+  background-color: #FFFFFF;
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
-  background-color: #FFFFFF;
-  overflow: hidden;
 }
 .mfui-beta-card__inner {
   display: -webkit-box;
@@ -28,9 +28,9 @@ h5 {
           flex-grow: 0;
   -ms-flex-negative: 1;
       flex-shrink: 1;
-  width: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  width: 100%;
   padding: 32px 20px;
 }
 @media screen and (max-width: 767px) {
@@ -39,7 +39,11 @@ h5 {
   }
 }
 .mfui-beta-card__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
   margin-top: 12px;
+  color: #333333;
 }
 .mfui-beta-card__btns-wrapper {
   display: -webkit-box;
@@ -47,14 +51,14 @@ h5 {
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding-top: 12px;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
   margin-top: auto;
+  padding-top: 12px;
 }
 .mfui-beta-card__btns-wrapper_left-align {
   -webkit-box-pack: start;
@@ -88,21 +92,21 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   margin-top: -32px;
-  margin-left: -20px;
   margin-right: -20px;
+  margin-left: -20px;
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-card__pic-wrapper_img {
     margin-top: -24px;
-    margin-left: -16px;
     margin-right: -16px;
+    margin-left: -16px;
   }
 }
 .mfui-beta-card__pic-wrapper_object-fit_fill img {

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

@@ -43,9 +43,9 @@ export interface ICard {
     /** Иконка в карточке */
     svgSrc?: React.ReactNode;
     /** Заголовок карточки */
-    title: string;
+    title: string | React.ReactNode[] | React.ReactNode;
     /** Текст карточки */
-    text?: string;
+    text?: string | React.ReactNode[] | React.ReactNode;
     /** Данные для кнопки */
     button?: IButton;
     /** Данные для ссылки */

package/dist/es/components/Card/Card.js

@@ -3,7 +3,7 @@ import "core-js/modules/es.string.link";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import "./Card.css";
-import { Header, Paragraph, Button, TextLink, Link } from '@megafon/ui-core';
+import { Header, Button, TextLink, Link } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 export var Target = {
@@ -134,8 +134,7 @@ var Card = function Card(_ref) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null, renderImage(), /*#__PURE__*/React.createElement(Header, {
     as: "h3",
     className: cn('title')
-  }, title), !!text && /*#__PURE__*/React.createElement(Paragraph, {
-    hasMargin: false,
+  }, title), !!text && /*#__PURE__*/React.createElement("div", {
     className: cn('text')
   }, text), renderBtnsWrapper())));
 };
@@ -154,8 +153,8 @@ Card.propTypes = {
   }), PropTypes.any])]),
   imageSrc: PropTypes.string,
   svgSrc: PropTypes.node,
-  title: PropTypes.string.isRequired,
-  text: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   button: PropTypes.shape({
     title: PropTypes.string.isRequired,
     href: PropTypes.string.isRequired,

package/dist/es/components/Container/Container.css

@@ -8,22 +8,6 @@ h5 {
 .mfui-beta-container {
   padding-bottom: 96px;
 }
-.mfui-beta-container_disable-padding-top {
-  padding-top: 0 !important;
-}
-.mfui-beta-container_disable-padding-bottom {
-  padding-bottom: 0 !important;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-container {
-    padding-bottom: 72px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-container {
-    padding-bottom: 48px;
-  }
-}
 .mfui-beta-container_bg-color_default {
   background-color: #FFFFFF;
 }
@@ -39,6 +23,16 @@ h5 {
 .mfui-beta-container_bg-color_purple {
   background-color: #731982;
 }
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-container {
+    padding-bottom: 72px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-container {
+    padding-bottom: 48px;
+  }
+}
 .mfui-beta-container_bg-color_default + .mfui-beta-container_bg-color_light-gray {
   padding-top: 96px;
 }
@@ -1897,10 +1891,18 @@ h5 {
     margin-top: 40px;
   }
 }
-.mfui-beta-container .mfui-beta-property + .mfui-beta-property,
+.mfui-beta-container .mfui-beta-property + .mfui-beta-property {
+  margin-top: 0 !important;
+}
 .mfui-beta-container .mfui-beta-property + .mfui-beta-button-link-box,
 .mfui-beta-container .mfui-beta-property + .mfui-beta-download-links {
-  margin-top: 0 !important;
+  margin-top: 48px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-container .mfui-beta-property + .mfui-beta-button-link-box,
+  .mfui-beta-container .mfui-beta-property + .mfui-beta-download-links {
+    margin-top: 32px;
+  }
 }
 .mfui-beta-container .mfui-beta-table + .mfui-beta-benefits-icons {
   margin-top: 56px;
@@ -2798,3 +2800,9 @@ h5 {
 .mfui-beta-container .mfui-beta-page-title + .mfui-beta-button-link-box {
   margin-top: 0 !important;
 }
+.mfui-beta-container_disable-padding-top {
+  padding-top: 0 !important;
+}
+.mfui-beta-container_disable-padding-bottom {
+  padding-bottom: 0 !important;
+}

package/dist/es/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 {