@megafon/ui-shared 5.4.1 → 5.5.0

package/dist/es/components/VideoBanner/VideoBanner.js

@@ -13,6 +13,7 @@ import * as PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
 import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
 import "./VideoBanner.css";
+export var testIdPrefix = 'VideoBanner';
 var cn = cnCreate('mfui-video-banner');
 export var ClassName;
 
@@ -112,7 +113,8 @@ var VideoBanner = function VideoBanner(_ref2) {
       className: cn('content', {
         'text-color': textColor,
         'text-color-mobile': textColorMobile
-      })
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
     }, /*#__PURE__*/React.createElement(Header, {
       className: cn('title'),
       as: "h1",
@@ -171,7 +173,8 @@ var VideoBanner = function VideoBanner(_ref2) {
             width: "100%",
             height: "100%",
             frameBorder: "0",
-            allow: "autoplay"
+            allow: "autoplay",
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
           });
         }
 
@@ -184,7 +187,8 @@ var VideoBanner = function VideoBanner(_ref2) {
               className: cn('video', [classes.video]),
               autoPlay: true,
               loop: true,
-              muted: isMuted
+              muted: isMuted,
+              "data-testid": "".concat(testIdPrefix, "-video")
             }, /*#__PURE__*/React.createElement("source", {
               src: videoSrc,
               type: "video/mp4"
@@ -230,7 +234,9 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("source", {
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", {
+    "data-testid": "".concat(testIdPrefix, "-picture")
+  }, /*#__PURE__*/React.createElement("source", {
     media: "(min-width: ".concat(breakpoints.DESKTOP_MIDDLE_START, "px)"),
     srcSet: imageDesktopWide
   }), /*#__PURE__*/React.createElement("source", {

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

@@ -56,5 +56,6 @@ export interface IVideoBlockProps {
     /** Фикс для белого фона */
     fixWhiteVideoBackground?: boolean;
 }
+export declare const testIdPrefix = "VideoBlock";
 declare const VideoBlock: React.FC<IVideoBlockProps>;
 export default VideoBlock;

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -12,6 +12,7 @@ export var VideoTypes = {
   YOUTUBE: 'youtube',
   VIDEO: 'video'
 };
+export var testIdPrefix = 'VideoBlock';
 var cn = cnCreate('mfui-video-block');
 
 var VideoBlock = function VideoBlock(_ref) {
@@ -60,7 +61,8 @@ var VideoBlock = function VideoBlock(_ref) {
             frameBorder: "0",
             allow: "autoplay",
             title: "iframe",
-            allowFullScreen: true
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
           }));
         }
 
@@ -78,7 +80,8 @@ var VideoBlock = function VideoBlock(_ref) {
               controls: !isAutoplay,
               loop: true,
               poster: poster,
-              playsInline: playsinline
+              playsInline: playsinline,
+              "data-testid": "".concat(testIdPrefix, "-video")
             }, /*#__PURE__*/React.createElement("source", {
               src: videoSrc,
               type: "video/mp4"
@@ -103,7 +106,8 @@ var VideoBlock = function VideoBlock(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('content', {
         'position-right': contentPositionRight
-      })
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
     }, /*#__PURE__*/React.createElement(Header, {
       as: "h2",
       className: cn('header')

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

@@ -130,27 +130,58 @@ h5 {
           flex-direction: column;
   gap: 12px;
   margin-top: 16px;
+  overflow: hidden;
+}
+.mfui-card__features-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .mfui-card__features-item {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 4px;
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.mfui-card__features-item-separator {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+.mfui-card__features-item:before {
+  content: '';
+  position: absolute;
+  bottom: 0.4em;
+  width: 100%;
   height: 2px;
   background-image: radial-gradient(circle, var(--spbSky3) 1px, transparent 1px);
   background-size: 6px 2px;
 }
+.mfui-card__features-item-value {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  text-align: end;
+}
+.mfui-card__features-item-text {
+  position: relative;
+  z-index: 1;
+  background-color: var(--base);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+.mfui-card_view_background .mfui-card__features-item-text {
+  background-color: var(--spbSky0);
+}
+.mfui-card_link.mfui-card_view_background:hover .mfui-card__features-item-text {
+  background-color: var(--spbSky1);
+}
+.mfui-card__features-item-title .mfui-card__features-item-text {
+  padding-right: 4px;
+}
+.mfui-card__features-item-value .mfui-card__features-item-text {
+  padding-left: 4px;
+}
 .mfui-card__icons {
   margin-top: 16px;
 }

package/dist/lib/components/Card/Card.js

@@ -119,19 +119,21 @@ var Card = function Card(_ref5) {
     if (featuresList) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('features')
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("ul", {
         className: cn('features-list')
       }, featuresList.items.map(function (item, i) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
+        return /*#__PURE__*/_react["default"].createElement("li", {
           className: cn('features-item'),
           key: i
         }, /*#__PURE__*/_react["default"].createElement("div", {
           className: cn('features-item-title')
-        }, item.title), /*#__PURE__*/_react["default"].createElement("div", {
-          className: cn('features-item-separator')
-        }), /*#__PURE__*/_react["default"].createElement("div", {
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: cn('features-item-text')
+        }, item.title)), /*#__PURE__*/_react["default"].createElement("div", {
           className: cn('features-item-value')
-        }, item.value));
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: cn('features-item-text')
+        }, item.value)));
       })), featuresList.desc);
     }
 

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

@@ -47,6 +47,10 @@ export interface IStoreBannerProps {
     linkMiStore?: LinkHrefType;
     /** Обработчик клика по ссылке в Mi App Store */
     onClickMiStore?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в V-Appstore */
+    linkVAppstore?: LinkHrefType;
+    /** Обработчик клика по ссылке в V-Appstore */
+    onClickVAppstore?: LinkOnClickType;
     /**  Текст кнопки */
     textButton?: string;
     /**  Ссылка для  кнопки */
@@ -74,6 +78,7 @@ export interface IStoreBannerProps {
         huaweiLink?: string;
         miStoreLink?: string;
         ruStoreLink?: string;
+        vAppstoreLink?: string;
         button?: string;
     };
     /** Ссылка на корневой элемент */
@@ -88,6 +93,7 @@ export interface IStoreBannerProps {
         linkHuawei?: Record<string, string>;
         linkMiStore?: Record<string, string>;
         linkRuStore?: Record<string, string>;
+        linkVAppstore?: Record<string, string>;
     };
 }
 declare const StoreBanner: React.FC<IStoreBannerProps>;

package/dist/lib/components/StoreBanner/StoreBanner.js

@@ -56,6 +56,7 @@ var StoreBanner = function StoreBanner(_ref) {
       huaweiLinkClassName = _ref$classes.huaweiLink,
       miStoreLinkClassName = _ref$classes.miStoreLink,
       ruStoreLinkClassName = _ref$classes.ruStoreLink,
+      vAppstoreLinkClassName = _ref$classes.vAppstoreLink,
       buttonClassName = _ref$classes.button,
       title = _ref.title,
       text = _ref.text,
@@ -65,6 +66,7 @@ var StoreBanner = function StoreBanner(_ref) {
       linkHuawei = _ref.linkHuawei,
       linkMiStore = _ref.linkMiStore,
       linkRuStore = _ref.linkRuStore,
+      linkVAppstore = _ref.linkVAppstore,
       linkButton = _ref.linkButton,
       _ref$textButton = _ref.textButton,
       textButton = _ref$textButton === void 0 ? 'Установите приложение' : _ref$textButton,
@@ -82,7 +84,8 @@ var StoreBanner = function StoreBanner(_ref) {
       onClickGoogle = _ref.onClickGoogle,
       onClickHuawei = _ref.onClickHuawei,
       onClickMiStore = _ref.onClickMiStore,
-      onClickRuStore = _ref.onClickRuStore;
+      onClickRuStore = _ref.onClickRuStore,
+      onClickVAppstore = _ref.onClickVAppstore;
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
       theme: theme,
@@ -186,6 +189,17 @@ var StoreBanner = function StoreBanner(_ref) {
       'mi-store': true
     }, miStoreLinkClassName),
     onClick: onClickMiStore
+  }), linkVAppstore && /*#__PURE__*/React.createElement(_StoreButton["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkVAppstore
+    },
+    theme: _StoreButton.Theme.V_APPSTORE,
+    href: linkVAppstore,
+    rel: rel,
+    className: cn('store-link', {
+      'v-appstore': true
+    }, vAppstoreLinkClassName),
+    onClick: onClickVAppstore
   })), linkButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
@@ -225,6 +239,8 @@ StoreBanner.propTypes = {
   onClickMiStore: _propTypes["default"].func,
   linkRuStore: _propTypes["default"].string,
   onClickRuStore: _propTypes["default"].func,
+  linkVAppstore: _propTypes["default"].string,
+  onClickVAppstore: _propTypes["default"].func,
   textButton: _propTypes["default"].string,
   linkButton: _propTypes["default"].string,
   rel: _propTypes["default"].string,
@@ -239,6 +255,7 @@ StoreBanner.propTypes = {
     huaweiLink: _propTypes["default"].string,
     miStoreLink: _propTypes["default"].string,
     ruStoreLink: _propTypes["default"].string,
+    vAppstoreLink: _propTypes["default"].string,
     button: _propTypes["default"].string
   }),
   rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
@@ -253,7 +270,8 @@ StoreBanner.propTypes = {
     linkGoogle: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     linkHuawei: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     linkMiStore: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    linkRuStore: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+    linkRuStore: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    linkVAppstore: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   })
 };
 var _default = StoreBanner;

