@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
package/CHANGELOG.md
CHANGED
@@ -3,112 +3,87 @@
|
|
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
|
-
|
6
|
+
## [3.0.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0...@megafon/ui-shared@3.0.2) (2022-02-11)
|
7
7
|
|
8
8
|
|
9
9
|
### Bug Fixes
|
10
10
|
|
11
|
-
*
|
11
|
+
* revert mistake version ([cc8668a](https://github.com/MegafonWebLab/megafon-ui/commit/cc8668a9ff2bc5fde6bf93ca806d4406a5944107))
|
12
12
|
|
13
13
|
|
14
14
|
|
15
15
|
|
16
16
|
|
17
|
-
# [3.0.0
|
17
|
+
# [3.0.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.3.0...@megafon/ui-shared@3.0.0) (2022-02-09)
|
18
18
|
|
19
19
|
|
20
20
|
### Bug Fixes
|
21
21
|
|
22
|
-
*
|
23
|
-
*
|
24
|
-
*
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
* ContentArea: prop color change values from 'base' to 'white' and from 'content' to 'default';
|
30
|
-
remove depreacted value 'freshAsphalt'
|
31
|
-
Paragraph: prop color change values from 'base' to 'white' and from 'contend' to 'default';
|
32
|
-
remove deprecared values 'freshAsphalt' and 'clearWhite'
|
33
|
-
StoreBanner: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
|
34
|
-
* ContentArea, Paragraph, StoreBanner and Breadcrumbs components from no don't have
|
35
|
-
freshAsphalt and clearWhite as values for colorize props
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
# [3.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.4...@megafon/ui-shared@3.0.0-beta.5) (2022-01-28)
|
22
|
+
* **components:** change tests for dataAttrs prop ([eae8ecb](https://github.com/MegafonWebLab/megafon-ui/commit/eae8ecb5104c050ec0e67357ed5edecdfb042838))
|
23
|
+
* color props values changes ([9e3dd31](https://github.com/MegafonWebLab/megafon-ui/commit/9e3dd31a8fd57012482c68c1173aae74028aa3a9))
|
24
|
+
* remove deprecated props values ([d09c460](https://github.com/MegafonWebLab/megafon-ui/commit/d09c4606ce6e41f7144e18c2216d039d859288e2))
|
25
|
+
* **accordion-box:** change type of onClickAccordion prop ([f464221](https://github.com/MegafonWebLab/megafon-ui/commit/f4642216a3869d7f11005f0162f009225f9661c4))
|
26
|
+
* **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([089dd42](https://github.com/MegafonWebLab/megafon-ui/commit/089dd42cd18db7fc83e690da45d09b88c636a6f7))
|
27
|
+
* **core:** fix build ui-core ([fa9522a](https://github.com/MegafonWebLab/megafon-ui/commit/fa9522ac0931edb7ec772ad040557997db080687))
|
42
28
|
|
43
29
|
|
44
30
|
### Features
|
45
31
|
|
46
|
-
* **
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
# [3.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.3...@megafon/ui-shared@3.0.0-beta.4) (2022-01-27)
|
53
|
-
|
54
|
-
**Note:** Version bump only for package @megafon/ui-shared
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
# [3.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.2...@megafon/ui-shared@3.0.0-beta.3) (2022-01-24)
|
61
|
-
|
62
|
-
|
63
|
-
### Bug Fixes
|
64
|
-
|
65
|
-
* **accordion-box:** change type of onClickAccordion prop ([5d5cef5](https://github.com/MegafonWebLab/megafon-ui/commit/5d5cef5e2dd70efa808a6146e29daf1c882af304))
|
32
|
+
* **accordionbox:** remove prop hasVerticalPaddings ([7dfe546](https://github.com/MegafonWebLab/megafon-ui/commit/7dfe546336aa0a94643299309e90fe7e56936e85))
|
33
|
+
* **colors:** css custom properties and color themes support ([16df5b7](https://github.com/MegafonWebLab/megafon-ui/commit/16df5b7b2644e15bb6c6e49e7347c0f8e4839e58))
|
34
|
+
* **header:** made header as a functional component ([b983934](https://github.com/MegafonWebLab/megafon-ui/commit/b983934ced137ede35f64ce2dfe0c953c1690db0))
|
35
|
+
* **textwithicon:** prop items removed, list items are now added by child components ([44ee66c](https://github.com/MegafonWebLab/megafon-ui/commit/44ee66c3964da1111957553c75046407f789e673))
|
66
36
|
|
67
37
|
|
68
38
|
### BREAKING CHANGES
|
69
39
|
|
40
|
+
* **textwithicon:** prop items removed, list items are now added by child components
|
41
|
+
* **accordionbox:** remove prop hasVerticalPaddings
|
70
42
|
* **accordion-box:** remove parameter 'title' in onClickAccordion prop
|
43
|
+
* **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
|
44
|
+
prefix (e.g. brandGreen)
|
45
|
+
* **contentarea**: prop color change values from 'base' to 'white' and from 'content' to 'default';
|
46
|
+
remove depreacted value 'freshAsphalt'
|
47
|
+
* **contentarea**, **paragraph**, **storebanner** and **breadcrumbs** components from no don't have
|
48
|
+
'freshAsphalt' and 'clearWhite' as values for colorizing props
|
49
|
+
* **storebanner**: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
|
50
|
+
* **components:** for the components to work correctly, now it's needed to import colors.css file
|
71
51
|
|
72
52
|
|
73
53
|
|
74
54
|
|
75
|
-
|
76
|
-
# [3.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.1...@megafon/ui-shared@3.0.0-beta.2) (2022-01-21)
|
77
|
-
|
78
|
-
**Note:** Version bump only for package @megafon/ui-shared
|
55
|
+
# [2.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.2.1...@megafon/ui-shared@2.3.0) (2022-02-07)
|
79
56
|
|
80
57
|
|
58
|
+
### Features
|
81
59
|
|
60
|
+
* **container:** fix margin rules for component TextWithIcon ([3c2de9d](https://github.com/MegafonWebLab/megafon-ui/commit/3c2de9db5a01bdd246daee22dd5545e21dce55ba))
|
61
|
+
* **textbox:** add styles for use TextWithIcon inside component ([c993657](https://github.com/MegafonWebLab/megafon-ui/commit/c993657a2f143f87607a7d1474d44c4596d73558))
|
82
62
|
|
83
63
|
|
84
|
-
# [3.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.0...@megafon/ui-shared@3.0.0-beta.1) (2022-01-20)
|
85
64
|
|
86
65
|
|
87
|
-
### Bug Fixes
|
88
66
|
|
89
|
-
|
67
|
+
## [2.2.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.2.0...@megafon/ui-shared@2.2.1) (2022-01-31)
|
90
68
|
|
91
69
|
|
92
|
-
###
|
70
|
+
### Bug Fixes
|
93
71
|
|
94
|
-
* **
|
95
|
-
prefix (e.g. brandGreen)
|
72
|
+
* **storebanner:** update qr code image for storebanner examples and fix qr code container styles ([1845222](https://github.com/MegafonWebLab/megafon-ui/commit/1845222e5211e70a8f5aa36ab4a710ecd46e8a14))
|
96
73
|
|
97
74
|
|
98
75
|
|
99
76
|
|
100
77
|
|
101
|
-
# [
|
78
|
+
# [2.2.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.5...@megafon/ui-shared@2.2.0) (2022-01-24)
|
102
79
|
|
103
80
|
|
104
81
|
### Features
|
105
82
|
|
106
|
-
* **
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
* **colors:** read commit description
|
83
|
+
* **accordionbox:** props hasVerticalPaddings marked as deprecated ([7dbb43b](https://github.com/MegafonWebLab/megafon-ui/commit/7dbb43b1178f4055ecd0f4eed5614024da638091))
|
84
|
+
* **container:** add rules for TextWithIcon component ([4c692ab](https://github.com/MegafonWebLab/megafon-ui/commit/4c692ab43db115dc7c5aeba39713d6f2ae2daaff))
|
85
|
+
* **textwithicon:** add component TextWithIcon ([b772728](https://github.com/MegafonWebLab/megafon-ui/commit/b772728b8739dbbfa550eef1c8eedb56cda620c9))
|
86
|
+
* **videoblock:** made button optional ([eef7c17](https://github.com/MegafonWebLab/megafon-ui/commit/eef7c174415b28fe3512d8c28fcd9bb73774dd2e))
|
112
87
|
|
113
88
|
|
114
89
|
|
package/README.md
CHANGED
@@ -5,10 +5,10 @@ React UI components library.
|
|
5
5
|
## Getting started
|
6
6
|
|
7
7
|
```bash
|
8
|
-
$ npm install --save @megafon/ui-shared
|
8
|
+
$ npm install --save @megafon/ui-shared
|
9
9
|
```
|
10
10
|
```bash
|
11
|
-
$ yarn add @megafon/ui-shared
|
11
|
+
$ yarn add @megafon/ui-shared
|
12
12
|
```
|
13
13
|
|
14
14
|
## Development notes
|
@@ -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,40 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import * as React from 'react';
|
3
|
+
import { Header, Grid, GridColumn } from '@megafon/ui-core';
|
4
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
5
|
+
import * as PropTypes from 'prop-types';
|
6
|
+
import "./TextWithIcon.css";
|
7
|
+
var cn = cnCreate('mfui-text-with-icon');
|
8
|
+
|
9
|
+
var TextWithIcon = function TextWithIcon(_ref) {
|
10
|
+
var title = _ref.title,
|
11
|
+
rootRef = _ref.rootRef,
|
12
|
+
dataAttrs = _ref.dataAttrs,
|
13
|
+
className = _ref.className,
|
14
|
+
children = _ref.children;
|
15
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
16
|
+
className: cn([className]),
|
17
|
+
ref: rootRef
|
18
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
|
19
|
+
mobile: '12',
|
20
|
+
tablet: '7',
|
21
|
+
desktop: '6',
|
22
|
+
wide: '6'
|
23
|
+
}, title && /*#__PURE__*/React.createElement(Header, {
|
24
|
+
className: cn('header'),
|
25
|
+
as: "h5"
|
26
|
+
}, title), children)));
|
27
|
+
};
|
28
|
+
|
29
|
+
TextWithIcon.propTypes = {
|
30
|
+
title: PropTypes.string,
|
31
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
32
|
+
current: PropTypes.elementType
|
33
|
+
}), PropTypes.any])]),
|
34
|
+
dataAttrs: PropTypes.shape({
|
35
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
36
|
+
}),
|
37
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
|
38
|
+
className: PropTypes.string
|
39
|
+
};
|
40
|
+
export default TextWithIcon;
|
@@ -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,35 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import * as React from 'react';
|
3
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
4
|
+
import * as PropTypes from 'prop-types';
|
5
|
+
import "./TextWithIconItem.css";
|
6
|
+
var cn = cnCreate('mfui-text-with-icon-item');
|
7
|
+
|
8
|
+
var TextWithIconItem = function TextWithIconItem(_ref) {
|
9
|
+
var text = _ref.text,
|
10
|
+
icon = _ref.icon,
|
11
|
+
rootRef = _ref.rootRef,
|
12
|
+
dataAttrs = _ref.dataAttrs,
|
13
|
+
className = _ref.className;
|
14
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
15
|
+
className: cn([className]),
|
16
|
+
ref: rootRef
|
17
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
|
18
|
+
className: cn('svg-icon')
|
19
|
+
}, icon), /*#__PURE__*/React.createElement("div", {
|
20
|
+
className: cn('text')
|
21
|
+
}, text));
|
22
|
+
};
|
23
|
+
|
24
|
+
TextWithIconItem.propTypes = {
|
25
|
+
text: PropTypes.string.isRequired,
|
26
|
+
icon: PropTypes.node.isRequired,
|
27
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
28
|
+
current: PropTypes.elementType
|
29
|
+
}), PropTypes.any])]),
|
30
|
+
dataAttrs: PropTypes.shape({
|
31
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
32
|
+
}),
|
33
|
+
className: PropTypes.string
|
34
|
+
};
|
35
|
+
export default TextWithIconItem;
|
@@ -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
|
/** Ссылка на кнопке */
|