@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
package/README.md CHANGED
@@ -14,8 +14,3 @@ $ yarn add @megafon/ui-shared@beta
14
14
  ## Development notes
15
15
 
16
16
  ### Build
17
-
18
- ```bash
19
- $ yarn run build
20
- ```
21
-
@@ -0,0 +1,13 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-accordion-box + .mfui-accordion-box .mfui-accordion {
9
+ border-top: none;
10
+ }
11
+ .mfui-accordion-box .mfui-property:first-child {
12
+ border-top: none;
13
+ }
@@ -1,15 +1,30 @@
1
1
  import * as React from 'react';
2
+ import './AccordionBox.less';
2
3
  export interface IAccordionBox {
4
+ /** Дата атрибуты для корневого элемента */
5
+ dataAttrs?: {
6
+ [key: string]: string;
7
+ };
8
+ /** Ссылка на корневой элемент */
9
+ rootRef?: React.Ref<HTMLDivElement>;
3
10
  /** Заголовок аккордеона */
4
11
  title: string;
5
12
  /** Состояние аккордеона, заданное извне */
6
13
  isOpened?: boolean;
14
+ /** Отключить ограничение ширины */
15
+ isFullWidth?: boolean;
7
16
  /** Центрирование по горизонтали для расширения 1280+ */
8
17
  hCenterAlignWide?: boolean;
9
- /** Внешние классы для аккордеона и внутренних компонентов */
18
+ /** Вертикальные отступы */
19
+ hasVerticalPaddings?: boolean;
20
+ /** Дополнительный класс для корнеовго элемента */
21
+ className?: string;
22
+ /** Дополнительные классы для корневого и внутренних элементов */
10
23
  classes?: {
24
+ openedClass?: string;
11
25
  root?: string;
12
26
  collapse?: string;
27
+ titleWrap?: string;
13
28
  };
14
29
  /** Обработчик клика */
15
30
  onClickAccordion?: (isOpened: boolean, title: string) => void;
@@ -15,32 +15,48 @@ var __rest = this && this.__rest || function (s, e) {
15
15
  };
16
16
 
17
17
  import * as React from 'react';
18
+ import { Grid, GridColumn, Accordion } from '@megafon/ui-core';
19
+ import { cnCreate } from '@megafon/ui-helpers';
18
20
  import * as PropTypes from 'prop-types';
19
- import { cnCreate, Grid, GridColumn, Accordion } from '@megafon/ui-core';
20
- var cn = cnCreate('mfui-beta-accordion-box');
21
+ import "./AccordionBox.css";
22
+ var cn = cnCreate('mfui-accordion-box');
21
23
 
22
24
  var AccordionBox = function AccordionBox(_a) {
23
25
  var _a$hCenterAlignWide = _a.hCenterAlignWide,
24
26
  hCenterAlignWide = _a$hCenterAlignWide === void 0 ? false : _a$hCenterAlignWide,
25
- props = __rest(_a, ["hCenterAlignWide"]);
27
+ _a$isFullWidth = _a.isFullWidth,
28
+ isFullWidth = _a$isFullWidth === void 0 ? false : _a$isFullWidth,
29
+ restProps = __rest(_a, ["hCenterAlignWide", "isFullWidth"]);
26
30
 
27
- return /*#__PURE__*/React.createElement("div", {
28
- className: cn()
29
- }, /*#__PURE__*/React.createElement(Grid, {
30
- hAlign: hCenterAlignWide ? 'center' : 'left'
31
- }, /*#__PURE__*/React.createElement(GridColumn, {
32
- wide: "8"
33
- }, /*#__PURE__*/React.createElement(Accordion, props))));
31
+ var renderAccordionWithGrid = React.useCallback(function () {
32
+ return /*#__PURE__*/React.createElement("div", {
33
+ className: cn()
34
+ }, /*#__PURE__*/React.createElement(Grid, {
35
+ hAlign: hCenterAlignWide ? 'center' : 'left'
36
+ }, /*#__PURE__*/React.createElement(GridColumn, {
37
+ wide: "8"
38
+ }, /*#__PURE__*/React.createElement(Accordion, restProps))));
39
+ }, [restProps, hCenterAlignWide]);
40
+ return isFullWidth ? /*#__PURE__*/React.createElement(Accordion, restProps) : renderAccordionWithGrid();
34
41
  };
35
42
 
36
43
  AccordionBox.propTypes = {
44
+ dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
45
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
46
+ current: PropTypes.elementType
47
+ }), PropTypes.any])]),
37
48
  title: PropTypes.string.isRequired,
