@megafon/ui-shared 5.7.7 → 5.8.0

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/es/components/ImageBanner/ImageBanner.css +232 -0
  3. package/dist/es/components/ImageBanner/ImageBanner.d.ts +76 -0
  4. package/dist/es/components/ImageBanner/ImageBanner.js +178 -0
  5. package/dist/es/components/StoreButton/StoreButton.css +61 -0
  6. package/dist/es/index.d.ts +1 -0
  7. package/dist/es/index.js +1 -0
  8. package/dist/lib/components/ImageBanner/ImageBanner.css +232 -0
  9. package/dist/lib/components/ImageBanner/ImageBanner.d.ts +76 -0
  10. package/dist/lib/components/ImageBanner/ImageBanner.js +211 -0
  11. package/dist/lib/components/StoreButton/StoreButton.css +61 -0
  12. package/dist/lib/index.d.ts +1 -0
  13. package/dist/lib/index.js +8 -0
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
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
+ # [5.8.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.7.7...@megafon/ui-shared@5.8.0) (2024-04-22)
7
+
8
+
9
+ ### Features
10
+
11
+ * **bannerbox:** update BannerBox component ([0025c97](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/0025c97271ac45d6bef618759922f4d97e6d303f))
12
+ * **imagebanner:** add ImageBanner component ([c8890ff](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/c8890ffffabc31beb0265047c1d53c21be807900))
13
+ * **storebutton:** add sizes for StoreButton component, add docs ([d8b3102](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/d8b31023a04d970c019e47b6e7eaf5dcb03e9cbd))
14
+
15
+
16
+
17
+
18
+
6
19
  ## [5.7.7](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.7.6...@megafon/ui-shared@5.7.7) (2024-04-11)
7
20
 
8
21
  **Note:** Version bump only for package @megafon/ui-shared
