@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.
Files changed (114) hide show
  1. package/build/cjs/blocks/Tabs/Tabs.css +49 -23
  2. package/build/cjs/blocks/Tabs/Tabs.d.ts +1 -1
  3. package/build/cjs/blocks/Tabs/Tabs.js +29 -27
  4. package/build/cjs/components/ButtonTabs/ButtonTabs.css +12 -0
  5. package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts +13 -0
  6. package/build/cjs/components/ButtonTabs/ButtonTabs.js +27 -0
  7. package/build/cjs/components/Image/Image.css +3 -0
  8. package/build/cjs/components/Image/Image.js +3 -1
  9. package/build/cjs/components/RouterLink/RouterLink.d.ts +0 -1
  10. package/build/cjs/components/VideoBlock/VideoBlock.js +1 -1
  11. package/build/cjs/components/index.d.ts +0 -1
  12. package/build/cjs/components/index.js +1 -3
  13. package/build/cjs/constructor-items.d.ts +1 -1
  14. package/build/cjs/containers/PageConstructor/PageConstructor.d.ts +0 -2
  15. package/build/cjs/containers/PageConstructor/PageConstructor.js +2 -4
  16. package/build/cjs/context/locationContext/locationContext.d.ts +0 -1
  17. package/build/cjs/icons/index.d.ts +0 -3
  18. package/build/cjs/icons/index.js +0 -3
  19. package/build/cjs/models/constructor-items/blocks.d.ts +7 -4
  20. package/build/cjs/models/index.d.ts +0 -1
  21. package/build/cjs/models/index.js +0 -1
  22. package/build/cjs/text-transform/blocks.js +11 -4
  23. package/build/cjs/text-transform/utils.js +1 -1
  24. package/build/esm/blocks/Tabs/Tabs.css +49 -23
  25. package/build/esm/blocks/Tabs/Tabs.d.ts +1 -1
  26. package/build/esm/blocks/Tabs/Tabs.js +29 -27
  27. package/build/esm/components/ButtonTabs/ButtonTabs.css +12 -0
  28. package/build/esm/components/ButtonTabs/ButtonTabs.d.ts +14 -0
  29. package/build/esm/components/ButtonTabs/ButtonTabs.js +25 -0
  30. package/build/esm/components/Image/Image.css +3 -0
  31. package/build/esm/components/Image/Image.d.ts +1 -0
  32. package/build/esm/components/Image/Image.js +4 -1
  33. package/build/esm/components/RouterLink/RouterLink.d.ts +0 -1
  34. package/build/esm/components/VideoBlock/VideoBlock.js +1 -1
  35. package/build/esm/components/index.d.ts +0 -1
  36. package/build/esm/components/index.js +0 -1
  37. package/build/esm/constructor-items.d.ts +1 -1
  38. package/build/esm/containers/PageConstructor/PageConstructor.d.ts +0 -2
  39. package/build/esm/containers/PageConstructor/PageConstructor.js +2 -4
  40. package/build/esm/context/locationContext/locationContext.d.ts +0 -1
  41. package/build/esm/icons/index.d.ts +0 -3
  42. package/build/esm/icons/index.js +0 -3
  43. package/build/esm/models/constructor-items/blocks.d.ts +7 -4
  44. package/build/esm/models/index.d.ts +0 -1
  45. package/build/esm/models/index.js +0 -1
  46. package/build/esm/text-transform/blocks.js +11 -4
  47. package/build/esm/text-transform/utils.js +1 -1
  48. package/package.json +1 -1
  49. package/server/models/constructor-items/blocks.d.ts +7 -4
  50. package/server/models/index.d.ts +0 -1
  51. package/server/models/index.js +0 -1
  52. package/server/text-transform/blocks.js +11 -4
  53. package/server/text-transform/utils.js +1 -1
  54. package/styles/mixins.scss +0 -38
  55. package/build/cjs/components/navigation/components/Header/Header.css +0 -85
  56. package/build/cjs/components/navigation/components/Header/Header.d.ts +0 -28
  57. package/build/cjs/components/navigation/components/Header/Header.js +0 -81
  58. package/build/cjs/components/navigation/components/Logo/Logo.css +0 -23
  59. package/build/cjs/components/navigation/components/Logo/Logo.d.ts +0 -7
  60. package/build/cjs/components/navigation/components/Logo/Logo.js +0 -17
  61. package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.css +0 -58
  62. package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.d.ts +0 -13
  63. package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.js +0 -45
  64. package/build/cjs/components/navigation/components/Navigation/Navigation.css +0 -43
  65. package/build/cjs/components/navigation/components/Navigation/Navigation.d.ts +0 -11
  66. package/build/cjs/components/navigation/components/Navigation/Navigation.js +0 -70
  67. package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.css +0 -41
  68. package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.d.ts +0 -12
  69. package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.js +0 -55
  70. package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.css +0 -33
  71. package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.d.ts +0 -10
  72. package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.js +0 -46
  73. package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.css +0 -20
  74. package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.d.ts +0 -7
  75. package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.js +0 -14
  76. package/build/cjs/icons/NavigationArrow.d.ts +0 -2
  77. package/build/cjs/icons/NavigationArrow.js +0 -9
  78. package/build/cjs/icons/NavigationClose.d.ts +0 -2
  79. package/build/cjs/icons/NavigationClose.js +0 -9
  80. package/build/cjs/icons/NavigationOpen.d.ts +0 -2
  81. package/build/cjs/icons/NavigationOpen.js +0 -11
  82. package/build/cjs/models/navigation.d.ts +0 -59
  83. package/build/cjs/models/navigation.js +0 -10
  84. package/build/esm/components/navigation/components/Header/Header.css +0 -85
  85. package/build/esm/components/navigation/components/Header/Header.d.ts +0 -29
  86. package/build/esm/components/navigation/components/Header/Header.js +0 -79
  87. package/build/esm/components/navigation/components/Logo/Logo.css +0 -23
  88. package/build/esm/components/navigation/components/Logo/Logo.d.ts +0 -8
  89. package/build/esm/components/navigation/components/Logo/Logo.js +0 -15
  90. package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.css +0 -58
  91. package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.d.ts +0 -14
  92. package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.js +0 -43
  93. package/build/esm/components/navigation/components/Navigation/Navigation.css +0 -43
  94. package/build/esm/components/navigation/components/Navigation/Navigation.d.ts +0 -12
  95. package/build/esm/components/navigation/components/Navigation/Navigation.js +0 -69
  96. package/build/esm/components/navigation/components/NavigationItem/NavigationItem.css +0 -41
  97. package/build/esm/components/navigation/components/NavigationItem/NavigationItem.d.ts +0 -13
  98. package/build/esm/components/navigation/components/NavigationItem/NavigationItem.js +0 -54
  99. package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.css +0 -33
  100. package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.d.ts +0 -11
  101. package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.js +0 -42
  102. package/build/esm/components/navigation/components/SocialIcon/SocialIcon.css +0 -20
  103. package/build/esm/components/navigation/components/SocialIcon/SocialIcon.d.ts +0 -8
  104. package/build/esm/components/navigation/components/SocialIcon/SocialIcon.js +0 -12
  105. package/build/esm/icons/NavigationArrow.d.ts +0 -2
  106. package/build/esm/icons/NavigationArrow.js +0 -4
  107. package/build/esm/icons/NavigationClose.d.ts +0 -2
  108. package/build/esm/icons/NavigationClose.js +0 -4
  109. package/build/esm/icons/NavigationOpen.d.ts +0 -2
  110. package/build/esm/icons/NavigationOpen.js +0 -6
  111. package/build/esm/models/navigation.d.ts +0 -59
  112. package/build/esm/models/navigation.js +0 -7
  113. package/server/models/navigation.d.ts +0 -59
  114. package/server/models/navigation.js +0 -10
