@megafon/ui-shared 3.0.0-beta.8 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/CHANGELOG.md +37 -70
  2. package/README.md +2 -2
  3. package/dist/es/components/Container/Container.css +163 -0
  4. package/dist/es/components/StoreBanner/StoreBanner.css +21 -22
  5. package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
  6. package/dist/es/components/TextBox/TextBox.css +9 -0
  7. package/dist/es/components/TextWithIcon/TextWithIcon.css +15 -0
  8. package/dist/es/components/TextWithIcon/TextWithIcon.d.ts +19 -0
  9. package/dist/es/components/TextWithIcon/TextWithIcon.js +40 -0
  10. package/dist/es/components/TextWithIcon/TextWithIconItem.css +49 -0
  11. package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +18 -0
  12. package/dist/es/components/TextWithIcon/TextWithIconItem.js +35 -0
  13. package/dist/es/components/VideoBlock/VideoBlock.d.ts +1 -1
  14. package/dist/es/components/VideoBlock/VideoBlock.js +3 -3
  15. package/dist/es/index.d.ts +2 -0
  16. package/dist/es/index.js +2 -0
  17. package/dist/lib/components/Container/Container.css +163 -0
  18. package/dist/lib/components/StoreBanner/StoreBanner.css +21 -22
  19. package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
  20. package/dist/lib/components/TextBox/TextBox.css +9 -0
  21. package/dist/lib/components/TextWithIcon/TextWithIcon.css +15 -0
  22. package/dist/lib/components/TextWithIcon/TextWithIcon.d.ts +19 -0
  23. package/dist/lib/components/TextWithIcon/TextWithIcon.js +60 -0
  24. package/dist/lib/components/TextWithIcon/TextWithIconItem.css +49 -0
  25. package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +18 -0
  26. package/dist/lib/components/TextWithIcon/TextWithIconItem.js +54 -0
  27. package/dist/lib/components/VideoBlock/VideoBlock.d.ts +1 -1
  28. package/dist/lib/components/VideoBlock/VideoBlock.js +3 -3
  29. package/dist/lib/index.d.ts +2 -0
  30. package/dist/lib/index.js +16 -0
  31. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,128 +3,95 @@
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
- # [3.0.0-beta.8](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.7...@megafon/ui-shared@3.0.0-beta.8) (2022-02-08)
6
+ ## [3.0.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.2...@megafon/ui-shared@3.0.3) (2022-02-15)
7
7
 