49
+ isFullWidth: PropTypes.bool,
38
50
  isOpened: PropTypes.bool,
51
+ hCenterAlignWide: PropTypes.bool,
52
+ hasVerticalPaddings: PropTypes.bool,
53
+ className: PropTypes.string,
39
54
  classes: PropTypes.shape({
55
+ openedClass: PropTypes.string,
40
56
  root: PropTypes.string,
41
- collapse: PropTypes.string
57
+ collapse: PropTypes.string,
58
+ titleWrap: PropTypes.string
42
59
  }),
43
- onClickAccordion: PropTypes.func,
44
- hCenterAlignWide: PropTypes.bool
60
+ onClickAccordion: PropTypes.func
45
61
  };
46
62
  export default AccordionBox;
@@ -15,8 +15,9 @@ var __rest = this && this.__rest || function (s, e) {
15
15
  };
16
16
 
17
17
  import * as React from 'react';
18
- import { cnCreate, Banner } from '@megafon/ui-core';
19
- var cn = cnCreate('mfui-beta-banner-box');
18
+ import { Banner } from '@megafon/ui-core';
19
+ import { cnCreate } from '@megafon/ui-helpers';
20
+ var cn = cnCreate('mfui-banner-box');
20
21
 
21
22
  var BannerBox = function BannerBox(_a) {
22
23
  var children = _a.children,
@@ -1,13 +1,24 @@
1
1
  import * as React from 'react';
2
- import './style/BenefitsIcons.less';
3
2
  import { IconPosition, IBenefit } from './types';
3
+ import './style/BenefitsIcons.less';
4
4
  export interface IBenefitsIcons {
5
+ /** Ссылка на корневой элемент */
6
+ rootRef?: React.Ref<HTMLDivElement>;
5
7
  /** Позиция иконки */
6
8
  iconPosition?: IconPosition;
9
+ /** Выстраивать бенефиты в одну колонку вне зависимости от количества */
10
+ inOneColumn?: boolean;
7
11
  /** Список бенефитов */
8
12
  items: IBenefit[];
9
- /** Дополнительный класс корневого элемента */
13
+ /** Дополнительный css класс для корневого элемента */
10
14
  className?: string;
15
+ /** Дополнительные css классы для корневого и внутренних элементов */
16
+ classes?: {
17
+ root?: string;
18
+ item?: string;
19
+ grid?: string;
20
+ gridColumn?: string;
21
+ };
11
22
  }
12
23
  declare const BenefitsIcons: React.FC<IBenefitsIcons>;
13
24
  export default BenefitsIcons;
@@ -1,12 +1,16 @@
1
1
  import "core-js/modules/es.array.map";
2
2
  import "core-js/modules/es.object.values";
3
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
4
  import _extends from "@babel/runtime/helpers/extends";
4
5
  import * as React from 'react';
6
+ import { Grid, GridColumn } from '@megafon/ui-core';
7
+ import { cnCreate, breakpoints } from '@megafon/ui-helpers';
8
+ import throttle from 'lodash.throttle';
5
9
  import PropTypes from 'prop-types';
6
- import "./style/BenefitsIcons.css";
7
- import { cnCreate, Grid, GridColumn } from '@megafon/ui-core';
10
+ import throttleTime from "../../constants/throttleTime";
8
11
  import BenefitsIconsTile from "./BenefitsIconsTile";
9
- import { IconPositionEnum } from "./types"; // left-aligned column with left side icon,
12
+ import { IconPositionEnum, ItemsAlignEnum } from "./types";
13
+ import "./style/BenefitsIcons.css"; // left-aligned column with left side icon,
10
14
 
11
15
  var getLeftSideConfig = function getLeftSideConfig(count, index) {
12
16
  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
@@ -94,7 +98,19 @@ var getCenterTopConfig = function getCenterTopConfig(count, index) {
94
98
  }
95
99
  };
96
100
 
97
- var getColumnConfig = function getColumnConfig(iconPosition, count, index) {
101
+ var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
102
+ return iconPosition !== IconPositionEnum.CENTER_TOP ? {
103
+ wide: '10',
104
+ desktop: '10',
105
+ tablet: '10'
106
+ } : {
107
+ wide: '12',
108
+ desktop: '12',
109
+ tablet: '12'
110
+ };
111
+ };
112
+
113
+ var getMultiColumnConfig = function getMultiColumnConfig(iconPosition, count, index) {
98
114
  switch (iconPosition) {
99
115
  case IconPositionEnum.LEFT_TOP:
100
116
  return getLeftTopConfig(count, index);
@@ -107,43 +123,92 @@ var getColumnConfig = function getColumnConfig(iconPosition, count, index) {
107
123
  }
108
124
  };
109
125
 
110
- var cn = cnCreate('mfui-beta-benefits-icons');
126
+ var cn = cnCreate('mfui-benefits-icons');
111
127
 
112
128
  var BenefitsIcons = function BenefitsIcons(_ref) {
113
- var _ref$iconPosition = _ref.iconPosition,
114
- iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _ref$iconPosition,
129
+ var rootRef = _ref.rootRef,
130
+ _ref$iconPosition = _ref.iconPosition,
131
+ iconPosition = _ref$iconPosition === void 0 ? IconPositionEnum.LEFT_TOP : _ref$iconPosition,
132
+ _ref$inOneColumn = _ref.inOneColumn,
133
+ inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
115
134
  items = _ref.items,
116
- className = _ref.className;
117
- var hAlign = iconPosition === IconPositionEnum.CENTER_TOP ? 'center' : 'left';
135
+ className = _ref.className,
136
+ _ref$classes = _ref.classes,
137
+ classes = _ref$classes === void 0 ? {} : _ref$classes;
138
+
139
+ var _React$useState = React.useState(iconPosition === IconPositionEnum.CENTER_TOP ? 'center' : 'left'),
140
+ _React$useState2 = _slicedToArray(_React$useState, 2),
141
+ itemsAlign = _React$useState2[0],
142
+ setItemsAlign = _React$useState2[1];
143
+
144
+ var _React$useState3 = React.useState(iconPosition),
145
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
146
+ localIconPosition = _React$useState4[0],
147
+ setLocalIconPosition = _React$useState4[1];
148
+
149
+ var resizeHandler = React.useCallback(function () {
150
+ if (window.innerWidth <= breakpoints.MOBILE_MIDDLE_END) {
151
+ setItemsAlign(ItemsAlignEnum.CENTER);
152
+ setLocalIconPosition(IconPositionEnum.CENTER_TOP);
153
+ } else {
154
+ setItemsAlign(ItemsAlignEnum.LEFT);
155
+ setLocalIconPosition(iconPosition);
156
+ }
157
+ }, [iconPosition]);
158
+ React.useEffect(function () {
159
+ var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
160
+
161
+ if (inOneColumn) {
162
+ resizeHandler();
163
+ window.addEventListener('resize', resizeHandlerThrottled);
164
+ }
165
+
166
+ return function () {
167
+ window.removeEventListener('resize', resizeHandlerThrottled);
168
+ };
169
+ }, [iconPosition, inOneColumn, resizeHandler]);
118
170
  return /*#__PURE__*/React.createElement("div", {
119
- className: cn(className)
171
+ className: cn([className, classes.root]),
172
+ ref: rootRef
120
173
  }, /*#__PURE__*/React.createElement("div", {
121
174
  className: cn('inner')
122
175
  }, /*#__PURE__*/React.createElement(Grid, {
176
+ className: classes.grid,
123
177
  guttersLeft: "medium",
124
- hAlign: hAlign
178
+ hAlign: itemsAlign
125
179
  }, items.map(function (_ref2, i) {
126
180
  var title = _ref2.title,
127
181
  text = _ref2.text,
128
182
  icon = _ref2.icon;
129
- return /*#__PURE__*/React.createElement(GridColumn, _extends({}, getColumnConfig(iconPosition, items.length, i), {
183
+ var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
184
+ return /*#__PURE__*/React.createElement(GridColumn, _extends({
185
+ className: classes.gridColumn,
130
186
  key: i
131
- }), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
187
+ }, columnConfig), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
188
+ className: classes.item,
132
189
  title: title,
133
190
  text: text,
134
191
  icon: icon,
135
- iconPosition: iconPosition
192
+ iconPosition: localIconPosition
136
193
  }));
137
194
  }))));
138
195
  };
139
196
 
140
197
  BenefitsIcons.propTypes = {
198
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
199
+ current: PropTypes.elementType
200
+ }), PropTypes.any])]),
141
201
  iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
