@megafon/ui-shared 2.3.0 → 3.0.0-beta.11

package/dist/lib/components/ButtonBanner/ButtonBanner.css

@@ -7,8 +7,8 @@ h5 {
 }
 .mfui-button-banner {
   position: relative;
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
+  border: 1px solid var(--spbSky2);
+  background-color: var(--base);
   border-radius: 0 8px 8px 0;
 }
 @media screen and (max-width: 767px) {
@@ -23,7 +23,7 @@ h5 {
   bottom: 0;
   left: 0;
   width: 12px;
-  background-color: #00B956;
+  background-color: var(--brandGreen);
   border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {

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

@@ -16,9 +16,9 @@ export declare const ImageScaling: {
 };
 declare type ImageScalingType = typeof ImageScaling[keyof typeof ImageScaling];
 export interface IButtonBannerProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Дополнительный css класс для корневого элемента */
     className?: string;

package/dist/lib/components/ButtonBanner/ButtonBanner.js

@@ -79,7 +79,7 @@ var ButtonBanner = function ButtonBanner(_ref) {
     download: buttonDownload
   }, buttonText);
 
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       image: !!imageUrl,
       scaling: imageScaling
@@ -110,7 +110,9 @@ var ButtonBanner = function ButtonBanner(_ref) {
 };
 
 ButtonBanner.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

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

@@ -1,9 +1,9 @@
 import React, { Ref } from 'react';
 import './ButtonLinkBox.less';
 export interface IButtonLinkBoxProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js

@@ -46,7 +46,7 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       onButtonClick = _ref.onButtonClick,
       onLinkClick = _ref.onLinkClick;
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'h-align': hAlign
     }, [className, classes.root]),
@@ -73,7 +73,9 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
 };
 
 ButtonLinkBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

package/dist/lib/components/Card/Card.css

@@ -11,7 +11,7 @@ h5 {
   display: flex;
   border-radius: 8px;
   overflow: hidden;
-  background-color: #FFFFFF;
+  background-color: var(--background);
   -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);
 }
