@megafon/ui-shared 4.17.0 → 4.18.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.18.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.17.0...@megafon/ui-shared@4.18.0) (2023-04-14)
+
+
+### Bug Fixes
+
+* **instructions:** fixed screen scroll for iphone devices ([fae9838](https://github.com/MegafonWebLab/megafon-ui/commit/fae98383271ed7a291665cbb7f9011d17ec0bc93))
+* **storebanner:** fix cn for galaxy store ([02f484b](https://github.com/MegafonWebLab/megafon-ui/commit/02f484bee25550f5091a85b1d08a8252a6f361ee))
+* **storebutton:** compress png buttons ([3e0a2a0](https://github.com/MegafonWebLab/megafon-ui/commit/3e0a2a006dd7d102478164acfcda75816d07b7a9))
+
+
+### Features
+
+* **instructions:** add prop pictureVerticalAlign ([e380224](https://github.com/MegafonWebLab/megafon-ui/commit/e38022435ce3a5eaf2864bf6ed5a0028e81c9ec1))
+* **storebanner:** add Samsung Galaxy Store button ([ed28f42](https://github.com/MegafonWebLab/megafon-ui/commit/ed28f4270033c91acf23cbe113158f1051c6eff7))
+
+
+
+
+
 # [4.17.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.16.0...@megafon/ui-shared@4.17.0) (2023-04-11)
 
 

package/dist/es/components/Instructions/Instructions.css

@@ -81,6 +81,12 @@ h5 {
     margin-right: 40px;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__picture_vertical-align_top {
+    -ms-flex-item-align: start;
+        align-self: flex-start;
+  }
+}
 .mfui-instructions_mask_none .mfui-instructions__slide {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -119,6 +125,7 @@ h5 {
 }
 .mfui-instructions__device-screen {
   overflow: hidden;
+  pointer-events: none;
 }
 @media screen and (max-width: 1023px) {
   .mfui-instructions_mask_black-iphone .mfui-instructions__img-wrapper,

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

@@ -5,6 +5,10 @@ export declare const pictureAlignTypes: {
     readonly LEFT: "left";
     readonly RIGHT: "right";
 };
+export declare const pictureVerticalAlignTypes: {
+    CENTER: string;
+    TOP: string;
+};
 export declare const pictureMaskTypes: {
     readonly ANDROID: "android";
     readonly NEW_IPHONE: "new-iphone";
@@ -15,6 +19,7 @@ export declare const pictureMaskTypes: {
     readonly NONE: "none";
 };
 declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
+declare type PictureVerticalAlignTypesType = typeof pictureVerticalAlignTypes[keyof typeof pictureVerticalAlignTypes];
 declare type PictureMaskTypesType = typeof pictureMaskTypes[keyof typeof pictureMaskTypes];
 export declare type InstructionItemType = {
     title: string | React.ReactNode | React.ReactNode[];
@@ -49,8 +54,10 @@ export interface IInstructionsProps {
     instructionItems: InstructionItemType[];
     /** Описание после инструкции */
     additionalText?: string;
-    /** Расположение изображения */
+    /** Расположение изображения по горизонтали */
     pictureAlign?: PictureAlignTypesType;
+    /** Расположение изображения по вертикали */
+    pictureVerticalAlign?: PictureVerticalAlignTypesType;
     /** Маска изображения */
     pictureMask?: PictureMaskTypesType;
     /** Ref на swiper */

package/dist/es/components/Instructions/Instructions.js

@@ -15,6 +15,10 @@ export var pictureAlignTypes = {
   LEFT: 'left',
   RIGHT: 'right'
 };
+export var pictureVerticalAlignTypes = {
+  CENTER: 'center',
+  TOP: 'top'
+};
 export var pictureMaskTypes = {
   ANDROID: 'android',
   NEW_IPHONE: 'new-iphone',
@@ -44,6 +48,8 @@ var Instructions = function Instructions(_ref) {
       instructionItems = _ref.instructionItems,
       _ref$pictureAlign = _ref.pictureAlign,
       pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+      _ref$pictureVerticalA = _ref.pictureVerticalAlign,
+      pictureVerticalAlign = _ref$pictureVerticalA === void 0 ? 'center' : _ref$pictureVerticalA,
       _ref$pictureMask = _ref.pictureMask,
       pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
       getSwiper = _ref.getSwiper,
@@ -214,7 +220,8 @@ var Instructions = function Instructions(_ref) {
     className: cn('wrapper')
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('picture', {
-      align: pictureAlign
+      align: pictureAlign,
+      'vertical-align': pictureVerticalAlign
     })
   }, renderPicture()), /*#__PURE__*/React.createElement("div", {
     className: cn('articles', {

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

@@ -31,9 +31,13 @@ export interface IStoreBannerProps {
     linkGoogle?: LinkHrefType;
     /** Обработчик клика по ссылке в Google Play */
     onClickGoogle?: LinkOnClickType;
-    /** Ссылка на скачивание приложения в Huawei App Gallery */
+    /** Ссылка на скачивание приложения в Samsung Galaxy Store */
+    linkGalaxyStore?: LinkHrefType;
+    /** Обработчик клика по ссылке в Samsung Galaxy Store */
+    onClickGalaxyStore?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в Huawei AppGallery */
     linkHuawei?: LinkHrefType;
-    /** Обработчик клика по ссылке в Huawei App Gallery */
+    /** Обработчик клика по ссылке в Huawei AppGallery */
     onClickHuawei?: LinkOnClickType;
     /** Ссылка на скачивание приложения в RuStore */
     linkRuStore?: LinkHrefType;
@@ -65,6 +69,7 @@ export interface IStoreBannerProps {
     classes?: {
         root?: string;
         appleLink?: string;
+        galaxyStoreLink?: string;
         googleLink?: string;
         huaweiLink?: string;
         miStoreLink?: string;
@@ -77,6 +82,7 @@ export interface IStoreBannerProps {
         root?: Record<string, string>;
         button?: Record<string, string>;
         linkApple?: Record<string, string>;
+        linkGalaxyStore?: Record<string, string>;
         linkGoogle?: Record<string, string>;
         linkHuawei?: Record<string, string>;
         linkMiStore?: Record<string, string>;

package/dist/es/components/StoreBanner/StoreBanner.js

@@ -27,6 +27,7 @@ var StoreBanner = function StoreBanner(_ref) {
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
   var rootClassName = _ref$classes.root,
       appleLinkClassName = _ref$classes.appleLink,
+      galaxyStoreLinkClassName = _ref$classes.galaxyStoreLink,
       googleLinkClassName = _ref$classes.googleLink,
       huaweiLinkClassName = _ref$classes.huaweiLink,
       miStoreLinkClassName = _ref$classes.miStoreLink,
@@ -34,6 +35,7 @@ var StoreBanner = function StoreBanner(_ref) {
       title = _ref.title,
       text = _ref.text,
       linkApple = _ref.linkApple,
+      linkGalaxyStore = _ref.linkGalaxyStore,
       linkGoogle = _ref.linkGoogle,
       linkHuawei = _ref.linkHuawei,
       linkMiStore = _ref.linkMiStore,
@@ -51,6 +53,7 @@ var StoreBanner = function StoreBanner(_ref) {
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       onClickApple = _ref.onClickApple,
+      onClickGalaxyStore = _ref.onClickGalaxyStore,
       onClickGoogle = _ref.onClickGoogle,
       onClickHuawei = _ref.onClickHuawei,
       onClickMiStore = _ref.onClickMiStore,
@@ -123,6 +126,17 @@ var StoreBanner = function StoreBanner(_ref) {
       'ru-store': true
     }, ruStoreLinkClassName),
     onClick: onClickRuStore
+  }), linkGalaxyStore && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGalaxyStore
+    },
+    theme: StoreButtonTheme.GALAXY_STORE,
+    href: linkGalaxyStore,
+    rel: rel,
+    className: cn('store-link', {
+      'galaxy-store': true
+    }, galaxyStoreLinkClassName),
+    onClick: onClickGalaxyStore
   }), linkHuawei && /*#__PURE__*/React.createElement(StoreButton, {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkHuawei
@@ -174,6 +188,8 @@ StoreBanner.propTypes = {
   text: PropTypes.string.isRequired,
   linkApple: PropTypes.string,
   onClickApple: PropTypes.func,
+  linkGalaxyStore: PropTypes.string,
+  onClickGalaxyStore: PropTypes.func,
   linkGoogle: PropTypes.string,
   onClickGoogle: PropTypes.func,
   linkHuawei: PropTypes.string,
@@ -191,6 +207,7 @@ StoreBanner.propTypes = {
   className: PropTypes.string,
   classes: PropTypes.shape({
     appleLink: PropTypes.string,
+    galaxyStoreLink: PropTypes.string,
     googleLink: PropTypes.string,
     huaweiLink: PropTypes.string,
     miStoreLink: PropTypes.string,
@@ -204,6 +221,7 @@ StoreBanner.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     button: PropTypes.objectOf(PropTypes.string.isRequired),
     linkApple: PropTypes.objectOf(PropTypes.string.isRequired),
+    linkGalaxyStore: PropTypes.objectOf(PropTypes.string.isRequired),
     linkGoogle: PropTypes.objectOf(PropTypes.string.isRequired),
     linkHuawei: PropTypes.objectOf(PropTypes.string.isRequired),
     linkMiStore: PropTypes.objectOf(PropTypes.string.isRequired),

package/dist/es/components/StoreButton/StoreButton.css

@@ -7,6 +7,9 @@
 .mfui-store-button_theme_app-store {
   background-image: url('./img/app-store.png');
 }
+.mfui-store-button_theme_galaxy-store {
+  background-image: url('./img/galaxy-store.png');
+}
 .mfui-store-button_theme_google-play {
   background-image: url('./img/google-play.png');
 }

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

@@ -3,6 +3,7 @@ import { Link } from '@megafon/ui-core';
 import './StoreButton.less';
 export declare enum Theme {
     APP_STORE = "app-store",
+    GALAXY_STORE = "galaxy-store",
     GOOGLE_PLAY = "google-play",
     HUAWEI_STORE = "huawei-store",
     MI_STORE = "mi-store",

package/dist/es/components/StoreButton/StoreButton.js

@@ -25,6 +25,7 @@ export var Theme;
 
 (function (Theme) {
   Theme["APP_STORE"] = "app-store";
+  Theme["GALAXY_STORE"] = "galaxy-store";
   Theme["GOOGLE_PLAY"] = "google-play";
   Theme["HUAWEI_STORE"] = "huawei-store";
   Theme["MI_STORE"] = "mi-store";

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

@@ -81,6 +81,12 @@ h5 {
     margin-right: 40px;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__picture_vertical-align_top {
+    -ms-flex-item-align: start;
+        align-self: flex-start;
+  }
+}
 .mfui-instructions_mask_none .mfui-instructions__slide {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -119,6 +125,7 @@ h5 {
 }
 .mfui-instructions__device-screen {
   overflow: hidden;
+  pointer-events: none;
 }
 @media screen and (max-width: 1023px) {
   .mfui-instructions_mask_black-iphone .mfui-instructions__img-wrapper,

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

@@ -5,6 +5,10 @@ export declare const pictureAlignTypes: {
     readonly LEFT: "left";
     readonly RIGHT: "right";
 };
+export declare const pictureVerticalAlignTypes: {
+    CENTER: string;
+    TOP: string;
+};
 export declare const pictureMaskTypes: {
     readonly ANDROID: "android";
     readonly NEW_IPHONE: "new-iphone";
@@ -15,6 +19,7 @@ export declare const pictureMaskTypes: {
     readonly NONE: "none";
 };
 declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
+declare type PictureVerticalAlignTypesType = typeof pictureVerticalAlignTypes[keyof typeof pictureVerticalAlignTypes];
 declare type PictureMaskTypesType = typeof pictureMaskTypes[keyof typeof pictureMaskTypes];
 export declare type InstructionItemType = {
     title: string | React.ReactNode | React.ReactNode[];
@@ -49,8 +54,10 @@ export interface IInstructionsProps {
     instructionItems: InstructionItemType[];
     /** Описание после инструкции */
     additionalText?: string;
-    /** Расположение изображения */
+    /** Расположение изображения по горизонтали */
     pictureAlign?: PictureAlignTypesType;
+    /** Расположение изображения по вертикали */
+    pictureVerticalAlign?: PictureVerticalAlignTypesType;
     /** Маска изображения */
     pictureMask?: PictureMaskTypesType;
     /** Ref на swiper */

package/dist/lib/components/Instructions/Instructions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.pictureMaskTypes = exports.pictureAlignTypes = void 0;
+exports["default"] = exports.pictureMaskTypes = exports.pictureVerticalAlignTypes = exports.pictureAlignTypes = void 0;
 
 require("core-js/modules/es.array.map");
 
@@ -31,6 +31,11 @@ var pictureAlignTypes = {
   RIGHT: 'right'
 };
 exports.pictureAlignTypes = pictureAlignTypes;
+var pictureVerticalAlignTypes = {
+  CENTER: 'center',
+  TOP: 'top'
+};
+exports.pictureVerticalAlignTypes = pictureVerticalAlignTypes;
 var pictureMaskTypes = {
   ANDROID: 'android',
   NEW_IPHONE: 'new-iphone',
@@ -61,6 +66,8 @@ var Instructions = function Instructions(_ref) {
       instructionItems = _ref.instructionItems,
       _ref$pictureAlign = _ref.pictureAlign,
       pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+      _ref$pictureVerticalA = _ref.pictureVerticalAlign,
+      pictureVerticalAlign = _ref$pictureVerticalA === void 0 ? 'center' : _ref$pictureVerticalA,
       _ref$pictureMask = _ref.pictureMask,
       pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
       getSwiper = _ref.getSwiper,
@@ -242,7 +249,8 @@ var Instructions = function Instructions(_ref) {
     className: cn('wrapper')
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('picture', {
-      align: pictureAlign
+      align: pictureAlign,
+      'vertical-align': pictureVerticalAlign
     })
   }, renderPicture()), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('articles', {

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

@@ -31,9 +31,13 @@ export interface IStoreBannerProps {
     linkGoogle?: LinkHrefType;
     /** Обработчик клика по ссылке в Google Play */
     onClickGoogle?: LinkOnClickType;
-    /** Ссылка на скачивание приложения в Huawei App Gallery */
+    /** Ссылка на скачивание приложения в Samsung Galaxy Store */
+    linkGalaxyStore?: LinkHrefType;
+    /** Обработчик клика по ссылке в Samsung Galaxy Store */
+    onClickGalaxyStore?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в Huawei AppGallery */
     linkHuawei?: LinkHrefType;
-    /** Обработчик клика по ссылке в Huawei App Gallery */
+    /** Обработчик клика по ссылке в Huawei AppGallery */
     onClickHuawei?: LinkOnClickType;
     /** Ссылка на скачивание приложения в RuStore */
     linkRuStore?: LinkHrefType;
@@ -65,6 +69,7 @@ export interface IStoreBannerProps {
     classes?: {
         root?: string;
         appleLink?: string;
+        galaxyStoreLink?: string;
         googleLink?: string;
         huaweiLink?: string;
         miStoreLink?: string;
@@ -77,6 +82,7 @@ export interface IStoreBannerProps {
         root?: Record<string, string>;
         button?: Record<string, string>;
         linkApple?: Record<string, string>;
+        linkGalaxyStore?: Record<string, string>;
         linkGoogle?: Record<string, string>;
         linkHuawei?: Record<string, string>;
         linkMiStore?: Record<string, string>;

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

@@ -50,6 +50,7 @@ var StoreBanner = function StoreBanner(_ref) {
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
   var rootClassName = _ref$classes.root,
       appleLinkClassName = _ref$classes.appleLink,
+      galaxyStoreLinkClassName = _ref$classes.galaxyStoreLink,
       googleLinkClassName = _ref$classes.googleLink,
       huaweiLinkClassName = _ref$classes.huaweiLink,
       miStoreLinkClassName = _ref$classes.miStoreLink,
@@ -57,6 +58,7 @@ var StoreBanner = function StoreBanner(_ref) {
       title = _ref.title,
       text = _ref.text,
       linkApple = _ref.linkApple,
+      linkGalaxyStore = _ref.linkGalaxyStore,
       linkGoogle = _ref.linkGoogle,
       linkHuawei = _ref.linkHuawei,
       linkMiStore = _ref.linkMiStore,
@@ -74,6 +76,7 @@ var StoreBanner = function StoreBanner(_ref) {
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       onClickApple = _ref.onClickApple,
+      onClickGalaxyStore = _ref.onClickGalaxyStore,
       onClickGoogle = _ref.onClickGoogle,
       onClickHuawei = _ref.onClickHuawei,
       onClickMiStore = _ref.onClickMiStore,
@@ -146,6 +149,17 @@ var StoreBanner = function StoreBanner(_ref) {
       'ru-store': true
     }, ruStoreLinkClassName),
     onClick: onClickRuStore
+  }), linkGalaxyStore && /*#__PURE__*/React.createElement(_StoreButton["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGalaxyStore
+    },
+    theme: _StoreButton.Theme.GALAXY_STORE,
+    href: linkGalaxyStore,
+    rel: rel,
+    className: cn('store-link', {
+      'galaxy-store': true
+    }, galaxyStoreLinkClassName),
+    onClick: onClickGalaxyStore
   }), linkHuawei && /*#__PURE__*/React.createElement(_StoreButton["default"], {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkHuawei
@@ -197,6 +211,8 @@ StoreBanner.propTypes = {
   text: _propTypes["default"].string.isRequired,
   linkApple: _propTypes["default"].string,
   onClickApple: _propTypes["default"].func,
+  linkGalaxyStore: _propTypes["default"].string,
+  onClickGalaxyStore: _propTypes["default"].func,
   linkGoogle: _propTypes["default"].string,
   onClickGoogle: _propTypes["default"].func,
   linkHuawei: _propTypes["default"].string,
@@ -214,6 +230,7 @@ StoreBanner.propTypes = {
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     appleLink: _propTypes["default"].string,
+    galaxyStoreLink: _propTypes["default"].string,
     googleLink: _propTypes["default"].string,
     huaweiLink: _propTypes["default"].string,
     miStoreLink: _propTypes["default"].string,
@@ -227,6 +244,7 @@ StoreBanner.propTypes = {
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     button: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     linkApple: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    linkGalaxyStore: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     linkGoogle: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     linkHuawei: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     linkMiStore: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),

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

@@ -7,6 +7,9 @@
 .mfui-store-button_theme_app-store {
   background-image: url('./img/app-store.png');
 }
+.mfui-store-button_theme_galaxy-store {
+  background-image: url('./img/galaxy-store.png');
+}
 .mfui-store-button_theme_google-play {
   background-image: url('./img/google-play.png');
 }

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

@@ -3,6 +3,7 @@ import { Link } from '@megafon/ui-core';
 import './StoreButton.less';
 export declare enum Theme {
     APP_STORE = "app-store",
+    GALAXY_STORE = "galaxy-store",
     GOOGLE_PLAY = "google-play",
     HUAWEI_STORE = "huawei-store",
     MI_STORE = "mi-store",

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

@@ -47,6 +47,7 @@ exports.Theme = Theme;
 
 (function (Theme) {
   Theme["APP_STORE"] = "app-store";
+  Theme["GALAXY_STORE"] = "galaxy-store";
   Theme["GOOGLE_PLAY"] = "google-play";
   Theme["HUAWEI_STORE"] = "huawei-store";
   Theme["MI_STORE"] = "mi-store";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "files": [
     "dist"
   ],
@@ -86,7 +86,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^4.15.2",
+    "@megafon/ui-core": "^4.15.3",
     "@megafon/ui-helpers": "^2.4.0",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -94,5 +94,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "c2d54353eccef1c32cac6aa03b91d48e98dcdb84"
+  "gitHead": "f51175c15bbd3009ef1a67aebb8107d21f43052a"
 }