@megafon/ui-shared 2.0.0-beta.96 → 2.0.0

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

@@ -0,0 +1,289 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-store-banner_theme_clearWhite .mfui-store-banner__grid {
+  background-color: #FFFFFF;
+}
+.mfui-store-banner_theme_clearWhite .mfui-store-banner__content {
+  color: #333333;
+}
+.mfui-store-banner_theme_green .mfui-store-banner__grid {
+  background-color: #00B956;
+}
+.mfui-store-banner_theme_green .mfui-store-banner__content {
+  color: #FFFFFF;
+}
+.mfui-store-banner_theme_spbSky1 .mfui-store-banner__grid {
+  background-color: #EDEDED;
+}
+.mfui-store-banner_theme_spbSky1 .mfui-store-banner__content {
+  color: #333333;
+}
+.mfui-store-banner_mask_new-iphone .mfui-store-banner__device-mask {
+  position: relative;
+  z-index: 2;
+  background-image: url('./img/new-iphone.png');
+}
+.mfui-store-banner_mask_new-iphone .mfui-store-banner__screen {
+  top: 13px;
+  z-index: 1;
+  width: 87%;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner_mask_new-iphone .mfui-store-banner__screen {
+    top: 10px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_mask_new-iphone .mfui-store-banner__screen {
+    top: 33px;
+  }
+}
+.mfui-store-banner_mask_android .mfui-store-banner__device-mask {
+  background-image: url('./img/android.png');
+}
+.mfui-store-banner_mask_android .mfui-store-banner__screen {
+  top: 59px;
+  width: 86%;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner_mask_android .mfui-store-banner__screen {
+    top: 48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_mask_android .mfui-store-banner__screen {
+    top: 64px;
+  }
+}
+.mfui-store-banner_mask_white-iphone .mfui-store-banner__device-mask {
+  background-image: url('./img/white-iphone.png');
+}
+.mfui-store-banner_mask_black-iphone .mfui-store-banner__device-mask {
+  background-image: url('./img/black-iphone.png');
+}
+.mfui-store-banner_mask_white-iphone .mfui-store-banner__screen,
+.mfui-store-banner_mask_black-iphone .mfui-store-banner__screen {
+  top: 57px;
+  width: 87%;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner_mask_white-iphone .mfui-store-banner__screen,
+  .mfui-store-banner_mask_black-iphone .mfui-store-banner__screen {
+    top: 47px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_mask_white-iphone .mfui-store-banner__screen,
+  .mfui-store-banner_mask_black-iphone .mfui-store-banner__screen {
+    top: 63px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-store-banner__container {
+    padding-top: 30px;
+  }
+}
+.mfui-store-banner__grid {
+  padding-top: 32px;
+  padding-bottom: 32px;
+  border: 1px solid #D8D8D8;
+  border-radius: 8px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner__grid {
+    padding-top: 24px;
+    padding-bottom: 0;
+  }
+}
+.mfui-store-banner__content {
+  padding-left: 32px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner__content {
+    padding-right: 10px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner__content {
+    padding-right: 15px;
+    padding-bottom: 32px;
+    padding-left: 15px;
+    text-align: center;
+  }
+}
+.mfui-store-banner__device-mask {
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.mfui-store-banner__device-wrapper {
+  position: relative;
+  bottom: calc(2 * (32px - 1px));
+  width: 235px;
+  height: calc(100% + 2 * 32px + 30px);
+  margin-right: auto;
+  margin-left: auto;
+  overflow: hidden;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-store-banner__device-wrapper {
+    width: 260px;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .mfui-store-banner__device-wrapper {
+    bottom: 0;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner__device-wrapper {
+    width: 196px;
+    height: calc(100% + 32px);
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner__device-wrapper {
+    width: 163px;
+    height: 222px;
+    padding-top: 24px;
+  }
+}
+.mfui-store-banner__links {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-store-banner__qr-code {
+  margin-right: 16px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner__qr-code {
+    display: none;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-store-banner__qr-code + .mfui-store-banner__stores {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+}
+.mfui-store-banner__store-link {
+  width: 136px;
+  height: 40px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner__store-link {
+    width: 119px;
+    height: 35px;
+  }
+}
+.mfui-store-banner__store-link:not(:last-child) {
+  margin-right: 16px;
+  margin-bottom: 10px;
+}
+.mfui-store-banner__stores {
+  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;
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner__stores {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+.mfui-store-banner__text {
+  margin-bottom: 32px;
+}
+.mfui-store-banner__title {
+  margin-bottom: 16px;
+}
+.mfui-store-banner__screen {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.mfui-store-banner__button {
+  margin: 0 auto;
+}
+.mfui-store-banner__links_three .mfui-store-banner__qr-code {
+  -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: 88px;
+    max-height: 88px;
+  }
+}
+.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
+  max-width: 305px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-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;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
+    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;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-store-banner__links_three .mfui-store-banner__store-link {
+    width: 119px;
+    height: 35px;
+  }
+}
+.mfui-store-banner__links_three .mfui-store-banner__store-link:not(:last-child) {
+  margin-bottom: 8px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:last-child) {
+    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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Props as StoreButtonPropsType } from '../StoreButton/StoreButton';
+import './StoreBanner.less';
+export declare const Theme: {
+    readonly CLEAR_WHITE: "clearWhite";
+    readonly GREEN: "green";
+    readonly SPB_SKY_1: "spbSky1";
+};
+declare type ThemeType = typeof Theme[keyof typeof Theme];
+export declare const DeviceMask: {
+    readonly ANDROID: "android";
+    readonly NEW_IPHONE: "new-iphone";
+    readonly BLACK_IPHONE: "black-iphone";
+    readonly WHITE_IPHONE: "white-iphone";
+};
+declare type DeviceMaskType = typeof DeviceMask[keyof typeof DeviceMask];
+declare type LinkHrefType = StoreButtonPropsType['href'];
+declare type LinkOnClickType = StoreButtonPropsType['onClick'];
+export interface IStoreBannerProps {
+    /** Заголовок */
+    title: string;
+    /** Текст */
+    text: string;
+    /** Ссылка на скачивание приложения в  App Store */
+    linkApple?: LinkHrefType;
+    /** Обработчик клика по ссылке в App Store */
+    onClickApple?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в Google Play */
+    linkGoogle?: LinkHrefType;
+    /** Обработчик клика по ссылке в Google Play */
+    onClickGoogle?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в Huawei Store */
+    linkHuawei?: LinkHrefType;
+    /** Обработчик клика по ссылке в Huawei Store */
+    onClickHuawei?: LinkOnClickType;
+    /**  Текст кнопки */
+    textButton?: string;
+    /**  Ссылка для  кнопки */
+    linkButton?: string;
+    /** Ссылка на картинку с QR-кодом */
+    qrCode?: string;
+    /** Цветовая тема компонента */
+    theme?: ThemeType;
+    /** Изображение телефона */
+    deviceMask: DeviceMaskType;
+    /** Изображение на дисплее телефона */
+    imageSrc: string;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        appleLink?: string;
+        googleLink?: string;
+        huaweiLink?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+}
+declare const StoreBanner: React.FC<IStoreBannerProps>;
+export default StoreBanner;

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

@@ -0,0 +1,169 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DeviceMask = exports.Theme = void 0;
+
+require("core-js/modules/es.object.values");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StoreButton = _interopRequireWildcard(require("../StoreButton/StoreButton"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Theme = {
+  CLEAR_WHITE: 'clearWhite',
+  GREEN: 'green',
+  SPB_SKY_1: 'spbSky1'
+};
+exports.Theme = Theme;
+var DeviceMask = {
+  ANDROID: 'android',
+  NEW_IPHONE: 'new-iphone',
+  BLACK_IPHONE: 'black-iphone',
+  WHITE_IPHONE: 'white-iphone'
+};
+exports.DeviceMask = DeviceMask;
+var DEFAULT_TEXT_BUTTON = 'Установите приложение';
+var cn = (0, _uiHelpers.cnCreate)('mfui-store-banner');
+
+var StoreBanner = function StoreBanner(_ref) {
+  var className = _ref.className,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var rootClassName = _ref$classes.root,
+      appleLinkClassName = _ref$classes.appleLink,
+      googleLinkClassName = _ref$classes.googleLink,
+      huaweiLinkClassName = _ref$classes.huaweiLink,
+      title = _ref.title,
+      text = _ref.text,
+      linkApple = _ref.linkApple,
+      linkGoogle = _ref.linkGoogle,
+      linkHuawei = _ref.linkHuawei,
+      linkButton = _ref.linkButton,
+      _ref$textButton = _ref.textButton,
+      textButton = _ref$textButton === void 0 ? DEFAULT_TEXT_BUTTON : _ref$textButton,
+      qrCode = _ref.qrCode,
+      imageSrc = _ref.imageSrc,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? Theme.CLEAR_WHITE : _ref$theme,
+      deviceMask = _ref.deviceMask,
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      onClickApple = _ref.onClickApple,
+      onClickGoogle = _ref.onClickGoogle,
+      onClickHuawei = _ref.onClickHuawei;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      theme: theme,
+      mask: deviceMask
+    }, [className, rootClassName]),
+    ref: rootRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement("div", {
+    className: cn('container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('grid')
+  }, /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    all: "6",
+    mobile: "12",
+    rightOffsetWide: "1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+    as: "h2",
+    className: cn('title'),
+    color: "inherit"
+  }, title), /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+    className: cn('text'),
+    hasMargin: false,
+    color: "inherit"
+  }, text), /*#__PURE__*/React.createElement("div", {
+    className: cn('links', {
+      three: !!linkApple && !!linkGoogle && !!linkHuawei
+    })
+  }, !linkButton && qrCode && /*#__PURE__*/React.createElement("img", {
+    src: qrCode,
+    className: cn('qr-code'),
+    alt: "QR-\u043A\u043E\u0434"
+  }), !linkButton && /*#__PURE__*/React.createElement("div", {
+    className: cn('stores')
+  }, linkApple && /*#__PURE__*/React.createElement(_StoreButton["default"], {
+    theme: _StoreButton.Theme.APP_STORE,
+    href: linkApple,
+    onClick: onClickApple,
+    className: cn('store-link', {
+      'app-store': true
+    }, appleLinkClassName)
+  }), linkGoogle && /*#__PURE__*/React.createElement(_StoreButton["default"], {
+    theme: _StoreButton.Theme.GOOGLE_PLAY,
+    href: linkGoogle,
+    className: cn('store-link', {
+      'google-play': true
+    }, googleLinkClassName),
+    onClick: onClickGoogle
+  }), linkHuawei && /*#__PURE__*/React.createElement(_StoreButton["default"], {
+    theme: _StoreButton.Theme.HUAWEI_STORE,
+    href: linkHuawei,
+    className: cn('store-link', {
+      'huawei-store': true
+    }, huaweiLinkClassName),
+    onClick: onClickHuawei
+  })), linkButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
+    className: cn('button'),
+    href: linkButton,
+    theme: theme === 'green' ? 'purple' : 'green'
+  }, textButton)))), /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    all: "4",
+    desktop: "6",
+    tablet: "6",
+    mobile: "12"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('device-wrapper')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('device-mask')
+  }), /*#__PURE__*/React.createElement("img", {
+    src: imageSrc,
+    className: cn('screen'),
+    alt: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430"
+  })))))));
+};
+
+StoreBanner.propTypes = {
+  title: _propTypes["default"].string.isRequired,
+  text: _propTypes["default"].string.isRequired,
+  linkApple: _propTypes["default"].string,
+  onClickApple: _propTypes["default"].func,
+  linkGoogle: _propTypes["default"].string,
+  onClickGoogle: _propTypes["default"].func,
+  qrCode: _propTypes["default"].string,
+  theme: _propTypes["default"].oneOf(Object.values(Theme)),
+  deviceMask: _propTypes["default"].oneOf(Object.values(DeviceMask)).isRequired,
+  imageSrc: _propTypes["default"].string.isRequired,
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    appleLink: _propTypes["default"].string,
+    googleLink: _propTypes["default"].string
+  }),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+};
+var _default = StoreBanner;
+exports["default"] = _default;

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