@@ -43,7 +43,7 @@ h5 {
   line-height: 24px;
   font-weight: 400;
   margin-top: 12px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-card__btns-wrapper {
   display: -webkit-box;
@@ -66,7 +66,7 @@ h5 {
           justify-content: flex-start;
 }
 .mfui-card__fake-link {
-  color: #34AAF2;
+  color: var(--systemBlue);
 }
 .mfui-card__button,
 .mfui-card__link,

package/dist/lib/components/Container/Container.css

@@ -9,19 +9,19 @@ h5 {
   padding-bottom: 96px;
 }
 .mfui-container_bg-color_default {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-container_bg-color_light-gray {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-container_bg-color_gray {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-container_bg-color_green {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-container_bg-color_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container {
@@ -344,9 +344,6 @@ h5 {
 .mfui-container .mfui-title-description-box + .mfui-download-links {
   margin-top: 32px;
 }
-.mfui-container .mfui-title-description-box + .mfui-text-with-icon {
-  margin-top: 24px;
-}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-title-description-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2233,9 +2230,6 @@ h5 {
 .mfui-container .mfui-text-box + .mfui-download-links {
   margin-top: 32px;
 }
-.mfui-container .mfui-text-box + .mfui-text-with-icon {
-  margin-top: 32px;
-}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-text-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2875,163 +2869,6 @@ h5 {
 .mfui-container .mfui-page-title + .mfui-button-link-box {
   margin-top: 0 !important;
 }
-.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-cards-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-video-block {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-partners {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-instructions {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-property {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-table {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-download-links {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-text-box {
-  margin-top: 32px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-store-banner {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-button-banner {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-steps {
-  margin-top: 40px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-video-block {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-partners {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-instructions {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-property {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-table {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-download-links {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-text-box {
-    margin-top: 32px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-steps {
-    margin-top: 48px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-video-block {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-partners {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-instructions {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-property {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-table {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-download-links {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-text-box {
-    margin-top: 32px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-steps {
-    margin-top: 56px;
-  }
-}
 .mfui-container_disable-padding-top {
   padding-top: 0 !important;
 }

package/dist/lib/components/DownloadLinks/DownloadLink.css

@@ -16,6 +16,7 @@ h5 {
   width: 40px;
   height: 40px;
   margin-right: 22px;
+  fill: var(--content);
 }
 @media screen and (max-width: 1023px) {
   .mfui-download-link__icon {
@@ -31,6 +32,6 @@ h5 {
   margin: 0;
   font-size: 12px;
   line-height: 16px;
-  color: #33333380;
+  color: var(--stcBlack5);
   text-transform: uppercase;
 }

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

@@ -111,7 +111,7 @@ h5 {
     width: 324px;
     height: 1px;
     margin: 0 auto;
-    background: #D8D8D8;
+    background: var(--spbSky2);
   }
 }
 .mfui-instructions__device-screen {
@@ -355,7 +355,7 @@ h5 {
 }
 .mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot,
 .mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot:before,
 .mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot:before {
@@ -363,7 +363,7 @@ h5 {
   right: 0;
   bottom: 0;
   left: 0;
-  background: #00B956;
+  background: var(--brandGreen);
 }
 @media screen and (min-width: 1024px) {
   .mfui-instructions__articles-item:last-child {
@@ -381,8 +381,8 @@ h5 {
   font-size: 15px;
   line-height: 40px;
   text-align: center;
-  -webkit-box-shadow: inset 0 0 0 1px #B2B2B2;
-          box-shadow: inset 0 0 0 1px #B2B2B2;
+  -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
+          box-shadow: inset 0 0 0 1px var(--spbSky3);
   cursor: pointer;
 }
 @media screen and (max-width: 479px) {
@@ -449,7 +449,7 @@ h5 {
 }
 .mfui-instructions__articles-dot:hover,
 .mfui-instructions__articles-dot_active {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-instructions__articles-dot:hover:before,
 .mfui-instructions__articles-dot_active:before {
@@ -457,7 +457,7 @@ h5 {
   right: 0;
   bottom: 0;
   left: 0;
-  background: #00B956;
+  background: var(--brandGreen);
 }
 .mfui-instructions__articles-dot:last-child {
   margin-right: 0;

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

@@ -41,9 +41,9 @@ h5 {
   display: inline-block;
   margin-top: 16px;
   padding: 2px 14px;
-  color: #FFFFFF;
+  color: var(--stcWhite);
   font-weight: 500;
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 @media screen and (min-width: 1280px) {
   .mfui-page-title__badge_under-breadcrumbs {

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

@@ -14,7 +14,7 @@ h5 {
       -ms-flex-direction: column;
           flex-direction: column;
   padding: 24px 0;
-  border-top: 1px solid #D8D8D8;
+  border-top: 1px solid var(--spbSky2);
 }
 @media screen and (min-width: 1280px) {
   .mfui-property__wrapper {
@@ -22,7 +22,7 @@ h5 {
   }
 }
 .mfui-property_border-bottom .mfui-property__wrapper {
-  border-bottom: 1px solid #D8D8D8;
+  border-bottom: 1px solid var(--spbSky2);
 }
 .mfui-property__content {
   display: -webkit-box;
@@ -46,9 +46,9 @@ h5 {
 .mfui-property__badge {
   padding: 2px 8px;
   border-radius: 2px;
-  color: #FFFFFF;
+  color: var(--stcWhite);
   font-size: 12px;
-  background: #FFA717;
+  background: var(--137C);
 }
 .mfui-property__inner {
   -webkit-box-flex: 1;
@@ -93,7 +93,7 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border-left: 1px solid #D8D8D8;
+  border-left: 1px solid var(--spbSky2);
 }
 .mfui-property__desc {
   margin-top: 8px;

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

@@ -6,10 +6,10 @@ h5 {
   margin: 0;
 }
 .mfui-property-description__collapse {
-  color: #34AAF2;
+  color: var(--systemBlue);
   font-size: 12px;
-  -webkit-text-decoration: underline dashed #34AAF2;
-          text-decoration: underline dashed #34AAF2;
+  -webkit-text-decoration: underline dashed var(--systemBlue);
+          text-decoration: underline dashed var(--systemBlue);
   cursor: pointer;
 }
 .mfui-property-description__content-inner {

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

@@ -28,8 +28,8 @@ h5 {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  color: #FFFFFF;
-  background-color: #00B956;
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
 .mfui-steps-item__text-wrapper {
   padding-top: 8px;

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

@@ -5,25 +5,23 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-store-banner_theme_base .mfui-store-banner__grid,
-.mfui-store-banner_theme_clearWhite .mfui-store-banner__grid {
-  background-color: #FFFFFF;
+.mfui-store-banner_theme_default .mfui-store-banner__grid {
+  background-color: var(--base);
 }
-.mfui-store-banner_theme_base .mfui-store-banner__content,
-.mfui-store-banner_theme_clearWhite .mfui-store-banner__content {
-  color: #333333;
+.mfui-store-banner_theme_default .mfui-store-banner__content {
+  color: var(--content);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__grid {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__content {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__grid {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__content {
-  color: #333333;
+  color: var(--content);
 }
 .mfui-store-banner_mask_new-iphone .mfui-store-banner__device-mask {
   position: relative;
@@ -93,7 +91,7 @@ h5 {
 .mfui-store-banner__grid {
   padding-top: 32px;
   padding-bottom: 32px;
-  border: 1px solid #D8D8D8;
+  border: 1px solid var(--spbSky2);
   border-radius: 8px;
 }
 @media screen and (max-width: 767px) {
@@ -161,16 +159,7 @@ h5 {
   display: flex;
 }
 .mfui-store-banner__qr-code {
-  -ms-flex-item-align: center;
-      align-self: center;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  width: 90px;
-  height: 90px;
   margin-right: 16px;
-  border: 1px solid #EDEDED;
-  border-radius: 8px;
-  background-color: #FFFFFF;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__qr-code {
@@ -191,9 +180,6 @@ h5 {
 .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
-  margin-right: 8px;
-  margin-bottom: 10px;
-  margin-left: 8px;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__store-link {
@@ -201,8 +187,9 @@ h5 {
     height: 35px;
   }
 }
-.mfui-store-banner__store-link:last-child {
-  margin-bottom: 0;
+.mfui-store-banner__store-link:not(:last-child) {
+  margin-right: 16px;
+  margin-bottom: 10px;
 }
 .mfui-store-banner__stores {
   display: -webkit-box;
@@ -221,11 +208,6 @@ h5 {
             justify-content: center;
   }
 }
-@media screen and (min-width: 768px) {
-  .mfui-store-banner__stores {
-    margin-left: -8px;
-  }
-}
 .mfui-store-banner__text {
   margin-bottom: 32px;
 }
@@ -247,10 +229,16 @@ h5 {
   -o-object-fit: contain;
      object-fit: contain;
 }
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner__links_three .mfui-store-banner__qr-code {
+    width: 120px;
+    height: 120px;
+  }
+}
 @media screen and (min-width: 1280px) {
   .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    max-width: 90px;
-    max-height: 90px;
+    max-width: 88px;
+    max-height: 88px;
   }
 }
 .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
@@ -272,6 +260,12 @@ h5 {
     margin: 0 auto;
   }
 }
+.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
+  margin-right: 16px;
+}
+.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
+  margin-right: 0;
+}
 .mfui-store-banner__links_three .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
@@ -290,3 +284,8 @@ h5 {
     margin-bottom: 16px;
   }
 }
+@media screen and (max-width: 1023px) {
+  .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
+    margin-right: 0;
+  }
+}

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

@@ -2,11 +2,9 @@ import * as React from 'react';
 import { Props as StoreButtonPropsType } from '../StoreButton/StoreButton';
 import './StoreBanner.less';
 export declare const Theme: {
-    readonly BASE: "base";
+    readonly DEFAULT: "default";
     readonly GREEN: "green";
     readonly SPB_SKY_1: "spbSky1";
-    /** @deprecated */
-    readonly CLEAR_WHITE: "clearWhite";
 };
 declare type ThemeType = typeof Theme[keyof typeof Theme];
 export declare const DeviceMask: {
@@ -58,9 +56,9 @@ export interface IStoreBannerProps {
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
 }
 declare const StoreBanner: React.FC<IStoreBannerProps>;