@megafon/ui-shared 2.0.0-beta.98 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (211) hide show
  1. package/CHANGELOG.md +1637 -0
  2. package/README.md +0 -5
  3. package/dist/es/components/AccordionBox/AccordionBox.css +13 -0
  4. package/dist/es/components/AccordionBox/AccordionBox.d.ts +16 -1
  5. package/dist/es/components/AccordionBox/AccordionBox.js +29 -13
  6. package/dist/es/components/BannerBox/BannerBox.js +3 -2
  7. package/dist/es/components/BenefitsIcons/BenefitsIcons.d.ts +13 -2
  8. package/dist/es/components/BenefitsIcons/BenefitsIcons.js +82 -17
  9. package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
  10. package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js +15 -14
  11. package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +3 -3
  12. package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +19 -12
  13. package/dist/es/components/BenefitsIcons/types.d.ts +7 -2
  14. package/dist/es/components/BenefitsIcons/types.js +4 -0
  15. package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts +10 -1
  16. package/dist/es/components/BenefitsPictures/BenefitsPictures.js +28 -12
  17. package/dist/es/components/BenefitsPictures/BenfitsPictures.css +4 -4
  18. package/dist/es/components/Breadcrumbs/Breadcrumbs.css +46 -0
  19. package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +21 -0
  20. package/dist/es/components/Breadcrumbs/Breadcrumbs.js +49 -0
  21. package/dist/es/components/ButtonBanner/ButtonBanner.css +122 -0
  22. package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +54 -0
  23. package/dist/es/components/ButtonBanner/ButtonBanner.js +107 -0
  24. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css +3 -3
  25. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +22 -2
  26. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +37 -8
  27. package/dist/es/components/Card/Card.css +71 -44
  28. package/dist/es/components/Card/Card.d.ts +33 -3
  29. package/dist/es/components/Card/Card.js +103 -42
  30. package/dist/es/components/CardsBox/CardsBox.d.ts +10 -2
  31. package/dist/es/components/CardsBox/CardsBox.js +26 -13
  32. package/dist/es/components/CarouselBox/CarouselBox.js +3 -2
  33. package/dist/es/components/Container/Container.css +1848 -533
  34. package/dist/es/components/Container/Container.d.ts +11 -1
  35. package/dist/es/components/Container/Container.js +28 -6
  36. package/dist/es/components/DownloadLinks/DownloadLink.css +6 -6
  37. package/dist/es/components/DownloadLinks/DownloadLink.d.ts +7 -0
  38. package/dist/es/components/DownloadLinks/DownloadLink.js +28 -6
  39. package/dist/es/components/DownloadLinks/DownloadLinks.css +9 -6
  40. package/dist/es/components/DownloadLinks/DownloadLinks.d.ts +2 -0
  41. package/dist/es/components/DownloadLinks/DownloadLinks.js +18 -3
  42. package/dist/es/components/Instructions/Instructions.css +189 -130
  43. package/dist/es/components/Instructions/Instructions.d.ts +21 -2
  44. package/dist/es/components/Instructions/Instructions.js +115 -74
  45. package/dist/es/components/Instructions/img/iphone12.png +0 -0
  46. package/dist/es/components/PageTitle/PageTitle.css +80 -0
  47. package/dist/es/components/PageTitle/PageTitle.d.ts +23 -0
  48. package/dist/es/components/PageTitle/PageTitle.js +65 -0
  49. package/dist/es/components/Partners/Partners.css +22 -31
  50. package/dist/es/components/Partners/Partners.d.ts +13 -1
  51. package/dist/es/components/Partners/Partners.js +40 -18
  52. package/dist/es/components/PictureWithDescription/PictureWithDescription.css +25 -10
  53. package/dist/es/components/PictureWithDescription/PictureWithDescription.d.ts +13 -0
  54. package/dist/es/components/PictureWithDescription/PictureWithDescription.js +31 -7
  55. package/dist/es/components/Property/Property.css +79 -71
  56. package/dist/es/components/Property/Property.d.ts +21 -2
  57. package/dist/es/components/Property/Property.js +80 -34
  58. package/dist/es/components/Property/PropertyDescription.css +3 -3
  59. package/dist/es/components/Property/PropertyDescription.js +19 -21
  60. package/dist/es/components/Property/types.d.ts +7 -2
  61. package/dist/es/components/Steps/Steps.css +41 -0
  62. package/dist/es/components/Steps/Steps.d.ts +10 -0
  63. package/dist/es/components/Steps/Steps.js +35 -0
  64. package/dist/es/components/Steps/StepsItem.css +37 -0
  65. package/dist/es/components/Steps/StepsItem.d.ts +10 -0
  66. package/dist/es/components/Steps/StepsItem.js +26 -0
  67. package/dist/es/components/StoreBanner/StoreBanner.css +293 -0
  68. package/dist/es/components/StoreBanner/StoreBanner.d.ts +67 -0
  69. package/dist/es/components/StoreBanner/StoreBanner.js +164 -0
  70. package/dist/es/components/StoreBanner/doc/img/new-iphone-screen.png +0 -0
  71. package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
  72. package/dist/es/components/StoreBanner/doc/img/screen.png +0 -0
  73. package/dist/es/components/StoreBanner/img/android.png +0 -0
  74. package/dist/es/components/StoreBanner/img/black-iphone.png +0 -0
  75. package/dist/es/components/StoreBanner/img/new-iphone.png +0 -0
  76. package/dist/es/components/StoreBanner/img/white-iphone.png +0 -0
  77. package/dist/es/components/StoreButton/StoreButton.css +15 -0
  78. package/dist/es/components/StoreButton/StoreButton.d.ts +17 -0
  79. package/dist/es/components/StoreButton/StoreButton.js +37 -0
  80. package/dist/es/components/StoreButton/img/app-store.png +0 -0
  81. package/dist/es/components/StoreButton/img/google-play.png +0 -0
  82. package/dist/es/components/StoreButton/img/huawei-store.png +0 -0
  83. package/dist/es/components/Table/Table.css +67 -67
  84. package/dist/es/components/Table/Table.js +4 -4
  85. package/dist/es/components/Table/TableRow.js +1 -0
  86. package/dist/es/components/TabsBox/TabsBox.d.ts +4 -1
  87. package/dist/es/components/TabsBox/TabsBox.js +24 -3
  88. package/dist/es/components/TextBox/TextBox.css +7 -1
  89. package/dist/es/components/TextBox/TextBox.d.ts +8 -0
  90. package/dist/es/components/TextBox/TextBox.js +37 -5
  91. package/dist/es/components/TextBox/TextBoxPicture.css +24 -0
  92. package/dist/es/components/TextBox/TextBoxPicture.d.ts +17 -0
  93. package/dist/es/components/TextBox/TextBoxPicture.js +32 -0
  94. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +15 -4
  95. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +8 -2
  96. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js +34 -14
  97. package/dist/es/components/VideoBanner/VideoBanner.css +155 -76
  98. package/dist/es/components/VideoBanner/VideoBanner.d.ts +64 -13
  99. package/dist/es/components/VideoBanner/VideoBanner.js +202 -70
  100. package/dist/es/components/VideoBlock/VideoBlock.css +32 -28
  101. package/dist/es/components/VideoBlock/VideoBlock.d.ts +20 -6
  102. package/dist/es/components/VideoBlock/VideoBlock.js +63 -44
  103. package/dist/es/constants/throttleTime.d.ts +4 -0
  104. package/dist/es/constants/throttleTime.js +3 -0
  105. package/dist/es/index.d.ts +8 -0
  106. package/dist/es/index.js +8 -0
  107. package/dist/lib/components/AccordionBox/AccordionBox.css +13 -0
  108. package/dist/lib/components/AccordionBox/AccordionBox.d.ts +16 -1
  109. package/dist/lib/components/AccordionBox/AccordionBox.js +31 -19
  110. package/dist/lib/components/BannerBox/BannerBox.js +3 -5
  111. package/dist/lib/components/BenefitsIcons/BenefitsIcons.d.ts +13 -2
  112. package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +84 -20
  113. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
  114. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js +15 -16
  115. package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +3 -3
  116. package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +19 -12
  117. package/dist/lib/components/BenefitsIcons/types.d.ts +7 -2
  118. package/dist/lib/components/BenefitsIcons/types.js +7 -2
  119. package/dist/lib/components/BenefitsPictures/BenefitsPictures.d.ts +10 -1
  120. package/dist/lib/components/BenefitsPictures/BenefitsPictures.js +32 -15
  121. package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +4 -4
  122. package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +46 -0
  123. package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +21 -0
  124. package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +65 -0
  125. package/dist/lib/components/ButtonBanner/ButtonBanner.css +122 -0
  126. package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +54 -0
  127. package/dist/lib/components/ButtonBanner/ButtonBanner.js +133 -0
  128. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css +3 -3
  129. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +22 -2
  130. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +45 -11
  131. package/dist/lib/components/Card/Card.css +71 -44
  132. package/dist/lib/components/Card/Card.d.ts +33 -3
  133. package/dist/lib/components/Card/Card.js +118 -59
  134. package/dist/lib/components/CardsBox/CardsBox.d.ts +10 -2
  135. package/dist/lib/components/CardsBox/CardsBox.js +30 -16
  136. package/dist/lib/components/CarouselBox/CarouselBox.js +3 -5
  137. package/dist/lib/components/Container/Container.css +1848 -533
  138. package/dist/lib/components/Container/Container.d.ts +11 -1
  139. package/dist/lib/components/Container/Container.js +32 -11
  140. package/dist/lib/components/DownloadLinks/DownloadLink.css +6 -6
  141. package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +7 -0
  142. package/dist/lib/components/DownloadLinks/DownloadLink.js +32 -11
  143. package/dist/lib/components/DownloadLinks/DownloadLinks.css +9 -6
  144. package/dist/lib/components/DownloadLinks/DownloadLinks.d.ts +2 -0
  145. package/dist/lib/components/DownloadLinks/DownloadLinks.js +20 -6
  146. package/dist/lib/components/Instructions/Instructions.css +189 -130
  147. package/dist/lib/components/Instructions/Instructions.d.ts +21 -2
  148. package/dist/lib/components/Instructions/Instructions.js +148 -104
  149. package/dist/lib/components/Instructions/img/iphone12.png +0 -0
  150. package/dist/lib/components/PageTitle/PageTitle.css +80 -0
  151. package/dist/lib/components/PageTitle/PageTitle.d.ts +23 -0
  152. package/dist/lib/components/PageTitle/PageTitle.js +85 -0
  153. package/dist/lib/components/Partners/Partners.css +22 -31
  154. package/dist/lib/components/Partners/Partners.d.ts +13 -1
  155. package/dist/lib/components/Partners/Partners.js +43 -23
  156. package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +25 -10
  157. package/dist/lib/components/PictureWithDescription/PictureWithDescription.d.ts +13 -0
  158. package/dist/lib/components/PictureWithDescription/PictureWithDescription.js +33 -8
  159. package/dist/lib/components/Property/Property.css +79 -71
  160. package/dist/lib/components/Property/Property.d.ts +21 -2
  161. package/dist/lib/components/Property/Property.js +93 -53
  162. package/dist/lib/components/Property/PropertyDescription.css +3 -3
  163. package/dist/lib/components/Property/PropertyDescription.js +21 -25
  164. package/dist/lib/components/Property/types.d.ts +7 -2
  165. package/dist/lib/components/Steps/Steps.css +41 -0
  166. package/dist/lib/components/Steps/Steps.d.ts +10 -0
  167. package/dist/lib/components/Steps/Steps.js +55 -0
  168. package/dist/lib/components/Steps/StepsItem.css +37 -0
  169. package/dist/lib/components/Steps/StepsItem.d.ts +10 -0
  170. package/dist/lib/components/Steps/StepsItem.js +39 -0
  171. package/dist/lib/components/StoreBanner/StoreBanner.css +293 -0
  172. package/dist/lib/components/StoreBanner/StoreBanner.d.ts +67 -0
  173. package/dist/lib/components/StoreBanner/StoreBanner.js +191 -0
  174. package/dist/lib/components/StoreBanner/doc/img/new-iphone-screen.png +0 -0
  175. package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
  176. package/dist/lib/components/StoreBanner/doc/img/screen.png +0 -0
  177. package/dist/lib/components/StoreBanner/img/android.png +0 -0
  178. package/dist/lib/components/StoreBanner/img/black-iphone.png +0 -0
  179. package/dist/lib/components/StoreBanner/img/new-iphone.png +0 -0
  180. package/dist/lib/components/StoreBanner/img/white-iphone.png +0 -0
  181. package/dist/lib/components/StoreButton/StoreButton.css +15 -0
  182. package/dist/lib/components/StoreButton/StoreButton.d.ts +17 -0
  183. package/dist/lib/components/StoreButton/StoreButton.js +58 -0
  184. package/dist/lib/components/StoreButton/img/app-store.png +0 -0
  185. package/dist/lib/components/StoreButton/img/google-play.png +0 -0
  186. package/dist/lib/components/StoreButton/img/huawei-store.png +0 -0
  187. package/dist/lib/components/Table/Table.css +67 -67
  188. package/dist/lib/components/Table/Table.js +6 -8
  189. package/dist/lib/components/Table/TableRow.js +1 -0
  190. package/dist/lib/components/TabsBox/TabsBox.d.ts +4 -1
  191. package/dist/lib/components/TabsBox/TabsBox.js +25 -2
  192. package/dist/lib/components/TextBox/TextBox.css +7 -1
  193. package/dist/lib/components/TextBox/TextBox.d.ts +8 -0
  194. package/dist/lib/components/TextBox/TextBox.js +39 -6
  195. package/dist/lib/components/TextBox/TextBoxPicture.css +24 -0
  196. package/dist/lib/components/TextBox/TextBoxPicture.d.ts +17 -0
  197. package/dist/lib/components/TextBox/TextBoxPicture.js +49 -0
  198. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +15 -4
  199. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +8 -2
  200. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js +39 -19
  201. package/dist/lib/components/VideoBanner/VideoBanner.css +155 -76
  202. package/dist/lib/components/VideoBanner/VideoBanner.d.ts +64 -13
  203. package/dist/lib/components/VideoBanner/VideoBanner.js +225 -89
  204. package/dist/lib/components/VideoBlock/VideoBlock.css +32 -28
  205. package/dist/lib/components/VideoBlock/VideoBlock.d.ts +20 -6
  206. package/dist/lib/components/VideoBlock/VideoBlock.js +76 -68
  207. package/dist/lib/constants/throttleTime.d.ts +4 -0
  208. package/dist/lib/constants/throttleTime.js +10 -0
  209. package/dist/lib/index.d.ts +8 -0
  210. package/dist/lib/index.js +64 -0
  211. package/package.json +20 -75