202
+ inOneColumn: PropTypes.bool,
142
203
  items: PropTypes.arrayOf(PropTypes.shape({
143
- title: PropTypes.string,
144
- text: PropTypes.string,
204
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
205
+ text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
145
206
  icon: PropTypes.node.isRequired
146
207
  }).isRequired).isRequired,
147
- className: PropTypes.string
208
+ className: PropTypes.string,
209
+ classes: PropTypes.shape({
210
+ root: PropTypes.string,
211
+ item: PropTypes.string
212
+ })
148
213
  };
149
214
  export default BenefitsIcons;
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
- import './style/BenefitsIconsTile.less';
3
2
  import { IBenefit, IconPosition } from './types';
3
+ import './style/BenefitsIconsTile.less';
4
4
  export interface IBenefitsIconsTile extends IBenefit {
5
5
  iconPosition?: IconPosition;
6
+ className?: string;
6
7
  }
7
8
  declare const BenefitsIconsTile: React.FC<IBenefitsIconsTile>;
8
9
  export default BenefitsIconsTile;
@@ -1,22 +1,23 @@
1
1
  import "core-js/modules/es.object.values";
2
2
  import * as React from 'react';
3
+ import { Header } from '@megafon/ui-core';
4
+ import { cnCreate } from '@megafon/ui-helpers';
3
5
  import PropTypes from 'prop-types';