8
-
9
- ### Features
10
-
11
- * **accordionbox:** remove prop hasVerticalPaddings ([82218ad](https://github.com/MegafonWebLab/megafon-ui/commit/82218ad0307c3f566cf9f582a824733e3523be3d))
12
-
13
-
14
- ### BREAKING CHANGES
15
-
16
- * **accordionbox:** remove prop hasVerticalPaddings
8
+ **Note:** Version bump only for package @megafon/ui-shared
17
9
 
18
10
 
19
11
 
20
12
 
21
13
 
22
- # [3.0.0-beta.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.6...@megafon/ui-shared@3.0.0-beta.7) (2022-02-04)
14
+ ## [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)
23
15
 
24
16
 
25
17
  ### Bug Fixes
26
18
 
27
- * **components:** change tests for dataAttrs prop ([2a8f306](https://github.com/MegafonWebLab/megafon-ui/commit/2a8f3061a4e89f6877894e5947db7bae2827f86a))
19
+ * revert mistake version ([cc8668a](https://github.com/MegafonWebLab/megafon-ui/commit/cc8668a9ff2bc5fde6bf93ca806d4406a5944107))
28
20
 
29
21
 
30
22
 
31
23
 
32
24
 
33
- # [3.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.5...@megafon/ui-shared@3.0.0-beta.6) (2022-02-02)
25
+ # [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)
34
26
 
35
27
 
36
28
  ### Bug Fixes
37
29
 
38
- * color props values changes ([b279f2b](https://github.com/MegafonWebLab/megafon-ui/commit/b279f2b5af0edae92fe9825bbfa90a207cb8009a))
39
- * remove deprecated props values ([add76f3](https://github.com/MegafonWebLab/megafon-ui/commit/add76f38a9ebad8b5b6504dfe6aae862746f0dfc))
40
- * **core:** fix build ui-core ([458c824](https://github.com/MegafonWebLab/megafon-ui/commit/458c824aab639e4802db261d0416b3cee58ac274))
41
-
42
-
43
- ### BREAKING CHANGES
44
-
45
- * ContentArea: prop color change values from 'base' to 'white' and from 'content' to 'default';
46
- remove depreacted value 'freshAsphalt'
47
- Paragraph: prop color change values from 'base' to 'white' and from 'contend' to 'default';
48
- remove deprecared values 'freshAsphalt' and 'clearWhite'
49
- StoreBanner: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
50
- * ContentArea, Paragraph, StoreBanner and Breadcrumbs components from no don't have
51
- freshAsphalt and clearWhite as values for colorize props
52
-
53
-
54
-
55
-
56
-
57
- # [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)
30
+ * **components:** change tests for dataAttrs prop ([eae8ecb](https://github.com/MegafonWebLab/megafon-ui/commit/eae8ecb5104c050ec0e67357ed5edecdfb042838))
31
+ * color props values changes ([9e3dd31](https://github.com/MegafonWebLab/megafon-ui/commit/9e3dd31a8fd57012482c68c1173aae74028aa3a9))
32
+ * remove deprecated props values ([d09c460](https://github.com/MegafonWebLab/megafon-ui/commit/d09c4606ce6e41f7144e18c2216d039d859288e2))
33
+ * **accordion-box:** change type of onClickAccordion prop ([f464221](https://github.com/MegafonWebLab/megafon-ui/commit/f4642216a3869d7f11005f0162f009225f9661c4))
34
+ * **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([089dd42](https://github.com/MegafonWebLab/megafon-ui/commit/089dd42cd18db7fc83e690da45d09b88c636a6f7))
35
+ * **core:** fix build ui-core ([fa9522a](https://github.com/MegafonWebLab/megafon-ui/commit/fa9522ac0931edb7ec772ad040557997db080687))
58
36
 
59
37
 
60
38
  ### Features
61
39
 
62
- * **header:** made header as a functional component ([81701ad](https://github.com/MegafonWebLab/megafon-ui/commit/81701ad87b6e9df2fe630bf4e183383264c0bb01))
63
-
64
-
65
-
66
-
67
-
68
- # [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)
69
-
70
- **Note:** Version bump only for package @megafon/ui-shared
71
-
72
-
73
-
74
-
75
-
76
- # [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)
77
-
78
-
79
- ### Bug Fixes
80
-
81
- * **accordion-box:** change type of onClickAccordion prop ([5d5cef5](https://github.com/MegafonWebLab/megafon-ui/commit/5d5cef5e2dd70efa808a6146e29daf1c882af304))
40
+ * **accordionbox:** remove prop hasVerticalPaddings ([7dfe546](https://github.com/MegafonWebLab/megafon-ui/commit/7dfe546336aa0a94643299309e90fe7e56936e85))
41
+ * **colors:** css custom properties and color themes support ([16df5b7](https://github.com/MegafonWebLab/megafon-ui/commit/16df5b7b2644e15bb6c6e49e7347c0f8e4839e58))
42
+ * **header:** made header as a functional component ([b983934](https://github.com/MegafonWebLab/megafon-ui/commit/b983934ced137ede35f64ce2dfe0c953c1690db0))
43
+ * **textwithicon:** prop items removed, list items are now added by child components ([44ee66c](https://github.com/MegafonWebLab/megafon-ui/commit/44ee66c3964da1111957553c75046407f789e673))
82
44
 
83
45
 
84
46
  ### BREAKING CHANGES
85
47
 
48
+ * **textwithicon:** prop items removed, list items are now added by child components
49
+ * **accordionbox:** remove prop hasVerticalPaddings
86
50
  * **accordion-box:** remove parameter 'title' in onClickAccordion prop
51
+ * **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
52
+ prefix (e.g. brandGreen)
53
+ * **contentarea**: prop color change values from 'base' to 'white' and from 'content' to 'default';
54
+ remove depreacted value 'freshAsphalt'
55
+ * **contentarea**, **paragraph**, **storebanner** and **breadcrumbs** components from no don't have
56
+ 'freshAsphalt' and 'clearWhite' as values for colorizing props
57
+ * **storebanner**: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
58
+ * **components:** for the components to work correctly, now it's needed to import colors.css file
87
59
 
88
60
 
89
61
 
90
62
 
91
-
92
- # [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)
93
-
94
- **Note:** Version bump only for package @megafon/ui-shared
63
+ # [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)
95
64
 
96
65
 
66
+ ### Features
97
67
 
68
+ * **container:** fix margin rules for component TextWithIcon ([3c2de9d](https://github.com/MegafonWebLab/megafon-ui/commit/3c2de9db5a01bdd246daee22dd5545e21dce55ba))
69
+ * **textbox:** add styles for use TextWithIcon inside component ([c993657](https://github.com/MegafonWebLab/megafon-ui/commit/c993657a2f143f87607a7d1474d44c4596d73558))
98
70
 
99
71
 
100
- # [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)
101
72
 
102
73
 
103
- ### Bug Fixes
104
74
 
105
- * **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([563d97c](https://github.com/MegafonWebLab/megafon-ui/commit/563d97c42900099415a6872f57b500b87aeed647))
75
+ ## [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)
106
76
 
107
77
 
108
- ### BREAKING CHANGES
78
+ ### Bug Fixes
109
79
 
110
- * **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
111
- prefix (e.g. brandGreen)
80
+ * **storebanner:** update qr code image for storebanner examples and fix qr code container styles ([1845222](https://github.com/MegafonWebLab/megafon-ui/commit/1845222e5211e70a8f5aa36ab4a710ecd46e8a14))
112
81
 
113
82
 
114
83
 
115
84
 
116
85
 
117
- # [3.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.5...@megafon/ui-shared@3.0.0-beta.0) (2022-01-19)
86
+ # [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)
118
87
 
119
88
 
120
89
  ### Features
121
90
 
122
- * **colors:** css custom properties and color themes support ([b19a9a5](https://github.com/MegafonWebLab/megafon-ui/commit/b19a9a5112ebc7427d60f6514d606dd9d71ca444))
123
-
124
-
125
- ### BREAKING CHANGES
126
-
127
- * **colors:** read commit description
91
+ * **accordionbox:** props hasVerticalPaddings marked as deprecated ([7dbb43b](https://github.com/MegafonWebLab/megafon-ui/commit/7dbb43b1178f4055ecd0f4eed5614024da638091))
92
+ * **container:** add rules for TextWithIcon component ([4c692ab](https://github.com/MegafonWebLab/megafon-ui/commit/4c692ab43db115dc7c5aeba39713d6f2ae2daaff))
93
+ * **textwithicon:** add component TextWithIcon ([b772728](https://github.com/MegafonWebLab/megafon-ui/commit/b772728b8739dbbfa550eef1c8eedb56cda620c9))
94
+ * **videoblock:** made button optional ([eef7c17](https://github.com/MegafonWebLab/megafon-ui/commit/eef7c174415b28fe3512d8c28fcd9bb73774dd2e))
128
95
 
129
96
 
130
97
 
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@beta
8
+ $ npm install --save @megafon/ui-shared
9
9
  ```
10
10
  ```bash
11
- $ yarn add @megafon/ui-shared@beta
11
+ $ yarn add @megafon/ui-shared
12
12
  ```
13
13
 
14
14
  ## Development notes
@@ -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:not(:last-child) {
191
- margin-right: 16px;
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: 88px;
241
- max-height: 88px;
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
- }
@@ -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,15 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-text-with-icon__header {
9
+ margin-bottom: 24px;
10
+ }
11
+ @media screen and (max-width: 767px) {
12
+ .mfui-text-with-icon__header {
13
+ text-align: center;
14
+ }
15
+ }
@@ -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: string;
9
+ buttonTitle?: string;
10
10
  /** Добавляет атрибут download для тега <a> компонента Button */
11
11
  buttonDownload?: boolean;
12
12
  /** Ссылка на кнопке */