@@ -0,0 +1,293 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-store-banner_theme_base .mfui-store-banner__grid,
9
+ .mfui-store-banner_theme_clearWhite .mfui-store-banner__grid {
10
+ background-color: #FFFFFF;
11
+ }
12
+ .mfui-store-banner_theme_base .mfui-store-banner__content,
13
+ .mfui-store-banner_theme_clearWhite .mfui-store-banner__content {
14
+ color: #333333;
15
+ }
16
+ .mfui-store-banner_theme_green .mfui-store-banner__grid {
17
+ background-color: #00B956;
18
+ }
19
+ .mfui-store-banner_theme_green .mfui-store-banner__content {
20
+ color: #FFFFFF;
21
+ }
22
+ .mfui-store-banner_theme_spbSky1 .mfui-store-banner__grid {
23
+ background-color: #EDEDED;
24
+ }
25
+ .mfui-store-banner_theme_spbSky1 .mfui-store-banner__content {
26
+ color: #333333;
27
+ }
28
+ .mfui-store-banner_mask_new-iphone .mfui-store-banner__device-mask {
29
+ position: relative;
30
+ z-index: 2;
31
+ background-image: url('./img/new-iphone.png');
32
+ }
33
+ .mfui-store-banner_mask_new-iphone .mfui-store-banner__screen {
34
+ top: 13px;
35
+ z-index: 1;
36
+ width: 87%;
37
+ }
38
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
39
+ .mfui-store-banner_mask_new-iphone .mfui-store-banner__screen {
40
+ top: 10px;
41
+ }
42
+ }
43
+ @media screen and (max-width: 767px) {
44
+ .mfui-store-banner_mask_new-iphone .mfui-store-banner__screen {
45
+ top: 33px;
46
+ }
47
+ }
48
+ .mfui-store-banner_mask_android .mfui-store-banner__device-mask {
49
+ background-image: url('./img/android.png');
50
+ }
51
+ .mfui-store-banner_mask_android .mfui-store-banner__screen {
52
+ top: 59px;
53
+ width: 86%;
54
+ }
55
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
56
+ .mfui-store-banner_mask_android .mfui-store-banner__screen {
57
+ top: 48px;
58
+ }
59
+ }
60
+ @media screen and (max-width: 767px) {
61
+ .mfui-store-banner_mask_android .mfui-store-banner__screen {
62
+ top: 64px;
63
+ }
64
+ }
65
+ .mfui-store-banner_mask_white-iphone .mfui-store-banner__device-mask {
66
+ background-image: url('./img/white-iphone.png');
67
+ }
68
+ .mfui-store-banner_mask_black-iphone .mfui-store-banner__device-mask {
69
+ background-image: url('./img/black-iphone.png');
70
+ }
71
+ .mfui-store-banner_mask_white-iphone .mfui-store-banner__screen,
72
+ .mfui-store-banner_mask_black-iphone .mfui-store-banner__screen {
73
+ top: 57px;
74
+ width: 87%;
75
+ }
76
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
77
+ .mfui-store-banner_mask_white-iphone .mfui-store-banner__screen,
78
+ .mfui-store-banner_mask_black-iphone .mfui-store-banner__screen {
79
+ top: 47px;
80
+ }
81
+ }
82
+ @media screen and (max-width: 767px) {
83
+ .mfui-store-banner_mask_white-iphone .mfui-store-banner__screen,
84
+ .mfui-store-banner_mask_black-iphone .mfui-store-banner__screen {
85
+ top: 63px;
86
+ }
87
+ }
88
+ @media screen and (min-width: 1024px) {
89
+ .mfui-store-banner__container {
90
+ padding-top: 30px;
91
+ }
92
+ }
93
+ .mfui-store-banner__grid {
94
+ padding-top: 32px;
95
+ padding-bottom: 32px;
96
+ border: 1px solid #D8D8D8;
97
+ border-radius: 8px;
98
+ }
99
+ @media screen and (max-width: 767px) {
100
+ .mfui-store-banner__grid {
101
+ padding-top: 24px;
102
+ padding-bottom: 0;
103
+ }
104
+ }
105
+ .mfui-store-banner__content {
106
+ padding-left: 32px;
107
+ }
108
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
109
+ .mfui-store-banner__content {
110
+ padding-right: 10px;
111
+ }
112
+ }
113
+ @media screen and (max-width: 767px) {
114
+ .mfui-store-banner__content {
115
+ padding-right: 15px;
116
+ padding-bottom: 32px;
117
+ padding-left: 15px;
118
+ text-align: center;
119
+ }
120
+ }
121
+ .mfui-store-banner__device-mask {
122
+ height: 100%;
123
+ background-repeat: no-repeat;
124
+ background-size: cover;
125
+ }
126
+ .mfui-store-banner__device-wrapper {
127
+ position: relative;
128
+ bottom: calc(2 * (32px - 1px));
129
+ width: 235px;
130
+ height: calc(100% + 2 * 32px + 30px);
131
+ margin-right: auto;
132
+ margin-left: auto;
133
+ overflow: hidden;
134
+ }
135
+ @media screen and (min-width: 1024px) and (max-width: 1279px) {
136
+ .mfui-store-banner__device-wrapper {
137
+ width: 260px;
138
+ }
139
+ }
140
+ @media screen and (max-width: 1023px) {
141
+ .mfui-store-banner__device-wrapper {
142
+ bottom: 0;
143
+ }
144
+ }
145
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
146
+ .mfui-store-banner__device-wrapper {
147
+ width: 196px;
148
+ height: calc(100% + 32px);
149
+ }
150
+ }
151
+ @media screen and (max-width: 767px) {
152
+ .mfui-store-banner__device-wrapper {
153
+ width: 163px;
154
+ height: 222px;
155
+ padding-top: 24px;
156
+ }
157
+ }
158
+ .mfui-store-banner__links {
159
+ display: -webkit-box;
160
+ display: -ms-flexbox;
161
+ display: flex;
162
+ }
163
+ .mfui-store-banner__qr-code {
164
+ margin-right: 16px;
165
+ }
166
+ @media screen and (max-width: 767px) {
167
+ .mfui-store-banner__qr-code {
168
+ display: none;
169
+ }
170
+ }
171
+ @media screen and (min-width: 768px) {
172
+ .mfui-store-banner__qr-code + .mfui-store-banner__stores {
173
+ -webkit-box-orient: vertical;
174
+ -webkit-box-direction: normal;
175
+ -ms-flex-direction: column;
176
+ flex-direction: column;
177
+ -webkit-box-pack: justify;
178
+ -ms-flex-pack: justify;
179
+ justify-content: space-between;
180
+ }
181
+ }
182
+ .mfui-store-banner__store-link {
183
+ width: 136px;
184
+ height: 40px;
185
+ }
186
+ @media screen and (max-width: 767px) {
187
+ .mfui-store-banner__store-link {
188
+ width: 119px;
189
+ height: 35px;
190
+ }
191
+ }
192
+ .mfui-store-banner__store-link:not(:last-child) {
193
+ margin-right: 16px;
194
+ margin-bottom: 10px;
195
+ }
196
+ .mfui-store-banner__stores {
197
+ display: -webkit-box;
198
+ display: -ms-flexbox;
199
+ display: flex;
200
+ -webkit-box-flex: 1;
201
+ -ms-flex-positive: 1;
202
+ flex-grow: 1;
203
+ -ms-flex-wrap: wrap;
204
+ flex-wrap: wrap;
205
+ }
206
+ @media screen and (max-width: 767px) {
207
+ .mfui-store-banner__stores {
208
+ -webkit-box-pack: center;
209
+ -ms-flex-pack: center;
210
+ justify-content: center;
211
+ }
212
+ }
213
+ .mfui-store-banner__text {
214
+ margin-bottom: 32px;
215
+ }
216
+ .mfui-store-banner__title {
217
+ margin-bottom: 16px;
218
+ }
219
+ .mfui-store-banner__screen {
220
+ position: absolute;
221
+ left: 50%;
222
+ -webkit-transform: translateX(-50%);
223
+ transform: translateX(-50%);
224
+ }
225
+ @media screen and (max-width: 767px) {
226
+ .mfui-store-banner__button {
227
+ margin: 0 auto;
228
+ }
229
+ }
230
+ .mfui-store-banner__links_three .mfui-store-banner__qr-code {
231
+ -o-object-fit: contain;
232
+ object-fit: contain;
233
+ }
234
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
235
+ .mfui-store-banner__links_three .mfui-store-banner__qr-code {
236
+ width: 120px;
237
+ height: 120px;
238
+ }
239
+ }
240
+ @media screen and (min-width: 1280px) {
241
+ .mfui-store-banner__links_three .mfui-store-banner__qr-code {
242
+ max-width: 88px;
243
+ max-height: 88px;
244
+ }
245
+ }
246
+ .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
247
+ max-width: 305px;
248
+ }
249
+ @media screen and (min-width: 1024px) {
250
+ .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
251
+ -webkit-box-orient: horizontal;
252
+ -webkit-box-direction: normal;
253
+ -ms-flex-direction: row;
254
+ flex-direction: row;
255
+ -webkit-box-pack: start;
256
+ -ms-flex-pack: start;
257
+ justify-content: flex-start;
258
+ }
259
+ }
260
+ @media screen and (max-width: 767px) {
261
+ .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
262
+ margin: 0 auto;
263
+ }
264
+ }
265
+ .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
266
+ margin-right: 16px;
267
+ }
268
+ .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
269
+ margin-right: 0;
270
+ }
271
+ .mfui-store-banner__links_three .mfui-store-banner__store-link {
272
+ width: 136px;
273
+ height: 40px;
274
+ }
275
+ @media screen and (max-width: 1023px) {
276
+ .mfui-store-banner__links_three .mfui-store-banner__store-link {
277
+ width: 119px;
278
+ height: 35px;
279
+ }
280
+ }
281
+ .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:last-child) {
282
+ margin-bottom: 8px;
283
+ }
284
+ @media screen and (max-width: 767px) {
285
+ .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:last-child) {
286
+ margin-bottom: 16px;
287
+ }
288
+ }
289
+ @media screen and (max-width: 1023px) {
290
+ .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
291
+ margin-right: 0;
292
+ }
293
+ }
@@ -0,0 +1,67 @@
1
+ import * as React from 'react';
2
+ import { Props as StoreButtonPropsType } from '../StoreButton/StoreButton';
3
+ import './StoreBanner.less';
4
+ export declare const Theme: {
5
+ readonly BASE: "base";
6
+ readonly GREEN: "green";
7
+ readonly SPB_SKY_1: "spbSky1";
8
+ /** @deprecated */
9
+ readonly CLEAR_WHITE: "clearWhite";
10
+ };
11
+ declare type ThemeType = typeof Theme[keyof typeof Theme];
12
+ export declare const DeviceMask: {
13
+ readonly ANDROID: "android";
14
+ readonly NEW_IPHONE: "new-iphone";
15
+ readonly BLACK_IPHONE: "black-iphone";
16
+ readonly WHITE_IPHONE: "white-iphone";
17
+ };
18
+ declare type DeviceMaskType = typeof DeviceMask[keyof typeof DeviceMask];
19
+ declare type LinkHrefType = StoreButtonPropsType['href'];
20
+ declare type LinkOnClickType = StoreButtonPropsType['onClick'];
21
+ export interface IStoreBannerProps {
22
+ /** Заголовок */
23
+ title: string;
24
+ /** Текст */
25
+ text: string;
26
+ /** Ссылка на скачивание приложения в App Store */
27
+ linkApple?: LinkHrefType;
28
+ /** Обработчик клика по ссылке в App Store */
29
+ onClickApple?: LinkOnClickType;
30
+ /** Ссылка на скачивание приложения в Google Play */
31
+ linkGoogle?: LinkHrefType;
32
+ /** Обработчик клика по ссылке в Google Play */
33
+ onClickGoogle?: LinkOnClickType;
34
+ /** Ссылка на скачивание приложения в Huawei Store */
35
+ linkHuawei?: LinkHrefType;
36
+ /** Обработчик клика по ссылке в Huawei Store */
37
+ onClickHuawei?: LinkOnClickType;
38
+ /** Текст кнопки */
39
+ textButton?: string;
40
+ /** Ссылка для кнопки */
41
+ linkButton?: string;
42
+ /** Ссылка на картинку с QR-кодом */
43
+ qrCode?: string;
44
+ /** Цветовая тема компонента */
45
+ theme?: ThemeType;
46
+ /** Изображение телефона */
47
+ deviceMask: DeviceMaskType;
48
+ /** Изображение на дисплее телефона */
49
+ imageSrc: string;
50
+ /** Дополнительный класс корневого элемента */
51
+ className?: string;
52
+ /** Дополнительные классы для корневого и внутренних элементов */
53
+ classes?: {
54
+ root?: string;
55
+ appleLink?: string;
56
+ googleLink?: string;
57
+ huaweiLink?: string;
58
+ };
59
+ /** Ссылка на корневой элемент */
60
+ rootRef?: React.Ref<HTMLDivElement>;
61
+ /** Дата атрибуты для корневого элемента */
62
+ dataAttrs?: {
63
+ [key: string]: string;
64
+ };
65
+ }
66
+ declare const StoreBanner: React.FC<IStoreBannerProps>;
67
+ export default StoreBanner;
@@ -0,0 +1,191 @@
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.DeviceMask = exports.Theme = void 0;
9
+
10
+ require("core-js/modules/es.array.concat");
11
+
12
+ require("core-js/modules/es.array.includes");
13
+
14
+ require("core-js/modules/es.object.values");
15
+
16
+ require("core-js/modules/es.string.includes");
17
+
18
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
19
+
20
+ var React = _interopRequireWildcard(require("react"));
21
+
22
+ var _uiCore = require("@megafon/ui-core");
23
+
24
+ var _uiHelpers = require("@megafon/ui-helpers");
25
+
26
+ var _propTypes = _interopRequireDefault(require("prop-types"));
27
+
28
+ var _StoreButton = _interopRequireWildcard(require("../StoreButton/StoreButton"));
29
+
30
+ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
31
+
32
+ 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; }
33
+
34
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
35
+
36
+ var Theme = {
37
+ BASE: 'base',
38
+ GREEN: 'green',
39
+ SPB_SKY_1: 'spbSky1',
40
+
41
+ /** @deprecated */
42
+ CLEAR_WHITE: 'clearWhite'
43
+ };
44
+ exports.Theme = Theme;
45
+ var DeviceMask = {
46
+ ANDROID: 'android',
47
+ NEW_IPHONE: 'new-iphone',
48
+ BLACK_IPHONE: 'black-iphone',
49
+ WHITE_IPHONE: 'white-iphone'
50
+ };
51
+ exports.DeviceMask = DeviceMask;
52
+ var DEFAULT_TEXT_BUTTON = 'Установите приложение';
53
+ var cn = (0, _uiHelpers.cnCreate)('mfui-store-banner');
54
+
55
+ var StoreBanner = function StoreBanner(_ref) {
56
+ var className = _ref.className,
57
+ _ref$classes = _ref.classes;
58
+ _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
59
+ var rootClassName = _ref$classes.root,
60
+ appleLinkClassName = _ref$classes.appleLink,
61
+ googleLinkClassName = _ref$classes.googleLink,
62
+ huaweiLinkClassName = _ref$classes.huaweiLink,
63
+ title = _ref.title,
64
+ text = _ref.text,
65
+ linkApple = _ref.linkApple,
66
+ linkGoogle = _ref.linkGoogle,
67
+ linkHuawei = _ref.linkHuawei,
68
+ linkButton = _ref.linkButton,
69
+ _ref$textButton = _ref.textButton,
70
+ textButton = _ref$textButton === void 0 ? DEFAULT_TEXT_BUTTON : _ref$textButton,
71
+ qrCode = _ref.qrCode,
72
+ imageSrc = _ref.imageSrc,
73
+ _ref$theme = _ref.theme,
74
+ theme = _ref$theme === void 0 ? Theme.CLEAR_WHITE : _ref$theme,
75
+ deviceMask = _ref.deviceMask,
76
+ rootRef = _ref.rootRef,
77
+ dataAttrs = _ref.dataAttrs,
78
+ onClickApple = _ref.onClickApple,
79
+ onClickGoogle = _ref.onClickGoogle,
80
+ onClickHuawei = _ref.onClickHuawei;
81
+ return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
82
+ className: cn({
83
+ theme: theme,
84
+ mask: deviceMask
85
+ }, [className, rootClassName]),
86
+ ref: rootRef
87
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement("div", {
88
+ className: cn('container')
89
+ }, /*#__PURE__*/React.createElement("div", {
90
+ className: cn('grid')
91
+ }, /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
92
+ all: "6",
93
+ mobile: "12",
94
+ rightOffsetWide: "1"
95
+ }, /*#__PURE__*/React.createElement("div", {
96
+ className: cn('content')
97
+ }, /*#__PURE__*/React.createElement(_uiCore.Header, {
98
+ as: "h2",
99
+ className: cn('title'),
100
+ color: "inherit"
101
+ }, title), /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
102
+ className: cn('text'),
103
+ hasMargin: false,
104
+ color: "inherit"
105
+ }, text), /*#__PURE__*/React.createElement("div", {
106
+ className: cn('links', {
107
+ three: !!linkApple && !!linkGoogle && !!linkHuawei
108
+ })
109
+ }, !linkButton && qrCode && /*#__PURE__*/React.createElement("img", {
110
+ src: qrCode,
111
+ className: cn('qr-code'),
112
+ alt: "QR-\u043A\u043E\u0434"
113
+ }), !linkButton && /*#__PURE__*/React.createElement("div", {
114
+ className: cn('stores')
115
+ }, linkApple && /*#__PURE__*/React.createElement(_StoreButton["default"], {
116
+ theme: _StoreButton.Theme.APP_STORE,
117
+ href: linkApple,
118
+ onClick: onClickApple,
119
+ className: cn('store-link', {
120
+ 'app-store': true
121
+ }, appleLinkClassName)
122
+ }), linkGoogle && /*#__PURE__*/React.createElement(_StoreButton["default"], {
123
+ theme: _StoreButton.Theme.GOOGLE_PLAY,
124
+ href: linkGoogle,
125
+ className: cn('store-link', {
126
+ 'google-play': true
127
+ }, googleLinkClassName),
128
+ onClick: onClickGoogle
129
+ }), linkHuawei && /*#__PURE__*/React.createElement(_StoreButton["default"], {
130
+ theme: _StoreButton.Theme.HUAWEI_STORE,
131
+ href: linkHuawei,
132
+ className: cn('store-link', {
133
+ 'huawei-store': true
134
+ }, huaweiLinkClassName),
135
+ onClick: onClickHuawei
136
+ })), linkButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
137
+ className: cn('button'),
138
+ href: linkButton,
139
+ theme: theme === 'green' ? 'purple' : 'green'
140
+ }, textButton)))), /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
141
+ all: "4",
142
+ desktop: "6",
143
+ tablet: "6",
144
+ mobile: "12"
145
+ }, /*#__PURE__*/React.createElement("div", {
146
+ className: cn('device-wrapper')
147
+ }, /*#__PURE__*/React.createElement("div", {
148
+ className: cn('device-mask')
149
+ }), /*#__PURE__*/React.createElement("img", {
150
+ src: imageSrc,
151
+ className: cn('screen'),
152
+ alt: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430"
153
+ })))))));
154
+ };
155
+
156
+ StoreBanner.propTypes = {
157
+ title: _propTypes["default"].string.isRequired,
158
+ text: _propTypes["default"].string.isRequired,
159
+ linkApple: _propTypes["default"].string,
160
+ onClickApple: _propTypes["default"].func,
161
+ linkGoogle: _propTypes["default"].string,
162
+ onClickGoogle: _propTypes["default"].func,
163
+ qrCode: _propTypes["default"].string,
164
+ deviceMask: _propTypes["default"].oneOf(Object.values(DeviceMask)).isRequired,
165
+ imageSrc: _propTypes["default"].string.isRequired,
166
+ className: _propTypes["default"].string,
167
+ classes: _propTypes["default"].shape({
168
+ appleLink: _propTypes["default"].string,
169
+ googleLink: _propTypes["default"].string
170
+ }),
171
+ rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
172
+ current: _propTypes["default"].elementType
173
+ }), _propTypes["default"].any])]),
174
+ dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
175
+ theme: function theme(props, propName, componentName) {
176
+ var deprecatedValue = Theme.CLEAR_WHITE;
177
+ var propValue = props[propName];
178
+
179
+ if (propValue && !Object.values(Theme).includes(propValue)) {
180
+ return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n expected one of [").concat(Object.values(Theme), "]"));
181
+ }
182
+
183
+ if (propValue && propValue === deprecatedValue) {
184
+ return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n value '").concat(deprecatedValue, "' is deprecated, please use value '").concat(Theme.BASE, "'"));
185
+ }
186
+
187
+ return null;
188
+ }
189
+ };
190
+ var _default = StoreBanner;
191
+ exports["default"] = _default;
@@ -0,0 +1,15 @@
1
+ .mfui-store-button {
2
+ border-radius: 8px;
3
+ background-repeat: no-repeat;
4
+ background-position: center;
5
+ background-size: cover;
6
+ }
7
+ .mfui-store-button_theme_app-store {
8
+ background-image: url('./img/app-store.png');
9
+ }
10
+ .mfui-store-button_theme_google-play {
11
+ background-image: url('./img/google-play.png');
12
+ }
13
+ .mfui-store-button_theme_huawei-store {
14
+ background-image: url('./img/huawei-store.png');
15
+ }
@@ -0,0 +1,17 @@
1
+ import * as React from 'react';
2
+ import { Link } from '@megafon/ui-core';
3
+ import './StoreButton.less';
4
+ export declare enum Theme {
5
+ GOOGLE_PLAY = "google-play",
6
+ APP_STORE = "app-store",
7
+ HUAWEI_STORE = "huawei-store"
8
+ }
9
+ declare type LinkPropTypes = React.ComponentProps<typeof Link>;
10
+ export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick'> & {
11
+ /** Тема кнопки */
12
+ theme: Theme;
13
+ /** Дополнительный класс */
14
+ className?: string;
15
+ };
16
+ declare const StoreButton: React.FC<Props>;
17
+ export default StoreButton;
@@ -0,0 +1,58 @@
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.Theme = void 0;
9
+
10
+ require("core-js/modules/es.object.values");
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 = _interopRequireDefault(require("prop-types"));
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
+
22
+ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
23
+
24
+ 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; }
25
+
26
+ var Theme;
27
+ exports.Theme = Theme;
28
+
29
+ (function (Theme) {
30
+ Theme["GOOGLE_PLAY"] = "google-play";
31
+ Theme["APP_STORE"] = "app-store";
32
+ Theme["HUAWEI_STORE"] = "huawei-store";
33
+ })(Theme || (exports.Theme = Theme = {}));
34
+
35
+ var cn = (0, _uiHelpers.cnCreate)('mfui-store-button');
36
+
37
+ var StoreButton = function StoreButton(_ref) {
38
+ var href = _ref.href,
39
+ onClick = _ref.onClick,
40
+ theme = _ref.theme,
41
+ className = _ref.className;
42
+ return /*#__PURE__*/React.createElement(_uiCore.Link, {
43
+ href: href,
44
+ onClick: onClick,
45
+ className: cn({
46
+ theme: theme
47
+ }, className)
48
+ });
49
+ };
50
+
51
+ StoreButton.propTypes = {
52
+ href: _propTypes["default"].string.isRequired,
53
+ theme: _propTypes["default"].oneOf(Object.values(Theme)).isRequired,
54
+ onClick: _propTypes["default"].func,
55
+ className: _propTypes["default"].string
56
+ };
57
+ var _default = StoreButton;
58
+ exports["default"] = _default;