@megafon/ui-shared 2.0.0-beta.224 → 2.0.0-beta.228

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 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.228](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.227...@megafon/ui-shared@2.0.0-beta.228) (2021-09-27)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
+# [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)
 
 

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;
 }
@@ -2806,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,24 +171,24 @@ 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 {
@@ -197,24 +197,24 @@ h5 {
 }
 .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 {
@@ -278,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;
@@ -311,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) {
@@ -323,9 +323,9 @@ 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;
@@ -341,8 +341,8 @@ h5 {
   }
 }
 .mfui-beta-instructions__articles-item {
-  opacity: 0.5;
   position: relative;
+  opacity: 0.5;
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-instructions__articles-item {
@@ -360,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) {
@@ -376,11 +376,11 @@ 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;
@@ -396,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 {
@@ -427,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 {
@@ -454,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/es/components/PageTitle/PageTitle.css

@@ -41,9 +41,9 @@ 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__badge_under-breadcrumbs {

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