@megafon/ui-shared 5.17.0 → 6.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/components/AccordionBox/AccordionBox.css +1 -15
- package/dist/es/components/AccordionBox/AccordionBox.d.ts +2 -2
- package/dist/es/components/AccordionBox/AccordionBox.js +6 -49
- package/dist/es/components/AudioPlayer/AudioPlayer.d.ts +2 -2
- package/dist/es/components/AudioPlayer/AudioPlayer.js +11 -27
- package/dist/es/components/AudioPlayer/AudioProgress.d.ts +1 -1
- package/dist/es/components/AudioPlayer/AudioProgress.js +10 -22
- package/dist/es/components/AudioPlayer/AudioRange.d.ts +1 -1
- package/dist/es/components/AudioPlayer/AudioRange.js +8 -10
- package/dist/es/components/AudioPlayer/AudioVolume.d.ts +1 -1
- package/dist/es/components/AudioPlayer/AudioVolume.js +3 -12
- package/dist/es/components/AudioPlayer/hooks/useTrackDuration.js +4 -10
- package/dist/es/components/AudioPlayer/timerFormatUtil.js +1 -9
- package/dist/es/components/BannerBox/BannerBox.d.ts +1 -1
- package/dist/es/components/BannerBox/BannerBox.js +3 -12
- package/dist/es/components/BenefitsIcons/BenefitsIcons.d.ts +1 -1
- package/dist/es/components/BenefitsIcons/BenefitsIcons.js +23 -64
- package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts +1 -1
- package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js +9 -36
- package/dist/es/components/BenefitsIcons/helpers.d.ts +3 -3
- package/dist/es/components/BenefitsIcons/helpers.js +6 -20
- package/dist/es/components/BenefitsIcons/types.d.ts +5 -5
- package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts +1 -1
- package/dist/es/components/BenefitsPictures/BenefitsPictures.js +19 -49
- package/dist/es/components/BenefitsPictures/BenfitsPictures.css +1 -43
- package/dist/es/components/BenefitsPictures/helpers.d.ts +2 -2
- package/dist/es/components/BenefitsPictures/helpers.js +0 -14
- package/dist/es/components/BenefitsPictures/types.d.ts +3 -3
- package/dist/es/components/BenefitsPictures/types.js +1 -0
- package/dist/es/components/Breadcrumbs/Breadcrumbs.css +1 -43
- package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +6 -6
- package/dist/es/components/Breadcrumbs/Breadcrumbs.js +10 -39
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +4 -4
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.js +11 -36
- package/dist/es/components/ButtonBanner/ButtonBanner.css +1 -122
- package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +7 -7
- package/dist/es/components/ButtonBanner/ButtonBanner.js +22 -53
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css +1 -19
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +3 -3
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +20 -51
- package/dist/es/components/Card/Card.d.ts +4 -4
- package/dist/es/components/Card/Card.js +25 -115
- package/dist/es/components/Card/types.d.ts +10 -10
- package/dist/es/components/Card/types.js +1 -0
- package/dist/es/components/CardsBox/CardsBox.js +3 -14
- package/dist/es/components/CardsBox/helpers.d.ts +2 -2
- package/dist/es/components/CardsBox/helpers.js +0 -4
- package/dist/es/components/CarouselBox/CarouselBox.d.ts +2 -2
- package/dist/es/components/CarouselBox/CarouselBox.js +11 -24
- package/dist/es/components/Container/Container.d.ts +7 -5
- package/dist/es/components/Container/Container.js +10 -25
- package/dist/es/components/DownloadLinks/DownloadLink.d.ts +1 -1
- package/dist/es/components/DownloadLinks/DownloadLink.js +13 -44
- package/dist/es/components/DownloadLinks/DownloadLinks.d.ts +3 -3
- package/dist/es/components/DownloadLinks/DownloadLinks.js +2 -13
- package/dist/es/components/FaqWrapper/FaqWrapper.d.ts +5 -2
- package/dist/es/components/FaqWrapper/FaqWrapper.js +1 -3
- package/dist/es/components/ImageBanner/ImageBanner.d.ts +8 -7
- package/dist/es/components/ImageBanner/ImageBanner.js +37 -88
- package/dist/es/components/Instructions/Instructions.d.ts +11 -11
- package/dist/es/components/Instructions/Instructions.js +41 -94
- package/dist/es/components/NotificationBox/NotificationBox.d.ts +4 -4
- package/dist/es/components/NotificationBox/NotificationBox.js +5 -19
- package/dist/es/components/PageTitle/PageTitle.d.ts +2 -2
- package/dist/es/components/PageTitle/PageTitle.js +12 -37
- package/dist/es/components/Partners/Partners.d.ts +2 -2
- package/dist/es/components/Partners/Partners.js +17 -48
- package/dist/es/components/PictureWithDescription/PictureWithDescription.d.ts +4 -2
- package/dist/es/components/PictureWithDescription/PictureWithDescription.js +10 -28
- package/dist/es/components/Property/Property.d.ts +4 -4
- package/dist/es/components/Property/Property.js +37 -81
- package/dist/es/components/Property/PropertyDescription.d.ts +3 -3
- package/dist/es/components/Property/PropertyDescription.js +8 -28
- package/dist/es/components/Property/types.d.ts +7 -5
- package/dist/es/components/Property/types.js +1 -0
- package/dist/es/components/Steps/Steps.d.ts +2 -1
- package/dist/es/components/Steps/Steps.js +4 -19
- package/dist/es/components/Steps/StepsItem.d.ts +2 -2
- package/dist/es/components/Steps/StepsItem.js +2 -9
- package/dist/es/components/StoreBanner/StoreBanner.d.ts +5 -5
- package/dist/es/components/StoreBanner/StoreBanner.js +41 -97
- package/dist/es/components/StoreButton/StoreButton.d.ts +3 -3
- package/dist/es/components/StoreButton/StoreButton.js +13 -44
- package/dist/es/components/Table/Table.d.ts +1 -1
- package/dist/es/components/Table/Table.js +31 -51
- package/dist/es/components/Table/TableCell.js +0 -6
- package/dist/es/components/Table/TableRow.js +1 -10
- package/dist/es/components/TabsBox/TabsBox.d.ts +1 -1
- package/dist/es/components/TabsBox/TabsBox.js +4 -13
- package/dist/es/components/TextBox/TextBox.d.ts +2 -1
- package/dist/es/components/TextBox/TextBox.js +8 -23
- package/dist/es/components/TextBox/TextBoxPicture.d.ts +2 -2
- package/dist/es/components/TextBox/TextBoxPicture.js +5 -14
- package/dist/es/components/TextWithIcon/TextWithIcon.d.ts +1 -1
- package/dist/es/components/TextWithIcon/TextWithIcon.js +6 -24
- package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +1 -1
- package/dist/es/components/TextWithIcon/TextWithIconItem.js +6 -21
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +1 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js +6 -23
- package/dist/es/components/VideoBanner/VideoBanner.d.ts +7 -7
- package/dist/es/components/VideoBanner/VideoBanner.js +47 -110
- package/dist/es/components/VideoBlock/VideoBlock.d.ts +4 -4
- package/dist/es/components/VideoBlock/VideoBlock.js +35 -75
- package/dist/es/helpers/getColumnConfig.d.ts +5 -1
- package/dist/lib/components/AccordionBox/AccordionBox.css +1 -15
- package/dist/lib/components/AccordionBox/AccordionBox.d.ts +2 -2
- package/dist/lib/components/AccordionBox/AccordionBox.js +10 -66
- package/dist/lib/components/AudioPlayer/AudioPlayer.d.ts +2 -2
- package/dist/lib/components/AudioPlayer/AudioPlayer.js +32 -56
- package/dist/lib/components/AudioPlayer/AudioProgress.d.ts +1 -1
- package/dist/lib/components/AudioPlayer/AudioProgress.js +12 -43
- package/dist/lib/components/AudioPlayer/AudioRange.d.ts +1 -1
- package/dist/lib/components/AudioPlayer/AudioRange.js +9 -17
- package/dist/lib/components/AudioPlayer/AudioVolume.d.ts +1 -1
- package/dist/lib/components/AudioPlayer/AudioVolume.js +4 -23
- package/dist/lib/components/AudioPlayer/hooks/useTrackDuration.js +5 -16
- package/dist/lib/components/AudioPlayer/timerFormatUtil.js +2 -13
- package/dist/lib/components/BannerBox/BannerBox.d.ts +1 -1
- package/dist/lib/components/BannerBox/BannerBox.js +7 -25
- package/dist/lib/components/BenefitsIcons/BenefitsIcons.d.ts +1 -1
- package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +26 -86
- package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts +1 -1
- package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js +13 -53
- package/dist/lib/components/BenefitsIcons/helpers.d.ts +3 -3
- package/dist/lib/components/BenefitsIcons/helpers.js +10 -37
- package/dist/lib/components/BenefitsIcons/types.d.ts +5 -5
- package/dist/lib/components/BenefitsIcons/types.js +5 -8
- package/dist/lib/components/BenefitsPictures/BenefitsPictures.d.ts +1 -1
- package/dist/lib/components/BenefitsPictures/BenefitsPictures.js +24 -71
- package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +1 -43
- package/dist/lib/components/BenefitsPictures/helpers.d.ts +2 -2
- package/dist/lib/components/BenefitsPictures/helpers.js +9 -40
- package/dist/lib/components/BenefitsPictures/types.d.ts +3 -3
- package/dist/lib/components/BenefitsPictures/types.js +5 -1
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +1 -43
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +6 -6
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +18 -60
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +4 -4
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.js +22 -55
- package/dist/lib/components/ButtonBanner/ButtonBanner.css +1 -122
- package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +7 -7
- package/dist/lib/components/ButtonBanner/ButtonBanner.js +40 -89
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css +1 -19
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +3 -3
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +29 -72
- package/dist/lib/components/Card/Card.d.ts +4 -4
- package/dist/lib/components/Card/Card.js +67 -164
- package/dist/lib/components/Card/types.d.ts +10 -10
- package/dist/lib/components/Card/types.js +5 -1
- package/dist/lib/components/CardsBox/CardsBox.js +7 -31
- package/dist/lib/components/CardsBox/helpers.d.ts +2 -2
- package/dist/lib/components/CardsBox/helpers.js +1 -8
- package/dist/lib/components/CarouselBox/CarouselBox.d.ts +2 -2
- package/dist/lib/components/CarouselBox/CarouselBox.js +15 -39
- package/dist/lib/components/Container/Container.d.ts +7 -5
- package/dist/lib/components/Container/Container.js +18 -40
- package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +1 -1
- package/dist/lib/components/DownloadLinks/DownloadLink.js +17 -60
- package/dist/lib/components/DownloadLinks/DownloadLinks.d.ts +3 -3
- package/dist/lib/components/DownloadLinks/DownloadLinks.js +8 -33
- package/dist/lib/components/FaqWrapper/FaqWrapper.d.ts +5 -2
- package/dist/lib/components/FaqWrapper/FaqWrapper.js +6 -9
- package/dist/lib/components/ImageBanner/ImageBanner.d.ts +8 -7
- package/dist/lib/components/ImageBanner/ImageBanner.js +61 -138
- package/dist/lib/components/Instructions/Instructions.d.ts +11 -11
- package/dist/lib/components/Instructions/Instructions.js +103 -186
- package/dist/lib/components/NotificationBox/NotificationBox.d.ts +4 -4
- package/dist/lib/components/NotificationBox/NotificationBox.js +9 -37
- package/dist/lib/components/PageTitle/PageTitle.d.ts +2 -2
- package/dist/lib/components/PageTitle/PageTitle.js +15 -52
- package/dist/lib/components/Partners/Partners.d.ts +2 -2
- package/dist/lib/components/Partners/Partners.js +21 -65
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.d.ts +4 -2
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.js +16 -46
- package/dist/lib/components/Property/Property.d.ts +4 -4
- package/dist/lib/components/Property/Property.js +60 -120
- package/dist/lib/components/Property/PropertyDescription.d.ts +3 -3
- package/dist/lib/components/Property/PropertyDescription.js +15 -46
- package/dist/lib/components/Property/types.d.ts +7 -5
- package/dist/lib/components/Property/types.js +5 -1
- package/dist/lib/components/Steps/Steps.d.ts +2 -1
- package/dist/lib/components/Steps/Steps.js +8 -35
- package/dist/lib/components/Steps/StepsItem.d.ts +2 -2
- package/dist/lib/components/Steps/StepsItem.js +11 -23
- package/dist/lib/components/StoreBanner/StoreBanner.d.ts +5 -5
- package/dist/lib/components/StoreBanner/StoreBanner.js +47 -118
- package/dist/lib/components/StoreButton/StoreButton.d.ts +3 -3
- package/dist/lib/components/StoreButton/StoreButton.js +17 -63
- package/dist/lib/components/Table/Table.d.ts +1 -1
- package/dist/lib/components/Table/Table.js +35 -68
- package/dist/lib/components/Table/TableCell.js +4 -16
- package/dist/lib/components/Table/TableRow.js +5 -19
- package/dist/lib/components/TabsBox/TabBox.js +1 -4
- package/dist/lib/components/TabsBox/TabsBox.d.ts +1 -1
- package/dist/lib/components/TabsBox/TabsBox.js +8 -26
- package/dist/lib/components/TextBox/TextBox.d.ts +2 -1
- package/dist/lib/components/TextBox/TextBox.js +12 -36
- package/dist/lib/components/TextBox/TextBoxPicture.d.ts +2 -2
- package/dist/lib/components/TextBox/TextBoxPicture.js +11 -29
- package/dist/lib/components/TextWithIcon/TextWithIcon.d.ts +1 -1
- package/dist/lib/components/TextWithIcon/TextWithIcon.js +10 -39
- package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +1 -1
- package/dist/lib/components/TextWithIcon/TextWithIconItem.js +10 -37
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +1 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js +10 -40
- package/dist/lib/components/VideoBanner/VideoBanner.d.ts +7 -7
- package/dist/lib/components/VideoBanner/VideoBanner.js +83 -176
- package/dist/lib/components/VideoBlock/VideoBlock.d.ts +4 -4
- package/dist/lib/components/VideoBlock/VideoBlock.js +58 -114
- package/dist/lib/constants/throttleTime.js +2 -3
- package/dist/lib/helpers/getColumnConfig.d.ts +5 -1
- package/dist/lib/helpers/getColumnConfig.js +2 -5
- package/dist/lib/index.js +10 -57
- package/package.json +87 -92
- package/CHANGELOG.md +0 -4002
- package/dist/es/components/AudioPlayer/style/AudioPlayer.css +0 -58
- package/dist/es/components/AudioPlayer/style/AudioProgress.css +0 -35
- package/dist/es/components/AudioPlayer/style/AudioRange.css +0 -68
- package/dist/es/components/AudioPlayer/style/AudioVolume.css +0 -34
- package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +0 -38
- package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +0 -90
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.css +0 -16
- package/dist/es/components/Card/Card.css +0 -354
- package/dist/es/components/Container/Container.css +0 -3245
- package/dist/es/components/DownloadLinks/DownloadLink.css +0 -37
- package/dist/es/components/DownloadLinks/DownloadLinks.css +0 -36
- package/dist/es/components/ImageBanner/ImageBanner.css +0 -252
- package/dist/es/components/Instructions/Instructions.css +0 -790
- package/dist/es/components/NotificationBox/style/NotificationBox.css +0 -28
- package/dist/es/components/PageTitle/PageTitle.css +0 -80
- package/dist/es/components/Partners/Partners.css +0 -53
- package/dist/es/components/PictureWithDescription/PictureWithDescription.css +0 -80
- package/dist/es/components/Property/Property.css +0 -156
- package/dist/es/components/Property/PropertyDescription.css +0 -17
- package/dist/es/components/Steps/Steps.css +0 -41
- package/dist/es/components/Steps/StepsItem.css +0 -42
- package/dist/es/components/StoreBanner/StoreBanner.css +0 -346
- package/dist/es/components/StoreBanner/doc/img/android-screen.png +0 -0
- package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/es/components/StoreBanner/doc/img/screen.png +0 -0
- package/dist/es/components/StoreButton/StoreButton.css +0 -327
- package/dist/es/components/Table/Table.css +0 -157
- package/dist/es/components/TextBox/TextBox.css +0 -25
- package/dist/es/components/TextBox/TextBoxPicture.css +0 -27
- package/dist/es/components/TextWithIcon/TextWithIcon.css +0 -10
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +0 -29
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +0 -31
- package/dist/es/components/VideoBanner/VideoBanner.css +0 -225
- package/dist/es/components/VideoBlock/VideoBlock.css +0 -106
- package/dist/lib/components/AudioPlayer/style/AudioPlayer.css +0 -58
- package/dist/lib/components/AudioPlayer/style/AudioProgress.css +0 -35
- package/dist/lib/components/AudioPlayer/style/AudioRange.css +0 -68
- package/dist/lib/components/AudioPlayer/style/AudioVolume.css +0 -34
- package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +0 -38
- package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +0 -90
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.css +0 -16
- package/dist/lib/components/Card/Card.css +0 -354
- package/dist/lib/components/Container/Container.css +0 -3245
- package/dist/lib/components/DownloadLinks/DownloadLink.css +0 -37
- package/dist/lib/components/DownloadLinks/DownloadLinks.css +0 -36
- package/dist/lib/components/ImageBanner/ImageBanner.css +0 -252
- package/dist/lib/components/Instructions/Instructions.css +0 -790
- package/dist/lib/components/NotificationBox/style/NotificationBox.css +0 -28
- package/dist/lib/components/PageTitle/PageTitle.css +0 -80
- package/dist/lib/components/Partners/Partners.css +0 -53
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +0 -80
- package/dist/lib/components/Property/Property.css +0 -156
- package/dist/lib/components/Property/PropertyDescription.css +0 -17
- package/dist/lib/components/Steps/Steps.css +0 -41
- package/dist/lib/components/Steps/StepsItem.css +0 -42
- package/dist/lib/components/StoreBanner/StoreBanner.css +0 -346
- package/dist/lib/components/StoreBanner/doc/img/android-screen.png +0 -0
- package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/lib/components/StoreBanner/doc/img/screen.png +0 -0
- package/dist/lib/components/StoreButton/StoreButton.css +0 -327
- package/dist/lib/components/Table/Table.css +0 -157
- package/dist/lib/components/TextBox/TextBox.css +0 -25
- package/dist/lib/components/TextBox/TextBoxPicture.css +0 -27
- package/dist/lib/components/TextWithIcon/TextWithIcon.css +0 -10
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +0 -29
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +0 -31
- package/dist/lib/components/VideoBanner/VideoBanner.css +0 -225
- package/dist/lib/components/VideoBlock/VideoBlock.css +0 -106
@@ -1,44 +1,38 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
import "core-js/modules/es.array.map.js";
|
4
|
-
import "core-js/modules/es.object.values.js";
|
5
4
|
import * as React from 'react';
|
6
5
|
import { Grid, GridColumn } from '@megafon/ui-core';
|
7
6
|
import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
|
8
7
|
import throttle from 'lodash.throttle';
|
9
|
-
import PropTypes from 'prop-types';
|
10
8
|
import throttleTime from "../../constants/throttleTime";
|
11
9
|
import BenefitsIconsTile from "./BenefitsIconsTile";
|
12
10
|
import getMultiColumnConfig, { getOneColumnConfig } from "./helpers";
|
13
|
-
import { IconPositionEnum, ItemsAlignEnum
|
11
|
+
import { IconPositionEnum, ItemsAlignEnum } from "./types";
|
14
12
|
import "./style/BenefitsIcons.css";
|
15
13
|
var testIdPrefix = 'BenefitsIcons';
|
16
14
|
var cn = cnCreate('mfui-benefits-icons');
|
17
|
-
|
18
15
|
var BenefitsIcons = function BenefitsIcons(_ref) {
|
19
16
|
var dataAttrs = _ref.dataAttrs,
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
17
|
+
rootRef = _ref.rootRef,
|
18
|
+
_ref$iconPosition = _ref.iconPosition,
|
19
|
+
iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _ref$iconPosition,
|
20
|
+
_ref$background = _ref.background,
|
21
|
+
background = _ref$background === void 0 ? 'transparent' : _ref$background,
|
22
|
+
_ref$inOneColumn = _ref.inOneColumn,
|
23
|
+
inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
|
24
|
+
items = _ref.items,
|
25
|
+
className = _ref.className,
|
26
|
+
_ref$classes = _ref.classes,
|
27
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes;
|
32
28
|
var _React$useState = React.useState(iconPosition === IconPositionEnum.CENTER_TOP ? 'center' : 'left'),
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
29
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
30
|
+
itemsAlign = _React$useState2[0],
|
31
|
+
setItemsAlign = _React$useState2[1];
|
37
32
|
var _React$useState3 = React.useState(iconPosition),
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
33
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
34
|
+
localIconPosition = _React$useState4[0],
|
35
|
+
setLocalIconPosition = _React$useState4[1];
|
42
36
|
var resizeHandler = React.useCallback(function () {
|
43
37
|
if (window.innerWidth <= breakpoints.MOBILE_MIDDLE_END) {
|
44
38
|
setItemsAlign(ItemsAlignEnum.CENTER);
|
@@ -50,12 +44,10 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
|
|
50
44
|
}, [iconPosition]);
|
51
45
|
React.useEffect(function () {
|
52
46
|
var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
|
53
|
-
|
54
47
|
if (inOneColumn) {
|
55
48
|
resizeHandler();
|
56
49
|
window.addEventListener('resize', resizeHandlerThrottled);
|
57
50
|
}
|
58
|
-
|
59
51
|
return function () {
|
60
52
|
window.removeEventListener('resize', resizeHandlerThrottled);
|
61
53
|
};
|
@@ -82,11 +74,11 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
|
|
82
74
|
}
|
83
75
|
}, items.map(function (_ref2, i) {
|
84
76
|
var title = _ref2.title,
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
77
|
+
text = _ref2.text,
|
78
|
+
icon = _ref2.icon,
|
79
|
+
alt = _ref2.alt,
|
80
|
+
itemClasses = _ref2.classes,
|
81
|
+
itemDataAttrs = _ref2.dataAttrs;
|
90
82
|
var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
|
91
83
|
return /*#__PURE__*/React.createElement(GridColumn, _extends({
|
92
84
|
className: cn('column', [classes.gridColumn]),
|
@@ -109,37 +101,4 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
|
|
109
101
|
}));
|
110
102
|
}))));
|
111
103
|
};
|
112
|
-
|
113
|
-
BenefitsIcons.propTypes = {
|
114
|
-
dataAttrs: PropTypes.shape({
|
115
|
-
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
116
|
-
}),
|
117
|
-
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
118
|
-
current: PropTypes.elementType
|
119
|
-
}), PropTypes.any])]),
|
120
|
-
iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
|
121
|
-
background: PropTypes.oneOf(Object.values(BackgroundEnum)),
|
122
|
-
inOneColumn: PropTypes.bool,
|
123
|
-
items: PropTypes.arrayOf(PropTypes.shape({
|
124
|
-
dataAttrs: PropTypes.shape({
|
125
|
-
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
126
|
-
}),
|
127
|
-
classes: PropTypes.shape({
|
128
|
-
root: PropTypes.string,
|
129
|
-
icon: PropTypes.string,
|
130
|
-
title: PropTypes.string,
|
131
|
-
text: PropTypes.string,
|
132
|
-
contentWrapper: PropTypes.string
|
133
|
-
}),
|
134
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
135
|
-
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
136
|
-
icon: PropTypes.node.isRequired,
|
137
|
-
alt: PropTypes.string
|
138
|
-
}).isRequired).isRequired,
|
139
|
-
className: PropTypes.string,
|
140
|
-
classes: PropTypes.shape({
|
141
|
-
root: PropTypes.string,
|
142
|
-
item: PropTypes.string
|
143
|
-
})
|
144
|
-
};
|
145
104
|
export default BenefitsIcons;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { IBenefit, IconPosition, BackgroundType } from './types';
|
3
|
-
import './style/BenefitsIconsTile.
|
3
|
+
import './style/BenefitsIconsTile.scss';
|
4
4
|
export interface IBenefitsIconsTile extends IBenefit {
|
5
5
|
iconPosition?: IconPosition;
|
6
6
|
background?: BackgroundType;
|
@@ -1,26 +1,21 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
-
import "core-js/modules/es.object.values.js";
|
3
2
|
import * as React from 'react';
|
4
3
|
import { Header } from '@megafon/ui-core';
|
5
4
|
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
6
|
-
import PropTypes from 'prop-types';
|
7
|
-
import { IconPositionEnum, BackgroundEnum } from "./types";
|
8
5
|
import "./style/BenefitsIconsTile.css";
|
9
6
|
var testIdPrefix = 'BenefitsIconsTile';
|
10
7
|
var cn = cnCreate('mfui-benefits-icons-tile');
|
11
|
-
|
12
8
|
var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
|
13
9
|
var dataAttrs = _ref.dataAttrs,
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
10
|
+
_ref$classes = _ref.classes,
|
11
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
12
|
+
title = _ref.title,
|
13
|
+
text = _ref.text,
|
14
|
+
icon = _ref.icon,
|
15
|
+
iconPosition = _ref.iconPosition,
|
16
|
+
background = _ref.background,
|
17
|
+
alt = _ref.alt,
|
18
|
+
className = _ref.className;
|
24
19
|
var renderIcon = function renderIcon() {
|
25
20
|
if (typeof icon === 'string') {
|
26
21
|
return /*#__PURE__*/React.createElement("img", {
|
@@ -30,13 +25,11 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
|
|
30
25
|
"data-testid": "".concat(testIdPrefix, "-img")
|
31
26
|
});
|
32
27
|
}
|
33
|
-
|
34
28
|
return /*#__PURE__*/React.createElement("div", {
|
35
29
|
className: cn('svg-icon', [classes.icon]),
|
36
30
|
"data-testid": "".concat(testIdPrefix, "-svg")
|
37
31
|
}, icon);
|
38
32
|
};
|
39
|
-
|
40
33
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
41
34
|
className: cn({
|
42
35
|
'icon-position': iconPosition,
|
@@ -55,24 +48,4 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
|
|
55
48
|
className: cn('content', [classes.text])
|
56
49
|
}, text))));
|
57
50
|
};
|
58
|
-
|
59
|
-
BenefitsIconsTile.propTypes = {
|
60
|
-
dataAttrs: PropTypes.shape({
|
61
|
-
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
62
|
-
}),
|
63
|
-
className: PropTypes.string,
|
64
|
-
classes: PropTypes.shape({
|
65
|
-
root: PropTypes.string,
|
66
|
-
icon: PropTypes.string,
|
67
|
-
title: PropTypes.string,
|
68
|
-
text: PropTypes.string,
|
69
|
-
contentWrapper: PropTypes.string
|
70
|
-
}),
|
71
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
72
|
-
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
73
|
-
iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
|
74
|
-
background: PropTypes.oneOf(Object.values(BackgroundEnum)),
|
75
|
-
icon: PropTypes.node.isRequired,
|
76
|
-
alt: PropTypes.string
|
77
|
-
};
|
78
51
|
export default BenefitsIconsTile;
|
@@ -1,8 +1,8 @@
|
|
1
|
-
import { GridConfig } from './types';
|
1
|
+
import { GridConfig, IconPosition } from './types';
|
2
2
|
declare const getLeftSideConfig: (count: number, index: number) => GridConfig;
|
3
3
|
declare const getLeftTopConfig: (count: number, index: number) => GridConfig;
|
4
4
|
declare const getCenterTopConfig: (count: number, index: number) => GridConfig;
|
5
|
-
declare const getOneColumnConfig: (iconPosition:
|
6
|
-
declare const getMultiColumnConfig: (iconPosition:
|
5
|
+
declare const getOneColumnConfig: (iconPosition: IconPosition) => GridConfig;
|
6
|
+
declare const getMultiColumnConfig: (iconPosition: IconPosition, count: number, index: number) => GridConfig;
|
7
7
|
export default getMultiColumnConfig;
|
8
8
|
export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
-
import { IconPositionEnum } from "./types";
|
3
|
-
|
2
|
+
import { IconPositionEnum } from "./types";
|
3
|
+
// left-aligned column with left side icon
|
4
4
|
var getLeftSideConfig = function getLeftSideConfig(count, index) {
|
5
5
|
var everySecondWithoutOffset = index % 2 ? '1' : undefined;
|
6
6
|
var columnSize = {
|
@@ -8,7 +8,6 @@ var getLeftSideConfig = function getLeftSideConfig(count, index) {
|
|
8
8
|
desktop: '5',
|
9
9
|
tablet: '10'
|
10
10
|
};
|
11
|
-
|
12
11
|
switch (count) {
|
13
12
|
case 2:
|
14
13
|
case 4:
|
@@ -16,19 +15,16 @@ var getLeftSideConfig = function getLeftSideConfig(count, index) {
|
|
16
15
|
leftOffsetWide: everySecondWithoutOffset,
|
17
16
|
leftOffsetDesktop: everySecondWithoutOffset
|
18
17
|
});
|
19
|
-
|
20
18
|
default:
|
21
19
|
return _extends(_extends({}, columnSize), {
|
22
20
|
leftOffsetDesktop: everySecondWithoutOffset
|
23
21
|
});
|
24
22
|
}
|
25
|
-
};
|
26
|
-
|
27
|
-
|
23
|
+
};
|
24
|
+
// left-aligned column with left-aligned icon on top
|
28
25
|
var getLeftTopConfig = function getLeftTopConfig(count, index) {
|
29
26
|
var everySecondWithoutOffset = index % 2 ? '1' : undefined;
|
30
27
|
var everyThirdWithoutOffset = index % 3 ? '1' : undefined;
|
31
|
-
|
32
28
|
switch (count) {
|
33
29
|
case 2:
|
34
30
|
return {
|
@@ -39,7 +35,6 @@ var getLeftTopConfig = function getLeftTopConfig(count, index) {
|
|
39
35
|
leftOffsetDesktop: everySecondWithoutOffset,
|
40
36
|
leftOffsetTablet: everySecondWithoutOffset
|
41
37
|
};
|
42
|
-
|
43
38
|
case 4:
|
44
39
|
return {
|
45
40
|
wide: '3',
|
@@ -48,7 +43,6 @@ var getLeftTopConfig = function getLeftTopConfig(count, index) {
|
|
48
43
|
leftOffsetDesktop: everySecondWithoutOffset,
|
49
44
|
leftOffsetTablet: everySecondWithoutOffset
|
50
45
|
};
|
51
|
-
|
52
46
|
default:
|
53
47
|
return {
|
54
48
|
wide: '3',
|
@@ -58,14 +52,12 @@ var getLeftTopConfig = function getLeftTopConfig(count, index) {
|
|
58
52
|
leftOffsetTablet: everySecondWithoutOffset
|
59
53
|
};
|
60
54
|
}
|
61
|
-
};
|
62
|
-
|
63
|
-
|
55
|
+
};
|
56
|
+
// center-aligned column with center-aligned icon on top
|
64
57
|
var getCenterTopConfig = function getCenterTopConfig(count, index) {
|
65
58
|
var isEvenIndex = !(index % 2);
|
66
59
|
var everyEvenWithLeftOffset = isEvenIndex ? '1' : undefined;
|
67
60
|
var everyOddWithRightOffset = isEvenIndex ? undefined : '1';
|
68
|
-
|
69
61
|
switch (count) {
|
70
62
|
case 4:
|
71
63
|
return {
|
@@ -77,7 +69,6 @@ var getCenterTopConfig = function getCenterTopConfig(count, index) {
|
|
77
69
|
rightOffsetTablet: everyOddWithRightOffset,
|
78
70
|
rightOffsetDesktop: everyOddWithRightOffset
|
79
71
|
};
|
80
|
-
|
81
72
|
default:
|
82
73
|
return {
|
83
74
|
wide: '4',
|
@@ -86,7 +77,6 @@ var getCenterTopConfig = function getCenterTopConfig(count, index) {
|
|
86
77
|
};
|
87
78
|
}
|
88
79
|
};
|
89
|
-
|
90
80
|
var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
|
91
81
|
return iconPosition !== IconPositionEnum.CENTER_TOP ? {
|
92
82
|
wide: '10',
|
@@ -98,19 +88,15 @@ var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
|
|
98
88
|
tablet: '12'
|
99
89
|
};
|
100
90
|
};
|
101
|
-
|
102
91
|
var getMultiColumnConfig = function getMultiColumnConfig(iconPosition, count, index) {
|
103
92
|
switch (iconPosition) {
|
104
93
|
case IconPositionEnum.LEFT_TOP:
|
105
94
|
return getLeftTopConfig(count, index);
|
106
|
-
|
107
95
|
case IconPositionEnum.CENTER_TOP:
|
108
96
|
return getCenterTopConfig(count, index);
|
109
|
-
|
110
97
|
default:
|
111
98
|
return getLeftSideConfig(count, index);
|
112
99
|
}
|
113
100
|
};
|
114
|
-
|
115
101
|
export default getMultiColumnConfig;
|
116
102
|
export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
|
2
|
+
type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
|
3
3
|
export interface IBenefit {
|
4
4
|
/** Дополнительные data атрибуты к внутренним элементам */
|
5
5
|
dataAttrs?: {
|
@@ -27,20 +27,20 @@ export declare const IconPositionEnum: {
|
|
27
27
|
readonly CENTER_TOP: "center-top";
|
28
28
|
readonly LEFT_SIDE: "left-side";
|
29
29
|
};
|
30
|
-
export
|
30
|
+
export type IconPosition = (typeof IconPositionEnum)[keyof typeof IconPositionEnum];
|
31
31
|
export declare const ItemsAlignEnum: {
|
32
32
|
readonly LEFT: "left";
|
33
33
|
readonly CENTER: "center";
|
34
34
|
};
|
35
|
-
export
|
35
|
+
export type ItemsAlignType = (typeof ItemsAlignEnum)[keyof typeof ItemsAlignEnum];
|
36
36
|
export declare const BackgroundEnum: {
|
37
37
|
readonly TRANSPARENT: "transparent";
|
38
38
|
readonly GRAY: "gray";
|
39
39
|
readonly GREEN: "green";
|
40
40
|
readonly PURPLE: "purple";
|
41
41
|
};
|
42
|
-
export
|
43
|
-
export
|
42
|
+
export type BackgroundType = (typeof BackgroundEnum)[keyof typeof BackgroundEnum];
|
43
|
+
export type GridConfig = {
|
44
44
|
wide?: TGridSizeValues;
|
45
45
|
desktop?: TGridSizeValues;
|
46
46
|
tablet?: TGridSizeValues;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { IBenefit, GridGutterSize } from './types';
|
3
|
-
import './BenfitsPictures.
|
3
|
+
import './BenfitsPictures.scss';
|
4
4
|
export declare const ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
|
5
5
|
export interface IBenefitsPicturesProps {
|
6
6
|
/** Ссылка на корневой элемент */
|
@@ -2,53 +2,46 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
import "core-js/modules/es.array.map.js";
|
4
4
|
import * as React from 'react';
|
5
|
-
import { useCallback } from 'react';
|
6
5
|
import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
|
7
6
|
import { breakpoints, cnCreate } from '@megafon/ui-helpers';
|
8
7
|
import convert from 'htmr';
|
9
8
|
import throttle from 'lodash.throttle';
|
10
|
-
import PropTypes from 'prop-types';
|
11
9
|
import throttleTime from "../../constants/throttleTime";
|
12
10
|
import getCenterConfig, { getLeftConfig } from "./helpers";
|
13
11
|
import "./BenfitsPictures.css";
|
14
12
|
export var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
|
15
13
|
var testIdPrefix = 'BenefitsPictures';
|
16
14
|
var cn = cnCreate('mfui-benefits-pictures');
|
17
|
-
|
18
15
|
var BenefitsPictures = function BenefitsPictures(_ref) {
|
19
16
|
var items = _ref.items,
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
17
|
+
_ref$align = _ref.align,
|
18
|
+
align = _ref$align === void 0 ? 'left' : _ref$align,
|
19
|
+
_ref$textAlign = _ref.textAlign,
|
20
|
+
textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
|
21
|
+
_ref$imgAlign = _ref.imgAlign,
|
22
|
+
imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
|
23
|
+
_ref$gridGap = _ref.gridGap,
|
24
|
+
gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
|
25
|
+
rootRef = _ref.rootRef,
|
26
|
+
className = _ref.className,
|
27
|
+
_ref$classes = _ref.classes,
|
28
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes;
|
32
29
|
var isLargeGutter = gridGap === 'large';
|
33
30
|
var isGridCenterAlign = align === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
|
34
|
-
|
35
31
|
var _React$useState = React.useState(gridGap),
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
var resizeHandler = useCallback(function () {
|
32
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
33
|
+
currentGutter = _React$useState2[0],
|
34
|
+
setCurrentGutter = _React$useState2[1];
|
35
|
+
var resizeHandler = React.useCallback(function () {
|
41
36
|
if (!isLargeGutter) {
|
42
37
|
return;
|
43
38
|
}
|
44
|
-
|
45
39
|
if (window.innerWidth < breakpoints.DESKTOP_MIDDLE_START) {
|
46
40
|
setCurrentGutter('medium');
|
47
41
|
} else {
|
48
42
|
setCurrentGutter('large');
|
49
43
|
}
|
50
44
|
}, [isLargeGutter]);
|
51
|
-
|
52
45
|
var renderText = function renderText(text) {
|
53
46
|
if (typeof text === 'string') {
|
54
47
|
return /*#__PURE__*/React.createElement(Paragraph, {
|
@@ -59,10 +52,8 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
|
|
59
52
|
}
|
60
53
|
}, convert(text));
|
61
54
|
}
|
62
|
-
|
63
55
|
return text;
|
64
56
|
};
|
65
|
-
|
66
57
|
React.useEffect(function () {
|
67
58
|
var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
|
68
59
|
resizeHandler();
|
@@ -86,9 +77,9 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
|
|
86
77
|
}
|
87
78
|
}, items.map(function (_ref2, index) {
|
88
79
|
var img = _ref2.img,
|
89
|
-
|
90
|
-
|
91
|
-
|
80
|
+
title = _ref2.title,
|
81
|
+
text = _ref2.text,
|
82
|
+
alt = _ref2.alt;
|
92
83
|
return /*#__PURE__*/React.createElement(GridColumn, _extends({}, align === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(items.length, index, gridGap), {
|
93
84
|
key: index
|
94
85
|
}), /*#__PURE__*/React.createElement("div", {
|
@@ -117,25 +108,4 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
|
|
117
108
|
}, convert(title)), !!text && renderText(text))));
|
118
109
|
}))));
|
119
110
|
};
|
120
|
-
|
121
|
-
BenefitsPictures.propTypes = {
|
122
|
-
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
123
|
-
current: PropTypes.elementType
|
124
|
-
}), PropTypes.any])]),
|
125
|
-
items: PropTypes.arrayOf(PropTypes.shape({
|
126
|
-
title: PropTypes.string,
|
127
|
-
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
128
|
-
img: PropTypes.string.isRequired,
|
129
|
-
alt: PropTypes.string
|
130
|
-
}).isRequired).isRequired,
|
131
|
-
align: PropTypes.oneOf(['left', 'center']),
|
132
|
-
textAlign: PropTypes.oneOf(['left', 'center', 'auto']),
|
133
|
-
imgAlign: PropTypes.oneOf(['left', 'center', 'auto']),
|
134
|
-
gridGap: PropTypes.oneOf(['medium', 'large']),
|
135
|
-
className: PropTypes.string,
|
136
|
-
classes: PropTypes.shape({
|
137
|
-
root: PropTypes.string,
|
138
|
-
item: PropTypes.string
|
139
|
-
})
|
140
|
-
};
|
141
111
|
export default BenefitsPictures;
|
@@ -1,43 +1 @@
|
|
1
|
-
h1,
|
2
|
-
h2,
|
3
|
-
h3,
|
4
|
-
h4,
|
5
|
-
h5 {
|
6
|
-
margin: 0;
|
7
|
-
}
|
8
|
-
.mfui-benefits-pictures {
|
9
|
-
overflow: hidden;
|
10
|
-
}
|
11
|
-
.mfui-benefits-pictures__inner {
|
12
|
-
margin-bottom: -40px;
|
13
|
-
}
|
14
|
-
@media screen and (min-width: 768px) {
|
15
|
-
.mfui-benefits-pictures__inner {
|
16
|
-
margin-bottom: -48px;
|
17
|
-
}
|
18
|
-
}
|
19
|
-
.mfui-benefits-pictures__item {
|
20
|
-
margin-bottom: 40px;
|
21
|
-
}
|
22
|
-
@media screen and (min-width: 768px) {
|
23
|
-
.mfui-benefits-pictures__item {
|
24
|
-
margin-bottom: 48px;
|
25
|
-
}
|
26
|
-
}
|
27
|
-
.mfui-benefits-pictures__content_h-align_center {
|
28
|
-
text-align: center;
|
29
|
-
}
|
30
|
-
.mfui-benefits-pictures__img {
|
31
|
-
max-width: 100%;
|
32
|
-
margin-bottom: 32px;
|
33
|
-
border-radius: 12px;
|
34
|
-
vertical-align: top;
|
35
|
-
}
|
36
|
-
.mfui-benefits-pictures__img_h-align_center {
|
37
|
-
display: block;
|
38
|
-
margin-right: auto;
|
39
|
-
margin-left: auto;
|
40
|
-
}
|
41
|
-
.mfui-benefits-pictures__title {
|
42
|
-
margin-bottom: 12px;
|
43
|
-
}
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-benefits-pictures{overflow:hidden}.mfui-benefits-pictures__inner{margin-bottom:-40px}@media screen and (min-width:768px){.mfui-benefits-pictures__inner{margin-bottom:-48px}}.mfui-benefits-pictures__item{margin-bottom:40px}@media screen and (min-width:768px){.mfui-benefits-pictures__item{margin-bottom:48px}}.mfui-benefits-pictures__content_h-align_center{text-align:center}.mfui-benefits-pictures__img{border-radius:12px;margin-bottom:32px;max-width:100%;vertical-align:top}.mfui-benefits-pictures__img_h-align_center{display:block;margin-left:auto;margin-right:auto}.mfui-benefits-pictures__title{margin-bottom:12px}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { GridConfig } from './types';
|
2
2
|
declare const columnSize: GridConfig;
|
3
3
|
declare const isOddIndex: (index: number) => boolean;
|
4
|
-
declare const getEvenOffset: (index: number) =>
|
5
|
-
declare const getOddOffset: (index: number) =>
|
4
|
+
declare const getEvenOffset: (index: number) => '1' | undefined;
|
5
|
+
declare const getOddOffset: (index: number) => '1' | undefined;
|
6
6
|
declare const getLeftConfig: (count: number, index: number) => GridConfig;
|
7
7
|
declare const getCenterMediumConfig: (count: number, index: number) => GridConfig;
|
8
8
|
declare const getCenterLargeConfig: (count: number, index: number) => GridConfig;
|
@@ -4,19 +4,15 @@ var columnSize = {
|
|
4
4
|
desktop: '4',
|
5
5
|
tablet: '5'
|
6
6
|
};
|
7
|
-
|
8
7
|
var isOddIndex = function isOddIndex(index) {
|
9
8
|
return !((index + 1) % 2);
|
10
9
|
};
|
11
|
-
|
12
10
|
var getEvenOffset = function getEvenOffset(index) {
|
13
11
|
return isOddIndex(index) ? '1' : undefined;
|
14
12
|
};
|
15
|
-
|
16
13
|
var getOddOffset = function getOddOffset(index) {
|
17
14
|
return isOddIndex(index) ? undefined : '1';
|
18
15
|
};
|
19
|
-
|
20
16
|
var getLeftConfig = function getLeftConfig(count, index) {
|
21
17
|
switch (count) {
|
22
18
|
case 2:
|
@@ -26,21 +22,18 @@ var getLeftConfig = function getLeftConfig(count, index) {
|
|
26
22
|
leftOffsetDesktop: getEvenOffset(index),
|
27
23
|
leftOffsetTablet: getEvenOffset(index)
|
28
24
|
});
|
29
|
-
|
30
25
|
default:
|
31
26
|
return _extends(_extends({}, columnSize), {
|
32
27
|
leftOffsetTablet: getEvenOffset(index)
|
33
28
|
});
|
34
29
|
}
|
35
30
|
};
|
36
|
-
|
37
31
|
var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
|
38
32
|
switch (count) {
|
39
33
|
case 3:
|
40
34
|
return _extends(_extends({}, columnSize), {
|
41
35
|
leftOffsetTablet: getOddOffset(index)
|
42
36
|
});
|
43
|
-
|
44
37
|
case 4:
|
45
38
|
return _extends(_extends({}, columnSize), {
|
46
39
|
rightOffsetWide: getOddOffset(index),
|
@@ -50,7 +43,6 @@ var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
|
|
50
43
|
rightOffsetTablet: getEvenOffset(index),
|
51
44
|
leftOffsetTablet: getOddOffset(index)
|
52
45
|
});
|
53
|
-
|
54
46
|
default:
|
55
47
|
return _extends(_extends({}, columnSize), {
|
56
48
|
rightOffsetWide: getOddOffset(index),
|
@@ -58,7 +50,6 @@ var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
|
|
58
50
|
});
|
59
51
|
}
|
60
52
|
};
|
61
|
-
|
62
53
|
var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
|
63
54
|
switch (count) {
|
64
55
|
case 4:
|
@@ -70,30 +61,25 @@ var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
|
|
70
61
|
leftOffsetTablet: getOddOffset(index),
|
71
62
|
rightOffsetTablet: getEvenOffset(index)
|
72
63
|
});
|
73
|
-
|
74
64
|
case 3:
|
75
65
|
return _extends(_extends({}, columnSize), {
|
76
66
|
leftOffsetTablet: getOddOffset(index)
|
77
67
|
});
|
78
|
-
|
79
68
|
default:
|
80
69
|
return _extends({}, columnSize);
|
81
70
|
}
|
82
71
|
};
|
83
|
-
|
84
72
|
var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
|
85
73
|
switch (gutterSize) {
|
86
74
|
case 'medium':
|
87
75
|
{
|
88
76
|
return getCenterMediumConfig(count, index);
|
89
77
|
}
|
90
|
-
|
91
78
|
default:
|
92
79
|
{
|
93
80
|
return getCenterLargeConfig(count, index);
|
94
81
|
}
|
95
82
|
}
|
96
83
|
};
|
97
|
-
|
98
84
|
export default getCenterConfig;
|
99
85
|
export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig };
|
@@ -9,8 +9,8 @@ export interface IBenefit {
|
|
9
9
|
/** Значение тега alt для изображения */
|
10
10
|
alt?: string;
|
11
11
|
}
|
12
|
-
|
13
|
-
export
|
12
|
+
type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
|
13
|
+
export type GridConfig = {
|
14
14
|
wide?: TGridSizeValues;
|
15
15
|
desktop?: TGridSizeValues;
|
16
16
|
tablet?: TGridSizeValues;
|
@@ -21,5 +21,5 @@ export declare type GridConfig = {
|
|
21
21
|
rightOffsetTablet?: TGridSizeValues;
|
22
22
|
rightOffsetWide?: TGridSizeValues;
|
23
23
|
};
|
24
|
-
export
|
24
|
+
export type GridGutterSize = 'large' | 'medium';
|
25
25
|
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|