package/dist/es/components/ImageBanner/ImageBanner.css ADDED
@@ -0,0 +1,232 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-image-banner {
9
+ position: relative;
10
+ overflow: hidden;
11
+ }
12
+ @media screen and (min-width: 1024px) {
13
+ .mfui-image-banner {
14
+ height: 420px;
15
+ padding: 0 80px;
16
+ }
17
+ }
18
+ @media screen and (min-width: 1024px) {
19
+ .mfui-image-banner__wrapper {
20
+ display: -webkit-box;
21
+ display: -ms-flexbox;
22
+ display: flex;
23
+ -webkit-box-align: center;
24
+ -ms-flex-align: center;
25
+ align-items: center;
26
+ height: 100%;
27
+ }
28
+ }
29
+ .mfui-image-banner__picture {
30
+ display: -webkit-box;
31
+ display: -ms-flexbox;
32
+ display: flex;
33
+ -ms-flex-negative: 0;
34
+ flex-shrink: 0;
35
+ -webkit-box-pack: center;
36
+ -ms-flex-pack: center;
37
+ justify-content: center;
38
+ }
39
+ @media screen and (min-width: 1024px) {
40
+ .mfui-image-banner__picture {
41
+ width: 356px;
42
+ height: 100%;
43
+ }
44
+ }
45
+ @media screen and (min-width: 1280px) {
46
+ .mfui-image-banner__picture {
47
+ width: 408px;
48
+ }
49
+ }
50
+ .mfui-image-banner__picture_v-align_top {
51
+ -webkit-box-align: start;
52
+ -ms-flex-align: start;
53
+ align-items: flex-start;
54
+ }
55
+ .mfui-image-banner__picture_v-align_center {
56
+ -webkit-box-align: center;
57
+ -ms-flex-align: center;
58
+ align-items: center;
59
+ }
60
+ .mfui-image-banner__picture_v-align_bottom {
61
+ -webkit-box-align: end;
62
+ -ms-flex-align: end;
63
+ align-items: flex-end;
64
+ }
65
+ .mfui-image-banner__background-image {
66
+ display: block;
67
+ max-width: 100%;
68
+ max-height: 250px;
69
+ }
70
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
71
+ .mfui-image-banner__background-image {
72
+ max-height: 280px;
73
+ }
74
+ }
75
+ @media screen and (min-width: 1024px) {
76
+ .mfui-image-banner__background-image {
77
+ max-height: 100%;
78
+ -o-object-fit: contain;
79
+ object-fit: contain;
80
+ }
81
+ }
82
+ .mfui-image-banner__content {
83
+ z-index: 1;
84
+ }
85
+ @media screen and (max-width: 1023px) {
86
+ .mfui-image-banner__content {
87
+ padding: 24px;
88
+ }
89
+ }
90
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
91
+ .mfui-image-banner__content {
92
+ text-align: center;
93
+ }
94
+ }
95
+ @media screen and (max-width: 1023px) {
96
+ .mfui-image-banner_bottom-offset .mfui-image-banner__content {
97
+ padding-bottom: 72px;
98
+ }
99
+ }
100
+ .mfui-image-banner__description {
101
+ margin-top: 16px;
102
+ white-space: pre-wrap;
103
+ }
104
+ .mfui-image-banner__cost {
105
+ font-size: 15px;
106
+ line-height: 24px;
107
+ font-weight: 500;
108
+ margin-top: 16px;
109
+ }
110
+ .mfui-image-banner__value {
111
+ display: inline;
112
+ margin: 0 4px;
113
+ }
114
+ @media screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1279px) {
115
+ .mfui-image-banner__value {
116
+ line-height: 21px;
117
+ }
118
+ }
119
+ .mfui-image-banner__title,
120
+ .mfui-image-banner__text {
121
+ white-space: pre-wrap;
122
+ }
123
+ .mfui-image-banner__children {
124
+ display: -webkit-box;
125
+ display: -ms-flexbox;
126
+ display: flex;
127
+ -webkit-box-orient: vertical;
128
+ -webkit-box-direction: normal;
129
+ -ms-flex-direction: column;
130
+ flex-direction: column;
131
+ -ms-flex-wrap: wrap;
132
+ flex-wrap: wrap;
133
+ gap: 16px;
134
+ -webkit-box-align: center;
135
+ -ms-flex-align: center;
136
+ align-items: center;
137
+ -webkit-box-pack: center;
138
+ -ms-flex-pack: center;
139
+ justify-content: center;
140
+ margin-top: 32px;
141
+ }
142
+ @media screen and (min-width: 768px) {
143
+ .mfui-image-banner__children {
144
+ -webkit-box-orient: horizontal;
145
+ -webkit-box-direction: normal;
146
+ -ms-flex-direction: row;
147
+ flex-direction: row;
148
+ }
149
+ }
150
+ @media screen and (min-width: 1024px) {
151
+ .mfui-image-banner__children {
152
+ -webkit-box-pack: start;
153
+ -ms-flex-pack: start;
154
+ justify-content: flex-start;
155
+ }
156
+ }
157
+ @media screen and (max-width: 1023px) {
158
+ .mfui-image-banner__badges-container {
159
+ display: -webkit-box;
160
+ display: -ms-flexbox;
161
+ display: flex;
162
+ gap: 8px;
163
+ }
164
+ }
165
+ .mfui-image-banner__badges {
166
+ display: -webkit-box;
167
+ display: -ms-flexbox;
168
+ display: flex;
169
+ -webkit-box-flex: 1;
170
+ -ms-flex-positive: 1;
171
+ flex-grow: 1;
172
+ -ms-flex-wrap: wrap;
173
+ flex-wrap: wrap;
174
+ gap: 8px;
175
+ margin-bottom: 16px;
176
+ }
177
+ @media screen and (min-width: 1024px) {
178
+ .mfui-image-banner__ad-block {
179
+ position: absolute;
180
+ top: 24px;
181
+ right: 24px;
182
+ }
183
+ }
184
+ @media screen and (min-width: 1024px) {
185
+ .mfui-image-banner_auto-height .mfui-image-banner__content {
186
+ padding: 48px 0;
187
+ }
188
+ }
189
+ @media screen and (min-width: 1024px) {
190
+ .mfui-image-banner_auto-height {
191
+ height: auto;
192
+ }
193
+ }
194
+ @media screen and (min-width: 1024px) {
195
+ .mfui-image-banner_full-width .mfui-image-banner__background-image {
196
+ position: absolute;
197
+ right: 0;
198
+ bottom: 0;
199
+ display: block;
200
+ max-width: unset;
201
+ }
202
+ }
203
+ @media screen and (min-width: 1024px) {
204
+ .mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__background-image {
205
+ width: 100%;
206
+ height: 100%;
207
+ -o-object-fit: cover;
208
+ object-fit: cover;
209
+ }
210
+ }
211
+ .mfui-image-banner_background-color_green {
212
+ background-color: var(--brandGreen);
213
+ }
214
+ .mfui-image-banner_background-color_purple {
215
+ background-color: var(--brandPurple);
216
+ }
217
+ .mfui-image-banner_background-color_gradient {
218
+ background: -webkit-gradient(linear, right top, left top, from(#ADA6BA), to(#F6F2F9));
219
+ background: linear-gradient(270deg, #ADA6BA 0%, #F6F2F9 100%);
220
+ }
221
+ .mfui-image-banner_background-color_light {
222
+ background-color: #F6F2F9;
223
+ }
224
+ .mfui-image-banner_background-color_spbSky0 {
225
+ background-color: var(--spbSky0);
226
+ }
227
+ .mfui-image-banner_text-color_light .mfui-image-banner__content {
228
+ color: var(--stcWhite);
229
+ }
230
+ .mfui-image-banner_text-color_dark .mfui-image-banner__content {
231
+ color: var(--stcBlack);
232
+ }
package/dist/es/components/ImageBanner/ImageBanner.d.ts ADDED
@@ -0,0 +1,76 @@
1
+ import React, { Ref } from 'react';
2
+ import { PriceBadge } from '@megafon/ui-core';
3
+ import './ImageBanner.less';
4
+ export declare const BackgroundColor: {
5
+ readonly TRANSPARENT: "transparent";
6
+ readonly GREEN: "green";
7
+ readonly PURPLE: "purple";
8
+ readonly SPB_SKY_0: "spbSky0";
9
+ readonly GRADIENT: "gradient";
10
+ readonly LIGHT: "light";
11
+ };
12
+ export declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
13
+ export declare const NavTheme: {
14
+ readonly LIGHT: "light";
15
+ readonly DARK: "dark";
16
+ };
17
+ export declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
18
+ export declare const ImageVerticalAlign: {
19
+ readonly TOP: "top";
20
+ readonly CENTER: "center";
21
+ readonly BOTTOM: "bottom";
22
+ };
23
+ export declare type ImageVerticalAlignType = typeof ImageVerticalAlign[keyof typeof ImageVerticalAlign];
24
+ declare type PriceBadgeTypes = React.ComponentProps<typeof PriceBadge>;
25
+ export declare type PriceBadgePropsType = Pick<PriceBadgeTypes, 'iconType'> & {
26
+ /** Текст бейджа */
27
+ text: string;
28
+ };
29
+ export interface IImageBannerProps {
30
+ /** Дополнительные data атрибуты к внутренним элементам */
31
+ dataAttrs?: {
32
+ root?: Record<string, string>;
33
+ image?: Record<string, string>;
34
+ };
35
+ /** Дополнительный класс корневого элемента */
36
+ className?: string;
37
+ /** Дополнительные классы для корневого и внутренних элементов */
38
+ classes?: {
39
+ root?: string;
40
+ image?: string;
41
+ };
42
+ /** Ссылка на корневой элемент */
43
+ rootRef?: Ref<HTMLDivElement>;
44
+ /** Заголовок */
45
+ title: string;
46
+ /** Текст-описание */
47
+ description?: string;
48
+ /** Строка со стоимостью услуги */
49
+ cost?: string;
50
+ /** Фоновый цвет */
51
+ backgroundColor?: BackgroundColorType;
52
+ /** Изображение на разрешении экрана 0-1023 */
53
+ imageMobile?: string;
54
+ /** Изображение 2x на разрешении экрана 0-1023 */
55
+ imageMobile2x?: string;
56
+ /** Изображение на разрешении экрана 1024+ */
57
+ imageDesktop?: string;
58
+ /** Изображение на разрешении экрана 1024+ */
59
+ imageDesktop2x?: string;
60
+ /** Значение тега alt для изображения */
61
+ imageAlt?: string;
62
+ /** Значение тега alt для изображения */
63
+ imageVerticalAlign?: ImageVerticalAlignType;
64
+ /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */
65
+ autoHeight?: boolean;
66
+ /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
67
+ isImageFullWidth?: boolean;
68
+ /** Данные для блока с бейджами */
69
+ badges?: PriceBadgePropsType[];
70
+ /** Дополнительный отступ снизу при использовании в баннере */
71
+ hasBottomOffset?: boolean;
72
+ /** Элемент блока с рекламой */
73
+ adBlock?: JSX.Element;
74
+ }
75
+ declare const ImageBanner: React.FC<IImageBannerProps>;
76
+ export default ImageBanner;
package/dist/es/components/ImageBanner/ImageBanner.js ADDED
@@ -0,0 +1,178 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import "core-js/modules/es.symbol.js";
3
+ import "core-js/modules/es.symbol.description.js";
4
+ import "core-js/modules/es.array.map.js";
5
+ import "core-js/modules/es.array.concat.js";
6
+ import "core-js/modules/es.object.values.js";
7
+ import React from 'react';
8
+ import { Header, PriceBadge } from '@megafon/ui-core';
9
+ import { breakpoints, cnCreate, filterDataAttrs, convert, titleConvertConfig } from '@megafon/ui-helpers';
10
+ import * as PropTypes from 'prop-types';
11
+ import "./ImageBanner.css";
12
+ export var BackgroundColor = {
13
+ TRANSPARENT: 'transparent',
14
+ GREEN: 'green',
15
+ PURPLE: 'purple',
16
+ SPB_SKY_0: 'spbSky0',
17
+ GRADIENT: 'gradient',
18
+ LIGHT: 'light'
19
+ };
20
+ export var NavTheme = {
21
+ LIGHT: 'light',
22
+ DARK: 'dark'
23
+ };
24
+ export var ImageVerticalAlign = {
25
+ TOP: 'top',
26
+ CENTER: 'center',
27
+ BOTTOM: 'bottom'
28
+ };
29
+
30
+ var getTheme = function getTheme(backgrounColor) {
31
+ switch (backgrounColor) {
32
+ case BackgroundColor.GREEN:
33
+ case BackgroundColor.PURPLE:
34
+ return NavTheme.LIGHT;
35
+
36
+ default:
37
+ return NavTheme.DARK;
38
+ }
39
+ };
40
+
41
+ var cn = cnCreate('mfui-image-banner');
42
+ var typographyConfig = {
43
+ b: {
44
+ component: function component(_ref) {
45
+ var children = _ref.children;
46
+ return /*#__PURE__*/React.createElement(Header, {
47
+ className: cn('value'),
48
+ as: "h3",
49
+ color: "inherit"
50
+ }, children);
51
+ }
52
+ }
53
+ };
54
+
55
+ var ImageBanner = function ImageBanner(_ref2) {
56
+ var dataAttrs = _ref2.dataAttrs,
57
+ className = _ref2.className,
58
+ _ref2$classes = _ref2.classes,
59
+ classes = _ref2$classes === void 0 ? {} : _ref2$classes,
60
+ rootRef = _ref2.rootRef,
61
+ _ref2$imageMobile = _ref2.imageMobile,
62
+ imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
63
+ _ref2$imageMobile2x = _ref2.imageMobile2x,
64
+ imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
65
+ _ref2$imageDesktop = _ref2.imageDesktop,
66
+ imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
67
+ _ref2$imageDesktop2x = _ref2.imageDesktop2x,
68
+ imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
69
+ _ref2$imageAlt = _ref2.imageAlt,
70
+ imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
71
+ _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
72
+ imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
73
+ title = _ref2.title,
74
+ description = _ref2.description,
75
+ cost = _ref2.cost,
76
+ _ref2$backgroundColor = _ref2.backgroundColor,
77
+ backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
78
+ autoHeight = _ref2.autoHeight,
79
+ isImageFullWidth = _ref2.isImageFullWidth,
80
+ _ref2$badges = _ref2.badges,
81
+ badges = _ref2$badges === void 0 ? [] : _ref2$badges,
82
+ hasBottomOffset = _ref2.hasBottomOffset,
83
+ adBlock = _ref2.adBlock,
84
+ _ref2$children = _ref2.children,
85
+ children = _ref2$children === void 0 ? [] : _ref2$children;
86
+ var navTheme = getTheme(backgroundColor);
87
+ var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
88
+ var renderBadges = !!badges.length && /*#__PURE__*/React.createElement("div", {
89
+ className: cn('badges')
90
+ }, badges.map(function (_ref3) {
91
+ var text = _ref3.text,
92
+ iconType = _ref3.iconType;
93
+ return /*#__PURE__*/React.createElement(PriceBadge, {
94
+ theme: navTheme,
95
+ iconType: iconType,
96
+ key: text
97
+ }, text);
98
+ }));
99
+ var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
100
+ className: cn('ad-block')
101
+ }, adBlock);
102
+ var renderContent = /*#__PURE__*/React.createElement("div", {
103
+ className: cn('content')
104
+ }, /*#__PURE__*/React.createElement("div", {
105
+ className: cn('badges-container')
106
+ }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(Header, {
107
+ className: cn('title'),
108
+ color: "inherit"
109
+ }, convert(title, titleConvertConfig)), !!description && /*#__PURE__*/React.createElement(Header, {
110
+ className: cn('description'),
111
+ as: "h5",
112
+ color: "inherit"
113
+ }, convert(description, titleConvertConfig)), !!cost && /*#__PURE__*/React.createElement("div", {
114
+ className: cn('cost')
115
+ }, convert(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
116
+ className: cn('children')
117
+ }, children));
118
+ var renderImage = /*#__PURE__*/React.createElement("picture", {
119
+ className: cn('picture', {
120
+ 'v-align': imageVerticalAlign
121
+ })
122
+ }, /*#__PURE__*/React.createElement("source", {
123
+ media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
124
+ srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
125
+ }), /*#__PURE__*/React.createElement("img", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
126
+ className: cn('background-image', [classes.image]),
127
+ src: imageMobile || imageMobile2x,
128
+ srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
129
+ alt: imageAlt
130
+ })));
131
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
132
+ className: cn({
133
+ 'background-color': backgroundColor,
134
+ 'text-color': navTheme,
135
+ 'has-image': hasImage,
136
+ 'auto-height': autoHeight,
137
+ 'full-width': isImageFullWidth,
138
+ 'bottom-offset': hasBottomOffset && !hasImage
139
+ }, [className, classes.root]),
140
+ ref: rootRef
141
+ }), /*#__PURE__*/React.createElement("div", {
142
+ className: cn('wrapper')
143
+ }, renderContent, hasImage && renderImage));
144
+ };
145
+
146
+ ImageBanner.propTypes = {
147
+ dataAttrs: PropTypes.shape({
148
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
149
+ image: PropTypes.objectOf(PropTypes.string.isRequired)
150
+ }),
151
+ className: PropTypes.string,
152
+ classes: PropTypes.shape({
153
+ root: PropTypes.string,
154
+ image: PropTypes.string
155
+ }),
156
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
157
+ current: PropTypes.elementType
158
+ }), PropTypes.any])]),
159
+ title: PropTypes.string.isRequired,
160
+ description: PropTypes.string,
161
+ cost: PropTypes.string,
162
+ backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
163
+ imageMobile: PropTypes.string,
164
+ imageMobile2x: PropTypes.string,
165
+ imageDesktop: PropTypes.string,
166
+ imageDesktop2x: PropTypes.string,
167
+ imageAlt: PropTypes.string,
168
+ imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
169
+ autoHeight: PropTypes.bool,
170
+ isImageFullWidth: PropTypes.bool,
171
+ badges: PropTypes.arrayOf(PropTypes.shape({
172
+ iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
173
+ text: PropTypes.string.isRequired
174
+ }).isRequired),
175
+ hasBottomOffset: PropTypes.bool,
176
+ adBlock: PropTypes.element
177
+ };
178
+ export default ImageBanner;
package/dist/es/components/StoreButton/StoreButton.css CHANGED
@@ -6,11 +6,24 @@ h5 {
6
6
  margin: 0;
7
7
  }