@@ -0,0 +1,15 @@
+.mfui-store-button {
+  border-radius: 8px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+.mfui-store-button_theme_app-store {
+  background-image: url('./img/app-store.png');
+}
+.mfui-store-button_theme_google-play {
+  background-image: url('./img/google-play.png');
+}
+.mfui-store-button_theme_huawei-store {
+  background-image: url('./img/huawei-store.png');
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Link } from '@megafon/ui-core';
+import './StoreButton.less';
+export declare enum Theme {
+    GOOGLE_PLAY = "google-play",
+    APP_STORE = "app-store",
+    HUAWEI_STORE = "huawei-store"
+}
+declare type LinkPropTypes = React.ComponentProps<typeof Link>;
+export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick'> & {
+    /** Тема кнопки */
+    theme: Theme;
+    /** Дополнительный класс */
+    className?: string;
+};
+declare const StoreButton: React.FC<Props>;
+export default StoreButton;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Theme = void 0;
+
+require("core-js/modules/es.object.values");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Theme;
+exports.Theme = Theme;
+
+(function (Theme) {
+  Theme["GOOGLE_PLAY"] = "google-play";
+  Theme["APP_STORE"] = "app-store";
+  Theme["HUAWEI_STORE"] = "huawei-store";
+})(Theme || (exports.Theme = Theme = {}));
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-store-button');
+
+var StoreButton = function StoreButton(_ref) {
+  var href = _ref.href,
+      onClick = _ref.onClick,
+      theme = _ref.theme,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(_uiCore.Link, {
+    href: href,
+    onClick: onClick,
+    className: cn({
+      theme: theme
+    }, className)
+  });
+};
+
+StoreButton.propTypes = {
+  href: _propTypes["default"].string.isRequired,
+  theme: _propTypes["default"].oneOf(Object.values(Theme)).isRequired,
+  onClick: _propTypes["default"].func,
+  className: _propTypes["default"].string
+};
+var _default = StoreButton;
+exports["default"] = _default;