@megafon/ui-shared 2.0.0-beta.237 → 2.0.0-beta.240

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,47 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [2.0.0-beta.240](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.239...@megafon/ui-shared@2.0.0-beta.240) (2021-11-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **instructions:** fix activeInstructionItem class ([4f4c611](https://github.com/MegafonWebLab/megafon-ui/commit/4f4c611d5fdb227f00c164cc2bcfae6f6eb91c5e))
12
+
13
+
14
+ ### Features
15
+
16
+ * **container:** add new indents to child components ([02a4d5b](https://github.com/MegafonWebLab/megafon-ui/commit/02a4d5b819d7c0c653ab819df04c1f069a94c3b1))
17
+ * **storebanner:** fixed style and changed buttons image ([87b77a8](https://github.com/MegafonWebLab/megafon-ui/commit/87b77a8e5da178f8273287bd1be85ac7ccd8f0bd))
18
+
19
+
20
+
21
+
22
+
23
+ # [2.0.0-beta.239](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.238...@megafon/ui-shared@2.0.0-beta.239) (2021-11-15)
24
+
25
+ **Note:** Version bump only for package @megafon/ui-shared
26
+
27
+
28
+
29
+
30
+
31
+ # [2.0.0-beta.238](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.237...@megafon/ui-shared@2.0.0-beta.238) (2021-11-15)
32
+
33
+
34
+ ### Bug Fixes
35
+
36
+ * **card:** fix icon indent ([5429444](https://github.com/MegafonWebLab/megafon-ui/commit/54294443e0cb8ead74516b0d63ddcf130c29f4f5))
37
+
38
+
39
+ ### Features
40
+
41
+ * **instructions:** add mobile and desktop classes for item ([2f27427](https://github.com/MegafonWebLab/megafon-ui/commit/2f27427e665d234f3f175830c0f3f4ea44486de5))
42
+
43
+
44
+
45
+
46
+
6
47
  # [2.0.0-beta.237](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.236...@megafon/ui-shared@2.0.0-beta.237) (2021-11-15)
7
48
 
8
49
 
@@ -73,22 +73,17 @@ h5 {
73
73
  .mfui-beta-card__fake-link {
74
74
  margin: 12px 10px;
75
75
  }
76
- .mfui-beta-card__pic-wrapper {
77
- margin-bottom: 32px;
76
+ .mfui-beta-card__svg-wrapper {
77
+ margin-bottom: 24px;
78
78
  }
79
- @media screen and (max-width: 767px) {
80
- .mfui-beta-card__pic-wrapper {
81
- margin-bottom: 24px;
82
- }
79
+ .mfui-beta-card__svg-wrapper svg {
80
+ width: 40px;
81
+ height: 40px;
83
82
  }
84
83
  .mfui-beta-card__pic-wrapper .mfui-beta-card__img {
85
84
  max-width: 100%;
86
85
  }
87
- .mfui-beta-card__pic-wrapper svg {
88
- width: 40px;
89
- height: 40px;
90
- }
91
- .mfui-beta-card__pic-wrapper_img {
86
+ .mfui-beta-card__pic-wrapper {
92
87
  display: -webkit-box;
93
88
  display: -ms-flexbox;
94
89
  display: flex;
@@ -100,12 +95,14 @@ h5 {
100
95
  justify-content: center;
101
96
  margin-top: -32px;
102
97
  margin-right: -20px;
98
+ margin-bottom: 32px;
103
99
  margin-left: -20px;
104
100
  }
105
101
  @media screen and (max-width: 767px) {
106
- .mfui-beta-card__pic-wrapper_img {
102
+ .mfui-beta-card__pic-wrapper {
107
103
  margin-top: -24px;
108
104
  margin-right: -16px;
105
+ margin-bottom: 24px;
109
106
  margin-left: -16px;
110
107
  }
111
108
  }
@@ -47,8 +47,7 @@ var Card = function Card(_ref) {
47
47
  {
48
48
  return /*#__PURE__*/React.createElement("div", {
49
49
  className: cn('pic-wrapper', {
50
- 'object-fit': objectFit,
51
- img: true
50
+ 'object-fit': objectFit
52
51
  })
53
52
  }, /*#__PURE__*/React.createElement("img", {
54
53
  className: cn('img'),
@@ -59,7 +58,7 @@ var Card = function Card(_ref) {
59
58
  case !!svgSrc:
60
59
  {
61
60
  return /*#__PURE__*/React.createElement("div", {
62
- className: cn('pic-wrapper')
61
+ className: cn('svg-wrapper')
63
62
  }, svgSrc);
64
63
  }
65
64
 
@@ -2104,19 +2104,41 @@ h5 {
2104
2104
  margin-top: 40px;
2105
2105
  }
2106
2106
  }
2107
+ .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-download-links {
2108
+ margin-top: 56px;
2109
+ }
2107
2110
  .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-text-box {
2108
2111
  margin-top: 56px;
2109
2112
  }
2110
2113
  @media screen and (min-width: 768px) and (max-width: 1023px) {
2114
+ .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-download-links {
2115
+ margin-top: 48px;
2116
+ }
2111
2117
  .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-text-box {
2112
2118
  margin-top: 48px;
2113
2119
  }
2114
2120
  }
2115
2121
  @media screen and (max-width: 767px) {
2122
+ .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-download-links {
2123
+ margin-top: 40px;
2124
+ }
2116
2125
  .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-text-box {
2117
2126
  margin-top: 40px;
2118
2127
  }
2119
2128
  }
2129
+ .mfui-beta-container .mfui-beta-download-links + .mfui-beta-text-box {
2130
+ margin-top: 56px;
2131
+ }
2132
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
2133
+ .mfui-beta-container .mfui-beta-download-links + .mfui-beta-text-box {
2134
+ margin-top: 48px;
2135
+ }
2136
+ }
2137
+ @media screen and (max-width: 767px) {
2138
+ .mfui-beta-container .mfui-beta-download-links + .mfui-beta-text-box {
2139
+ margin-top: 40px;
2140
+ }
2141
+ }
2120
2142
  .mfui-beta-container .mfui-beta-text-box + .mfui-beta-benefits-icons {
2121
2143
  margin-top: 56px;
2122
2144
  }
@@ -27,6 +27,8 @@ export interface IInstructionsProps {
27
27
  /** Дополнительные классы для внутренних элементов */
28
28
  classes?: {
29
29
  instructionItem?: string;
30
+ desktopInstructionItem?: string;
31
+ mobileInstructionItem?: string;
30
32
  activeInstructionItem?: string;
31
33
  desktopItemTitle?: string;
32
34
  mobileItemTitle?: string;
@@ -1,4 +1,3 @@
1
- import "core-js/modules/es.array.concat";
2
1
  import "core-js/modules/es.array.map";
3
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
3
  import React from 'react';
@@ -29,6 +28,8 @@ var Instructions = function Instructions(_ref) {
29
28
  _ref$classes = _ref.classes;
30
29
  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
31
30
  var instructionItem = _ref$classes.instructionItem,
31
+ desktopInstructionItem = _ref$classes.desktopInstructionItem,
32
+ mobileInstructionItem = _ref$classes.mobileInstructionItem,
32
33
  activeInstructionItem = _ref$classes.activeInstructionItem,
33
34
  desktopItemTitle = _ref$classes.desktopItemTitle,
34
35
  mobileItemTitle = _ref$classes.mobileItemTitle,
@@ -57,13 +58,13 @@ var Instructions = function Instructions(_ref) {
57
58
  setSwiperInstance(swiper);
58
59
  getSwiper && getSwiper(swiper);
59
60
  }, []);
60
- var getArticleCustomClasses = React.useCallback(function (articleIndex, activeIndex) {
61
- if (!instructionItem || !activeInstructionItem) {
61
+ var getActiveCustomClass = React.useCallback(function (articleIndex, activeIndex) {
62
+ if (articleIndex !== activeIndex) {
62
63
  return;
63
64
  }
64
65
 
65
- return articleIndex === activeIndex ? "".concat(instructionItem, " ").concat(activeInstructionItem) : instructionItem;
66
- }, [instructionItem, activeInstructionItem]);
66
+ return activeInstructionItem;
67
+ }, [activeInstructionItem]);
67
68
  var handleArticleClick = React.useCallback(function (ind) {
68
69
  return function () {
69
70
  setSlideIndex(ind);
@@ -136,7 +137,7 @@ var Instructions = function Instructions(_ref) {
136
137
  return /*#__PURE__*/React.createElement("li", {
137
138
  className: cn('articles-item', {
138
139
  active: slideIndex === ind
139
- }, [getArticleCustomClasses(ind, slideIndex)]),
140
+ }, [getActiveCustomClass(ind, slideIndex), instructionItem, desktopInstructionItem]),
140
141
  "data-index": ind,
141
142
  onClick: handleArticleClick(ind),
142
143
  key: ind
@@ -172,7 +173,7 @@ var Instructions = function Instructions(_ref) {
172
173
  key: ind,
173
174
  className: cn('articles-dot', {
174
175
  active: slideIndex === ind
175
- }, [getArticleCustomClasses(ind, slideIndex)]),
176
+ }, [getActiveCustomClass(ind, slideIndex), instructionItem, mobileInstructionItem]),
176
177
  onClick: handleArticleClick(ind)
177
178
  }, /*#__PURE__*/React.createElement("span", {
178
179
  className: cn('articles-dot-number')
@@ -207,6 +208,8 @@ Instructions.propTypes = {
207
208
  }), PropTypes.any])]),
208
209
  classes: PropTypes.shape({
209
210
  instructionItem: PropTypes.string,
211
+ desktopInstructionItem: PropTypes.string,
212
+ mobileInstructionItem: PropTypes.string,
210
213
  activeInstructionItem: PropTypes.string,
211
214
  desktopItemTitle: PropTypes.string,
212
215
  mobileItemTitle: PropTypes.string,
@@ -220,6 +220,9 @@ h5 {
220
220
  -webkit-transform: translateX(-50%);
221
221
  transform: translateX(-50%);
222
222
  }
223
+ .mfui-beta-store-banner__button {
224
+ margin: 0 auto;
225
+ }
223
226
  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code {
224
227
  -o-object-fit: contain;
225
228
  object-fit: contain;
@@ -262,8 +265,22 @@ h5 {
262
265
  margin-right: 0;
263
266
  }
264
267
  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link {
265
- width: 119px;
266
- height: 35px;
268
+ width: 136px;
269
+ height: 40px;
270
+ }
271
+ @media screen and (max-width: 1023px) {
272
+ .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link {
273
+ width: 119px;
274
+ height: 35px;
275
+ }
276
+ }
277
+ .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link:not(:last-child) {
278
+ margin-bottom: 8px;
279
+ }
280
+ @media screen and (max-width: 767px) {
281
+ .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link:not(:last-child) {
282
+ margin-bottom: 16px;
283
+ }
267
284
  }
268
285
  @media screen and (max-width: 1023px) {
269
286
  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link:not(:first-child) {
@@ -73,22 +73,17 @@ h5 {
73
73
  .mfui-beta-card__fake-link {
74
74
  margin: 12px 10px;
75
75
  }
76
- .mfui-beta-card__pic-wrapper {
77
- margin-bottom: 32px;
76
+ .mfui-beta-card__svg-wrapper {
77
+ margin-bottom: 24px;
78
78
  }
79
- @media screen and (max-width: 767px) {
80
- .mfui-beta-card__pic-wrapper {
81
- margin-bottom: 24px;
82
- }
79
+ .mfui-beta-card__svg-wrapper svg {
80
+ width: 40px;
81
+ height: 40px;
83
82
  }
84
83
  .mfui-beta-card__pic-wrapper .mfui-beta-card__img {
85
84
  max-width: 100%;
86
85
  }
87
- .mfui-beta-card__pic-wrapper svg {
88
- width: 40px;
89
- height: 40px;
90
- }
91
- .mfui-beta-card__pic-wrapper_img {
86
+ .mfui-beta-card__pic-wrapper {
92
87
  display: -webkit-box;
93
88
  display: -ms-flexbox;
94
89
  display: flex;
@@ -100,12 +95,14 @@ h5 {
100
95
  justify-content: center;
101
96
  margin-top: -32px;
102
97
  margin-right: -20px;
98
+ margin-bottom: 32px;
103
99
  margin-left: -20px;
104
100
  }
105
101
  @media screen and (max-width: 767px) {
106
- .mfui-beta-card__pic-wrapper_img {
102
+ .mfui-beta-card__pic-wrapper {
107
103
  margin-top: -24px;
108
104
  margin-right: -16px;
105
+ margin-bottom: 24px;
109
106
  margin-left: -16px;
110
107
  }
111
108
  }
@@ -65,8 +65,7 @@ var Card = function Card(_ref) {
65
65
  {
66
66
  return /*#__PURE__*/_react["default"].createElement("div", {
67
67
  className: cn('pic-wrapper', {
68
- 'object-fit': objectFit,
69
- img: true
68
+ 'object-fit': objectFit
70
69
  })
71
70
  }, /*#__PURE__*/_react["default"].createElement("img", {
72
71
  className: cn('img'),
@@ -77,7 +76,7 @@ var Card = function Card(_ref) {
77
76
  case !!svgSrc:
78
77
  {
79
78
  return /*#__PURE__*/_react["default"].createElement("div", {
80
- className: cn('pic-wrapper')
79
+ className: cn('svg-wrapper')
81
80
  }, svgSrc);
82
81
  }
83
82
 
@@ -2104,19 +2104,41 @@ h5 {
2104
2104
  margin-top: 40px;
2105
2105
  }
2106
2106
  }
2107
+ .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-download-links {
2108
+ margin-top: 56px;
2109
+ }
2107
2110
  .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-text-box {
2108
2111
  margin-top: 56px;
2109
2112
  }
2110
2113
  @media screen and (min-width: 768px) and (max-width: 1023px) {
2114
+ .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-download-links {
2115
+ margin-top: 48px;
2116
+ }
2111
2117
  .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-text-box {
2112
2118
  margin-top: 48px;
2113
2119
  }
2114
2120
  }
2115
2121
  @media screen and (max-width: 767px) {
2122
+ .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-download-links {
2123
+ margin-top: 40px;
2124
+ }
2116
2125
  .mfui-beta-container .mfui-beta-button-link-box + .mfui-beta-text-box {
2117
2126
  margin-top: 40px;
2118
2127
  }
2119
2128
  }
2129
+ .mfui-beta-container .mfui-beta-download-links + .mfui-beta-text-box {
2130
+ margin-top: 56px;
2131
+ }
2132
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
2133
+ .mfui-beta-container .mfui-beta-download-links + .mfui-beta-text-box {
2134
+ margin-top: 48px;
2135
+ }
2136
+ }
2137
+ @media screen and (max-width: 767px) {
2138
+ .mfui-beta-container .mfui-beta-download-links + .mfui-beta-text-box {
2139
+ margin-top: 40px;
2140
+ }
2141
+ }
2120
2142
  .mfui-beta-container .mfui-beta-text-box + .mfui-beta-benefits-icons {
2121
2143
  margin-top: 56px;
2122
2144
  }
@@ -27,6 +27,8 @@ export interface IInstructionsProps {
27
27
  /** Дополнительные классы для внутренних элементов */
28
28
  classes?: {
29
29
  instructionItem?: string;
30
+ desktopInstructionItem?: string;
31
+ mobileInstructionItem?: string;
30
32
  activeInstructionItem?: string;
31
33
  desktopItemTitle?: string;
32
34
  mobileItemTitle?: string;
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports["default"] = exports.pictureMaskTypes = exports.pictureAlignTypes = void 0;
7
7
 
8
- require("core-js/modules/es.array.concat");
9
-
10
8
  require("core-js/modules/es.array.map");
11
9
 
12
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -48,6 +46,8 @@ var Instructions = function Instructions(_ref) {
48
46
  _ref$classes = _ref.classes;
49
47
  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
50
48
  var instructionItem = _ref$classes.instructionItem,
49
+ desktopInstructionItem = _ref$classes.desktopInstructionItem,
50
+ mobileInstructionItem = _ref$classes.mobileInstructionItem,
51
51
  activeInstructionItem = _ref$classes.activeInstructionItem,
52
52
  desktopItemTitle = _ref$classes.desktopItemTitle,
53
53
  mobileItemTitle = _ref$classes.mobileItemTitle,
@@ -77,13 +77,13 @@ var Instructions = function Instructions(_ref) {
77
77
  getSwiper && getSwiper(swiper);
78
78
  }, []);
79
79
 
80
- var getArticleCustomClasses = _react["default"].useCallback(function (articleIndex, activeIndex) {
81
- if (!instructionItem || !activeInstructionItem) {
80
+ var getActiveCustomClass = _react["default"].useCallback(function (articleIndex, activeIndex) {
81
+ if (articleIndex !== activeIndex) {
82
82
  return;
83
83
  }
84
84
 
85
- return articleIndex === activeIndex ? "".concat(instructionItem, " ").concat(activeInstructionItem) : instructionItem;
86
- }, [instructionItem, activeInstructionItem]);
85
+ return activeInstructionItem;
86
+ }, [activeInstructionItem]);
87
87
 
88
88
  var handleArticleClick = _react["default"].useCallback(function (ind) {
89
89
  return function () {
@@ -163,7 +163,7 @@ var Instructions = function Instructions(_ref) {
163
163
  return /*#__PURE__*/_react["default"].createElement("li", {
164
164
  className: cn('articles-item', {
165
165
  active: slideIndex === ind
166
- }, [getArticleCustomClasses(ind, slideIndex)]),
166
+ }, [getActiveCustomClass(ind, slideIndex), instructionItem, desktopInstructionItem]),
167
167
  "data-index": ind,
168
168
  onClick: handleArticleClick(ind),
169
169
  key: ind
@@ -200,7 +200,7 @@ var Instructions = function Instructions(_ref) {
200
200
  key: ind,
201
201
  className: cn('articles-dot', {
202
202
  active: slideIndex === ind
203
- }, [getArticleCustomClasses(ind, slideIndex)]),
203
+ }, [getActiveCustomClass(ind, slideIndex), instructionItem, mobileInstructionItem]),
204
204
  onClick: handleArticleClick(ind)
205
205
  }, /*#__PURE__*/_react["default"].createElement("span", {
206
206
  className: cn('articles-dot-number')
@@ -236,6 +236,8 @@ Instructions.propTypes = {
236
236
  }), _propTypes["default"].any])]),
237
237
  classes: _propTypes["default"].shape({
238
238
  instructionItem: _propTypes["default"].string,
239
+ desktopInstructionItem: _propTypes["default"].string,
240
+ mobileInstructionItem: _propTypes["default"].string,
239
241
  activeInstructionItem: _propTypes["default"].string,
240
242
  desktopItemTitle: _propTypes["default"].string,
241
243
  mobileItemTitle: _propTypes["default"].string,
@@ -220,6 +220,9 @@ h5 {
220
220
  -webkit-transform: translateX(-50%);
221
221
  transform: translateX(-50%);
222
222
  }
223
+ .mfui-beta-store-banner__button {
224
+ margin: 0 auto;
225
+ }
223
226
  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code {
224
227
  -o-object-fit: contain;
225
228
  object-fit: contain;
@@ -262,8 +265,22 @@ h5 {
262
265
  margin-right: 0;
263
266
  }
264
267
  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link {
265
- width: 119px;
266
- height: 35px;
268
+ width: 136px;
269
+ height: 40px;
270
+ }
271
+ @media screen and (max-width: 1023px) {
272
+ .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link {
273
+ width: 119px;
274
+ height: 35px;
275
+ }
276
+ }
277
+ .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link:not(:last-child) {
278
+ margin-bottom: 8px;
279
+ }
280
+ @media screen and (max-width: 767px) {
281
+ .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link:not(:last-child) {
282
+ margin-bottom: 16px;
283
+ }
267
284
  }
268
285
  @media screen and (max-width: 1023px) {
269
286
  .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link:not(:first-child) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "2.0.0-beta.237",
3
+ "version": "2.0.0-beta.240",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -80,7 +80,7 @@
80
80
  },
81
81
  "dependencies": {
82
82
  "@babel/runtime": "^7.8.4",
83
- "@megafon/ui-core": "^2.0.0-beta.166",
83
+ "@megafon/ui-core": "^2.0.0-beta.168",
84
84
  "@megafon/ui-helpers": "^1.0.0-beta.2",
85
85
  "core-js": "^3.6.4",
86
86
  "htmr": "^0.9.2",
@@ -88,5 +88,5 @@
88
88
  "prop-types": "^15.7.2",
89
89
  "swiper": "^6.5.6"
90
90
  },
91
- "gitHead": "254ee112f9080fbe99ad5f697309097a3aa9bbf9"
91
+ "gitHead": "ffa46c2f7563f7ae284daba239683d7699121a73"
92
92
  }