@@ -1,68 +1,94 @@
1
- .pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
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-TabsBlock__block-title {
7
+ .pc-tabs-block__block-title {
8
8
  margin-bottom: 12px;
9
9
  }
10
- .pc-TabsBlock__tabs.pc-TabsBlock__tabs {
11
- flex-wrap: nowrap;
12
- overflow-x: auto;
13
- margin-bottom: 32px;
10
+ .pc-tabs-block__block-title_centered {
11
+ margin: 0 auto 12px;
12
+ text-align: center;
14
13
  }
15
-
16
- .pc-TabsBlock__image {
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-TabsBlock__image, .pc-TabsBlock__media {
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-TabsBlock__caption {
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-TabsBlock__content {
42
+ .pc-tabs-block__content {
34
43
  display: flex;
35
44
  flex-direction: column;
36
45
  }
37
- .pc-TabsBlock__content-wrapper_margin {
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-TabsBlock__content-title {
55
+ .pc-tabs-block__content-title {
41
56
  margin: 0 auto 12px;
42
57
  }
43
- .pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
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-TabsBlock__content-wrapper_margin {
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-TabsBlock.pc-AnimateBlock .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__media {
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-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__media {
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-TabsBlock.pc-AnimateBlock .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__image {
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-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__image {
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 b = (0, utils_1.block)('TabsBlock');
18
- const TabsBlock = ({ items, title, description, animated }) => {
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(uikit_1.Tabs, { className: b('tabs'), items: tabs, activeTab: activeTab, onSelectTab: setActiveTab, size: "l" }),
33
- activeTabData && (react_1.default.createElement(grid_1.Row, null,
34
- showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
35
- all: grid_1.GridColumnOrderClasses.Last,
36
- md: grid_1.GridColumnOrderClasses.First,
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;
@@ -0,0 +1,3 @@
1
+ .pc-Image {
2
+ height: 100%;
3
+ }
@@ -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", null,
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)` }))),
@@ -1,7 +1,6 @@
1
1
  import { WithChildren } from '../../models';
2
2
  export interface RouterLinkProps {
3
3
  href: string;
4
- [key: string]: any;
5
4
  }
6
5
  declare const RouterLink: ({ href, children }: WithChildren<RouterLinkProps>) => JSX.Element;
7
6
  export default RouterLink;
@@ -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.round(getHeight(ref.current.offsetWidth)) : undefined);
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.Header = 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;
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, navigationData, } = props;
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
- themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
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,
@@ -16,6 +16,5 @@ export declare type LocationContextProps = {
16
16
  pathname?: string;
17
17
  hostname?: string;
18
18
  Link?: RouterLink;
19
- asPath?: string;
20
19
  };
21
20
  export declare const LocationContext: React.Context<LocationContextProps>;
@@ -6,6 +6,3 @@ export * from './Github';
6
6
  export * from './NavigationChevron';
7
7
  export * from './PlayVideo';
8
8
  export * from './PreviewClose';
9
- export * from './NavigationClose';
10
- export * from './NavigationOpen';
11
- export * from './NavigationArrow';
@@ -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
- title: string;
227
- text: string;
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 {
@@ -4,4 +4,3 @@ export * from './common';
4
4
  export * from './components';
5
5
  export * from './guards';
6
6
  export * from './react';
7
- export * from './navigation';
@@ -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
- const transformedBlockItems = block.items.map((item) => {
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: parseItems,
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: [],