8
8
  .mfui-store-button {
9
+ display: inline-block;
9
10
  border-radius: 8px;
10
11
  background-repeat: no-repeat;
11
12
  background-position: center;
12
13
  background-size: cover;
13
14
  }
15
+ .mfui-store-button_size-all_small {
16
+ width: 119px;
17
+ height: 35px;
18
+ }
19
+ .mfui-store-button_size-all_medium {
20
+ width: 136px;
21
+ height: 40px;
22
+ }
23
+ .mfui-store-button_size-all_large {
24
+ width: 238px;
25
+ height: 70px;
26
+ }
14
27
  .mfui-store-button_size-all_small.mfui-store-button_theme_app-store,
15
28
  .mfui-store-button_size-all_medium.mfui-store-button_theme_app-store {
16
29
  background-image: url('./img/app-store.png');
@@ -61,6 +74,18 @@ h5 {
61
74
  background-image: url('./img/v-appstore-large.png');
62
75
  }
63
76
  @media screen and (min-width: 1024px) {
77
+ .mfui-store-button_size-desktop_small {
78
+ width: 119px;
79
+ height: 35px;
80
+ }
81
+ .mfui-store-button_size-desktop_medium {
82
+ width: 136px;
83
+ height: 40px;
84
+ }
85
+ .mfui-store-button_size-desktop_large {
86
+ width: 238px;
87
+ height: 70px;
88
+ }
64
89
  .mfui-store-button_size-desktop_small.mfui-store-button_theme_app-store,
65
90
  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_app-store {
66
91
  background-image: url('./img/app-store.png');
@@ -112,6 +137,18 @@ h5 {
112
137
  }
113
138
  }
114
139
  @media screen and (min-width: 1280px) {
140
+ .mfui-store-button_size-wide_small {
141
+ width: 119px;
142
+ height: 35px;
143
+ }
144
+ .mfui-store-button_size-wide_medium {
145
+ width: 136px;
146
+ height: 40px;
147
+ }
148
+ .mfui-store-button_size-wide_large {
149
+ width: 238px;
150
+ height: 70px;
151
+ }
115
152
  .mfui-store-button_size-wide_small.mfui-store-button_theme_app-store,
116
153
  .mfui-store-button_size-wide_medium.mfui-store-button_theme_app-store {
117
154
  background-image: url('./img/app-store.png');
@@ -163,6 +200,18 @@ h5 {
163
200
  }
164
201
  }
165
202
  @media screen and (min-width: 768px) and (max-width: 1023px) {
203
+ .mfui-store-button_size-tablet_small {
204
+ width: 119px;
205
+ height: 35px;
206
+ }
207
+ .mfui-store-button_size-tablet_medium {
208
+ width: 136px;
209
+ height: 40px;
210
+ }
211
+ .mfui-store-button_size-tablet_large {
212
+ width: 238px;
213
+ height: 70px;
214
+ }
166
215
  .mfui-store-button_size-tablet_small.mfui-store-button_theme_app-store,
167
216
  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_app-store {
168
217
  background-image: url('./img/app-store.png');
@@ -214,6 +263,18 @@ h5 {
214
263
  }
215
264
  }
216
265
  @media screen and (max-width: 767px) {
266
+ .mfui-store-button_size-mobile_small {
267
+ width: 119px;
268
+ height: 35px;
269
+ }
270
+ .mfui-store-button_size-mobile_medium {
271
+ width: 136px;
272
+ height: 40px;
273
+ }
274
+ .mfui-store-button_size-mobile_large {
275
+ width: 238px;
276
+ height: 70px;
277
+ }
217
278
  .mfui-store-button_size-mobile_small.mfui-store-button_theme_app-store,
218
279
  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_app-store {
219
280
  background-image: url('./img/app-store.png');
package/dist/es/index.d.ts CHANGED
@@ -18,6 +18,7 @@ export { default as Container } from './components/Container/Container';
18
18
  export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
19
19
  export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
20
20
  export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';
21
+ export { default as ImageBanner } from './components/ImageBanner/ImageBanner';
21
22
  export { default as Instructions } from './components/Instructions/Instructions';
22
23
  export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
23
24
  export { default as PageTitle } from './components/PageTitle/PageTitle';
package/dist/es/index.js CHANGED
@@ -18,6 +18,7 @@ export { default as Container } from "./components/Container/Container";
18
18
  export { default as DownloadLink } from "./components/DownloadLinks/DownloadLink";
19
19
  export { default as DownloadLinks } from "./components/DownloadLinks/DownloadLinks";
20
20
  export { default as FaqWrapper } from "./components/FaqWrapper/FaqWrapper";
21
+ export { default as ImageBanner } from "./components/ImageBanner/ImageBanner";
21
22
  export { default as Instructions } from "./components/Instructions/Instructions";
22
23
  export { default as NotificationBox } from "./components/NotificationBox/NotificationBox";
23
24
  export { default as PageTitle } from "./components/PageTitle/PageTitle";
package/dist/lib/components/ImageBanner/ImageBanner.css ADDED
@@ -0,0 +1,232 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-image-banner {
9
+ position: relative;
10
+ overflow: hidden;
11
+ }
12
+ @media screen and (min-width: 1024px) {
13
+ .mfui-image-banner {
14
+ height: 420px;
15
+ padding: 0 80px;
16
+ }
17
+ }
18
+ @media screen and (min-width: 1024px) {
19
+ .mfui-image-banner__wrapper {
20
+ display: -webkit-box;
21
+ display: -ms-flexbox;
22
+ display: flex;
23
+ -webkit-box-align: center;
24
+ -ms-flex-align: center;
25
+ align-items: center;
26
+ height: 100%;
27
+ }
28
+ }
29
+ .mfui-image-banner__picture {
30
+ display: -webkit-box;
31
+ display: -ms-flexbox;
32
+ display: flex;
33
+ -ms-flex-negative: 0;
34
+ flex-shrink: 0;
35
+ -webkit-box-pack: center;
36
+ -ms-flex-pack: center;
37
+ justify-content: center;
38
+ }
39
+ @media screen and (min-width: 1024px) {
40
+ .mfui-image-banner__picture {
41
+ width: 356px;
42
+ height: 100%;
43
+ }
44
+ }
45
+ @media screen and (min-width: 1280px) {
46
+ .mfui-image-banner__picture {
47
+ width: 408px;
48
+ }
49
+ }
50
+ .mfui-image-banner__picture_v-align_top {
51
+ -webkit-box-align: start;
52
+ -ms-flex-align: start;
53
+ align-items: flex-start;
54
+ }
55
+ .mfui-image-banner__picture_v-align_center {
56
+ -webkit-box-align: center;
57
+ -ms-flex-align: center;
58
+ align-items: center;
59
+ }
60
+ .mfui-image-banner__picture_v-align_bottom {
61
+ -webkit-box-align: end;
62
+ -ms-flex-align: end;
63
+ align-items: flex-end;
64
+ }
65
+ .mfui-image-banner__background-image {
66
+ display: block;
67
+ max-width: 100%;
68
+ max-height: 250px;
69
+ }
70
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
71
+ .mfui-image-banner__background-image {
72
+ max-height: 280px;
73
+ }
74
+ }
75
+ @media screen and (min-width: 1024px) {
76
+ .mfui-image-banner__background-image {
77
+ max-height: 100%;
78
+ -o-object-fit: contain;
79
+ object-fit: contain;
80
+ }
81
+ }
82
+ .mfui-image-banner__content {
83
+ z-index: 1;
84
+ }
85
+ @media screen and (max-width: 1023px) {
86
+ .mfui-image-banner__content {
87
+ padding: 24px;
88
+ }
89
+ }
90
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
91
+ .mfui-image-banner__content {
92
+ text-align: center;
93
+ }
94
+ }
95
+ @media screen and (max-width: 1023px) {
96
+ .mfui-image-banner_bottom-offset .mfui-image-banner__content {
97
+ padding-bottom: 72px;
98
+ }
99
+ }
100
+ .mfui-image-banner__description {
101
+ margin-top: 16px;
102
+ white-space: pre-wrap;
103
+ }
104
+ .mfui-image-banner__cost {
105
+ font-size: 15px;
106
+ line-height: 24px;
107
+ font-weight: 500;
108
+ margin-top: 16px;
109
+ }
110
+ .mfui-image-banner__value {
111
+ display: inline;
112
+ margin: 0 4px;
113
+ }
114
+ @media screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1279px) {
115
+ .mfui-image-banner__value {
116
+ line-height: 21px;
117
+ }
118
+ }
119
+ .mfui-image-banner__title,
120
+ .mfui-image-banner__text {
121
+ white-space: pre-wrap;
122
+ }
123
+ .mfui-image-banner__children {
124
+ display: -webkit-box;
125
+ display: -ms-flexbox;
126
+ display: flex;
127
+ -webkit-box-orient: vertical;
128
+ -webkit-box-direction: normal;
129
+ -ms-flex-direction: column;
130
+ flex-direction: column;
131
+ -ms-flex-wrap: wrap;
132
+ flex-wrap: wrap;
133
+ gap: 16px;
134
+ -webkit-box-align: center;
135
+ -ms-flex-align: center;
136
+ align-items: center;
137
+ -webkit-box-pack: center;
138
+ -ms-flex-pack: center;
139
+ justify-content: center;
140
+ margin-top: 32px;
141
+ }
142
+ @media screen and (min-width: 768px) {
143
+ .mfui-image-banner__children {
144
+ -webkit-box-orient: horizontal;
145
+ -webkit-box-direction: normal;
146
+ -ms-flex-direction: row;
147
+ flex-direction: row;
148
+ }
149
+ }
150
+ @media screen and (min-width: 1024px) {
151
+ .mfui-image-banner__children {
152
+ -webkit-box-pack: start;
153
+ -ms-flex-pack: start;
154
+ justify-content: flex-start;
155
+ }
156
+ }
157
+ @media screen and (max-width: 1023px) {
158
+ .mfui-image-banner__badges-container {
159
+ display: -webkit-box;
160
+ display: -ms-flexbox;
161
+ display: flex;
162
+ gap: 8px;
163
+ }
164
+ }
165
+ .mfui-image-banner__badges {
166
+ display: -webkit-box;
167
+ display: -ms-flexbox;
168
+ display: flex;
169
+ -webkit-box-flex: 1;
170
+ -ms-flex-positive: 1;
171
+ flex-grow: 1;
172
+ -ms-flex-wrap: wrap;
173
+ flex-wrap: wrap;
174
+ gap: 8px;
175
+ margin-bottom: 16px;
176
+ }
177
+ @media screen and (min-width: 1024px) {
178
+ .mfui-image-banner__ad-block {
179
+ position: absolute;
180
+ top: 24px;
181
+ right: 24px;
182
+ }
183
+ }
184
+ @media screen and (min-width: 1024px) {
185
+ .mfui-image-banner_auto-height .mfui-image-banner__content {
186
+ padding: 48px 0;
187
+ }
188
+ }
189
+ @media screen and (min-width: 1024px) {
190
+ .mfui-image-banner_auto-height {
191
+ height: auto;
192
+ }
193
+ }
194
+ @media screen and (min-width: 1024px) {
195
+ .mfui-image-banner_full-width .mfui-image-banner__background-image {
196
+ position: absolute;
197
+ right: 0;
198
+ bottom: 0;
199
+ display: block;
200
+ max-width: unset;
201
+ }
202
+ }
203
+ @media screen and (min-width: 1024px) {
204
+ .mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__background-image {
205
+ width: 100%;
206
+ height: 100%;
207
+ -o-object-fit: cover;
208
+ object-fit: cover;
209
+ }
210
+ }
211
+ .mfui-image-banner_background-color_green {
212
+ background-color: var(--brandGreen);
213
+ }
214
+ .mfui-image-banner_background-color_purple {
215
+ background-color: var(--brandPurple);
216
+ }
217
+ .mfui-image-banner_background-color_gradient {
218
+ background: -webkit-gradient(linear, right top, left top, from(#ADA6BA), to(#F6F2F9));
219
+ background: linear-gradient(270deg, #ADA6BA 0%, #F6F2F9 100%);
220
+ }
221
+ .mfui-image-banner_background-color_light {
222
+ background-color: #F6F2F9;
223
+ }
224
+ .mfui-image-banner_background-color_spbSky0 {
225
+ background-color: var(--spbSky0);
226
+ }
227
+ .mfui-image-banner_text-color_light .mfui-image-banner__content {
228
+ color: var(--stcWhite);
229
+ }
230
+ .mfui-image-banner_text-color_dark .mfui-image-banner__content {
231
+ color: var(--stcBlack);
232
+ }
package/dist/lib/components/ImageBanner/ImageBanner.d.ts ADDED
@@ -0,0 +1,76 @@
1
+ import React, { Ref } from 'react';
2
+ import { PriceBadge } from '@megafon/ui-core';
3
+ import './ImageBanner.less';
4
+ export declare const BackgroundColor: {
5
+ readonly TRANSPARENT: "transparent";
6
+ readonly GREEN: "green";
7
+ readonly PURPLE: "purple";
8
+ readonly SPB_SKY_0: "spbSky0";
9
+ readonly GRADIENT: "gradient";
10
+ readonly LIGHT: "light";
11
+ };
12
+ export declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
13
+ export declare const NavTheme: {
14
+ readonly LIGHT: "light";
15
+ readonly DARK: "dark";
16
+ };
17
+ export declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
18
+ export declare const ImageVerticalAlign: {
19
+ readonly TOP: "top";
20
+ readonly CENTER: "center";
21
+ readonly BOTTOM: "bottom";
22
+ };
23
+ export declare type ImageVerticalAlignType = typeof ImageVerticalAlign[keyof typeof ImageVerticalAlign];
24
+ declare type PriceBadgeTypes = React.ComponentProps<typeof PriceBadge>;
25
+ export declare type PriceBadgePropsType = Pick<PriceBadgeTypes, 'iconType'> & {
26
+ /** Текст бейджа */
27
+ text: string;
28
+ };
29
+ export interface IImageBannerProps {
30
+ /** Дополнительные data атрибуты к внутренним элементам */
31
+ dataAttrs?: {
32
+ root?: Record<string, string>;
33
+ image?: Record<string, string>;
34
+ };
35
+ /** Дополнительный класс корневого элемента */
36
+ className?: string;
37
+ /** Дополнительные классы для корневого и внутренних элементов */
38
+ classes?: {
39
+ root?: string;
40
+ image?: string;
41
+ };
42
+ /** Ссылка на корневой элемент */
43
+ rootRef?: Ref<HTMLDivElement>;
44
+ /** Заголовок */
45
+ title: string;
46
+ /** Текст-описание */
47
+ description?: string;
48
+ /** Строка со стоимостью услуги */
49
+ cost?: string;
50
+ /** Фоновый цвет */
51
+ backgroundColor?: BackgroundColorType;
52
+ /** Изображение на разрешении экрана 0-1023 */
53
+ imageMobile?: string;
54
+ /** Изображение 2x на разрешении экрана 0-1023 */
55
+ imageMobile2x?: string;
56
+ /** Изображение на разрешении экрана 1024+ */
57
+ imageDesktop?: string;
58
+ /** Изображение на разрешении экрана 1024+ */
59
+ imageDesktop2x?: string;
60
+ /** Значение тега alt для изображения */
61
+ imageAlt?: string;
62
+ /** Значение тега alt для изображения */
63
+ imageVerticalAlign?: ImageVerticalAlignType;
64
+ /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */
65
+ autoHeight?: boolean;
66
+ /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
67
+ isImageFullWidth?: boolean;
68
+ /** Данные для блока с бейджами */
69
+ badges?: PriceBadgePropsType[];
70
+ /** Дополнительный отступ снизу при использовании в баннере */
71
+ hasBottomOffset?: boolean;
72
+ /** Элемент блока с рекламой */
73
+ adBlock?: JSX.Element;
74
+ }
75
+ declare const ImageBanner: React.FC<IImageBannerProps>;
76
+ export default ImageBanner;
package/dist/lib/components/ImageBanner/ImageBanner.js ADDED
@@ -0,0 +1,211 @@
1
+ "use strict";
2
+
3
+ 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); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = exports.ImageVerticalAlign = exports.NavTheme = exports.BackgroundColor = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
12
+ require("core-js/modules/es.symbol.js");
13
+
14
+ require("core-js/modules/es.symbol.description.js");
15
+
16
+ require("core-js/modules/es.array.map.js");
17
+
18
+ require("core-js/modules/es.array.concat.js");
19
+
20
+ require("core-js/modules/es.object.values.js");
21
+
22
+ var _react = _interopRequireDefault(require("react"));
23
+
24
+ var _uiCore = require("@megafon/ui-core");
25
+
26
+ var _uiHelpers = require("@megafon/ui-helpers");
27
+
28
+ var PropTypes = _interopRequireWildcard(require("prop-types"));
29
+
30
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
+
32
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
33
+
34
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
35
+
36
+ var BackgroundColor = {
37
+ TRANSPARENT: 'transparent',
38
+ GREEN: 'green',
39
+ PURPLE: 'purple',
40
+ SPB_SKY_0: 'spbSky0',
41
+ GRADIENT: 'gradient',
42
+ LIGHT: 'light'
43
+ };
44
+ exports.BackgroundColor = BackgroundColor;
45
+ var NavTheme = {
46
+ LIGHT: 'light',
47
+ DARK: 'dark'
48
+ };
49
+ exports.NavTheme = NavTheme;
50
+ var ImageVerticalAlign = {
51
+ TOP: 'top',
52
+ CENTER: 'center',
53
+ BOTTOM: 'bottom'
54
+ };
55
+ exports.ImageVerticalAlign = ImageVerticalAlign;
56
+
57
+ var getTheme = function getTheme(backgrounColor) {
58
+ switch (backgrounColor) {
59
+ case BackgroundColor.GREEN:
60
+ case BackgroundColor.PURPLE:
61
+ return NavTheme.LIGHT;
62
+
63
+ default:
64
+ return NavTheme.DARK;
65
+ }
66
+ };
67
+
68
+ var cn = (0, _uiHelpers.cnCreate)('mfui-image-banner');
69
+ var typographyConfig = {
70
+ b: {
71
+ component: function component(_ref) {
72
+ var children = _ref.children;
73
+ return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
74
+ className: cn('value'),
75
+ as: "h3",
76
+ color: "inherit"
77
+ }, children);
78
+ }
79
+ }
80
+ };
81
+
82
+ var ImageBanner = function ImageBanner(_ref2) {
83
+ var dataAttrs = _ref2.dataAttrs,
84
+ className = _ref2.className,
85
+ _ref2$classes = _ref2.classes,
86
+ classes = _ref2$classes === void 0 ? {} : _ref2$classes,
87
+ rootRef = _ref2.rootRef,
88
+ _ref2$imageMobile = _ref2.imageMobile,
89
+ imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
90
+ _ref2$imageMobile2x = _ref2.imageMobile2x,
91
+ imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
92
+ _ref2$imageDesktop = _ref2.imageDesktop,
93
+ imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
94
+ _ref2$imageDesktop2x = _ref2.imageDesktop2x,
95
+ imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
96
+ _ref2$imageAlt = _ref2.imageAlt,
97
+ imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
98
+ _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
99
+ imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
100
+ title = _ref2.title,
101
+ description = _ref2.description,
102
+ cost = _ref2.cost,
103
+ _ref2$backgroundColor = _ref2.backgroundColor,
104
+ backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
105
+ autoHeight = _ref2.autoHeight,
106
+ isImageFullWidth = _ref2.isImageFullWidth,
107
+ _ref2$badges = _ref2.badges,
108
+ badges = _ref2$badges === void 0 ? [] : _ref2$badges,
109
+ hasBottomOffset = _ref2.hasBottomOffset,
110
+ adBlock = _ref2.adBlock,
111
+ _ref2$children = _ref2.children,
112
+ children = _ref2$children === void 0 ? [] : _ref2$children;
113
+ var navTheme = getTheme(backgroundColor);
114
+ var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
115
+
116
+ var renderBadges = !!badges.length && /*#__PURE__*/_react["default"].createElement("div", {
117
+ className: cn('badges')
118
+ }, badges.map(function (_ref3) {
119
+ var text = _ref3.text,
120
+ iconType = _ref3.iconType;
121
+ return /*#__PURE__*/_react["default"].createElement(_uiCore.PriceBadge, {
122
+ theme: navTheme,
123
+ iconType: iconType,
124
+ key: text
125
+ }, text);
126
+ }));
127
+
128
+ var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
129
+ className: cn('ad-block')
130
+ }, adBlock);
131
+
132
+ var renderContent = /*#__PURE__*/_react["default"].createElement("div", {
133
+ className: cn('content')
134
+ }, /*#__PURE__*/_react["default"].createElement("div", {
135
+ className: cn('badges-container')
136
+ }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
137
+ className: cn('title'),
138
+ color: "inherit"
139
+ }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
140
+ className: cn('description'),
141
+ as: "h5",
142
+ color: "inherit"
143
+ }, (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig)), !!cost && /*#__PURE__*/_react["default"].createElement("div", {
144
+ className: cn('cost')
145
+ }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!_react["default"].Children.count(children) && /*#__PURE__*/_react["default"].createElement("div", {
146
+ className: cn('children')
147
+ }, children));
148
+
149
+ var renderImage = /*#__PURE__*/_react["default"].createElement("picture", {
150
+ className: cn('picture', {
151
+ 'v-align': imageVerticalAlign
152
+ })
153
+ }, /*#__PURE__*/_react["default"].createElement("source", {
154
+ media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
155
+ srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
156
+ }), /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
157
+ className: cn('background-image', [classes.image]),
158
+ src: imageMobile || imageMobile2x,
159
+ srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
160
+ alt: imageAlt
161
+ })));
162
+
163
+ return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
164
+ className: cn({
165
+ 'background-color': backgroundColor,
166
+ 'text-color': navTheme,
167
+ 'has-image': hasImage,
168
+ 'auto-height': autoHeight,
169
+ 'full-width': isImageFullWidth,
170
+ 'bottom-offset': hasBottomOffset && !hasImage
171
+ }, [className, classes.root]),
172
+ ref: rootRef
173
+ }), /*#__PURE__*/_react["default"].createElement("div", {
174
+ className: cn('wrapper')
175
+ }, renderContent, hasImage && renderImage));
176
+ };
177
+
178
+ ImageBanner.propTypes = {
179
+ dataAttrs: PropTypes.shape({
180
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
181
+ image: PropTypes.objectOf(PropTypes.string.isRequired)
182
+ }),
183
+ className: PropTypes.string,
184
+ classes: PropTypes.shape({
185
+ root: PropTypes.string,
186
+ image: PropTypes.string
187
+ }),
188
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
189
+ current: PropTypes.elementType
190
+ }), PropTypes.any])]),
191
+ title: PropTypes.string.isRequired,
192
+ description: PropTypes.string,
193
+ cost: PropTypes.string,
194
+ backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
195
+ imageMobile: PropTypes.string,
196
+ imageMobile2x: PropTypes.string,
197
+ imageDesktop: PropTypes.string,
198
+ imageDesktop2x: PropTypes.string,
199
+ imageAlt: PropTypes.string,
200
+ imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
201
+ autoHeight: PropTypes.bool,
202
+ isImageFullWidth: PropTypes.bool,
203
+ badges: PropTypes.arrayOf(PropTypes.shape({
204
+ iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
205
+ text: PropTypes.string.isRequired
206
+ }).isRequired),
207
+ hasBottomOffset: PropTypes.bool,
208
+ adBlock: PropTypes.element
209
+ };
210
+ var _default = ImageBanner;
211
+ exports["default"] = _default;
package/dist/lib/components/StoreButton/StoreButton.css CHANGED
@@ -6,11 +6,24 @@ h5 {
6
6
  margin: 0;
7
7
  }
