@megafon/ui-shared 3.0.0-beta.7 → 3.0.2
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 +35 -60
- package/README.md +2 -2
- package/dist/es/components/AccordionBox/AccordionBox.d.ts +0 -2
- package/dist/es/components/AccordionBox/AccordionBox.js +0 -1
- package/dist/es/components/Container/Container.css +163 -0
- package/dist/es/components/StoreBanner/StoreBanner.css +21 -22
- package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/es/components/TextBox/TextBox.css +9 -0
- package/dist/es/components/TextWithIcon/TextWithIcon.css +15 -0
- package/dist/es/components/TextWithIcon/TextWithIcon.d.ts +19 -0
- package/dist/es/components/TextWithIcon/TextWithIcon.js +40 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +49 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +18 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.js +35 -0
- package/dist/es/components/VideoBlock/VideoBlock.d.ts +1 -1
- package/dist/es/components/VideoBlock/VideoBlock.js +3 -3
- package/dist/es/index.d.ts +2 -0
- package/dist/es/index.js +2 -0
- package/dist/lib/components/AccordionBox/AccordionBox.d.ts +0 -2
- package/dist/lib/components/AccordionBox/AccordionBox.js +0 -1
- package/dist/lib/components/Container/Container.css +163 -0
- package/dist/lib/components/StoreBanner/StoreBanner.css +21 -22
- package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/lib/components/TextBox/TextBox.css +9 -0
- package/dist/lib/components/TextWithIcon/TextWithIcon.css +15 -0
- package/dist/lib/components/TextWithIcon/TextWithIcon.d.ts +19 -0
- package/dist/lib/components/TextWithIcon/TextWithIcon.js +60 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +49 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +18 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.js +54 -0
- package/dist/lib/components/VideoBlock/VideoBlock.d.ts +1 -1
- package/dist/lib/components/VideoBlock/VideoBlock.js +3 -3
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib/index.js +16 -0
- package/package.json +5 -5
@@ -81,7 +81,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
81
81
|
className: cn('header')
|
82
82
|
}, title), /*#__PURE__*/React.createElement("div", {
|
83
83
|
className: cn('description', [classes.description])
|
84
|
-
}, description), /*#__PURE__*/React.createElement(Button, {
|
84
|
+
}, description), buttonTitle && /*#__PURE__*/React.createElement(Button, {
|
85
85
|
className: cn('button', [classes.button]),
|
86
86
|
href: href,
|
87
87
|
onClick: onButtonClick,
|
@@ -100,7 +100,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
100
100
|
orderTablet: "2",
|
101
101
|
orderMobile: "2",
|
102
102
|
key: "column-content"
|
103
|
-
}, renderContent
|
103
|
+
}, renderContent(content)));
|
104
104
|
}
|
105
105
|
|
106
106
|
columns.push( /*#__PURE__*/React.createElement(GridColumn, {
|
@@ -139,7 +139,7 @@ VideoBlock.propTypes = {
|
|
139
139
|
title: PropTypes.string.isRequired,
|
140
140
|
description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
|
141
141
|
href: PropTypes.string,
|
142
|
-
buttonTitle: PropTypes.string
|
142
|
+
buttonTitle: PropTypes.string,
|
143
143
|
buttonDownload: PropTypes.bool,
|
144
144
|
onButtonClick: PropTypes.func
|
145
145
|
}),
|
package/dist/es/index.d.ts
CHANGED
@@ -29,6 +29,8 @@ export { default as TableRow } from './components/Table/TableRow';
|
|
29
29
|
export { default as TabsBox } from './components/TabsBox/TabsBox';
|
30
30
|
export { default as TextBox } from './components/TextBox/TextBox';
|
31
31
|
export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
|
32
|
+
export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon';
|
33
|
+
export { default as TextWithIconItem } from './components/TextWithIcon/TextWithIconItem';
|
32
34
|
export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
|
33
35
|
export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
|
34
36
|
export { default as VideoBlock } from './components/VideoBlock/VideoBlock';
|
package/dist/es/index.js
CHANGED
@@ -29,6 +29,8 @@ export { default as TableRow } from "./components/Table/TableRow";
|
|
29
29
|
export { default as TabsBox } from "./components/TabsBox/TabsBox";
|
30
30
|
export { default as TextBox } from "./components/TextBox/TextBox";
|
31
31
|
export { default as TextBoxPicture } from "./components/TextBox/TextBoxPicture";
|
32
|
+
export { default as TextWithIcon } from "./components/TextWithIcon/TextWithIcon";
|
33
|
+
export { default as TextWithIconItem } from "./components/TextWithIcon/TextWithIconItem";
|
32
34
|
export { default as TitleDescriptionBox } from "./components/TitleDescriptionBox/TitleDescriptionBox";
|
33
35
|
export { default as VideoBanner } from "./components/VideoBanner/VideoBanner";
|
34
36
|
export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";
|
@@ -15,8 +15,6 @@ export interface IAccordionBox {
|
|
15
15
|
isFullWidth?: boolean;
|
16
16
|
/** Центрирование по горизонтали для расширения 1280+ */
|
17
17
|
hCenterAlignWide?: boolean;
|
18
|
-
/** Вертикальные отступы */
|
19
|
-
hasVerticalPaddings?: boolean;
|
20
18
|
/** Дополнительный класс для корнеовго элемента */
|
21
19
|
className?: string;
|
22
20
|
/** Дополнительные классы для корневого и внутренних элементов */
|
@@ -344,6 +344,9 @@ h5 {
|
|
344
344
|
.mfui-container .mfui-title-description-box + .mfui-download-links {
|
345
345
|
margin-top: 32px;
|
346
346
|
}
|
347
|
+
.mfui-container .mfui-title-description-box + .mfui-text-with-icon {
|
348
|
+
margin-top: 24px;
|
349
|
+
}
|
347
350
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
348
351
|
.mfui-container .mfui-title-description-box + .mfui-benefits-icons {
|
349
352
|
margin-top: 48px;
|
@@ -2230,6 +2233,9 @@ h5 {
|
|
2230
2233
|
.mfui-container .mfui-text-box + .mfui-download-links {
|
2231
2234
|
margin-top: 32px;
|
2232
2235
|
}
|
2236
|
+
.mfui-container .mfui-text-box + .mfui-text-with-icon {
|
2237
|
+
margin-top: 32px;
|
2238
|
+
}
|
2233
2239
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
2234
2240
|
.mfui-container .mfui-text-box + .mfui-benefits-icons {
|
2235
2241
|
margin-top: 48px;
|
@@ -2869,6 +2875,163 @@ h5 {
|
|
2869
2875
|
.mfui-container .mfui-page-title + .mfui-button-link-box {
|
2870
2876
|
margin-top: 0 !important;
|
2871
2877
|
}
|
2878
|
+
.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
|
2879
|
+
margin-top: 40px;
|
2880
|
+
}
|
2881
|
+
.mfui-container .mfui-text-with-icon + .mfui-cards-box {
|
2882
|
+
margin-top: 40px;
|
2883
|
+
}
|
2884
|
+
.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
|
2885
|
+
margin-top: 40px;
|
2886
|
+
}
|
2887
|
+
.mfui-container .mfui-text-with-icon + .mfui-video-block {
|
2888
|
+
margin-top: 40px;
|
2889
|
+
}
|
2890
|
+
.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
|
2891
|
+
margin-top: 40px;
|
2892
|
+
}
|
2893
|
+
.mfui-container .mfui-text-with-icon + .mfui-partners {
|
2894
|
+
margin-top: 40px;
|
2895
|
+
}
|
2896
|
+
.mfui-container .mfui-text-with-icon + .mfui-instructions {
|
2897
|
+
margin-top: 40px;
|
2898
|
+
}
|
2899
|
+
.mfui-container .mfui-text-with-icon + .mfui-property {
|
2900
|
+
margin-top: 40px;
|
2901
|
+
}
|
2902
|
+
.mfui-container .mfui-text-with-icon + .mfui-table {
|
2903
|
+
margin-top: 40px;
|
2904
|
+
}
|
2905
|
+
.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
|
2906
|
+
margin-top: 40px;
|
2907
|
+
}
|
2908
|
+
.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
|
2909
|
+
margin-top: 40px;
|
2910
|
+
}
|
2911
|
+
.mfui-container .mfui-text-with-icon + .mfui-download-links {
|
2912
|
+
margin-top: 40px;
|
2913
|
+
}
|
2914
|
+
.mfui-container .mfui-text-with-icon + .mfui-text-box {
|
2915
|
+
margin-top: 32px;
|
2916
|
+
}
|
2917
|
+
.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
|
2918
|
+
margin-top: 40px;
|
2919
|
+
}
|
2920
|
+
.mfui-container .mfui-text-with-icon + .mfui-store-banner {
|
2921
|
+
margin-top: 40px;
|
2922
|
+
}
|
2923
|
+
.mfui-container .mfui-text-with-icon + .mfui-button-banner {
|
2924
|
+
margin-top: 40px;
|
2925
|
+
}
|
2926
|
+
.mfui-container .mfui-text-with-icon + .mfui-steps {
|
2927
|
+
margin-top: 40px;
|
2928
|
+
}
|
2929
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
2930
|
+
.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
|
2931
|
+
margin-top: 48px;
|
2932
|
+
}
|
2933
|
+
.mfui-container .mfui-text-with-icon + .mfui-cards-box {
|
2934
|
+
margin-top: 48px;
|
2935
|
+
}
|
2936
|
+
.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
|
2937
|
+
margin-top: 48px;
|
2938
|
+
}
|
2939
|
+
.mfui-container .mfui-text-with-icon + .mfui-video-block {
|
2940
|
+
margin-top: 48px;
|
2941
|
+
}
|
2942
|
+
.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
|
2943
|
+
margin-top: 48px;
|
2944
|
+
}
|
2945
|
+
.mfui-container .mfui-text-with-icon + .mfui-partners {
|
2946
|
+
margin-top: 48px;
|
2947
|
+
}
|
2948
|
+
.mfui-container .mfui-text-with-icon + .mfui-instructions {
|
2949
|
+
margin-top: 48px;
|
2950
|
+
}
|
2951
|
+
.mfui-container .mfui-text-with-icon + .mfui-property {
|
2952
|
+
margin-top: 48px;
|
2953
|
+
}
|
2954
|
+
.mfui-container .mfui-text-with-icon + .mfui-table {
|
2955
|
+
margin-top: 48px;
|
2956
|
+
}
|
2957
|
+
.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
|
2958
|
+
margin-top: 48px;
|
2959
|
+
}
|
2960
|
+
.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
|
2961
|
+
margin-top: 48px;
|
2962
|
+
}
|
2963
|
+
.mfui-container .mfui-text-with-icon + .mfui-download-links {
|
2964
|
+
margin-top: 48px;
|
2965
|
+
}
|
2966
|
+
.mfui-container .mfui-text-with-icon + .mfui-text-box {
|
2967
|
+
margin-top: 32px;
|
2968
|
+
}
|
2969
|
+
.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
|
2970
|
+
margin-top: 48px;
|
2971
|
+
}
|
2972
|
+
.mfui-container .mfui-text-with-icon + .mfui-store-banner {
|
2973
|
+
margin-top: 48px;
|
2974
|
+
}
|
2975
|
+
.mfui-container .mfui-text-with-icon + .mfui-button-banner {
|
2976
|
+
margin-top: 48px;
|
2977
|
+
}
|
2978
|
+
.mfui-container .mfui-text-with-icon + .mfui-steps {
|
2979
|
+
margin-top: 48px;
|
2980
|
+
}
|
2981
|
+
}
|
2982
|
+
@media screen and (min-width: 1024px) {
|
2983
|
+
.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
|
2984
|
+
margin-top: 56px;
|
2985
|
+
}
|
2986
|
+
.mfui-container .mfui-text-with-icon + .mfui-cards-box {
|
2987
|
+
margin-top: 56px;
|
2988
|
+
}
|
2989
|
+
.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
|
2990
|
+
margin-top: 56px;
|
2991
|
+
}
|
2992
|
+
.mfui-container .mfui-text-with-icon + .mfui-video-block {
|
2993
|
+
margin-top: 56px;
|
2994
|
+
}
|
2995
|
+
.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
|
2996
|
+
margin-top: 56px;
|
2997
|
+
}
|
2998
|
+
.mfui-container .mfui-text-with-icon + .mfui-partners {
|
2999
|
+
margin-top: 56px;
|
3000
|
+
}
|
3001
|
+
.mfui-container .mfui-text-with-icon + .mfui-instructions {
|
3002
|
+
margin-top: 56px;
|
3003
|
+
}
|
3004
|
+
.mfui-container .mfui-text-with-icon + .mfui-property {
|
3005
|
+
margin-top: 56px;
|
3006
|
+
}
|
3007
|
+
.mfui-container .mfui-text-with-icon + .mfui-table {
|
3008
|
+
margin-top: 56px;
|
3009
|
+
}
|
3010
|
+
.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
|
3011
|
+
margin-top: 56px;
|
3012
|
+
}
|
3013
|
+
.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
|
3014
|
+
margin-top: 48px;
|
3015
|
+
}
|
3016
|
+
.mfui-container .mfui-text-with-icon + .mfui-download-links {
|
3017
|
+
margin-top: 48px;
|
3018
|
+
}
|
3019
|
+
.mfui-container .mfui-text-with-icon + .mfui-text-box {
|
3020
|
+
margin-top: 32px;
|
3021
|
+
}
|
3022
|
+
.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
|
3023
|
+
margin-top: 56px;
|
3024
|
+
}
|
3025
|
+
.mfui-container .mfui-text-with-icon + .mfui-store-banner {
|
3026
|
+
margin-top: 56px;
|
3027
|
+
}
|
3028
|
+
.mfui-container .mfui-text-with-icon + .mfui-button-banner {
|
3029
|
+
margin-top: 56px;
|
3030
|
+
}
|
3031
|
+
.mfui-container .mfui-text-with-icon + .mfui-steps {
|
3032
|
+
margin-top: 56px;
|
3033
|
+
}
|
3034
|
+
}
|
2872
3035
|
.mfui-container_disable-padding-top {
|
2873
3036
|
padding-top: 0 !important;
|
2874
3037
|
}
|
@@ -159,7 +159,16 @@ h5 {
|
|
159
159
|
display: flex;
|
160
160
|
}
|
161
161
|
.mfui-store-banner__qr-code {
|
162
|
+
-ms-flex-item-align: center;
|
163
|
+
align-self: center;
|
164
|
+
-webkit-box-sizing: border-box;
|
165
|
+
box-sizing: border-box;
|
166
|
+
width: 90px;
|
167
|
+
height: 90px;
|
162
168
|
margin-right: 16px;
|
169
|
+
border: 1px solid var(--spbSky1);
|
170
|
+
border-radius: 8px;
|
171
|
+
background-color: var(--base);
|
163
172
|
}
|
164
173
|
@media screen and (max-width: 767px) {
|
165
174
|
.mfui-store-banner__qr-code {
|
@@ -180,6 +189,9 @@ h5 {
|
|
180
189
|
.mfui-store-banner__store-link {
|
181
190
|
width: 136px;
|
182
191
|
height: 40px;
|
192
|
+
margin-right: 8px;
|
193
|
+
margin-bottom: 10px;
|
194
|
+
margin-left: 8px;
|
183
195
|
}
|
184
196
|
@media screen and (max-width: 767px) {
|
185
197
|
.mfui-store-banner__store-link {
|
@@ -187,9 +199,8 @@ h5 {
|
|
187
199
|
height: 35px;
|
188
200
|
}
|
189
201
|
}
|
190
|
-
.mfui-store-banner__store-link:
|
191
|
-
margin-
|
192
|
-
margin-bottom: 10px;
|
202
|
+
.mfui-store-banner__store-link:last-child {
|
203
|
+
margin-bottom: 0;
|
193
204
|
}
|
194
205
|
.mfui-store-banner__stores {
|
195
206
|
display: -webkit-box;
|
@@ -208,6 +219,11 @@ h5 {
|
|
208
219
|
justify-content: center;
|
209
220
|
}
|
210
221
|
}
|
222
|
+
@media screen and (min-width: 768px) {
|
223
|
+
.mfui-store-banner__stores {
|
224
|
+
margin-left: -8px;
|
225
|
+
}
|
226
|
+
}
|
211
227
|
.mfui-store-banner__text {
|
212
228
|
margin-bottom: 32px;
|
213
229
|
}
|
@@ -229,16 +245,10 @@ h5 {
|
|
229
245
|
-o-object-fit: contain;
|
230
246
|
object-fit: contain;
|
231
247
|
}
|
232
|
-
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
233
|
-
.mfui-store-banner__links_three .mfui-store-banner__qr-code {
|
234
|
-
width: 120px;
|
235
|
-
height: 120px;
|
236
|
-
}
|
237
|
-
}
|
238
248
|
@media screen and (min-width: 1280px) {
|
239
249
|
.mfui-store-banner__links_three .mfui-store-banner__qr-code {
|
240
|
-
max-width:
|
241
|
-
max-height:
|
250
|
+
max-width: 90px;
|
251
|
+
max-height: 90px;
|
242
252
|
}
|
243
253
|
}
|
244
254
|
.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
|
@@ -260,12 +270,6 @@ h5 {
|
|
260
270
|
margin: 0 auto;
|
261
271
|
}
|
262
272
|
}
|
263
|
-
.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
|
264
|
-
margin-right: 16px;
|
265
|
-
}
|
266
|
-
.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
|
267
|
-
margin-right: 0;
|
268
|
-
}
|
269
273
|
.mfui-store-banner__links_three .mfui-store-banner__store-link {
|
270
274
|
width: 136px;
|
271
275
|
height: 40px;
|
@@ -284,8 +288,3 @@ h5 {
|
|
284
288
|
margin-bottom: 16px;
|
285
289
|
}
|
286
290
|
}
|
287
|
-
@media screen and (max-width: 1023px) {
|
288
|
-
.mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
|
289
|
-
margin-right: 0;
|
290
|
-
}
|
291
|
-
}
|
Binary file
|
@@ -14,3 +14,12 @@ h5 {
|
|
14
14
|
.mfui-text-box_text-center {
|
15
15
|
text-align: center;
|
16
16
|
}
|
17
|
+
.mfui-text-box .mfui-text-with-icon {
|
18
|
+
margin: 24px 0;
|
19
|
+
}
|
20
|
+
.mfui-text-box .mfui-text-with-icon + .mfui-header {
|
21
|
+
margin-top: 32px;
|
22
|
+
}
|
23
|
+
.mfui-text-box .mfui-text-box-picture + .mfui-text-with-icon {
|
24
|
+
margin: 32px 0 24px;
|
25
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { ITextWithIconItem } from './TextWithIconItem';
|
3
|
+
import './TextWithIcon.less';
|
4
|
+
export interface ITextWithIconProps {
|
5
|
+
/** Заголовок */
|
6
|
+
title?: string;
|
7
|
+
/** Ссылка на корневой элемент */
|
8
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
9
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
10
|
+
dataAttrs?: {
|
11
|
+
root?: Record<string, string>;
|
12
|
+
};
|
13
|
+
/** Дополнительный класс для корневого элемента */
|
14
|
+
className?: string;
|
15
|
+
/** Допустимый дочерний компонент */
|
16
|
+
children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
|
17
|
+
}
|
18
|
+
declare const TextWithIcon: React.FC<ITextWithIconProps>;
|
19
|
+
export default TextWithIcon;
|
@@ -0,0 +1,60 @@
|
|
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"] = void 0;
|
9
|
+
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
|
+
|
12
|
+
var React = _interopRequireWildcard(require("react"));
|
13
|
+
|
14
|
+
var _uiCore = require("@megafon/ui-core");
|
15
|
+
|
16
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
17
|
+
|
18
|
+
var PropTypes = _interopRequireWildcard(require("prop-types"));
|
19
|
+
|
20
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
21
|
+
|
22
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
23
|
+
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
25
|
+
|
26
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-text-with-icon');
|
27
|
+
|
28
|
+
var TextWithIcon = function TextWithIcon(_ref) {
|
29
|
+
var title = _ref.title,
|
30
|
+
rootRef = _ref.rootRef,
|
31
|
+
dataAttrs = _ref.dataAttrs,
|
32
|
+
className = _ref.className,
|
33
|
+
children = _ref.children;
|
34
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
35
|
+
className: cn([className]),
|
36
|
+
ref: rootRef
|
37
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
|
38
|
+
mobile: '12',
|
39
|
+
tablet: '7',
|
40
|
+
desktop: '6',
|
41
|
+
wide: '6'
|
42
|
+
}, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
|
43
|
+
className: cn('header'),
|
44
|
+
as: "h5"
|
45
|
+
}, title), children)));
|
46
|
+
};
|
47
|
+
|
48
|
+
TextWithIcon.propTypes = {
|
49
|
+
title: PropTypes.string,
|
50
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
51
|
+
current: PropTypes.elementType
|
52
|
+
}), PropTypes.any])]),
|
53
|
+
dataAttrs: PropTypes.shape({
|
54
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
55
|
+
}),
|
56
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
|
57
|
+
className: PropTypes.string
|
58
|
+
};
|
59
|
+
var _default = TextWithIcon;
|
60
|
+
exports["default"] = _default;
|
@@ -0,0 +1,49 @@
|
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-text-with-icon-item {
|
9
|
+
display: -webkit-box;
|
10
|
+
display: -ms-flexbox;
|
11
|
+
display: flex;
|
12
|
+
-webkit-box-align: center;
|
13
|
+
-ms-flex-align: center;
|
14
|
+
align-items: center;
|
15
|
+
}
|
16
|
+
@media screen and (max-width: 767px) {
|
17
|
+
.mfui-text-with-icon-item {
|
18
|
+
-webkit-box-orient: vertical;
|
19
|
+
-webkit-box-direction: normal;
|
20
|
+
-ms-flex-direction: column;
|
21
|
+
flex-direction: column;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
.mfui-text-with-icon-item:not(:first-of-type) {
|
25
|
+
margin-top: 16px;
|
26
|
+
}
|
27
|
+
@media screen and (max-width: 767px) {
|
28
|
+
.mfui-text-with-icon-item:not(:first-of-type) {
|
29
|
+
margin-top: 24px;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
.mfui-text-with-icon-item__svg-icon {
|
33
|
+
width: 40px;
|
34
|
+
min-width: 40px;
|
35
|
+
height: 40px;
|
36
|
+
min-height: 40px;
|
37
|
+
overflow: hidden;
|
38
|
+
}
|
39
|
+
@media screen and (min-width: 768px) {
|
40
|
+
.mfui-text-with-icon-item__svg-icon {
|
41
|
+
margin-right: 16px;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
@media screen and (max-width: 767px) {
|
45
|
+
.mfui-text-with-icon-item__text {
|
46
|
+
margin-top: 12px;
|
47
|
+
text-align: center;
|
48
|
+
}
|
49
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import './TextWithIconItem.less';
|
3
|
+
export interface ITextWithIconItem {
|
4
|
+
/** Текст */
|
5
|
+
text: string;
|
6
|
+
/** Иконка */
|
7
|
+
icon: React.ReactNode;
|
8
|
+
/** Ссылка на корневой элемент */
|
9
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
10
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
11
|
+
dataAttrs?: {
|
12
|
+
root?: Record<string, string>;
|
13
|
+
};
|
14
|
+
/** Дополнительный класс для корневого элемента */
|
15
|
+
className?: string;
|
16
|
+
}
|
17
|
+
declare const TextWithIconItem: React.FC<ITextWithIconItem>;
|
18
|
+
export default TextWithIconItem;
|
@@ -0,0 +1,54 @@
|
|
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"] = void 0;
|
9
|
+
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
|
+
|
12
|
+
var React = _interopRequireWildcard(require("react"));
|
13
|
+
|
14
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
15
|
+
|
16
|
+
var PropTypes = _interopRequireWildcard(require("prop-types"));
|
17
|
+
|
18
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
19
|
+
|
20
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
21
|
+
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
23
|
+
|
24
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-text-with-icon-item');
|
25
|
+
|
26
|
+
var TextWithIconItem = function TextWithIconItem(_ref) {
|
27
|
+
var text = _ref.text,
|
28
|
+
icon = _ref.icon,
|
29
|
+
rootRef = _ref.rootRef,
|
30
|
+
dataAttrs = _ref.dataAttrs,
|
31
|
+
className = _ref.className;
|
32
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
33
|
+
className: cn([className]),
|
34
|
+
ref: rootRef
|
35
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
|
36
|
+
className: cn('svg-icon')
|
37
|
+
}, icon), /*#__PURE__*/React.createElement("div", {
|
38
|
+
className: cn('text')
|
39
|
+
}, text));
|
40
|
+
};
|
41
|
+
|
42
|
+
TextWithIconItem.propTypes = {
|
43
|
+
text: PropTypes.string.isRequired,
|
44
|
+
icon: PropTypes.node.isRequired,
|
45
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
46
|
+
current: PropTypes.elementType
|
47
|
+
}), PropTypes.any])]),
|
48
|
+
dataAttrs: PropTypes.shape({
|
49
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
50
|
+
}),
|
51
|
+
className: PropTypes.string
|
52
|
+
};
|
53
|
+
var _default = TextWithIconItem;
|
54
|
+
exports["default"] = _default;
|
@@ -6,7 +6,7 @@ export interface IContent {
|
|
6
6
|
/** Текст-описание */
|
7
7
|
description: string | React.ReactNode[] | React.ReactNode;
|
8
8
|
/** Текст кнопки */
|
9
|
-
buttonTitle
|
9
|
+
buttonTitle?: string;
|
10
10
|
/** Добавляет атрибут download для тега <a> компонента Button */
|
11
11
|
buttonDownload?: boolean;
|
12
12
|
/** Ссылка на кнопке */
|
@@ -101,7 +101,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
101
101
|
className: cn('header')
|
102
102
|
}, title), /*#__PURE__*/_react["default"].createElement("div", {
|
103
103
|
className: cn('description', [classes.description])
|
104
|
-
}, description), /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
|
104
|
+
}, description), buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
|
105
105
|
className: cn('button', [classes.button]),
|
106
106
|
href: href,
|
107
107
|
onClick: onButtonClick,
|
@@ -121,7 +121,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
121
121
|
orderTablet: "2",
|
122
122
|
orderMobile: "2",
|
123
123
|
key: "column-content"
|
124
|
-
}, renderContent
|
124
|
+
}, renderContent(content)));
|
125
125
|
}
|
126
126
|
|
127
127
|
columns.push( /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
|
@@ -161,7 +161,7 @@ VideoBlock.propTypes = {
|
|
161
161
|
title: _propTypes["default"].string.isRequired,
|
162
162
|
description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
|
163
163
|
href: _propTypes["default"].string,
|
164
|
-
buttonTitle: _propTypes["default"].string
|
164
|
+
buttonTitle: _propTypes["default"].string,
|
165
165
|
buttonDownload: _propTypes["default"].bool,
|
166
166
|
onButtonClick: _propTypes["default"].func
|
167
167
|
}),
|
package/dist/lib/index.d.ts
CHANGED
@@ -29,6 +29,8 @@ export { default as TableRow } from './components/Table/TableRow';
|
|
29
29
|
export { default as TabsBox } from './components/TabsBox/TabsBox';
|
30
30
|
export { default as TextBox } from './components/TextBox/TextBox';
|
31
31
|
export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
|
32
|
+
export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon';
|
33
|
+
export { default as TextWithIconItem } from './components/TextWithIcon/TextWithIconItem';
|
32
34
|
export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
|
33
35
|
export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
|
34
36
|
export { default as VideoBlock } from './components/VideoBlock/VideoBlock';
|
package/dist/lib/index.js
CHANGED
@@ -189,6 +189,18 @@ Object.defineProperty(exports, "TextBoxPicture", {
|
|
189
189
|
return _TextBoxPicture["default"];
|
190
190
|
}
|
191
191
|
});
|
192
|
+
Object.defineProperty(exports, "TextWithIcon", {
|
193
|
+
enumerable: true,
|
194
|
+
get: function get() {
|
195
|
+
return _TextWithIcon["default"];
|
196
|
+
}
|
197
|
+
});
|
198
|
+
Object.defineProperty(exports, "TextWithIconItem", {
|
199
|
+
enumerable: true,
|
200
|
+
get: function get() {
|
201
|
+
return _TextWithIconItem["default"];
|
202
|
+
}
|
203
|
+
});
|
192
204
|
Object.defineProperty(exports, "TitleDescriptionBox", {
|
193
205
|
enumerable: true,
|
194
206
|
get: function get() {
|
@@ -270,6 +282,10 @@ var _TextBox = _interopRequireDefault(require("./components/TextBox/TextBox"));
|
|
270
282
|
|
271
283
|
var _TextBoxPicture = _interopRequireDefault(require("./components/TextBox/TextBoxPicture"));
|
272
284
|
|
285
|
+
var _TextWithIcon = _interopRequireDefault(require("./components/TextWithIcon/TextWithIcon"));
|
286
|
+
|
287
|
+
var _TextWithIconItem = _interopRequireDefault(require("./components/TextWithIcon/TextWithIconItem"));
|
288
|
+
|
273
289
|
var _TitleDescriptionBox = _interopRequireDefault(require("./components/TitleDescriptionBox/TitleDescriptionBox"));
|
274
290
|
|
275
291
|
var _VideoBanner = _interopRequireDefault(require("./components/VideoBanner/VideoBanner"));
|