@megafon/ui-shared 5.7.6 → 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.
- package/CHANGELOG.md +21 -0
- package/dist/es/components/ImageBanner/ImageBanner.css +232 -0
- package/dist/es/components/ImageBanner/ImageBanner.d.ts +76 -0
- package/dist/es/components/ImageBanner/ImageBanner.js +178 -0
- package/dist/es/components/StoreButton/StoreButton.css +61 -0
- package/dist/es/index.d.ts +1 -0
- package/dist/es/index.js +1 -0
- package/dist/lib/components/ImageBanner/ImageBanner.css +232 -0
- package/dist/lib/components/ImageBanner/ImageBanner.d.ts +76 -0
- package/dist/lib/components/ImageBanner/ImageBanner.js +211 -0
- package/dist/lib/components/StoreButton/StoreButton.css +61 -0
- package/dist/lib/index.d.ts +1 -0
- package/dist/lib/index.js +8 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,27 @@
|
|
|
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
|
+
|
|
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)
|
|
20
|
+
|
|
21
|
+
**Note:** Version bump only for package @megafon/ui-shared
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
6
27
|
## [5.7.6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.7.5...@megafon/ui-shared@5.7.6) (2024-04-09)
|
|
7
28
|
|
|
8
29
|
**Note:** Version bump only for package @megafon/ui-shared
|
|
@@ -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
|
+
}
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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";
|
|
@@ -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
|
+
}
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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.
|
|
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.
|
|
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": "
|
|
93
|
+
"gitHead": "01efef995bd43c230a099a002906f61bfa44c730"
|
|
94
94
|
}
|