4
- import convert from 'htmr';
5
- import "./style/BenefitsIconsTile.css";
6
- import { Header, Paragraph, cnCreate } from '@megafon/ui-core';
7
6
  import { IconPositionEnum } from "./types";
8
- var cn = cnCreate('mfui-beta-benefits-icons-tile');
7
+ import "./style/BenefitsIconsTile.css";
8
+ var cn = cnCreate('mfui-benefits-icons-tile');
9
9
 
10
10
  var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
11
11
  var title = _ref.title,
12
12
  text = _ref.text,
13
13
  icon = _ref.icon,
14
14
  _ref$iconPosition = _ref.iconPosition,
15
- iconPosition = _ref$iconPosition === void 0 ? IconPositionEnum.LEFT_TOP : _ref$iconPosition;
15
+ iconPosition = _ref$iconPosition === void 0 ? IconPositionEnum.LEFT_TOP : _ref$iconPosition,
16
+ className = _ref.className;
16
17
  return /*#__PURE__*/React.createElement("div", {
17
- className: cn('', {
18
+ className: cn({
18
19
  'icon-position': iconPosition
19
- })
20
+ }, [className])
20
21
  }, /*#__PURE__*/React.createElement("div", {
21
22
  className: cn('svg-icon')
22
23
  }, icon), /*#__PURE__*/React.createElement("div", {
@@ -24,16 +25,16 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
24
25
  }, title && /*#__PURE__*/React.createElement(Header, {
25
26
  className: cn('title'),
26
27
  as: "h5"
27
- }, convert(title)), text && /*#__PURE__*/React.createElement(Paragraph, {
28
- className: cn('text'),
29
- hasMargin: false
30
- }, convert(text))));
28
+ }, title), text && /*#__PURE__*/React.createElement("div", {
29
+ className: cn('content')
30
+ }, text)));
31
31
  };
