@gravity-ui/page-constructor 1.7.0-alpha.5 → 1.7.0-alpha.7
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/build/cjs/blocks/Tabs/Tabs.css +49 -23
- package/build/cjs/blocks/Tabs/Tabs.d.ts +1 -1
- package/build/cjs/blocks/Tabs/Tabs.js +29 -27
- package/build/cjs/components/ButtonTabs/ButtonTabs.css +12 -0
- package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts +13 -0
- package/build/cjs/components/ButtonTabs/ButtonTabs.js +27 -0
- package/build/cjs/components/Image/Image.css +3 -0
- package/build/cjs/components/Image/Image.js +3 -1
- package/build/cjs/components/RouterLink/RouterLink.d.ts +0 -1
- package/build/cjs/components/VideoBlock/VideoBlock.js +1 -1
- package/build/cjs/components/index.d.ts +0 -1
- package/build/cjs/components/index.js +1 -3
- package/build/cjs/constructor-items.d.ts +1 -1
- package/build/cjs/containers/PageConstructor/PageConstructor.d.ts +0 -2
- package/build/cjs/containers/PageConstructor/PageConstructor.js +2 -4
- package/build/cjs/context/locationContext/locationContext.d.ts +0 -1
- package/build/cjs/icons/index.d.ts +0 -3
- package/build/cjs/icons/index.js +0 -3
- package/build/cjs/models/constructor-items/blocks.d.ts +7 -4
- package/build/cjs/models/index.d.ts +0 -1
- package/build/cjs/models/index.js +0 -1
- package/build/cjs/text-transform/blocks.js +11 -4
- package/build/cjs/text-transform/utils.js +1 -1
- package/build/esm/blocks/Tabs/Tabs.css +49 -23
- package/build/esm/blocks/Tabs/Tabs.d.ts +1 -1
- package/build/esm/blocks/Tabs/Tabs.js +29 -27
- package/build/esm/components/ButtonTabs/ButtonTabs.css +12 -0
- package/build/esm/components/ButtonTabs/ButtonTabs.d.ts +14 -0
- package/build/esm/components/ButtonTabs/ButtonTabs.js +25 -0
- package/build/esm/components/Image/Image.css +3 -0
- package/build/esm/components/Image/Image.d.ts +1 -0
- package/build/esm/components/Image/Image.js +4 -1
- package/build/esm/components/RouterLink/RouterLink.d.ts +0 -1
- package/build/esm/components/VideoBlock/VideoBlock.js +1 -1
- package/build/esm/components/index.d.ts +0 -1
- package/build/esm/components/index.js +0 -1
- package/build/esm/constructor-items.d.ts +1 -1
- package/build/esm/containers/PageConstructor/PageConstructor.d.ts +0 -2
- package/build/esm/containers/PageConstructor/PageConstructor.js +2 -4
- package/build/esm/context/locationContext/locationContext.d.ts +0 -1
- package/build/esm/icons/index.d.ts +0 -3
- package/build/esm/icons/index.js +0 -3
- package/build/esm/models/constructor-items/blocks.d.ts +7 -4
- package/build/esm/models/index.d.ts +0 -1
- package/build/esm/models/index.js +0 -1
- package/build/esm/text-transform/blocks.js +11 -4
- package/build/esm/text-transform/utils.js +1 -1
- package/package.json +1 -1
- package/server/models/constructor-items/blocks.d.ts +7 -4
- package/server/models/index.d.ts +0 -1
- package/server/models/index.js +0 -1
- package/server/text-transform/blocks.js +11 -4
- package/server/text-transform/utils.js +1 -1
- package/styles/mixins.scss +0 -38
- package/build/cjs/components/navigation/components/Header/Header.css +0 -85
- package/build/cjs/components/navigation/components/Header/Header.d.ts +0 -28
- package/build/cjs/components/navigation/components/Header/Header.js +0 -81
- package/build/cjs/components/navigation/components/Logo/Logo.css +0 -23
- package/build/cjs/components/navigation/components/Logo/Logo.d.ts +0 -7
- package/build/cjs/components/navigation/components/Logo/Logo.js +0 -17
- package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.css +0 -58
- package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.d.ts +0 -13
- package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.js +0 -45
- package/build/cjs/components/navigation/components/Navigation/Navigation.css +0 -43
- package/build/cjs/components/navigation/components/Navigation/Navigation.d.ts +0 -11
- package/build/cjs/components/navigation/components/Navigation/Navigation.js +0 -70
- package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.css +0 -41
- package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.d.ts +0 -12
- package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.js +0 -55
- package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.css +0 -33
- package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.d.ts +0 -10
- package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.js +0 -46
- package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.css +0 -20
- package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.d.ts +0 -7
- package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.js +0 -14
- package/build/cjs/icons/NavigationArrow.d.ts +0 -2
- package/build/cjs/icons/NavigationArrow.js +0 -9
- package/build/cjs/icons/NavigationClose.d.ts +0 -2
- package/build/cjs/icons/NavigationClose.js +0 -9
- package/build/cjs/icons/NavigationOpen.d.ts +0 -2
- package/build/cjs/icons/NavigationOpen.js +0 -11
- package/build/cjs/models/navigation.d.ts +0 -59
- package/build/cjs/models/navigation.js +0 -10
- package/build/esm/components/navigation/components/Header/Header.css +0 -85
- package/build/esm/components/navigation/components/Header/Header.d.ts +0 -29
- package/build/esm/components/navigation/components/Header/Header.js +0 -79
- package/build/esm/components/navigation/components/Logo/Logo.css +0 -23
- package/build/esm/components/navigation/components/Logo/Logo.d.ts +0 -8
- package/build/esm/components/navigation/components/Logo/Logo.js +0 -15
- package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.css +0 -58
- package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.d.ts +0 -14
- package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.js +0 -43
- package/build/esm/components/navigation/components/Navigation/Navigation.css +0 -43
- package/build/esm/components/navigation/components/Navigation/Navigation.d.ts +0 -12
- package/build/esm/components/navigation/components/Navigation/Navigation.js +0 -69
- package/build/esm/components/navigation/components/NavigationItem/NavigationItem.css +0 -41
- package/build/esm/components/navigation/components/NavigationItem/NavigationItem.d.ts +0 -13
- package/build/esm/components/navigation/components/NavigationItem/NavigationItem.js +0 -54
- package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.css +0 -33
- package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.d.ts +0 -11
- package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.js +0 -42
- package/build/esm/components/navigation/components/SocialIcon/SocialIcon.css +0 -20
- package/build/esm/components/navigation/components/SocialIcon/SocialIcon.d.ts +0 -8
- package/build/esm/components/navigation/components/SocialIcon/SocialIcon.js +0 -12
- package/build/esm/icons/NavigationArrow.d.ts +0 -2
- package/build/esm/icons/NavigationArrow.js +0 -4
- package/build/esm/icons/NavigationClose.d.ts +0 -2
- package/build/esm/icons/NavigationClose.js +0 -4
- package/build/esm/icons/NavigationOpen.d.ts +0 -2
- package/build/esm/icons/NavigationOpen.js +0 -6
- package/build/esm/models/navigation.d.ts +0 -59
- package/build/esm/models/navigation.js +0 -7
- package/server/models/navigation.d.ts +0 -59
- package/server/models/navigation.js +0 -10
|
@@ -1,68 +1,94 @@
|
|
|
1
|
-
.pc-
|
|
1
|
+
.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
|
|
2
2
|
margin: 0;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
/* use this for style redefinitions to awoid problems with
|
|
6
6
|
unpredictable css rules order in build */
|
|
7
|
-
.pc-
|
|
7
|
+
.pc-tabs-block__block-title {
|
|
8
8
|
margin-bottom: 12px;
|
|
9
9
|
}
|
|
10
|
-
.pc-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
margin-bottom: 32px;
|
|
10
|
+
.pc-tabs-block__block-title_centered {
|
|
11
|
+
margin: 0 auto 12px;
|
|
12
|
+
text-align: center;
|
|
14
13
|
}
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
.pc-tabs-block__tabs_centered {
|
|
15
|
+
display: flex;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
}
|
|
18
|
+
.pc-tabs-block__row_reverse {
|
|
19
|
+
flex-direction: row-reverse;
|
|
20
|
+
}
|
|
21
|
+
.pc-tabs-block__row_reverse .pc-tabs-block__content-wrapper {
|
|
22
|
+
margin-right: 32px;
|
|
23
|
+
margin-left: 0;
|
|
24
|
+
}
|
|
25
|
+
.pc-tabs-block__image {
|
|
17
26
|
width: 100%;
|
|
18
27
|
height: auto;
|
|
19
28
|
object-fit: cover;
|
|
20
29
|
display: block;
|
|
21
30
|
}
|
|
22
|
-
.pc-
|
|
31
|
+
.pc-tabs-block__image, .pc-tabs-block__media {
|
|
23
32
|
box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
|
|
24
33
|
overflow-x: hidden;
|
|
25
34
|
border-radius: var(--pc-border-radius);
|
|
26
35
|
}
|
|
27
|
-
.pc-
|
|
36
|
+
.pc-tabs-block__caption {
|
|
28
37
|
font-size: var(--yc-text-body-2-font-size);
|
|
29
38
|
line-height: var(--yc-text-body-2-line-height);
|
|
30
39
|
margin: 12px 0 0;
|
|
31
40
|
color: var(--yc-color-text-secondary);
|
|
32
41
|
}
|
|
33
|
-
.pc-
|
|
42
|
+
.pc-tabs-block__content {
|
|
34
43
|
display: flex;
|
|
35
44
|
flex-direction: column;
|
|
36
45
|
}
|
|
37
|
-
.pc-
|
|
46
|
+
.pc-tabs-block__content_centered {
|
|
47
|
+
margin: 0 auto;
|
|
48
|
+
}
|
|
49
|
+
.pc-tabs-block__col_centered {
|
|
50
|
+
margin: 0 auto;
|
|
51
|
+
}
|
|
52
|
+
.pc-tabs-block__content-wrapper_margin {
|
|
38
53
|
margin: 24px 0 0 32px;
|
|
39
54
|
}
|
|
40
|
-
.pc-
|
|
55
|
+
.pc-tabs-block__content-title {
|
|
41
56
|
margin: 0 auto 12px;
|
|
42
57
|
}
|
|
43
|
-
.pc-
|
|
58
|
+
.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
|
|
44
59
|
font-size: var(--yc-text-header-1-font-size);
|
|
45
60
|
line-height: var(--yc-text-header-1-line-height);
|
|
46
61
|
color: var(--pc-text-header-color);
|
|
47
62
|
font-weight: var(--yc-text-accent-font-weight);
|
|
48
63
|
}
|
|
49
64
|
|
|
50
|
-
.pc-TabsBlock__tabs, .pc-TabsBlock__link {
|
|
51
|
-
font-size: var(--yc-text-body-2-font-size);
|
|
52
|
-
line-height: var(--yc-text-body-2-line-height);
|
|
53
|
-
}
|
|
54
65
|
@media (max-width: 769px) {
|
|
55
|
-
.pc-
|
|
66
|
+
.pc-tabs-block__tabs {
|
|
67
|
+
display: flex;
|
|
68
|
+
overflow: auto;
|
|
69
|
+
margin-left: -24px;
|
|
70
|
+
margin-right: -24px;
|
|
71
|
+
padding-left: 24px;
|
|
72
|
+
padding-right: 16px;
|
|
73
|
+
}
|
|
74
|
+
.pc-tabs-block__content-wrapper_margin {
|
|
56
75
|
margin: 0 0 32px 0;
|
|
57
76
|
}
|
|
77
|
+
.pc-tabs-block__row_reverse {
|
|
78
|
+
flex-direction: column-reverse;
|
|
79
|
+
}
|
|
80
|
+
.pc-tabs-block__row_reverse .pc-tabs-block__content > * {
|
|
81
|
+
margin-top: 32px;
|
|
82
|
+
padding-bottom: 0;
|
|
83
|
+
}
|
|
58
84
|
}
|
|
59
85
|
@media (min-width: 769px) {
|
|
60
|
-
.pc-
|
|
86
|
+
.pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {
|
|
61
87
|
position: relative;
|
|
62
88
|
top: 100px;
|
|
63
89
|
opacity: 0;
|
|
64
90
|
}
|
|
65
|
-
.pc-
|
|
91
|
+
.pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__media {
|
|
66
92
|
top: 0;
|
|
67
93
|
opacity: 1;
|
|
68
94
|
transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
@@ -70,12 +96,12 @@ unpredictable css rules order in build */
|
|
|
70
96
|
}
|
|
71
97
|
}
|
|
72
98
|
@media (min-width: 769px) {
|
|
73
|
-
.pc-
|
|
99
|
+
.pc-tabs-block.pc-AnimateBlock .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__image {
|
|
74
100
|
position: relative;
|
|
75
101
|
top: 100px;
|
|
76
102
|
opacity: 0;
|
|
77
103
|
}
|
|
78
|
-
.pc-
|
|
104
|
+
.pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__image {
|
|
79
105
|
top: 0;
|
|
80
106
|
opacity: 1;
|
|
81
107
|
transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { TabsBlockProps } from '../../models';
|
|
2
|
-
export declare const TabsBlock: ({ items, title, description, animated }: TabsBlockProps) => JSX.Element;
|
|
2
|
+
export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, }: TabsBlockProps) => JSX.Element;
|
|
3
3
|
export default TabsBlock;
|
|
@@ -3,53 +3,55 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.TabsBlock = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = (0, tslib_1.__importStar)(require("react"));
|
|
6
|
-
const uikit_1 = require("@gravity-ui/uikit");
|
|
7
6
|
const utils_1 = require("../../utils");
|
|
8
7
|
const grid_1 = require("../../grid");
|
|
9
|
-
const YFMWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/YFMWrapper/YFMWrapper"));
|
|
10
8
|
const AnimateBlock_1 = (0, tslib_1.__importDefault)(require("../../components/AnimateBlock/AnimateBlock"));
|
|
11
9
|
const BlockHeader_1 = (0, tslib_1.__importDefault)(require("../../components/BlockHeader/BlockHeader"));
|
|
12
10
|
const FullscreenImage_1 = (0, tslib_1.__importDefault)(require("../../components/FullscreenImage/FullscreenImage"));
|
|
13
11
|
const Media_1 = (0, tslib_1.__importDefault)(require("../../components/Media/Media"));
|
|
14
|
-
const Links_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Links"));
|
|
15
12
|
const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
|
|
16
13
|
const utils_2 = require("../../components/Media/Image/utils");
|
|
17
|
-
const
|
|
18
|
-
const
|
|
14
|
+
const ButtonTabs_1 = (0, tslib_1.__importDefault)(require("../../components/ButtonTabs/ButtonTabs"));
|
|
15
|
+
const sub_blocks_1 = require("../../sub-blocks");
|
|
16
|
+
const b = (0, utils_1.block)('tabs-block');
|
|
17
|
+
const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
|
|
19
18
|
const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
|
|
20
19
|
const [play, setPlay] = (0, react_1.useState)(false);
|
|
21
20
|
const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
|
|
22
21
|
const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
|
|
23
22
|
const activeTabData = items.find(({ tabName }) => tabName === activeTab);
|
|
23
|
+
const isReverse = direction === 'content-media';
|
|
24
24
|
let imageProps;
|
|
25
25
|
if (activeTabData) {
|
|
26
26
|
const themedImage = (0, utils_1.getThemedValue)(activeTabData.image, theme);
|
|
27
27
|
imageProps = themedImage && (0, utils_2.getMediaImage)(themedImage);
|
|
28
28
|
}
|
|
29
29
|
const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
|
|
30
|
+
const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
|
|
31
|
+
const textContent = activeTabData && showText && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content', { centered: centered }) },
|
|
32
|
+
react_1.default.createElement("div", { className: b('content-wrapper', {
|
|
33
|
+
margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
|
|
34
|
+
}) },
|
|
35
|
+
react_1.default.createElement(sub_blocks_1.Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: "s", links: [
|
|
36
|
+
...(activeTabData.link ? [activeTabData.link] : []),
|
|
37
|
+
...(activeTabData.links || []),
|
|
38
|
+
], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
|
|
39
|
+
const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
|
|
40
|
+
all: grid_1.GridColumnOrderClasses.Last,
|
|
41
|
+
md: grid_1.GridColumnOrderClasses.First,
|
|
42
|
+
}, className: b('col', { centered: centered }) },
|
|
43
|
+
(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
|
|
44
|
+
imageProps && (react_1.default.createElement(react_1.Fragment, null,
|
|
45
|
+
react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
|
|
46
|
+
(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption))))));
|
|
30
47
|
return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
|
|
31
|
-
react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title') }),
|
|
32
|
-
react_1.default.createElement(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
|
|
39
|
-
imageProps && (react_1.default.createElement(react_1.Fragment, null,
|
|
40
|
-
react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
|
|
41
|
-
activeTabData && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)))))),
|
|
42
|
-
react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content') },
|
|
43
|
-
react_1.default.createElement("div", { className: b('content-wrapper', {
|
|
44
|
-
margin: Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps),
|
|
45
|
-
}) },
|
|
46
|
-
react_1.default.createElement("h4", { className: b('content-title') },
|
|
47
|
-
react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.title, modifiers: { constructor: true } })),
|
|
48
|
-
react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.text, modifiers: { constructor: true } }),
|
|
49
|
-
react_1.default.createElement(Links_1.default, { links: [
|
|
50
|
-
...(activeTabData.link ? [activeTabData.link] : []),
|
|
51
|
-
...(activeTabData.links || []),
|
|
52
|
-
], className: b('link') })))))));
|
|
48
|
+
react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title', { centered: centered }), colSizes: centered ? { all: 12 } : { all: 12, sm: 8 } }),
|
|
49
|
+
react_1.default.createElement(grid_1.Row, null,
|
|
50
|
+
react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
|
|
51
|
+
react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
|
|
52
|
+
activeTabData && (react_1.default.createElement(grid_1.Row, { className: b('row', { reverse: isReverse }) },
|
|
53
|
+
mediaContent,
|
|
54
|
+
textContent))));
|
|
53
55
|
};
|
|
54
56
|
exports.TabsBlock = TabsBlock;
|
|
55
57
|
exports.default = exports.TabsBlock;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
|
2
|
+
unpredictable css rules order in build */
|
|
3
|
+
.pc-button-tabs {
|
|
4
|
+
margin-bottom: 20px;
|
|
5
|
+
}
|
|
6
|
+
.pc-button-tabs__item {
|
|
7
|
+
margin-right: 8px;
|
|
8
|
+
margin-bottom: 12px;
|
|
9
|
+
}
|
|
10
|
+
.pc-button-tabs__item_active {
|
|
11
|
+
pointer-events: none;
|
|
12
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ButtonProps } from '../../models';
|
|
2
|
+
export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
}
|
|
6
|
+
export interface ButtonTabsProps {
|
|
7
|
+
className?: string;
|
|
8
|
+
items: ButtonTabsItemProps[];
|
|
9
|
+
activeTab?: string;
|
|
10
|
+
onSelectTab?: (tabId: string) => void;
|
|
11
|
+
}
|
|
12
|
+
declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
|
|
13
|
+
export default ButtonTabs;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const react_1 = (0, tslib_1.__importStar)(require("react"));
|
|
5
|
+
const utils_1 = require("../../utils");
|
|
6
|
+
const index_1 = require("../index");
|
|
7
|
+
const b = (0, utils_1.block)('button-tabs');
|
|
8
|
+
const ButtonTabs = (props) => {
|
|
9
|
+
const { className, items, activeTab, onSelectTab } = props;
|
|
10
|
+
// const isMobile = useContext(MobileContext);
|
|
11
|
+
const activeTabId = (0, react_1.useMemo)(() => {
|
|
12
|
+
if (activeTab) {
|
|
13
|
+
return activeTab;
|
|
14
|
+
}
|
|
15
|
+
return items[0].id;
|
|
16
|
+
}, [activeTab, items]);
|
|
17
|
+
const handleClick = (0, react_1.useCallback)((tabId) => {
|
|
18
|
+
if (onSelectTab) {
|
|
19
|
+
onSelectTab(tabId);
|
|
20
|
+
}
|
|
21
|
+
}, [onSelectTab]);
|
|
22
|
+
return (react_1.default.createElement("div", { className: b(null, className) }, items.map((item) => {
|
|
23
|
+
const isActive = item.id === activeTabId;
|
|
24
|
+
return (react_1.default.createElement(index_1.Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));
|
|
25
|
+
})));
|
|
26
|
+
};
|
|
27
|
+
exports.default = ButtonTabs;
|
|
@@ -4,6 +4,8 @@ const tslib_1 = require("tslib");
|
|
|
4
4
|
const react_1 = (0, tslib_1.__importStar)(require("react"));
|
|
5
5
|
const projectSettingsContext_1 = require("../../context/projectSettingsContext");
|
|
6
6
|
const constants_1 = require("../../constants");
|
|
7
|
+
const utils_1 = require("../../utils");
|
|
8
|
+
const b = (0, utils_1.block)('Image');
|
|
7
9
|
const checkWebP = (src) => {
|
|
8
10
|
return src.endsWith('.webp') ? src : src + '.webp';
|
|
9
11
|
};
|
|
@@ -20,7 +22,7 @@ const Image = (props) => {
|
|
|
20
22
|
disableCompress ||
|
|
21
23
|
imageSrc.endsWith('.svg') ||
|
|
22
24
|
imgLoadingError;
|
|
23
|
-
return (react_1.default.createElement("picture",
|
|
25
|
+
return (react_1.default.createElement("picture", { className: b() },
|
|
24
26
|
mobile && (react_1.default.createElement(react_1.Fragment, null,
|
|
25
27
|
!disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
|
|
26
28
|
react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),
|
|
@@ -53,7 +53,7 @@ const VideoBlock = (props) => {
|
|
|
53
53
|
}, [src, attributes]);
|
|
54
54
|
(0, react_1.useEffect)(() => {
|
|
55
55
|
const updateSize = lodash_1.default.debounce(() => {
|
|
56
|
-
setHeight(ref.current ? Math.
|
|
56
|
+
setHeight(ref.current ? Math.floor(getHeight(ref.current.offsetWidth)) : undefined);
|
|
57
57
|
}, 100);
|
|
58
58
|
updateSize();
|
|
59
59
|
window.addEventListener('resize', updateSize);
|
|
@@ -33,5 +33,4 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
|
|
|
33
33
|
export { default as Author } from './Author/Author';
|
|
34
34
|
export { default as RouterLink } from './RouterLink/RouterLink';
|
|
35
35
|
export { default as HTML } from './HTML/HTML';
|
|
36
|
-
export { default as Header } from './navigation/components/Header/Header';
|
|
37
36
|
export type { RouterLinkProps } from './RouterLink/RouterLink';
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.
|
|
6
|
+
exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
|
|
7
7
|
var Anchor_1 = require("./Anchor/Anchor");
|
|
8
8
|
Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
|
|
9
9
|
var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
|
|
@@ -74,5 +74,3 @@ var RouterLink_1 = require("./RouterLink/RouterLink");
|
|
|
74
74
|
Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
|
|
75
75
|
var HTML_1 = require("./HTML/HTML");
|
|
76
76
|
Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
|
|
77
|
-
var Header_1 = require("./navigation/components/Header/Header");
|
|
78
|
-
Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
|
|
@@ -11,7 +11,7 @@ export declare const blockMap: {
|
|
|
11
11
|
"info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
|
|
12
12
|
"security-block": (props: import("./models").SecurityBlockProps) => JSX.Element;
|
|
13
13
|
"table-block": (props: import("./models").TableBlockProps) => JSX.Element;
|
|
14
|
-
"tabs-block": ({ items, title, description, animated }: import("./models").TabsBlockProps) => JSX.Element;
|
|
14
|
+
"tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, }: import("./models").TabsBlockProps) => JSX.Element;
|
|
15
15
|
"link-table-block": ({ items, title, description, linkTheme }: import("./models").LinkTableBlockProps) => JSX.Element;
|
|
16
16
|
"header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
|
|
17
17
|
"icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
|
|
3
3
|
import { blockMap, subBlockMap } from '../../constructor-items';
|
|
4
|
-
import { NavigationData } from '../../models/navigation';
|
|
5
4
|
import '@doc-tools/transform/dist/js/yfm';
|
|
6
5
|
export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
|
|
7
6
|
export interface PageConstructorProps {
|
|
@@ -9,7 +8,6 @@ export interface PageConstructorProps {
|
|
|
9
8
|
shouldRenderBlock?: ShouldRenderBlock;
|
|
10
9
|
custom?: CustomConfig;
|
|
11
10
|
renderMenu?: () => React.ReactNode;
|
|
12
|
-
navigationData?: NavigationData;
|
|
13
11
|
}
|
|
14
12
|
export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
|
|
15
13
|
export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;
|
|
@@ -15,7 +15,6 @@ const ConstructorRow_1 = require("./components/ConstructorRow");
|
|
|
15
15
|
const ConstructorFootnotes_1 = require("./components/ConstructorFootnotes");
|
|
16
16
|
const ConstructorItem_1 = require("./components/ConstructorItem");
|
|
17
17
|
const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
|
|
18
|
-
const Header_1 = (0, tslib_1.__importDefault)(require("../../components/navigation/components/Header/Header"));
|
|
19
18
|
require("@doc-tools/transform/dist/js/yfm");
|
|
20
19
|
const b = (0, utils_1.block)('page-constructor');
|
|
21
20
|
const Constructor = (props) => {
|
|
@@ -31,7 +30,7 @@ const Constructor = (props) => {
|
|
|
31
30
|
});
|
|
32
31
|
}, [props.custom]);
|
|
33
32
|
const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
|
|
34
|
-
const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock,
|
|
33
|
+
const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, } = props;
|
|
35
34
|
const hasFootnotes = footnotes.length > 0;
|
|
36
35
|
const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
|
|
37
36
|
const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
|
|
@@ -40,8 +39,7 @@ const Constructor = (props) => {
|
|
|
40
39
|
return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
|
|
41
40
|
react_1.default.createElement("div", { className: b() },
|
|
42
41
|
react_1.default.createElement("div", { className: b('wrapper') },
|
|
43
|
-
|
|
44
|
-
(navigationData === null || navigationData === void 0 ? void 0 : navigationData.header) && (react_1.default.createElement(Header_1.default, { logo: navigationData === null || navigationData === void 0 ? void 0 : navigationData.logo, data: navigationData === null || navigationData === void 0 ? void 0 : navigationData.header })),
|
|
42
|
+
react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') })),
|
|
45
43
|
renderMenu && renderMenu(),
|
|
46
44
|
header && react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header }),
|
|
47
45
|
react_1.default.createElement(grid_1.Grid, null,
|
package/build/cjs/icons/index.js
CHANGED
|
@@ -9,6 +9,3 @@ const tslib_1 = require("tslib");
|
|
|
9
9
|
(0, tslib_1.__exportStar)(require("./NavigationChevron"), exports);
|
|
10
10
|
(0, tslib_1.__exportStar)(require("./PlayVideo"), exports);
|
|
11
11
|
(0, tslib_1.__exportStar)(require("./PreviewClose"), exports);
|
|
12
|
-
(0, tslib_1.__exportStar)(require("./NavigationClose"), exports);
|
|
13
|
-
(0, tslib_1.__exportStar)(require("./NavigationOpen"), exports);
|
|
14
|
-
(0, tslib_1.__exportStar)(require("./NavigationArrow"), exports);
|
|
@@ -221,18 +221,21 @@ export interface TableBlockProps {
|
|
|
221
221
|
title: string;
|
|
222
222
|
table: TableProps;
|
|
223
223
|
}
|
|
224
|
-
export interface TabsBlockItem {
|
|
224
|
+
export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'> {
|
|
225
225
|
tabName: string;
|
|
226
|
-
|
|
227
|
-
|
|
226
|
+
/**
|
|
227
|
+
* @deprecated Use array links from ContentBlockProps instead
|
|
228
|
+
*/
|
|
228
229
|
link?: LinkProps;
|
|
229
230
|
image?: ThemedImage;
|
|
230
231
|
disableCompress?: boolean;
|
|
231
232
|
caption?: string;
|
|
232
233
|
media?: ThemedMediaProps;
|
|
233
|
-
links?: LinkProps[];
|
|
234
234
|
}
|
|
235
235
|
export interface TabsBlockProps extends BlockHeaderProps, Animatable {
|
|
236
|
+
tabsColSizes?: GridColumnSizesType;
|
|
237
|
+
centered?: boolean;
|
|
238
|
+
direction?: MediaDirection;
|
|
236
239
|
items: TabsBlockItem[];
|
|
237
240
|
}
|
|
238
241
|
export interface LinkTableBlockProps extends BlockHeaderProps {
|
|
@@ -7,4 +7,3 @@ const tslib_1 = require("tslib");
|
|
|
7
7
|
(0, tslib_1.__exportStar)(require("./components"), exports);
|
|
8
8
|
(0, tslib_1.__exportStar)(require("./guards"), exports);
|
|
9
9
|
(0, tslib_1.__exportStar)(require("./react"), exports);
|
|
10
|
-
(0, tslib_1.__exportStar)(require("./navigation"), exports);
|
|
@@ -23,7 +23,6 @@ const createItemsParser = (fields) => (transformer, items) => items.map((item) =
|
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
exports.createItemsParser = createItemsParser;
|
|
26
|
-
const parseItems = (0, exports.createItemsParser)(['title', 'text']);
|
|
27
26
|
function parseTableBlock(transformer, content) {
|
|
28
27
|
const legend = content === null || content === void 0 ? void 0 : content.legend;
|
|
29
28
|
return Object.assign(Object.assign({}, (content || {})), { legend: legend && legend.map((string) => transformer(string)) });
|
|
@@ -49,9 +48,13 @@ function parseSlider(transformer, block) {
|
|
|
49
48
|
}
|
|
50
49
|
const parseTitle = (transformer, title) => typeof title === 'object' && 'text' in title
|
|
51
50
|
? Object.assign(Object.assign({}, title), { text: transformer(title.text) }) : title && transformer(title);
|
|
51
|
+
const parseItemsTitle = (transformer, items) => items.map((_a) => {
|
|
52
|
+
var { title } = _a, rest = (0, tslib_1.__rest)(_a, ["title"]);
|
|
53
|
+
return (Object.assign({ title: title && parseTitle(transformer, title) }, rest));
|
|
54
|
+
});
|
|
52
55
|
function parsePriceDetailedBlock(transformer, block) {
|
|
53
56
|
const { priceType } = block;
|
|
54
|
-
|
|
57
|
+
block.items = block.items.map((item) => {
|
|
55
58
|
const { description, items: details = [] } = item;
|
|
56
59
|
if (priceType === 'marked-list') {
|
|
57
60
|
item.items = details.map((detail) => {
|
|
@@ -68,7 +71,6 @@ function parsePriceDetailedBlock(transformer, block) {
|
|
|
68
71
|
item.description = transformer(description);
|
|
69
72
|
return item;
|
|
70
73
|
});
|
|
71
|
-
block.items = transformedBlockItems;
|
|
72
74
|
return block;
|
|
73
75
|
}
|
|
74
76
|
const parseContentLayout = (transformer, content) => {
|
|
@@ -226,7 +228,12 @@ const config = {
|
|
|
226
228
|
{
|
|
227
229
|
fields: ['items'],
|
|
228
230
|
transformer: yfmTransformer,
|
|
229
|
-
parser:
|
|
231
|
+
parser: (0, exports.createItemsParser)(['text', 'additionalInfo']),
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
fields: ['items'],
|
|
235
|
+
transformer: typografTransformer,
|
|
236
|
+
parser: parseItemsTitle,
|
|
230
237
|
},
|
|
231
238
|
],
|
|
232
239
|
[models_1.BlockType.TableBlock]: [
|
|
@@ -26,7 +26,7 @@ exports.DEFAULT_ALLOWED_TAGS = [
|
|
|
26
26
|
];
|
|
27
27
|
exports.typografConfig = {
|
|
28
28
|
enabled: ['common/nbsp/afterNumber', 'common/nbsp/afterParagraphMark'],
|
|
29
|
-
disabled: ['common/symbols/cf'],
|
|
29
|
+
disabled: ['common/symbols/cf', 'ru/other/phone-number'],
|
|
30
30
|
};
|
|
31
31
|
exports.sanitizeStripOptions = {
|
|
32
32
|
allowedTags: [],
|