@gravity-ui/page-constructor 1.0.4 → 1.1.0-alpha.0

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/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.1.0](https://github.com/gravity-ui/page-constructor/compare/v1.0.5...v1.1.0) (2022-10-10)
4
+
5
+
6
+ ### Features
7
+
8
+ * remove i18n from peers ([87f4c4d](https://github.com/gravity-ui/page-constructor/commit/87f4c4d4bb31179db04267a1ad37ba19bf4c222d))
9
+
10
+ ## [1.0.5](https://github.com/gravity-ui/page-constructor/compare/v1.0.4...v1.0.5) (2022-10-07)
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * remove alpha tag ([5c0f70c](https://github.com/gravity-ui/page-constructor/commit/5c0f70c983583810c08363c63a5a80d84e95c621))
16
+
3
17
  ## [1.0.4](https://github.com/gravity-ui/page-constructor/compare/v1.0.3...v1.0.4) (2022-10-07)
4
18
 
5
19
 
@@ -1,68 +1,32 @@
1
- .pc-info-block__content-title, .pc-info-block__sections-title {
2
- margin: 0;
3
- }
4
-
5
1
  /* use this for style redefinitions to awoid problems with
6
2
  unpredictable css rules order in build */
7
- .pc-info-block_theme_dark {
8
- color: var(--yc-color-text-light-primary);
9
- }
10
- .pc-info-block_theme_dark h1,
11
- .pc-info-block_theme_dark h2,
12
- .pc-info-block_theme_dark h3,
13
- .pc-info-block_theme_dark h4,
14
- .pc-info-block_theme_dark h5,
15
- .pc-info-block_theme_dark h6,
16
- .pc-info-block_theme_dark .yfm {
17
- color: var(--yc-color-text-light-primary);
18
- }
19
- .pc-info-block__content-title, .pc-info-block__sections-title {
20
- font-size: var(--yc-text-display-2-font-size);
21
- line-height: var(--yc-text-display-2-line-height);
22
- color: var(--pc-text-header-color);
23
- font-weight: var(--yc-text-accent-font-weight);
24
- }
25
- @media (max-width: 576px) {
26
- .pc-info-block__content-title, .pc-info-block__sections-title {
27
- font-size: var(--yc-text-display-1-font-size);
28
- line-height: var(--yc-text-display-1-line-height);
29
- }
30
- }
31
- .pc-info-block__content {
3
+ .pc-info-block__container {
32
4
  background-color: var(--yc-color-base-special);
33
- padding: 96px 64px 128px;
5
+ padding: 96px 64px;
34
6
  border-radius: var(--pc-border-radius);
35
7
  }
36
- .pc-info-block__buttons {
37
- margin-top: 16px;
38
- }
39
- .pc-info-block__button {
40
- margin-top: 16px;
41
- }
42
- .pc-info-block__button:not(:last-child) {
43
- margin-right: 16px;
44
- }
45
- .pc-info-block__links {
46
- font-size: var(--yc-text-body-2-font-size);
47
- line-height: var(--yc-text-body-2-line-height);
48
- margin-top: 20px;
49
- }
50
- .pc-info-block__link {
51
- margin-top: 0;
52
- }
53
- .pc-info-block__link + .pc-info-block__link {
54
- margin-top: 12px;
8
+ .pc-info-block__left, .pc-info-block__right {
9
+ padding-right: 96px;
10
+ padding-bottom: 16px;
55
11
  }
56
12
  @media (max-width: 1081px) {
57
- .pc-info-block__content {
13
+ .pc-info-block__left, .pc-info-block__right {
14
+ padding-bottom: 0;
15
+ }
16
+ .pc-info-block__container {
58
17
  padding: 96px 64px;
59
18
  }
60
19
  }
20
+ @media (max-width: 769px) {
21
+ .pc-info-block__left {
22
+ margin-bottom: 48px;
23
+ }
24
+ .pc-info-block__left, .pc-info-block__right {
25
+ padding-right: 0;
26
+ }
27
+ }
61
28
  @media (max-width: 577px) {
62
- .pc-info-block__content {
29
+ .pc-info-block__container {
63
30
  padding: 64px 32px;
64
31
  }
65
- .pc-info-block__buttons {
66
- margin-bottom: 64px;
67
- }
68
32
  }
@@ -5,24 +5,32 @@ const tslib_1 = require("tslib");
5
5
  const react_1 = (0, tslib_1.__importStar)(require("react"));
6
6
  const utils_1 = require("../../utils");
7
7
  const grid_1 = require("../../grid");
8
- const Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button/Button"));
9
- const Link_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Link"));
10
8
  const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
9
+ const Content_1 = (0, tslib_1.__importDefault)(require("../../sub-blocks/Content/Content"));
11
10
  const b = (0, utils_1.block)('info-block');
11
+ const sizes = { md: 6, all: 12 };
12
12
  const InfoBlock = (props) => {
13
- const { backgroundColor, theme: textTheme = 'dark', buttons, title, sectionsTitle, links, } = props;
13
+ const { backgroundColor, theme: blockTheme = 'dark', buttons = [], title, sectionsTitle, links = [], rightContent = {}, leftContent = {}, } = props;
14
14
  const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
15
- return (react_1.default.createElement("div", { className: b({ theme: textTheme }) },
16
- react_1.default.createElement("div", { className: b('content'), style: { backgroundColor: (0, utils_1.getThemedValue)(backgroundColor, theme) } },
15
+ const contentTheme = blockTheme === 'dark' ? 'dark' : 'default';
16
+ const rightLinks = [
17
+ ...((rightContent === null || rightContent === void 0 ? void 0 : rightContent.links) || []),
18
+ ...links.map((link) => (Object.assign(Object.assign({}, link), { arrow: true, theme: 'normal' }))),
19
+ ];
20
+ const leftButtons = [...buttons, ...((leftContent === null || leftContent === void 0 ? void 0 : leftContent.buttons) || [])];
21
+ const commonProps = {
22
+ colSizes: { all: 12, md: 12 },
23
+ className: b('content'),
24
+ theme: contentTheme,
25
+ };
26
+ return (react_1.default.createElement("div", { className: b() },
27
+ react_1.default.createElement("div", { className: b('container'), style: { backgroundColor: (0, utils_1.getThemedValue)(backgroundColor, theme) } },
17
28
  react_1.default.createElement(grid_1.Grid, null,
18
29
  react_1.default.createElement(grid_1.Row, null,
19
- react_1.default.createElement(grid_1.Col, { sizes: { lg: 4, sm: 6, all: 12 } },
20
- react_1.default.createElement("h2", { className: b('content-title') }, title),
21
- buttons && (react_1.default.createElement("div", { className: b('buttons') }, buttons.map((button, index) => (react_1.default.createElement(Button_1.default, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
22
- react_1.default.createElement(grid_1.Col, { sizes: { lg: 4, sm: 6, all: 12 }, offsets: { lg: 2, md: 0 } },
23
- react_1.default.createElement("h2", { className: b('sections-title') }, sectionsTitle),
24
- react_1.default.createElement("div", { className: b('links') }, links &&
25
- links.map((link, index) => (react_1.default.createElement(Link_1.default, Object.assign({}, link, { key: index, className: b('link'), colorTheme: textTheme, theme: 'normal', arrow: true })))))))))));
30
+ react_1.default.createElement(grid_1.Col, { sizes: sizes, className: b('left') },
31
+ react_1.default.createElement(Content_1.default, Object.assign({ title: title || (leftContent === null || leftContent === void 0 ? void 0 : leftContent.title), text: leftContent === null || leftContent === void 0 ? void 0 : leftContent.text, links: leftContent === null || leftContent === void 0 ? void 0 : leftContent.links, buttons: leftButtons, additionalInfo: leftContent === null || leftContent === void 0 ? void 0 : leftContent.additionalInfo }, commonProps))),
32
+ react_1.default.createElement(grid_1.Col, { sizes: sizes, className: b('right') },
33
+ react_1.default.createElement(Content_1.default, Object.assign({ title: sectionsTitle || (rightContent === null || rightContent === void 0 ? void 0 : rightContent.title), text: rightContent === null || rightContent === void 0 ? void 0 : rightContent.text, links: rightLinks, buttons: rightContent === null || rightContent === void 0 ? void 0 : rightContent.buttons, additionalInfo: rightContent === null || rightContent === void 0 ? void 0 : rightContent.additionalInfo }, commonProps))))))));
26
34
  };
27
35
  exports.InfoBlock = InfoBlock;
28
36
  exports.default = exports.InfoBlock;
@@ -45,6 +45,136 @@ export declare const InfoBlock: {
45
45
  };
46
46
  };
47
47
  };
48
+ leftContent: {
49
+ additionalProperties: boolean;
50
+ properties: Partial<{
51
+ title: {
52
+ oneOf: ({
53
+ type: string;
54
+ additionalProperties: boolean;
55
+ required: string[];
56
+ properties: {
57
+ text: {
58
+ type: string;
59
+ };
60
+ textSize: {
61
+ type: string;
62
+ enum: string[];
63
+ };
64
+ url: {
65
+ type: string;
66
+ };
67
+ resetMargin: {
68
+ type: string;
69
+ };
70
+ };
71
+ } | {
72
+ type: string;
73
+ })[];
74
+ };
75
+ text: {
76
+ type: string;
77
+ };
78
+ additionalInfo: {
79
+ type: string;
80
+ };
81
+ size: {
82
+ type: string;
83
+ enum: string[];
84
+ };
85
+ links: {
86
+ type: string;
87
+ items: {
88
+ type: string;
89
+ properties: {
90
+ when: {
91
+ type: string;
92
+ };
93
+ };
94
+ };
95
+ };
96
+ buttons: {
97
+ type: string;
98
+ items: {
99
+ type: string;
100
+ properties: {
101
+ when: {
102
+ type: string;
103
+ };
104
+ };
105
+ };
106
+ };
107
+ theme: {
108
+ type: string;
109
+ enum: string[];
110
+ };
111
+ }>;
112
+ };
113
+ rightContent: {
114
+ additionalProperties: boolean;
115
+ properties: Partial<{
116
+ title: {
117
+ oneOf: ({
118
+ type: string;
119
+ additionalProperties: boolean;
120
+ required: string[];
121
+ properties: {
122
+ text: {
123
+ type: string;
124
+ };
125
+ textSize: {
126
+ type: string;
127
+ enum: string[];
128
+ };
129
+ url: {
130
+ type: string;
131
+ };
132
+ resetMargin: {
133
+ type: string;
134
+ };
135
+ };
136
+ } | {
137
+ type: string;
138
+ })[];
139
+ };
140
+ text: {
141
+ type: string;
142
+ };
143
+ additionalInfo: {
144
+ type: string;
145
+ };
146
+ size: {
147
+ type: string;
148
+ enum: string[];
149
+ };
150
+ links: {
151
+ type: string;
152
+ items: {
153
+ type: string;
154
+ properties: {
155
+ when: {
156
+ type: string;
157
+ };
158
+ };
159
+ };
160
+ };
161
+ buttons: {
162
+ type: string;
163
+ items: {
164
+ type: string;
165
+ properties: {
166
+ when: {
167
+ type: string;
168
+ };
169
+ };
170
+ };
171
+ };
172
+ theme: {
173
+ type: string;
174
+ enum: string[];
175
+ };
176
+ }>;
177
+ };
48
178
  type: {};
49
179
  when: {};
50
180
  };
@@ -1,8 +1,15 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.InfoBlock = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
4
6
  const utils_1 = require("../../schema/validators/utils");
5
7
  const common_1 = require("../../schema/validators/common");
8
+ const schema_1 = require("../../sub-blocks/Content/schema");
9
+ const ContentProps = {
10
+ additionalProperties: false,
11
+ properties: lodash_1.default.omit(schema_1.ContentBase, ['size', 'colSizes', 'theme']),
12
+ };
6
13
  exports.InfoBlock = {
7
14
  'info-block': {
8
15
  additionalProperties: false,
@@ -13,6 +20,6 @@ exports.InfoBlock = {
13
20
  type: 'string',
14
21
  }), sectionsTitle: {
15
22
  type: 'string',
16
- }, buttons: (0, utils_1.filteredArray)(common_1.ButtonBlock), theme: common_1.ThemeProps, links: (0, utils_1.filteredArray)(common_1.LinkProps) }),
23
+ }, buttons: (0, utils_1.filteredArray)(common_1.ButtonBlock), theme: common_1.ThemeProps, links: (0, utils_1.filteredArray)(common_1.LinkProps), leftContent: ContentProps, rightContent: ContentProps }),
17
24
  },
18
25
  };
@@ -187,10 +187,16 @@ export interface PreviewBlockProps extends Animatable {
187
187
  export interface InfoBlockProps {
188
188
  theme?: TextTheme;
189
189
  backgroundColor?: ThemeSupporting<string>;
190
- title: string;
190
+ /** @deprecated **/
191
+ title?: string;
192
+ /** @deprecated **/
191
193
  buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];
192
- sectionsTitle: string;
194
+ /** @deprecated **/
195
+ sectionsTitle?: string;
196
+ /** @deprecated **/
193
197
  links?: Pick<LinkProps, 'text' | 'url'>[];
198
+ leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
199
+ rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
194
200
  }
195
201
  export interface SecurityBlockPoint {
196
202
  img: string;
@@ -32,7 +32,7 @@ unpredictable css rules order in build */
32
32
  margin-right: 12px;
33
33
  }
34
34
  .pc-content__link {
35
- display: inline-block;
35
+ display: block;
36
36
  margin-right: 32px;
37
37
  }
38
38
  .pc-content_centered.pc-content_centered {
@@ -50,6 +50,9 @@ unpredictable css rules order in build */
50
50
  .pc-content_size_s .pc-content__text_without-title {
51
51
  margin-top: 0;
52
52
  }
53
+ .pc-content_size_s .pc-content__text .yfm_constructor p {
54
+ margin-bottom: 8px;
55
+ }
53
56
  .pc-content_size_s .pc-content__links,
54
57
  .pc-content_size_s .pc-content__link,
55
58
  .pc-content_size_s .pc-content__buttons,
@@ -102,6 +105,7 @@ unpredictable css rules order in build */
102
105
  .pc-content_theme_dark .pc-content__title a {
103
106
  color: var(--yc-color-text-light-primary);
104
107
  text-decoration: underline;
108
+ text-decoration: none;
105
109
  }
106
110
  .pc-content_theme_dark .pc-content__title a:hover {
107
111
  color: var(--yc-color-text-light-secondary);
@@ -133,6 +137,7 @@ unpredictable css rules order in build */
133
137
  .pc-content_theme_light .pc-content__title a {
134
138
  color: var(--yc-color-text-dark-primary);
135
139
  text-decoration: underline;
140
+ text-decoration: none;
136
141
  }
137
142
  .pc-content_theme_light .pc-content__title a:hover {
138
143
  color: var(--yc-color-text-dark-secondary);
@@ -302,6 +302,18 @@ const config = {
302
302
  transformer: yfmTransformer,
303
303
  },
304
304
  ],
305
+ [models_1.BlockType.InfoBlock]: [
306
+ {
307
+ fields: ['rightContent', 'leftContent'],
308
+ transformer: yfmTransformer,
309
+ parser: parseContentLayout,
310
+ },
311
+ {
312
+ fields: ['rightContent', 'leftContent'],
313
+ transformer: typografTransformer,
314
+ parser: parseContentLayoutTitle,
315
+ },
316
+ ],
305
317
  };
306
318
  function addRandomOrder(block) {
307
319
  if (block) {
@@ -1,68 +1,32 @@
1
- .pc-info-block__content-title, .pc-info-block__sections-title {
2
- margin: 0;
3
- }
4
-
5
1
  /* use this for style redefinitions to awoid problems with
6
2
  unpredictable css rules order in build */
7
- .pc-info-block_theme_dark {
8
- color: var(--yc-color-text-light-primary);
9
- }
10
- .pc-info-block_theme_dark h1,
11
- .pc-info-block_theme_dark h2,
12
- .pc-info-block_theme_dark h3,
13
- .pc-info-block_theme_dark h4,
14
- .pc-info-block_theme_dark h5,
15
- .pc-info-block_theme_dark h6,
16
- .pc-info-block_theme_dark .yfm {
17
- color: var(--yc-color-text-light-primary);
18
- }
19
- .pc-info-block__content-title, .pc-info-block__sections-title {
20
- font-size: var(--yc-text-display-2-font-size);
21
- line-height: var(--yc-text-display-2-line-height);
22
- color: var(--pc-text-header-color);
23
- font-weight: var(--yc-text-accent-font-weight);
24
- }
25
- @media (max-width: 576px) {
26
- .pc-info-block__content-title, .pc-info-block__sections-title {
27
- font-size: var(--yc-text-display-1-font-size);
28
- line-height: var(--yc-text-display-1-line-height);
29
- }
30
- }
31
- .pc-info-block__content {
3
+ .pc-info-block__container {
32
4
  background-color: var(--yc-color-base-special);
33
- padding: 96px 64px 128px;
5
+ padding: 96px 64px;
34
6
  border-radius: var(--pc-border-radius);
35
7
  }
36
- .pc-info-block__buttons {
37
- margin-top: 16px;
38
- }
39
- .pc-info-block__button {
40
- margin-top: 16px;
41
- }
42
- .pc-info-block__button:not(:last-child) {
43
- margin-right: 16px;
44
- }
45
- .pc-info-block__links {
46
- font-size: var(--yc-text-body-2-font-size);
47
- line-height: var(--yc-text-body-2-line-height);
48
- margin-top: 20px;
49
- }
50
- .pc-info-block__link {
51
- margin-top: 0;
52
- }
53
- .pc-info-block__link + .pc-info-block__link {
54
- margin-top: 12px;
8
+ .pc-info-block__left, .pc-info-block__right {
9
+ padding-right: 96px;
10
+ padding-bottom: 16px;
55
11
  }
56
12
  @media (max-width: 1081px) {
57
- .pc-info-block__content {
13
+ .pc-info-block__left, .pc-info-block__right {
14
+ padding-bottom: 0;
15
+ }
16
+ .pc-info-block__container {
58
17
  padding: 96px 64px;
59
18
  }
60
19
  }
20
+ @media (max-width: 769px) {
21
+ .pc-info-block__left {
22
+ margin-bottom: 48px;
23
+ }
24
+ .pc-info-block__left, .pc-info-block__right {
25
+ padding-right: 0;
26
+ }
27
+ }
61
28
  @media (max-width: 577px) {
62
- .pc-info-block__content {
29
+ .pc-info-block__container {
63
30
  padding: 64px 32px;
64
31
  }
65
- .pc-info-block__buttons {
66
- margin-bottom: 64px;
67
- }
68
32
  }
@@ -1,24 +1,32 @@
1
1
  import React, { useContext } from 'react';
2
2
  import { block, getThemedValue } from '../../utils';
3
3
  import { Grid, Row, Col } from '../../grid';
4
- import Button from '../../components/Button/Button';
5
- import Link from '../../components/Link/Link';
6
4
  import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
5
+ import Content from '../../sub-blocks/Content/Content';
7
6
  import './Info.css';
8
7
  const b = block('info-block');
8
+ const sizes = { md: 6, all: 12 };
9
9
  export const InfoBlock = (props) => {
10
- const { backgroundColor, theme: textTheme = 'dark', buttons, title, sectionsTitle, links, } = props;
10
+ const { backgroundColor, theme: blockTheme = 'dark', buttons = [], title, sectionsTitle, links = [], rightContent = {}, leftContent = {}, } = props;
11
11
  const { themeValue: theme } = useContext(ThemeValueContext);
12
- return (React.createElement("div", { className: b({ theme: textTheme }) },
13
- React.createElement("div", { className: b('content'), style: { backgroundColor: getThemedValue(backgroundColor, theme) } },
12
+ const contentTheme = blockTheme === 'dark' ? 'dark' : 'default';
13
+ const rightLinks = [
14
+ ...((rightContent === null || rightContent === void 0 ? void 0 : rightContent.links) || []),
15
+ ...links.map((link) => (Object.assign(Object.assign({}, link), { arrow: true, theme: 'normal' }))),
16
+ ];
17
+ const leftButtons = [...buttons, ...((leftContent === null || leftContent === void 0 ? void 0 : leftContent.buttons) || [])];
18
+ const commonProps = {
19
+ colSizes: { all: 12, md: 12 },
20
+ className: b('content'),
21
+ theme: contentTheme,
22
+ };
23
+ return (React.createElement("div", { className: b() },
24
+ React.createElement("div", { className: b('container'), style: { backgroundColor: getThemedValue(backgroundColor, theme) } },
14
25
  React.createElement(Grid, null,
15
26
  React.createElement(Row, null,
16
- React.createElement(Col, { sizes: { lg: 4, sm: 6, all: 12 } },
17
- React.createElement("h2", { className: b('content-title') }, title),
18
- buttons && (React.createElement("div", { className: b('buttons') }, buttons.map((button, index) => (React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
19
- React.createElement(Col, { sizes: { lg: 4, sm: 6, all: 12 }, offsets: { lg: 2, md: 0 } },
20
- React.createElement("h2", { className: b('sections-title') }, sectionsTitle),
21
- React.createElement("div", { className: b('links') }, links &&
22
- links.map((link, index) => (React.createElement(Link, Object.assign({}, link, { key: index, className: b('link'), colorTheme: textTheme, theme: 'normal', arrow: true })))))))))));
27
+ React.createElement(Col, { sizes: sizes, className: b('left') },
28
+ React.createElement(Content, Object.assign({ title: title || (leftContent === null || leftContent === void 0 ? void 0 : leftContent.title), text: leftContent === null || leftContent === void 0 ? void 0 : leftContent.text, links: leftContent === null || leftContent === void 0 ? void 0 : leftContent.links, buttons: leftButtons, additionalInfo: leftContent === null || leftContent === void 0 ? void 0 : leftContent.additionalInfo }, commonProps))),
29
+ React.createElement(Col, { sizes: sizes, className: b('right') },
30
+ React.createElement(Content, Object.assign({ title: sectionsTitle || (rightContent === null || rightContent === void 0 ? void 0 : rightContent.title), text: rightContent === null || rightContent === void 0 ? void 0 : rightContent.text, links: rightLinks, buttons: rightContent === null || rightContent === void 0 ? void 0 : rightContent.buttons, additionalInfo: rightContent === null || rightContent === void 0 ? void 0 : rightContent.additionalInfo }, commonProps))))))));
23
31
  };
24
32
  export default InfoBlock;
@@ -45,6 +45,136 @@ export declare const InfoBlock: {
45
45
  };
46
46
  };
47
47
  };
48
+ leftContent: {
49
+ additionalProperties: boolean;
50
+ properties: Partial<{
51
+ title: {
52
+ oneOf: ({
53
+ type: string;
54
+ additionalProperties: boolean;
55
+ required: string[];
56
+ properties: {
57
+ text: {
58
+ type: string;
59
+ };
60
+ textSize: {
61
+ type: string;
62
+ enum: string[];
63
+ };
64
+ url: {
65
+ type: string;
66
+ };
67
+ resetMargin: {
68
+ type: string;
69
+ };
70
+ };
71
+ } | {
72
+ type: string;
73
+ })[];
74
+ };
75
+ text: {
76
+ type: string;
77
+ };
78
+ additionalInfo: {
79
+ type: string;
80
+ };
81
+ size: {
82
+ type: string;
83
+ enum: string[];
84
+ };
85
+ links: {
86
+ type: string;
87
+ items: {
88
+ type: string;
89
+ properties: {
90
+ when: {
91
+ type: string;
92
+ };
93
+ };
94
+ };
95
+ };
96
+ buttons: {
97
+ type: string;
98
+ items: {
99
+ type: string;
100
+ properties: {
101
+ when: {
102
+ type: string;
103
+ };
104
+ };
105
+ };
106
+ };
107
+ theme: {
108
+ type: string;
109
+ enum: string[];
110
+ };
111
+ }>;
112
+ };
113
+ rightContent: {
114
+ additionalProperties: boolean;
115
+ properties: Partial<{
116
+ title: {
117
+ oneOf: ({
118
+ type: string;
119
+ additionalProperties: boolean;
120
+ required: string[];
121
+ properties: {
122
+ text: {
123
+ type: string;
124
+ };
125
+ textSize: {
126
+ type: string;
127
+ enum: string[];
128
+ };
129
+ url: {
130
+ type: string;
131
+ };
132
+ resetMargin: {
133
+ type: string;
134
+ };
135
+ };
136
+ } | {
137
+ type: string;
138
+ })[];
139
+ };
140
+ text: {
141
+ type: string;
142
+ };
143
+ additionalInfo: {
144
+ type: string;
145
+ };
146
+ size: {
147
+ type: string;
148
+ enum: string[];
149
+ };
150
+ links: {
151
+ type: string;
152
+ items: {
153
+ type: string;
154
+ properties: {
155
+ when: {
156
+ type: string;
157
+ };
158
+ };
159
+ };
160
+ };
161
+ buttons: {
162
+ type: string;
163
+ items: {
164
+ type: string;
165
+ properties: {
166
+ when: {
167
+ type: string;
168
+ };
169
+ };
170
+ };
171
+ };
172
+ theme: {
173
+ type: string;
174
+ enum: string[];
175
+ };
176
+ }>;
177
+ };
48
178
  type: {};
49
179
  when: {};
50
180
  };
@@ -1,5 +1,11 @@
1
+ import _ from 'lodash';
1
2
  import { filteredArray } from '../../schema/validators/utils';
2
3
  import { BaseProps, LinkProps, ThemeProps, withTheme, ButtonBlock, } from '../../schema/validators/common';
4
+ import { ContentBase } from '../../sub-blocks/Content/schema';
5
+ const ContentProps = {
6
+ additionalProperties: false,
7
+ properties: _.omit(ContentBase, ['size', 'colSizes', 'theme']),
8
+ };
3
9
  export const InfoBlock = {
4
10
  'info-block': {
5
11
  additionalProperties: false,
@@ -10,6 +16,6 @@ export const InfoBlock = {
10
16
  type: 'string',
11
17
  }), sectionsTitle: {
12
18
  type: 'string',
13
- }, buttons: filteredArray(ButtonBlock), theme: ThemeProps, links: filteredArray(LinkProps) }),
19
+ }, buttons: filteredArray(ButtonBlock), theme: ThemeProps, links: filteredArray(LinkProps), leftContent: ContentProps, rightContent: ContentProps }),
14
20
  },
15
21
  };
@@ -187,10 +187,16 @@ export interface PreviewBlockProps extends Animatable {
187
187
  export interface InfoBlockProps {
188
188
  theme?: TextTheme;
189
189
  backgroundColor?: ThemeSupporting<string>;
190
- title: string;
190
+ /** @deprecated **/
191
+ title?: string;
192
+ /** @deprecated **/
191
193
  buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];
192
- sectionsTitle: string;
194
+ /** @deprecated **/
195
+ sectionsTitle?: string;
196
+ /** @deprecated **/
193
197
  links?: Pick<LinkProps, 'text' | 'url'>[];
198
+ leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
199
+ rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
194
200
  }
195
201
  export interface SecurityBlockPoint {
196
202
  img: string;
@@ -32,7 +32,7 @@ unpredictable css rules order in build */
32
32
  margin-right: 12px;
33
33
  }
34
34
  .pc-content__link {
35
- display: inline-block;
35
+ display: block;
36
36
  margin-right: 32px;
37
37
  }
38
38
  .pc-content_centered.pc-content_centered {
@@ -50,6 +50,9 @@ unpredictable css rules order in build */
50
50
  .pc-content_size_s .pc-content__text_without-title {
51
51
  margin-top: 0;
52
52
  }
53
+ .pc-content_size_s .pc-content__text .yfm_constructor p {
54
+ margin-bottom: 8px;
55
+ }
53
56
  .pc-content_size_s .pc-content__links,
54
57
  .pc-content_size_s .pc-content__link,
55
58
  .pc-content_size_s .pc-content__buttons,
@@ -102,6 +105,7 @@ unpredictable css rules order in build */
102
105
  .pc-content_theme_dark .pc-content__title a {
103
106
  color: var(--yc-color-text-light-primary);
104
107
  text-decoration: underline;
108
+ text-decoration: none;
105
109
  }
106
110
  .pc-content_theme_dark .pc-content__title a:hover {
107
111
  color: var(--yc-color-text-light-secondary);
@@ -133,6 +137,7 @@ unpredictable css rules order in build */
133
137
  .pc-content_theme_light .pc-content__title a {
134
138
  color: var(--yc-color-text-dark-primary);
135
139
  text-decoration: underline;
140
+ text-decoration: none;
136
141
  }
137
142
  .pc-content_theme_light .pc-content__title a:hover {
138
143
  color: var(--yc-color-text-dark-secondary);
@@ -296,6 +296,18 @@ const config = {
296
296
  transformer: yfmTransformer,
297
297
  },
298
298
  ],
299
+ [BlockType.InfoBlock]: [
300
+ {
301
+ fields: ['rightContent', 'leftContent'],
302
+ transformer: yfmTransformer,
303
+ parser: parseContentLayout,
304
+ },
305
+ {
306
+ fields: ['rightContent', 'leftContent'],
307
+ transformer: typografTransformer,
308
+ parser: parseContentLayoutTitle,
309
+ },
310
+ ],
299
311
  };
300
312
  function addRandomOrder(block) {
301
313
  if (block) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "1.0.4",
3
+ "version": "1.1.0-alpha.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -44,6 +44,7 @@
44
44
  "test": "echo TODO: add tests"
45
45
  },
46
46
  "dependencies": {
47
+ "@gravity-ui/i18n": "^1.0.0",
47
48
  "bem-cn-lite": "^4.0.0",
48
49
  "lodash": "^4.17.21",
49
50
  "react-player": "^2.9.0",
@@ -58,7 +59,6 @@
58
59
  "peerDependencies": {
59
60
  "react": "^16.0.0",
60
61
  "@gravity-ui/uikit": "^3.0.1",
61
- "@gravity-ui/i18n": "^1.0.0",
62
62
  "@doc-tools/transform": "^2.6.1"
63
63
  },
64
64
  "devDependencies": {
@@ -66,7 +66,6 @@
66
66
  "@commitlint/config-conventional": "^17.1.0",
67
67
  "@doc-tools/transform": "^2.12.0",
68
68
  "@gravity-ui/eslint-config": "^1.0.2",
69
- "@gravity-ui/i18n": "^1.0.0",
70
69
  "@gravity-ui/prettier-config": "^1.0.1",
71
70
  "@gravity-ui/stylelint-config": "^1.0.0",
72
71
  "@gravity-ui/tsconfig": "^1.0.0",
@@ -122,8 +121,5 @@
122
121
  "*.{json,yaml,yml,md}": [
123
122
  "prettier --write"
124
123
  ]
125
- },
126
- "publishConfig": {
127
- "tag": "alpha"
128
124
  }
129
125
  }
@@ -187,10 +187,16 @@ export interface PreviewBlockProps extends Animatable {
187
187
  export interface InfoBlockProps {
188
188
  theme?: TextTheme;
189
189
  backgroundColor?: ThemeSupporting<string>;
190
- title: string;
190
+ /** @deprecated **/
191
+ title?: string;
192
+ /** @deprecated **/
191
193
  buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];
192
- sectionsTitle: string;
194
+ /** @deprecated **/
195
+ sectionsTitle?: string;
196
+ /** @deprecated **/
193
197
  links?: Pick<LinkProps, 'text' | 'url'>[];
198
+ leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
199
+ rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
194
200
  }
195
201
  export interface SecurityBlockPoint {
196
202
  img: string;
@@ -315,6 +315,18 @@ const config = {
315
315
  transformer: yfmTransformer,
316
316
  },
317
317
  ],
318
+ [models_1.BlockType.InfoBlock]: [
319
+ {
320
+ fields: ['rightContent', 'leftContent'],
321
+ transformer: yfmTransformer,
322
+ parser: parseContentLayout,
323
+ },
324
+ {
325
+ fields: ['rightContent', 'leftContent'],
326
+ transformer: typografTransformer,
327
+ parser: parseContentLayoutTitle,
328
+ },
329
+ ],
318
330
  };
319
331
  function addRandomOrder(block) {
320
332
  if (block) {