32
32
 
33
33
  BenefitsIconsTile.propTypes = {
34
- title: PropTypes.string,
35
- text: PropTypes.string,
34
+ className: PropTypes.string,
35
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
36
+ text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
36
37
  iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
37
- icon: PropTypes.node
38
+ icon: PropTypes.node.isRequired
38
39
  };
39
40
  export default BenefitsIconsTile;
@@ -5,10 +5,10 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
- .mfui-beta-benefits-icons {
9
- font-size: 10px;
8
+ .mfui-benefits-icons {
10
9
  overflow: hidden;
10
+ font-size: 10px;
11
11
  }
12
- .mfui-beta-benefits-icons__inner {
12
+ .mfui-benefits-icons__inner {
13
13
  margin-bottom: -48px;
14
14
  }
@@ -5,39 +5,46 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
- .mfui-beta-benefits-icons-tile {
8
+ .mfui-benefits-icons-tile {
9
9
  margin-bottom: 48px;
10
- padding: 0 16px;
11
10
  }
12
- .mfui-beta-benefits-icons-tile .mfui-beta-benefits-icons-tile__svg-icon {
11
+ .mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon {
13
12
  margin-bottom: 10px;
14
13
  }
15
- .mfui-beta-benefits-icons-tile__title + .mfui-beta-benefits-icons-tile__text {
14
+ .mfui-benefits-icons-tile__content {
15
+ font-size: 15px;
16
+ line-height: 24px;
17
+ font-weight: 400;
18
+ }
19
+ .mfui-benefits-icons-tile__title + .mfui-benefits-icons-tile__content {
16
20
  margin-top: 4px;
17
21
  }
18
- .mfui-beta-benefits-icons-tile__svg-icon {
19
- width: 44px;
20
- height: 44px;
22
+ .mfui-benefits-icons-tile__text {
23
+ margin-bottom: 0;
24
+ }
25
+ .mfui-benefits-icons-tile__svg-icon {
26
+ width: 40px;
27
+ height: 40px;
21
28
  overflow: hidden;
22
29
  }
23
- .mfui-beta-benefits-icons-tile_icon-position_left-side {
30
+ .mfui-benefits-icons-tile_icon-position_left-side {
24
31
  display: -webkit-box;
25
32
  display: -ms-flexbox;
26
33
  display: flex;
27
34
  }
28
- .mfui-beta-benefits-icons-tile_icon-position_left-side .mfui-beta-benefits-icons-tile__content-wrapper {
35
+ .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__content-wrapper {
29
36
  padding-top: 10px;
30
37
  }
31
- .mfui-beta-benefits-icons-tile_icon-position_left-side .mfui-beta-benefits-icons-tile__svg-icon {
38
+ .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon {
32
39
  -ms-flex-negative: 0;
33
40
  flex-shrink: 0;
34
41
  margin-right: 14px;
35
42
  margin-bottom: 0;
36
43
  }
37
- .mfui-beta-benefits-icons-tile_icon-position_center-top {
44
+ .mfui-benefits-icons-tile_icon-position_center-top {
38
45
  text-align: center;
39
46
  }
40
- .mfui-beta-benefits-icons-tile_icon-position_center-top .mfui-beta-benefits-icons-tile__svg-icon {
47
+ .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon {
41
48
  margin-right: auto;
42
49
  margin-left: auto;
43
50
  }
@@ -2,9 +2,9 @@
2
2
  declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
3
3
  export interface IBenefit {
4
4
  /** Заголовок бенефита */
5
- title?: string;
5
+ title?: string | React.ReactNode | React.ReactNode[];
6
6
  /** Основной текст в бенефите */
7
- text?: string;
7
+ text?: string | React.ReactNode | React.ReactNode[];
8
8
  /** Иконка */
9
9
  icon: React.ReactNode;
10
10
  }
@@ -14,6 +14,11 @@ export declare const IconPositionEnum: {
14
14
  readonly LEFT_SIDE: "left-side";
15
15
  };
16
16
  export declare type IconPosition = typeof IconPositionEnum[keyof typeof IconPositionEnum];
17
+ export declare const ItemsAlignEnum: {
18
+ readonly LEFT: "left";
19
+ readonly CENTER: "center";
20
+ };
21
+ export declare type ItemsAlignType = typeof ItemsAlignEnum[keyof typeof ItemsAlignEnum];
17
22
  export declare type GridConfig = {
18
23
  wide?: TGridSizeValues;
19
24
  desktop?: TGridSizeValues;
@@ -2,4 +2,8 @@ export var IconPositionEnum = {
2
2
  LEFT_TOP: 'left-top',
3
3
  CENTER_TOP: 'center-top',
4
4
  LEFT_SIDE: 'left-side'
5
+ };
6
+ export var ItemsAlignEnum = {
7
+ LEFT: 'left',
8
+ CENTER: 'center'
5
9
  };
@@ -1,13 +1,22 @@
1
1
  import * as React from 'react';
2
- import './BenfitsPictures.less';
3
2
  import { IBenefit, GridGutterSize } from './types';
3
+ import './BenfitsPictures.less';
4
4
  export interface IBenefitsPicturesProps {
5
+ /** Ссылка на корневой элемент */
6
+ rootRef?: React.Ref<HTMLDivElement>;
5
7
  /** Данные для бенефитов */
6
8
  items: IBenefit[];
7
9
  /** Горизонтальное выравнивание */
8
10
  hAlign?: 'left' | 'center';
9
11
  /** Расстояние между бенефитами */
10
12
  gridGap?: GridGutterSize;
13
+ /** Дополнительный css класс для корневого элемента */
14
+ className?: string;
15
+ /** Дополнительные css классы для корневого и внутренних элементов */
16
+ classes?: {
17
+ root?: string;
18
+ item?: string;
19
+ };
11
20
  }
12
21
  declare const BenefitsPictures: React.FC<IBenefitsPicturesProps>;
13
22
  export default BenefitsPictures;
@@ -3,10 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _extends from "@babel/runtime/helpers/extends";
4
4
  import * as React from 'react';
5
5
  import { useCallback } from 'react';
6
- import PropTypes from 'prop-types';
6
+ import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
7
+ import { breakpoints, cnCreate } from '@megafon/ui-helpers';
8
+ import convert from 'htmr';
7
9
  import throttle from 'lodash.throttle';
10
+ import PropTypes from 'prop-types';
11
+ import throttleTime from "../../constants/throttleTime";
8
12
  import "./BenfitsPictures.css";
9
- import { cnCreate, Grid, GridColumn, Header, Paragraph, breakpoints, throttleTime } from '@megafon/ui-core';
10
13
  var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
11
14
  var columnSize = {
12
15
  wide: '4',
@@ -106,14 +109,18 @@ var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
106
109
  }
107
110
  };
108
111
 
109
- var cn = cnCreate('mfui-beta-benefits-pictures');
112
+ var cn = cnCreate('mfui-benefits-pictures');
110
113
 
111
114
  var BenefitsPictures = function BenefitsPictures(_ref) {
112
115
  var items = _ref.items,
113
116
  _ref$hAlign = _ref.hAlign,
114
117
  hAlign = _ref$hAlign === void 0 ? 'left' : _ref$hAlign,
115
118
  _ref$gridGap = _ref.gridGap,
116
- gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap;
119
+ gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
120
+ rootRef = _ref.rootRef,
121
+ className = _ref.className,
122
+ _ref$classes = _ref.classes,
123
+ classes = _ref$classes === void 0 ? {} : _ref$classes;
117
124
  var isLargeGutter = gridGap === 'large';
118
125
  var isGridCenterAlign = hAlign === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
119
126
 
@@ -127,12 +134,12 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
127
134
  return;
128
135
  }
129
136
 
130
- if (window.innerWidth < breakpoints.desktopMiddleStart) {
137
+ if (window.innerWidth < breakpoints.DESKTOP_MIDDLE_START) {
131
138
  setCurrentGutter('medium');
132
139
  } else {
133
140
  setCurrentGutter('large');
134
141
  }
135
- }, []);
142
+ }, [isLargeGutter]);
136
143
  React.useEffect(function () {
137
144
  var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
138
145
  resizeHandler();
@@ -140,9 +147,10 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
140
147
  return function () {
141
148
  return window.removeEventListener('resize', throttledResizeHandler);
142
149
  };
143
- }, []);
150
+ }, [resizeHandler]);
144
151
  return /*#__PURE__*/React.createElement("div", {
145
- className: cn()
152
+ className: cn([className, classes.root]),
153
+ ref: rootRef
146
154
  }, /*#__PURE__*/React.createElement(Grid, {
147
155
  guttersLeft: currentGutter,
148
156
  hAlign: isGridCenterAlign ? 'center' : 'left'
@@ -153,7 +161,7 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
153
161
  return /*#__PURE__*/React.createElement(GridColumn, _extends({}, hAlign === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(items.length, index, gridGap), {
154
162
  key: index
155
163
  }), /*#__PURE__*/React.createElement("div", {
156
- className: cn('item')
164
+ className: cn('item', [classes.item])
157
165
  }, /*#__PURE__*/React.createElement("img", {
158
166
  className: cn('img', {
159
167
  'h-align': hAlign
@@ -164,19 +172,27 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
164
172
  className: cn('title'),
165
173
  hAlign: hAlign,
166
174
  as: "h3"
167
- }, title), /*#__PURE__*/React.createElement(Paragraph, {
175
+ }, convert(title)), /*#__PURE__*/React.createElement(Paragraph, {
168
176
  align: hAlign
169
- }, text)));
177
+ }, convert(text))));
170
178
  })));
171
179
  };
172
180
 
173
181
  BenefitsPictures.propTypes = {
182
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
183
+ current: PropTypes.elementType
184
+ }), PropTypes.any])]),
174
185
  items: PropTypes.arrayOf(PropTypes.shape({
175
186
  title: PropTypes.string.isRequired,
176
187
  text: PropTypes.string.isRequired,
177
188
  img: PropTypes.string.isRequired
178
189
  }).isRequired).isRequired,
179
190
  hAlign: PropTypes.oneOf(['left', 'center']),
180
- gridGap: PropTypes.oneOf(['medium', 'large'])
191
+ gridGap: PropTypes.oneOf(['medium', 'large']),
192
+ className: PropTypes.string,
193
+ classes: PropTypes.shape({
194
+ root: PropTypes.string,
195
+ item: PropTypes.string
196
+ })
181
197
  };
182
198
  export default BenefitsPictures;
@@ -5,15 +5,15 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
- .mfui-beta-benefits-pictures__img {
8
+ .mfui-benefits-pictures__img {
9
9
  max-width: 100%;
10
10
  margin-bottom: 32px;
11
11
  }
12
- .mfui-beta-benefits-pictures__img_h-align_center {
12
+ .mfui-benefits-pictures__img_h-align_center {
13
13
  display: block;
14
- margin-left: auto;
15
14
  margin-right: auto;
15
+ margin-left: auto;
16
16
  }
17
- .mfui-beta-benefits-pictures__title {
17
+ .mfui-benefits-pictures__title {
18
18
  margin-bottom: 12px;
19
19
  }