@megafon/ui-shared 2.0.0-beta.99 → 2.1.1

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,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,37 @@
1
+ import "core-js/modules/es.object.values";
2
+ import * as React from 'react';
3
+ import { Link } from '@megafon/ui-core';
4
+ import { cnCreate } from '@megafon/ui-helpers';
5
+ import PropTypes from 'prop-types';
6
+ import "./StoreButton.css";
7
+ export var Theme;
8
+
9
+ (function (Theme) {
10
+ Theme["GOOGLE_PLAY"] = "google-play";
11
+ Theme["APP_STORE"] = "app-store";
12
+ Theme["HUAWEI_STORE"] = "huawei-store";
13
+ })(Theme || (Theme = {}));
14
+
15
+ var cn = cnCreate('mfui-store-button');
16
+
17
+ var StoreButton = function StoreButton(_ref) {
18
+ var href = _ref.href,
19
+ onClick = _ref.onClick,
20
+ theme = _ref.theme,
21
+ className = _ref.className;
22
+ return /*#__PURE__*/React.createElement(Link, {
23
+ href: href,
24
+ onClick: onClick,
25
+ className: cn({
26
+ theme: theme
27
+ }, className)
28
+ });
29
+ };
30
+
31
+ StoreButton.propTypes = {
32
+ href: PropTypes.string.isRequired,
33
+ theme: PropTypes.oneOf(Object.values(Theme)).isRequired,
34
+ onClick: PropTypes.func,
35
+ className: PropTypes.string
36
+ };
37
+ export default StoreButton;
@@ -5,149 +5,149 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
- .mfui-beta-table {
9
- font-family: inherit;
10
- font-size: 15px;
11
- line-height: 24px;
8
+ .mfui-table {
12
9
  display: -webkit-box;
13
10
  display: -ms-flexbox;
14
11
  display: flex;
12
+ font-family: inherit;
13
+ font-size: 15px;
14
+ line-height: 24px;
15
+ }
16
+ .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar {
17
+ width: 8px;
18
+ height: 8px;
19
+ }
20
+ .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-track {
21
+ background-color: #EDEDED;
15
22
  }
16
- .mfui-beta-table__scroll {
23
+ .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-thumb {
24
+ border-radius: 4px;
25
+ background-color: #D8D8D8;
26
+ }
27
+ .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-corner {
28
+ background-color: #FFFFFF;
29
+ }
30
+ .mfui-table:not(.mfui-table_touch) .mfui-table__scroll {
31
+ scrollbar-color: #D8D8D8 #EDEDED;
32
+ scrollbar-width: thin;
33
+ }
34
+ .mfui-table__scroll {
35
+ position: relative;
17
36
  display: grid;
18
37
  grid-template-columns: auto auto auto;
19
38
  max-width: 100%;
20
- overflow: auto;
21
- position: relative;
22
39
  border: 1px solid #D8D8D8;
40
+ overflow: auto;
23
41
  }
24
42
  @media screen and (min-width: 1024px) {
25
- .mfui-beta-table__scroll {
43
+ .mfui-table__scroll {
26
44
  max-height: 500px;
27
45
  }
28
46
  }
29
- .mfui-beta-table__top-shadow {
47
+ .mfui-table__top-shadow {
30
48
  position: -webkit-sticky;
31
49
  position: sticky;
32
50
  top: 0;
33
- width: 100%;
51
+ z-index: 2;
34
52
  display: block;
35
- grid-column-end: 4;
36
53
  grid-column-start: 1;
37
- z-index: 2;
38
- margin-bottom: -6px;
54
+ grid-column-end: 4;
55
+ width: 100%;
39
56
  height: 6px;
57
+ margin-bottom: -6px;
40
58
  background: linear-gradient(359.94deg, rgba(0, 0, 0, 0.0001) 0.06%, rgba(0, 0, 0, 0.03) 38.08%, rgba(0, 0, 0, 0.08) 74.98%);
41
59
  }
42
- .mfui-beta-table__left-shadow {
60
+ .mfui-table__left-shadow {
43
61
  position: -webkit-sticky;
44
62
  position: sticky;
45
- z-index: 2;
46
- width: 6px;
47
- left: 0;
48
63
  top: 0;
49
64
  bottom: 0;
65
+ left: 0;
66
+ z-index: 2;
67
+ width: 6px;
50
68
  margin-right: -6px;
51
69
  background: -webkit-gradient(linear, right top, left top, color-stop(16.3%, rgba(0, 0, 0, 0.0001)), color-stop(51.81%, rgba(0, 0, 0, 0.03)), color-stop(86.27%, rgba(0, 0, 0, 0.08)));
52
70
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.0001) 16.3%, rgba(0, 0, 0, 0.03) 51.81%, rgba(0, 0, 0, 0.08) 86.27%);
53
71
  }
54
- .mfui-beta-table__bottom-gradient {
55
- display: block;
56
- height: 48px;
57
- width: 100%;
58
- margin-top: -48px;
72
+ .mfui-table__bottom-gradient {
59
73
  position: -webkit-sticky;
60
74
  position: sticky;
61
- z-index: 1;
62
75
  bottom: 0;
76
+ z-index: 1;
77
+ display: block;
78
+ grid-column-start: 1;
79
+ grid-column-end: 4;
80
+ width: 100%;
81
+ height: 48px;
82
+ margin-top: -48px;
63
83
  background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
64
84
  background: linear-gradient(to top, #FFFFFF 25%, rgba(255, 255, 255, 0));
65
- grid-column-end: 4;
66
- grid-column-start: 1;
67
85
  }
68
- .mfui-beta-table__right-gradient {
69
- display: block;
70
- height: 100%;
71
- width: 48px;
86
+ .mfui-table__right-gradient {
72
87
  position: -webkit-sticky;
73
88
  position: sticky;
74
- z-index: 1;
75
89
  right: 0;
90
+ z-index: 1;
91
+ display: block;
92
+ width: 48px;
93
+ height: 100%;
76
94
  margin-left: -48px;
77
95
  background: -webkit-gradient(linear, right top, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
78
96
  background: linear-gradient(to left, #FFFFFF 25%, rgba(255, 255, 255, 0));
79
97
  }
80
- .mfui-beta-table__table {
81
- border-spacing: 0;
98
+ .mfui-table__table {
82
99
  border-width: 0;
83
100
  border-collapse: separate;
101
+ border-spacing: 0;
84
102
  background-color: #FFFFFF;
85
103
  }
86
- .mfui-beta-table__cell {
87
- padding: 24px;
104
+ .mfui-table__cell {
88
105
  -webkit-box-sizing: border-box;
89
106
  box-sizing: border-box;
107
+ padding: 24px;
90
108
  background-color: #FFFFFF;
91
109
  }
92
110
  @media screen and (max-width: 767px) {
93
- .mfui-beta-table__cell {
94
- padding-left: 16px;
111
+ .mfui-table__cell {
95
112
  padding-right: 16px;
113
+ padding-left: 16px;
96
114
  }
97
115
  }
98
- .mfui-beta-table__cell:first-child {
116
+ .mfui-table__cell:first-child {
117
+ position: relative;
99
118
  left: 0;
100
- min-width: 144px;
101
119
  width: 144px;
102
- position: relative;
120
+ min-width: 144px;
103
121
  border-right: 1px solid #D8D8D8;
104
122
  }
105
- .mfui-beta-table__cell:not(:first-child) {
123
+ .mfui-table__cell:not(:first-child) {
106
124
  max-width: 288px;
107
125
  }
108
- .mfui-beta-table__row_head .mfui-beta-table__cell {
126
+ .mfui-table__row_head .mfui-table__cell {
109
127
  font-size: 12px;
110
128
  line-height: 16px;
111
129
  height: 72px;
112
- background-color: #F6F6F6;
113
- color: rgba(51, 51, 51, 0.5);
114
130
  padding-bottom: 12px;
131
+ color: #33333380;
115
132
  vertical-align: bottom;
133
+ background-color: #F6F6F6;
116
134
  }
117
- .mfui-beta-table__row:not(:last-child) .mfui-beta-table__cell {
135
+ .mfui-table__row:not(:last-child) .mfui-table__cell {
118
136
  border-bottom: 1px solid #D8D8D8;
119
137
  }
120
- .mfui-beta-table_min-cell-size_small .mfui-beta-table__cell:not(:first-child) {
138
+ .mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child) {
121
139
  min-width: 72px;
122
140
  }
123
- .mfui-beta-table_min-cell-size_large .mfui-beta-table__cell:not(:first-child) {
141
+ .mfui-table_min-cell-size_large .mfui-table__cell:not(:first-child) {
124
142
  min-width: 144px;
125
143
  }
126
- .mfui-beta-table_fix-column .mfui-beta-table__cell:first-child {
144
+ .mfui-table_fix-column .mfui-table__cell:first-child {
127
145
  position: -webkit-sticky;
128
146
  position: sticky;
129
147
  }
130
- .mfui-beta-table_fix-column .mfui-beta-table__left-shadow {
148
+ .mfui-table_fix-column .mfui-table__left-shadow {
131
149
  left: 144px;
132
150
  }
133
- .mfui-beta-table_fix-column .mfui-beta-table__bottom-gradient {
151
+ .mfui-table_fix-column .mfui-table__bottom-gradient {
134
152
  z-index: 3;
135
153
  }
136
- .mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar {
137
- width: 8px;
138
- height: 8px;
139
- }
140
- .mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-track {
141
- background-color: #EDEDED;
142
- }
143
- .mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-thumb {
144
- border-radius: 4px;
145
- background-color: #D8D8D8;
146
- }
147
- .mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-corner {
148
- background-color: #FFFFFF;
149
- }
150
- .mfui-beta-table:not(.mfui-beta-table_touch) .mfui-beta-table__scroll {
151
- scrollbar-color: #D8D8D8 #EDEDED;
152
- scrollbar-width: thin;
153
- }
@@ -1,12 +1,12 @@
1
1
  import "core-js/modules/es.array.map";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import * as React from 'react';
4
- import * as PropTypes from 'prop-types';
5
- import throttle from 'lodash.throttle';
4
+ import { cnCreate, detectTouch } from '@megafon/ui-helpers';
6
5
  import convert from 'htmr';
7
- import { cnCreate, detectTouch } from '@megafon/ui-core';
6
+ import throttle from 'lodash.throttle';
7
+ import * as PropTypes from 'prop-types';
8
8
  import "./Table.css";
9
- var cn = cnCreate('mfui-beta-table');
9
+ var cn = cnCreate('mfui-table');
10
10
 
11
11
  var Table = function Table(_ref) {
12
12
  var className = _ref.className,
@@ -7,6 +7,7 @@ var TableRow = function TableRow(_ref) {
7
7
  };
8
8
 
9
9
  TableRow.propTypes = {
10
+ // eslint-disable-next-line react/no-unused-prop-types
10
11
  head: PropTypes.bool,
11
12
  children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
12
13
  };
@@ -1,5 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { Tabs } from '@megafon/ui-core';
3
- declare type TabsPropsType = React.ComponentProps<typeof Tabs>;
3
+ declare type TabsPropsType = React.ComponentProps<typeof Tabs> & {
4
+ /** Ссылка на корневой элемент */
5
+ rootRef?: React.Ref<HTMLDivElement>;
6
+ };
4
7
  declare const TabsBox: React.FC<TabsPropsType>;
5
8
  export default TabsBox;
@@ -1,9 +1,30 @@
1
+ import "core-js/modules/es.symbol";
2
+ import "core-js/modules/es.array.index-of";
3
+
4
+ var __rest = this && this.__rest || function (s, e) {
5
+ var t = {};
6
+
7
+ for (var p in s) {
8
+ if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
9
+ }
10
+
11
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
12
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
13
+ }
14
+ return t;
15
+ };
16
+
1
17
  import * as React from 'react';
2
- import { cnCreate, Tabs } from '@megafon/ui-core';
3
- var cn = cnCreate('mfui-beta-tabs-box');
18
+ import { Tabs } from '@megafon/ui-core';
19
+ import { cnCreate } from '@megafon/ui-helpers';
20
+ var cn = cnCreate('mfui-tabs-box');
21
+
22
+ var TabsBox = function TabsBox(_a) {
23
+ var rootRef = _a.rootRef,
24
+ props = __rest(_a, ["rootRef"]);
4
25
 
5
- var TabsBox = function TabsBox(props) {
6
26
  return /*#__PURE__*/React.createElement("div", {
27
+ ref: rootRef,
7
28
  className: cn()
8
29
  }, /*#__PURE__*/React.createElement(Tabs, props));
9
30
  };
@@ -5,6 +5,12 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
- .mfui-beta-text-box_text-center {
8
+ .mfui-text-box__content :first-child {
9
+ margin-top: 0 !important;
10
+ }
11
+ .mfui-text-box__content :last-child {
12
+ margin-bottom: 0 !important;
13
+ }
14
+ .mfui-text-box_text-center {
9
15
  text-align: center;
10
16
  }
@@ -3,6 +3,14 @@ import './TextBox.less';
3
3
  export interface ITextBoxProps {
4
4
  /** Центрирование текста по горизонтали */
5
5
  textCenter?: boolean;
6
+ /** Центрирование компонента по горизонтали при ограниченной ширине */
7
+ centeringWithLimitedWidth?: boolean;
8
+ /** Растягивание компонента на всю доступную ширину */
9
+ isFullWidth?: boolean;
10
+ /** Ссылка на корневой элемент */
11
+ rootRef?: React.Ref<HTMLDivElement>;
12
+ /** Дополнительный класс для корневого элемента */
13
+ className?: string;
6
14
  }
7
15
  declare const TextBox: React.FC<ITextBoxProps>;
8
16
  export default TextBox;
@@ -1,21 +1,53 @@
1
1
  import * as React from 'react';
2
+ import { Grid, GridColumn } from '@megafon/ui-core';
3
+ import { cnCreate } from '@megafon/ui-helpers';
2
4
  import * as PropTypes from 'prop-types';
3
- import { cnCreate } from '@megafon/ui-core';
4
5
  import "./TextBox.css";
5
- var cn = cnCreate('mfui-beta-text-box');
6
+ var cn = cnCreate('mfui-text-box');
6
7
 
7
8
  var TextBox = function TextBox(_ref) {
8
9
  var _ref$textCenter = _ref.textCenter,
9
10
  textCenter = _ref$textCenter === void 0 ? false : _ref$textCenter,
11
+ _ref$centeringWithLim = _ref.centeringWithLimitedWidth,
12
+ centeringWithLimitedWidth = _ref$centeringWithLim === void 0 ? false : _ref$centeringWithLim,
13
+ _ref$isFullWidth = _ref.isFullWidth,
14
+ isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
15
+ rootRef = _ref.rootRef,
16
+ className = _ref.className,
10
17
  children = _ref.children;
18
+
19
+ var renderContent = function renderContent() {
20
+ return /*#__PURE__*/React.createElement("div", {
21
+ className: cn('content')
22
+ }, children);
23
+ };
24
+
25
+ var renderTextBoxWithGrid = function renderTextBoxWithGrid() {
26
+ return /*#__PURE__*/React.createElement(Grid, {
27
+ hAlign: centeringWithLimitedWidth ? 'center' : 'left'
28
+ }, /*#__PURE__*/React.createElement(GridColumn, {
29
+ wide: "8",
30
+ desktop: "10",
31
+ tablet: "12",
32
+ mobile: "12"
33
+ }, renderContent()));
34
+ };
35
+
11
36
  return /*#__PURE__*/React.createElement("div", {
12
37
  className: cn({
13
38
  'text-center': textCenter
14
- })
15
- }, children);
39
+ }, [className]),
40
+ ref: rootRef
41
+ }, isFullWidth ? renderContent() : renderTextBoxWithGrid());
16
42
  };
17
43
 
18
44
  TextBox.propTypes = {
19
- textCenter: PropTypes.bool
45
+ textCenter: PropTypes.bool,
46
+ centeringWithLimitedWidth: PropTypes.bool,
47
+ isFullWidth: PropTypes.bool,
48
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
49
+ current: PropTypes.elementType
50
+ }), PropTypes.any])]),
51
+ className: PropTypes.string
20
52
  };
21
53
  export default TextBox;
@@ -0,0 +1,24 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-text-box-picture_margin_default {
9
+ margin: 16px 0;
10
+ }
11
+ .mfui-text-box-picture_margin_big-top {
12
+ margin: 24px 0 16px;
13
+ }
14
+ .mfui-text-box-picture_margin_big-bottom {
15
+ margin: 16px 0 24px;
16
+ }
17
+ .mfui-text-box-picture_margin_big-vertical {
18
+ margin: 24px 0;
19
+ }
20
+ .mfui-text-box-picture__img {
21
+ display: block;
22
+ max-width: 100%;
23
+ border: 1px solid #EDEDED;
24
+ }
@@ -0,0 +1,17 @@
1
+ import * as React from 'react';
2
+ import './TextBoxPicture.less';
3
+ export declare const pictureMarginTypes: {
4
+ readonly DEFAULT: "default";
5
+ readonly BIG_TOP: "big-top";
6
+ readonly BIG_BOTTOM: "big-bottom";
7
+ readonly BIG_VERTICAL: "big-vertical";
8
+ };
9
+ declare type PictureMarginTypesType = typeof pictureMarginTypes[keyof typeof pictureMarginTypes];
10
+ export interface ITextBoxPictureProps {
11
+ /** URL картинки */
12
+ url: string;
13
+ /** Значение вертикальных отступов */
14
+ margin?: PictureMarginTypesType;
15
+ }
16
+ declare const TextBoxPicture: React.FC<ITextBoxPictureProps>;
17
+ export default TextBoxPicture;
@@ -0,0 +1,32 @@
1
+ import * as React from 'react';
2
+ import { cnCreate } from '@megafon/ui-helpers';
3
+ import * as PropTypes from 'prop-types';
4
+ import "./TextBoxPicture.css";
5
+ export var pictureMarginTypes = {
6
+ DEFAULT: 'default',
7
+ BIG_TOP: 'big-top',
8
+ BIG_BOTTOM: 'big-bottom',
9
+ BIG_VERTICAL: 'big-vertical'
10
+ };
11
+ var cn = cnCreate('mfui-text-box-picture');
12
+
13
+ var TextBoxPicture = function TextBoxPicture(_ref) {
14
+ var url = _ref.url,
15
+ _ref$margin = _ref.margin,
16
+ margin = _ref$margin === void 0 ? pictureMarginTypes.DEFAULT : _ref$margin;
17
+ return /*#__PURE__*/React.createElement("div", {
18
+ className: cn({
19
+ margin: margin
20
+ })
21
+ }, /*#__PURE__*/React.createElement("img", {
22
+ className: cn('img'),
23
+ src: url,
24
+ alt: ""
25
+ }));
26
+ };
27
+
28
+ TextBoxPicture.propTypes = {
29
+ url: PropTypes.string.isRequired,
30
+ margin: PropTypes.oneOf([pictureMarginTypes.DEFAULT, pictureMarginTypes.BIG_TOP, pictureMarginTypes.BIG_BOTTOM, pictureMarginTypes.BIG_VERTICAL])
31
+ };
32
+ export default TextBoxPicture;
@@ -5,16 +5,27 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
- .mfui-beta-title-description-box {
8
+ .mfui-title-description-box {
9
9
  font-family: inherit;
10
10
  color: #333333;
11
11
  }
12
- .mfui-beta-title-description-box__item:not(:last-child) {
12
+ .mfui-title-description-box__item_header {
13
+ white-space: pre-wrap;
14
+ }
15
+ .mfui-title-description-box__item:not(:last-child) {
13
16
  margin-bottom: 16px;
14
17
  }
15
- .mfui-beta-title-description-box_text-color_white {
18
+ .mfui-title-description-box_text-color_white {
16
19
  color: #FFFFFF;
17
20
  }
18
- .mfui-beta-title-description-box_h-align_center {
21
+ .mfui-title-description-box_h-align_center {
19
22
  text-align: center;
20
23
  }
24
+ .mfui-title-description-box__description {
25
+ font-size: 15px;
26
+ line-height: 24px;
27
+ font-weight: 400;
28
+ }
29
+ .mfui-title-description-box__description :last-child {
30
+ margin-bottom: 0 !important;
31
+ }
@@ -1,12 +1,18 @@
1
1
  import * as React from 'react';
2
2
  import './TitleDescriptionBox.less';
3
3
  export interface ITitleDescriptionBoxProps {
4
+ /** Дата атрибуты для корневого элемента */
5
+ dataAttrs?: {
6
+ [key: string]: string;
7
+ };
8
+ /** Ссылка на корневой элемент */
9
+ rootRef?: React.Ref<HTMLDivElement>;
4
10
  /** Дополнительный класс корневого элемента */
5
11
  className?: string;
6
12
  /** Заголовок */
7
- title?: string;
13
+ title?: string | React.ReactNode[] | React.ReactNode;
8
14
  /** Описание */
9
- description?: string;
15
+ description?: string | React.ReactNode[] | React.ReactNode;
10
16
  /** Цвет текста */
11
17
  textColor?: 'white';
12
18
  /** Горизонтальное выравнивание */
@@ -1,42 +1,62 @@
1
1
  import "core-js/modules/es.symbol";
2
2
  import "core-js/modules/es.symbol.description";
3
+ import _extends from "@babel/runtime/helpers/extends";
3
4
  import * as React from 'react';
5
+ import { Header, Paragraph, Grid, GridColumn } from '@megafon/ui-core';
6
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
4
7
  import * as PropTypes from 'prop-types';
5
- import { cnCreate, Header, Paragraph, Grid, GridColumn } from '@megafon/ui-core';
6
8
  import "./TitleDescriptionBox.css";
7
- var cn = cnCreate('mfui-beta-title-description-box');
9
+ var cn = cnCreate('mfui-title-description-box');
8
10
 
9
11
  var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
10
- var title = _ref.title,
12
+ var dataAttrs = _ref.dataAttrs,
13
+ title = _ref.title,
11
14
  description = _ref.description,
12
15
  textColor = _ref.textColor,
13
16
  hAlign = _ref.hAlign,
17
+ rootRef = _ref.rootRef,
14
18
  className = _ref.className;
15
- return /*#__PURE__*/React.createElement("div", {
19
+ var renderDescription = React.useCallback(function () {
20
+ if (typeof description === 'string') {
21
+ return /*#__PURE__*/React.createElement(Paragraph, {
22
+ className: cn('item'),
23
+ hasMargin: false,
24
+ color: "inherit"
25
+ }, description);
26
+ }
27
+
28
+ return /*#__PURE__*/React.createElement("div", {
29
+ className: cn('description')
30
+ }, description);
31
+ }, [description]);
32
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
16
33
  className: cn({
17
34
  'h-align': hAlign,
18
35
  'text-color': textColor
19
- }, className)
20
- }, /*#__PURE__*/React.createElement(Grid, {
36
+ }, className),
37
+ ref: rootRef
38
+ }), /*#__PURE__*/React.createElement(Grid, {
21
39
  hAlign: hAlign
22
40
  }, /*#__PURE__*/React.createElement(GridColumn, {
23
41
  wide: "8",
24
42
  desktop: "10"
25
43
  }, title && /*#__PURE__*/React.createElement(Header, {
26
- className: cn('item'),
44
+ className: cn('item', {
45
+ header: true
46
+ }),
27
47
  as: "h2",
28
48
  color: "inherit"
29
- }, title), description && /*#__PURE__*/React.createElement(Paragraph, {
30
- className: cn('item'),
31
- hasMargin: false,
32
- color: "inherit"
33
- }, description))));
49
+ }, title), description && renderDescription())));
34
50
  };
35
51
 
36
52
  TitleDescriptionBox.propTypes = {
53
+ dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
54
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
55
+ current: PropTypes.elementType
56
+ }), PropTypes.any])]),
37
57
  className: PropTypes.string,
38
- title: PropTypes.string,
39
- description: PropTypes.string,
58
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
59
+ description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
40
60
  hAlign: PropTypes.oneOf(['center']),
41
61
  textColor: PropTypes.oneOf(['white'])
42
62
  };