8
8
  .mfui-store-button {
9
+ display: inline-block;
9
10
  border-radius: 8px;
10
11
  background-repeat: no-repeat;
11
12
  background-position: center;
12
13
  background-size: cover;
13
14
  }
15
+ .mfui-store-button_size-all_small {
16
+ width: 119px;
17
+ height: 35px;
18
+ }
19
+ .mfui-store-button_size-all_medium {
20
+ width: 136px;
21
+ height: 40px;
22
+ }
23
+ .mfui-store-button_size-all_large {
24
+ width: 238px;
25
+ height: 70px;
26
+ }
14
27
  .mfui-store-button_size-all_small.mfui-store-button_theme_app-store,
15
28
  .mfui-store-button_size-all_medium.mfui-store-button_theme_app-store {
16
29
  background-image: url('./img/app-store.png');
@@ -61,6 +74,18 @@ h5 {
61
74
  background-image: url('./img/v-appstore-large.png');
62
75
  }
63
76
  @media screen and (min-width: 1024px) {
77
+ .mfui-store-button_size-desktop_small {
78
+ width: 119px;
79
+ height: 35px;
80
+ }
81
+ .mfui-store-button_size-desktop_medium {
82
+ width: 136px;
83
+ height: 40px;
84
+ }
85
+ .mfui-store-button_size-desktop_large {
86
+ width: 238px;
87
+ height: 70px;
88
+ }
64
89
  .mfui-store-button_size-desktop_small.mfui-store-button_theme_app-store,
65
90
  .mfui-store-button_size-desktop_medium.mfui-store-button_theme_app-store {
66
91
  background-image: url('./img/app-store.png');
@@ -112,6 +137,18 @@ h5 {
112
137
  }
113
138
  }
114
139
  @media screen and (min-width: 1280px) {
140
+ .mfui-store-button_size-wide_small {
141
+ width: 119px;
142
+ height: 35px;
143
+ }
144
+ .mfui-store-button_size-wide_medium {
145
+ width: 136px;
146
+ height: 40px;
147
+ }
148
+ .mfui-store-button_size-wide_large {
149
+ width: 238px;
150
+ height: 70px;
151
+ }
115
152
  .mfui-store-button_size-wide_small.mfui-store-button_theme_app-store,
116
153
  .mfui-store-button_size-wide_medium.mfui-store-button_theme_app-store {
117
154
  background-image: url('./img/app-store.png');
@@ -163,6 +200,18 @@ h5 {
163
200
  }
164
201
  }
165
202
  @media screen and (min-width: 768px) and (max-width: 1023px) {
203
+ .mfui-store-button_size-tablet_small {
204
+ width: 119px;
205
+ height: 35px;
206
+ }
207
+ .mfui-store-button_size-tablet_medium {
208
+ width: 136px;
209
+ height: 40px;
210
+ }
211
+ .mfui-store-button_size-tablet_large {
212
+ width: 238px;
213
+ height: 70px;
214
+ }
166
215
  .mfui-store-button_size-tablet_small.mfui-store-button_theme_app-store,
167
216
  .mfui-store-button_size-tablet_medium.mfui-store-button_theme_app-store {
168
217
  background-image: url('./img/app-store.png');
@@ -214,6 +263,18 @@ h5 {
214
263
  }
215
264
  }
216
265
  @media screen and (max-width: 767px) {
266
+ .mfui-store-button_size-mobile_small {
267
+ width: 119px;
268
+ height: 35px;
269
+ }
270
+ .mfui-store-button_size-mobile_medium {
271
+ width: 136px;
272
+ height: 40px;
273
+ }
274
+ .mfui-store-button_size-mobile_large {
275
+ width: 238px;
276
+ height: 70px;
277
+ }
217
278
  .mfui-store-button_size-mobile_small.mfui-store-button_theme_app-store,
218
279
  .mfui-store-button_size-mobile_medium.mfui-store-button_theme_app-store {
219
280
  background-image: url('./img/app-store.png');
package/dist/lib/index.d.ts CHANGED
@@ -18,6 +18,7 @@ export { default as Container } from './components/Container/Container';
18
18
  export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
19
19
  export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
20
20
  export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';
21
+ export { default as ImageBanner } from './components/ImageBanner/ImageBanner';
21
22
  export { default as Instructions } from './components/Instructions/Instructions';
22
23
  export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
23
24
  export { default as PageTitle } from './components/PageTitle/PageTitle';
package/dist/lib/index.js CHANGED
@@ -123,6 +123,12 @@ Object.defineProperty(exports, "FaqWrapper", {
123
123
  return _FaqWrapper["default"];
124
124
  }
125
125
  });
126
+ Object.defineProperty(exports, "ImageBanner", {
127
+ enumerable: true,
128
+ get: function get() {
129
+ return _ImageBanner["default"];
130
+ }
131
+ });
126
132
  Object.defineProperty(exports, "Instructions", {
127
133
  enumerable: true,
128
134
  get: function get() {
@@ -314,6 +320,8 @@ var _DownloadLinks = _interopRequireDefault(require("./components/DownloadLinks/
314
320
 
315
321
  var _FaqWrapper = _interopRequireDefault(require("./components/FaqWrapper/FaqWrapper"));
316
322
 
323
+ var _ImageBanner = _interopRequireDefault(require("./components/ImageBanner/ImageBanner"));
324
+
317
325
  var _Instructions = _interopRequireDefault(require("./components/Instructions/Instructions"));
318
326
 
319
327
  var _NotificationBox = _interopRequireDefault(require("./components/NotificationBox/NotificationBox"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "5.7.7",
3
+ "version": "5.8.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -82,7 +82,7 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@babel/runtime": "^7.8.4",
85
- "@megafon/ui-core": "^5.9.2",
85
+ "@megafon/ui-core": "^5.10.0",
86
86
  "@megafon/ui-helpers": "^2.5.5",
87
87
  "core-js": "^3.6.4",
88
88
  "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
90
90
  "prop-types": "^15.7.2",
91
91
  "swiper": "^6.5.6"
92
92
  },
93
- "gitHead": "bb0ce323f912035f38087807e7f51ec39ae54af6"
93
+ "gitHead": "01efef995bd43c230a099a002906f61bfa44c730"
94
94
  }