package/dist/lib/components/StoreButton/StoreButton.css

@@ -1,24 +1,266 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
 .mfui-store-button {
   border-radius: 8px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
 }
-.mfui-store-button_theme_app-store {
+.mfui-store-button_size-all_small.mfui-store-button_theme_app-store,
+.mfui-store-button_size-all_medium.mfui-store-button_theme_app-store {
   background-image: url('./img/app-store.png');
 }
-.mfui-store-button_theme_galaxy-store {
+.mfui-store-button_size-all_small.mfui-store-button_theme_galaxy-store,
+.mfui-store-button_size-all_medium.mfui-store-button_theme_galaxy-store {
   background-image: url('./img/galaxy-store.png');
 }
-.mfui-store-button_theme_google-play {
+.mfui-store-button_size-all_small.mfui-store-button_theme_google-play,
+.mfui-store-button_size-all_medium.mfui-store-button_theme_google-play {
   background-image: url('./img/google-play.png');
 }
-.mfui-store-button_theme_huawei-store {
+.mfui-store-button_size-all_small.mfui-store-button_theme_huawei-store,
+.mfui-store-button_size-all_medium.mfui-store-button_theme_huawei-store {
   background-image: url('./img/huawei-store.png');
 }
-.mfui-store-button_theme_mi-store {
+.mfui-store-button_size-all_small.mfui-store-button_theme_mi-store,
+.mfui-store-button_size-all_medium.mfui-store-button_theme_mi-store {
   background-image: url('./img/mi-store.png');
 }
-.mfui-store-button_theme_ru-store {
+.mfui-store-button_size-all_small.mfui-store-button_theme_ru-store,
+.mfui-store-button_size-all_medium.mfui-store-button_theme_ru-store {
   background-image: url('./img/ru-store.png');
 }
+.mfui-store-button_size-all_small.mfui-store-button_theme_v-appstore,
+.mfui-store-button_size-all_medium.mfui-store-button_theme_v-appstore {
+  background-image: url('./img/v-appstore.png');
+}
+.mfui-store-button_size-all_large.mfui-store-button_theme_app-store {
+  background-image: url('./img/app-store-large.png');
+}
+.mfui-store-button_size-all_large.mfui-store-button_theme_galaxy-store {
+  background-image: url('./img/galaxy-store-large.png');
+}
+.mfui-store-button_size-all_large.mfui-store-button_theme_google-play {
+  background-image: url('./img/google-play-large.png');
+}
+.mfui-store-button_size-all_large.mfui-store-button_theme_huawei-store {
+  background-image: url('./img/huawei-store-large.png');
+}
+.mfui-store-button_size-all_large.mfui-store-button_theme_mi-store {
+  background-image: url('./img/mi-store-large.png');
+}
+.mfui-store-button_size-all_large.mfui-store-button_theme_ru-store {
+  background-image: url('./img/ru-store-large.png');
+}
+.mfui-store-button_size-all_large.mfui-store-button_theme_v-appstore {
+  background-image: url('./img/v-appstore-large.png');
+}
+@media screen and (min-width: 1024px) {
+  .mfui-store-button_size-desktop_small.mfui-store-button_theme_app-store,
+  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_app-store {
+    background-image: url('./img/app-store.png');
+  }
+  .mfui-store-button_size-desktop_small.mfui-store-button_theme_galaxy-store,
+  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_galaxy-store {
+    background-image: url('./img/galaxy-store.png');
+  }
+  .mfui-store-button_size-desktop_small.mfui-store-button_theme_google-play,
+  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_google-play {
+    background-image: url('./img/google-play.png');
+  }
+  .mfui-store-button_size-desktop_small.mfui-store-button_theme_huawei-store,
+  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_huawei-store {
+    background-image: url('./img/huawei-store.png');
+  }
+  .mfui-store-button_size-desktop_small.mfui-store-button_theme_mi-store,
+  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_mi-store {
+    background-image: url('./img/mi-store.png');
+  }
+  .mfui-store-button_size-desktop_small.mfui-store-button_theme_ru-store,
+  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_ru-store {
+    background-image: url('./img/ru-store.png');
+  }
+  .mfui-store-button_size-desktop_small.mfui-store-button_theme_v-appstore,
+  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_v-appstore {
+    background-image: url('./img/v-appstore.png');
+  }
+  .mfui-store-button_size-desktop_large.mfui-store-button_theme_app-store {
+    background-image: url('./img/app-store-large.png');
+  }
+  .mfui-store-button_size-desktop_large.mfui-store-button_theme_galaxy-store {
+    background-image: url('./img/galaxy-store-large.png');
+  }
+  .mfui-store-button_size-desktop_large.mfui-store-button_theme_google-play {
+    background-image: url('./img/google-play-large.png');
+  }
+  .mfui-store-button_size-desktop_large.mfui-store-button_theme_huawei-store {
+    background-image: url('./img/huawei-store-large.png');
+  }
+  .mfui-store-button_size-desktop_large.mfui-store-button_theme_mi-store {
+    background-image: url('./img/mi-store-large.png');
+  }
+  .mfui-store-button_size-desktop_large.mfui-store-button_theme_ru-store {
+    background-image: url('./img/ru-store-large.png');
+  }
+  .mfui-store-button_size-desktop_large.mfui-store-button_theme_v-appstore {
+    background-image: url('./img/v-appstore-large.png');
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-store-button_size-wide_small.mfui-store-button_theme_app-store,
+  .mfui-store-button_size-wide_medium.mfui-store-button_theme_app-store {
+    background-image: url('./img/app-store.png');
+  }
+  .mfui-store-button_size-wide_small.mfui-store-button_theme_galaxy-store,
+  .mfui-store-button_size-wide_medium.mfui-store-button_theme_galaxy-store {
+    background-image: url('./img/galaxy-store.png');
+  }
+  .mfui-store-button_size-wide_small.mfui-store-button_theme_google-play,
+  .mfui-store-button_size-wide_medium.mfui-store-button_theme_google-play {
+    background-image: url('./img/google-play.png');
+  }
+  .mfui-store-button_size-wide_small.mfui-store-button_theme_huawei-store,
+  .mfui-store-button_size-wide_medium.mfui-store-button_theme_huawei-store {
+    background-image: url('./img/huawei-store.png');
+  }
+  .mfui-store-button_size-wide_small.mfui-store-button_theme_mi-store,
+  .mfui-store-button_size-wide_medium.mfui-store-button_theme_mi-store {
+    background-image: url('./img/mi-store.png');
+  }
+  .mfui-store-button_size-wide_small.mfui-store-button_theme_ru-store,
+  .mfui-store-button_size-wide_medium.mfui-store-button_theme_ru-store {
+    background-image: url('./img/ru-store.png');
+  }
+  .mfui-store-button_size-wide_small.mfui-store-button_theme_v-appstore,
+  .mfui-store-button_size-wide_medium.mfui-store-button_theme_v-appstore {
+    background-image: url('./img/v-appstore.png');
+  }
+  .mfui-store-button_size-wide_large.mfui-store-button_theme_app-store {
+    background-image: url('./img/app-store-large.png');
+  }
+  .mfui-store-button_size-wide_large.mfui-store-button_theme_galaxy-store {
+    background-image: url('./img/galaxy-store-large.png');
+  }
+  .mfui-store-button_size-wide_large.mfui-store-button_theme_google-play {
+    background-image: url('./img/google-play-large.png');
+  }
+  .mfui-store-button_size-wide_large.mfui-store-button_theme_huawei-store {
+    background-image: url('./img/huawei-store-large.png');
+  }
+  .mfui-store-button_size-wide_large.mfui-store-button_theme_mi-store {
+    background-image: url('./img/mi-store-large.png');
+  }
+  .mfui-store-button_size-wide_large.mfui-store-button_theme_ru-store {
+    background-image: url('./img/ru-store-large.png');
+  }
+  .mfui-store-button_size-wide_large.mfui-store-button_theme_v-appstore {
+    background-image: url('./img/v-appstore-large.png');
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-button_size-tablet_small.mfui-store-button_theme_app-store,
+  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_app-store {
+    background-image: url('./img/app-store.png');
+  }
+  .mfui-store-button_size-tablet_small.mfui-store-button_theme_galaxy-store,
+  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_galaxy-store {
+    background-image: url('./img/galaxy-store.png');
+  }
+  .mfui-store-button_size-tablet_small.mfui-store-button_theme_google-play,
+  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_google-play {
+    background-image: url('./img/google-play.png');
+  }
+  .mfui-store-button_size-tablet_small.mfui-store-button_theme_huawei-store,
+  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_huawei-store {
+    background-image: url('./img/huawei-store.png');
+  }
+  .mfui-store-button_size-tablet_small.mfui-store-button_theme_mi-store,
+  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_mi-store {
+    background-image: url('./img/mi-store.png');
+  }
+  .mfui-store-button_size-tablet_small.mfui-store-button_theme_ru-store,
+  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_ru-store {
+    background-image: url('./img/ru-store.png');
+  }
+  .mfui-store-button_size-tablet_small.mfui-store-button_theme_v-appstore,
+  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_v-appstore {
+    background-image: url('./img/v-appstore.png');
+  }
+  .mfui-store-button_size-tablet_large.mfui-store-button_theme_app-store {
+    background-image: url('./img/app-store-large.png');
+  }
+  .mfui-store-button_size-tablet_large.mfui-store-button_theme_galaxy-store {
+    background-image: url('./img/galaxy-store-large.png');
+  }
+  .mfui-store-button_size-tablet_large.mfui-store-button_theme_google-play {
+    background-image: url('./img/google-play-large.png');
+  }
+  .mfui-store-button_size-tablet_large.mfui-store-button_theme_huawei-store {
+    background-image: url('./img/huawei-store-large.png');
+  }
+  .mfui-store-button_size-tablet_large.mfui-store-button_theme_mi-store {
+    background-image: url('./img/mi-store-large.png');
+  }
+  .mfui-store-button_size-tablet_large.mfui-store-button_theme_ru-store {
+    background-image: url('./img/ru-store-large.png');
+  }
+  .mfui-store-button_size-tablet_large.mfui-store-button_theme_v-appstore {
+    background-image: url('./img/v-appstore-large.png');
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-button_size-mobile_small.mfui-store-button_theme_app-store,
+  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_app-store {
+    background-image: url('./img/app-store.png');
+  }
+  .mfui-store-button_size-mobile_small.mfui-store-button_theme_galaxy-store,
+  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_galaxy-store {
+    background-image: url('./img/galaxy-store.png');
+  }
+  .mfui-store-button_size-mobile_small.mfui-store-button_theme_google-play,
+  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_google-play {
+    background-image: url('./img/google-play.png');
+  }
+  .mfui-store-button_size-mobile_small.mfui-store-button_theme_huawei-store,
+  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_huawei-store {
+    background-image: url('./img/huawei-store.png');
+  }
+  .mfui-store-button_size-mobile_small.mfui-store-button_theme_mi-store,
+  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_mi-store {
+    background-image: url('./img/mi-store.png');
+  }
+  .mfui-store-button_size-mobile_small.mfui-store-button_theme_ru-store,
+  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_ru-store {
+    background-image: url('./img/ru-store.png');
+  }
+  .mfui-store-button_size-mobile_small.mfui-store-button_theme_v-appstore,
+  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_v-appstore {
+    background-image: url('./img/v-appstore.png');
+  }
+  .mfui-store-button_size-mobile_large.mfui-store-button_theme_app-store {
+    background-image: url('./img/app-store-large.png');
+  }
+  .mfui-store-button_size-mobile_large.mfui-store-button_theme_galaxy-store {
+    background-image: url('./img/galaxy-store-large.png');
+  }
+  .mfui-store-button_size-mobile_large.mfui-store-button_theme_google-play {
+    background-image: url('./img/google-play-large.png');
+  }
+  .mfui-store-button_size-mobile_large.mfui-store-button_theme_huawei-store {
+    background-image: url('./img/huawei-store-large.png');
+  }
+  .mfui-store-button_size-mobile_large.mfui-store-button_theme_mi-store {
+    background-image: url('./img/mi-store-large.png');
+  }
+  .mfui-store-button_size-mobile_large.mfui-store-button_theme_ru-store {
+    background-image: url('./img/ru-store-large.png');
+  }
+  .mfui-store-button_size-mobile_large.mfui-store-button_theme_v-appstore {
+    background-image: url('./img/v-appstore-large.png');
+  }
+}

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

@@ -1,13 +1,19 @@
 import * as React from 'react';
 import { Link } from '@megafon/ui-core';
 import './StoreButton.less';
+export declare enum ButtonSizes {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}
 export declare enum Theme {
     APP_STORE = "app-store",
     GALAXY_STORE = "galaxy-store",
     GOOGLE_PLAY = "google-play",
     HUAWEI_STORE = "huawei-store",
     MI_STORE = "mi-store",
-    RU_STORE = "ru-store"
+    RU_STORE = "ru-store",
+    V_APPSTORE = "v-appstore"
 }
 declare type LinkPropTypes = React.ComponentProps<typeof Link>;
 export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'target' | 'rel' | 'onClick' | 'dataAttrs'> & {
@@ -15,6 +21,16 @@ export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPro
     theme: Theme;
     /** Дополнительный класс */
     className?: string;
+    /** Размер на всех разрешениях экрана */
+    sizeAll?: ButtonSizes;
+    /** Размер на разрешении экрана 1280+ */
+    sizeWide?: ButtonSizes;
+    /** Размер на разрешении экрана 1024+ */
+    sizeDesktop?: ButtonSizes;
+    /** Размер на разрешении экрана 768-1023 */
+    sizeTablet?: ButtonSizes;
+    /** Размер на разрешении экрана 0-767 */
+    sizeMobile?: ButtonSizes;
 };
 declare const StoreButton: React.FC<Props>;
 export default StoreButton;

package/dist/lib/components/StoreButton/StoreButton.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Theme = void 0;
+exports["default"] = exports.Theme = exports.ButtonSizes = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -42,6 +42,15 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
+var ButtonSizes;
+exports.ButtonSizes = ButtonSizes;
+
+(function (ButtonSizes) {
+  ButtonSizes["SMALL"] = "small";
+  ButtonSizes["MEDIUM"] = "medium";
+  ButtonSizes["LARGE"] = "large";
+})(ButtonSizes || (exports.ButtonSizes = ButtonSizes = {}));
+
 var Theme;
 exports.Theme = Theme;
 
@@ -52,6 +61,7 @@ exports.Theme = Theme;
   Theme["HUAWEI_STORE"] = "huawei-store";
   Theme["MI_STORE"] = "mi-store";
   Theme["RU_STORE"] = "ru-store";
+  Theme["V_APPSTORE"] = "v-appstore";
 })(Theme || (exports.Theme = Theme = {}));
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-store-button');
@@ -62,14 +72,25 @@ var StoreButton = function StoreButton(_a) {
       onClick = _a.onClick,
       theme = _a.theme,
       className = _a.className,
-      rest = __rest(_a, ["href", "rel", "onClick", "theme", "className"]);
+      _a$sizeAll = _a.sizeAll,
+      sizeAll = _a$sizeAll === void 0 ? ButtonSizes.MEDIUM : _a$sizeAll,
+      sizeWide = _a.sizeWide,
+      sizeDesktop = _a.sizeDesktop,
+      sizeTablet = _a.sizeTablet,
+      sizeMobile = _a.sizeMobile,
+      rest = __rest(_a, ["href", "rel", "onClick", "theme", "className", "sizeAll", "sizeWide", "sizeDesktop", "sizeTablet", "sizeMobile"]);
 
   return /*#__PURE__*/React.createElement(_uiCore.Link, (0, _extends2["default"])({}, rest, {
     href: href,
     rel: rel,
     onClick: onClick,
     className: cn({
-      theme: theme
+      theme: theme,
+      'size-all': sizeAll,
+      'size-wide': sizeWide,
+      'size-desktop': sizeDesktop,
+      'size-tablet': sizeTablet,
+      'size-mobile': sizeMobile
     }, className)
   }));
 };
@@ -81,6 +102,11 @@ StoreButton.propTypes = {
   onClick: _propTypes["default"].func,
   className: _propTypes["default"].string,
   target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
+  sizeAll: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
+  sizeWide: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
+  sizeDesktop: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
+  sizeTablet: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
+  sizeMobile: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
   dataAttrs: _propTypes["default"].shape({
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   })