@doyourjob/gravity-ui-page-constructor 5.31.49 → 5.31.51
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/Form/Form.css +2 -2
- package/build/cjs/blocks/Form/Form.js +4 -3
- package/build/cjs/blocks/Form/schema.d.ts +3 -0
- package/build/cjs/blocks/Form/schema.js +2 -0
- package/build/cjs/blocks/HighlightTable/HighlightTable.css +11 -0
- package/build/cjs/blocks/HighlightTable/HighlightTable.js +2 -1
- package/build/cjs/blocks/HighlightTable/schema.d.ts +6 -0
- package/build/cjs/blocks/HighlightTable/schema.js +5 -0
- package/build/cjs/models/constructor-items/blocks.d.ts +2 -0
- package/build/cjs/utils/background.js +3 -1
- package/build/esm/blocks/Form/Form.css +2 -2
- package/build/esm/blocks/Form/Form.js +4 -3
- package/build/esm/blocks/Form/schema.d.ts +3 -0
- package/build/esm/blocks/Form/schema.js +2 -0
- package/build/esm/blocks/HighlightTable/HighlightTable.css +11 -0
- package/build/esm/blocks/HighlightTable/HighlightTable.js +2 -1
- package/build/esm/blocks/HighlightTable/schema.d.ts +6 -0
- package/build/esm/blocks/HighlightTable/schema.js +5 -0
- package/build/esm/models/constructor-items/blocks.d.ts +2 -0
- package/build/esm/utils/background.js +3 -1
- package/package.json +1 -1
- package/schema/index.js +1 -1
- package/server/models/constructor-items/blocks.d.ts +2 -0
- package/server/utils/background.js +3 -1
- package/widget/index.js +1 -1
|
@@ -83,8 +83,8 @@ unpredictable css rules order in build */
|
|
|
83
83
|
.pc-form-block__row {
|
|
84
84
|
flex-direction: column;
|
|
85
85
|
}
|
|
86
|
-
.pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
|
|
87
|
-
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
|
|
86
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper:not(.pc-form-block__form-wrapper_full),
|
|
87
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper:not(.pc-form-block__form-wrapper_full),
|
|
88
88
|
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
|
|
89
89
|
max-width: 609px;
|
|
90
90
|
}
|
|
@@ -15,7 +15,7 @@ const b = (0, utils_1.block)('form-block');
|
|
|
15
15
|
const colSizes = { [grid_1.GridColumnSize.Lg]: 6, [grid_1.GridColumnSize.All]: 12 };
|
|
16
16
|
const FormBlock = (props) => {
|
|
17
17
|
var _a;
|
|
18
|
-
const { formData, title, textContent, textFormContent, direction = models_1.FormBlockDirection.Center, background, image, backgroundColor, slug, } = props;
|
|
18
|
+
const { formData, title, textContent, textFormContent, direction = models_1.FormBlockDirection.Center, fullWidth, background, image, backgroundColor, slug, } = props;
|
|
19
19
|
const [contentLoaded, setContentLoaded] = (0, react_1.useState)(false);
|
|
20
20
|
const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
|
|
21
21
|
const theme = (0, theme_1.useTheme)();
|
|
@@ -35,6 +35,7 @@ const FormBlock = (props) => {
|
|
|
35
35
|
(themedBackground.src ||
|
|
36
36
|
themedBackground.desktop ||
|
|
37
37
|
((_a = themedBackground.style) === null || _a === void 0 ? void 0 : _a.backgroundColor)));
|
|
38
|
+
const isFullWidthForm = direction === models_1.FormBlockDirection.Center && fullWidth;
|
|
38
39
|
const onContentLoad = (0, react_1.useCallback)(() => {
|
|
39
40
|
setContentLoaded(true);
|
|
40
41
|
}, []);
|
|
@@ -72,8 +73,8 @@ const FormBlock = (props) => {
|
|
|
72
73
|
}) },
|
|
73
74
|
react_1.default.createElement(grid_1.Col, { sizes: colSizes, className: b('content-col') }, textContent && (react_1.default.createElement("div", { className: b('content-wrapper') },
|
|
74
75
|
react_1.default.createElement(sub_blocks_1.Content, Object.assign({ theme: "default" }, textContent, { centered: direction === models_1.FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }))))),
|
|
75
|
-
react_1.default.createElement(grid_1.Col, { sizes: colSizes, className: b('form-col') },
|
|
76
|
-
react_1.default.createElement("div", { className: b('form-wrapper'), ref: refForm },
|
|
76
|
+
react_1.default.createElement(grid_1.Col, { sizes: isFullWidthForm ? { [grid_1.GridColumnSize.All]: 12 } : colSizes, className: b('form-col') },
|
|
77
|
+
react_1.default.createElement("div", { className: b('form-wrapper', { full: isFullWidthForm }), ref: refForm },
|
|
77
78
|
react_1.default.createElement("div", { className: b('full-form', {
|
|
78
79
|
hidden: !contentLoaded,
|
|
79
80
|
}) },
|
|
@@ -49,6 +49,8 @@ exports.FormBlock = {
|
|
|
49
49
|
Object.assign(Object.assign({}, schema_1.ImageBaseObjectProps), { properties: Object.assign(Object.assign({}, schema_1.ImageBaseObjectProps.properties), { border: common_1.BorderProps }), optionName: 'options' }),
|
|
50
50
|
Object.assign(Object.assign({}, schema_1.ImageDeviceProps), { properties: Object.assign(Object.assign({}, schema_1.ImageDeviceProps.properties), { border: common_1.BorderProps }), optionName: 'device options' }),
|
|
51
51
|
],
|
|
52
|
+
}, fullWidth: {
|
|
53
|
+
type: 'boolean',
|
|
52
54
|
} }),
|
|
53
55
|
},
|
|
54
56
|
};
|
|
@@ -22,6 +22,17 @@ unpredictable css rules order in build */
|
|
|
22
22
|
line-height: var(--g-text-display-1-line-height, var(--pc-text-display-1-line-height));
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
+
.pc-highlight-table-block__legend {
|
|
26
|
+
display: flex;
|
|
27
|
+
column-gap: 28px;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
margin-bottom: 12px;
|
|
31
|
+
}
|
|
32
|
+
.pc-highlight-table-block__legend-item {
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
}
|
|
25
36
|
.pc-highlight-table-block__table {
|
|
26
37
|
overflow: auto;
|
|
27
38
|
}
|
|
@@ -9,7 +9,7 @@ const components_1 = require("../../components");
|
|
|
9
9
|
const utils_1 = require("../../utils");
|
|
10
10
|
const b = (0, utils_1.block)('highlight-table-block');
|
|
11
11
|
const HighlightTableBlock = (props) => {
|
|
12
|
-
const { title, description, table } = props;
|
|
12
|
+
const { title, description, table, legend } = props;
|
|
13
13
|
const firstRow = table.content[0] || [];
|
|
14
14
|
const otherRows = table.content.slice(1);
|
|
15
15
|
const customColumnWidth = table.customColumnWidth || [];
|
|
@@ -73,6 +73,7 @@ const HighlightTableBlock = (props) => {
|
|
|
73
73
|
react_1.default.createElement(uikit_1.Text, { className: b('title'), variant: "header-2" }, title),
|
|
74
74
|
description && (react_1.default.createElement("div", { className: b('description') },
|
|
75
75
|
react_1.default.createElement(components_1.YFMWrapper, { content: description, modifiers: { constructor: true } }))),
|
|
76
|
+
(legend === null || legend === void 0 ? void 0 : legend.length) && (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement("div", { className: b('legend-item'), key: String(index) }, item))))),
|
|
76
77
|
react_1.default.createElement("div", { ref: tableRef, className: b('table') },
|
|
77
78
|
react_1.default.createElement("div", { ref: tableContentRef, className: b('content') },
|
|
78
79
|
react_1.default.createElement("div", { className: b('head') }, renderRow(firstRow, 0)),
|
|
@@ -302,6 +302,7 @@ export interface HighlightTableBlockProps {
|
|
|
302
302
|
title?: string;
|
|
303
303
|
description?: string;
|
|
304
304
|
table: HighlightTableData;
|
|
305
|
+
legend?: string[];
|
|
305
306
|
}
|
|
306
307
|
export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>, WithBorder {
|
|
307
308
|
tabName: string;
|
|
@@ -489,6 +490,7 @@ export interface FormBlockProps {
|
|
|
489
490
|
backgroundColor?: string;
|
|
490
491
|
image?: string;
|
|
491
492
|
slug?: string;
|
|
493
|
+
fullWidth?: boolean;
|
|
492
494
|
}
|
|
493
495
|
export type HeaderBlockModel = {
|
|
494
496
|
type: BlockType.HeaderBlock;
|
|
@@ -4,7 +4,7 @@ exports.getBlockBackgroundStyles = exports.normalizeBackgroundValue = void 0;
|
|
|
4
4
|
function normalizeBackgroundValue(str) {
|
|
5
5
|
if (!str)
|
|
6
6
|
return undefined;
|
|
7
|
-
return /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(str) ? `url(${str})` : str;
|
|
7
|
+
return /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(str) ? `url('${str}')` : str;
|
|
8
8
|
}
|
|
9
9
|
exports.normalizeBackgroundValue = normalizeBackgroundValue;
|
|
10
10
|
function getBlockBackgroundStyles(blockBackground) {
|
|
@@ -13,6 +13,8 @@ function getBlockBackgroundStyles(blockBackground) {
|
|
|
13
13
|
if (isStringBackground) {
|
|
14
14
|
return {
|
|
15
15
|
background: normalizeBackgroundValue(blockBackground),
|
|
16
|
+
backgroundSize: 'cover',
|
|
17
|
+
backgroundRepeat: 'no-repeat',
|
|
16
18
|
};
|
|
17
19
|
}
|
|
18
20
|
if (isObjectBackground) {
|
|
@@ -83,8 +83,8 @@ unpredictable css rules order in build */
|
|
|
83
83
|
.pc-form-block__row {
|
|
84
84
|
flex-direction: column;
|
|
85
85
|
}
|
|
86
|
-
.pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
|
|
87
|
-
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
|
|
86
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper:not(.pc-form-block__form-wrapper_full),
|
|
87
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper:not(.pc-form-block__form-wrapper_full),
|
|
88
88
|
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
|
|
89
89
|
max-width: 609px;
|
|
90
90
|
}
|
|
@@ -13,7 +13,7 @@ const b = block('form-block');
|
|
|
13
13
|
const colSizes = { [GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12 };
|
|
14
14
|
const FormBlock = (props) => {
|
|
15
15
|
var _a;
|
|
16
|
-
const { formData, title, textContent, textFormContent, direction = FormBlockDirection.Center, background, image, backgroundColor, slug, } = props;
|
|
16
|
+
const { formData, title, textContent, textFormContent, direction = FormBlockDirection.Center, fullWidth, background, image, backgroundColor, slug, } = props;
|
|
17
17
|
const [contentLoaded, setContentLoaded] = useState(false);
|
|
18
18
|
const isMobile = useContext(MobileContext);
|
|
19
19
|
const theme = useTheme();
|
|
@@ -33,6 +33,7 @@ const FormBlock = (props) => {
|
|
|
33
33
|
(themedBackground.src ||
|
|
34
34
|
themedBackground.desktop ||
|
|
35
35
|
((_a = themedBackground.style) === null || _a === void 0 ? void 0 : _a.backgroundColor)));
|
|
36
|
+
const isFullWidthForm = direction === FormBlockDirection.Center && fullWidth;
|
|
36
37
|
const onContentLoad = useCallback(() => {
|
|
37
38
|
setContentLoaded(true);
|
|
38
39
|
}, []);
|
|
@@ -70,8 +71,8 @@ const FormBlock = (props) => {
|
|
|
70
71
|
}) },
|
|
71
72
|
React.createElement(Col, { sizes: colSizes, className: b('content-col') }, textContent && (React.createElement("div", { className: b('content-wrapper') },
|
|
72
73
|
React.createElement(Content, Object.assign({ theme: "default" }, textContent, { centered: direction === FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }))))),
|
|
73
|
-
React.createElement(Col, { sizes: colSizes, className: b('form-col') },
|
|
74
|
-
React.createElement("div", { className: b('form-wrapper'), ref: refForm },
|
|
74
|
+
React.createElement(Col, { sizes: isFullWidthForm ? { [GridColumnSize.All]: 12 } : colSizes, className: b('form-col') },
|
|
75
|
+
React.createElement("div", { className: b('form-wrapper', { full: isFullWidthForm }), ref: refForm },
|
|
75
76
|
React.createElement("div", { className: b('full-form', {
|
|
76
77
|
hidden: !contentLoaded,
|
|
77
78
|
}) },
|
|
@@ -45,6 +45,8 @@ export const FormBlock = {
|
|
|
45
45
|
Object.assign(Object.assign({}, ImageBaseObjectProps), { properties: Object.assign(Object.assign({}, ImageBaseObjectProps.properties), { border: BorderProps }), optionName: 'options' }),
|
|
46
46
|
Object.assign(Object.assign({}, ImageDeviceProps), { properties: Object.assign(Object.assign({}, ImageDeviceProps.properties), { border: BorderProps }), optionName: 'device options' }),
|
|
47
47
|
],
|
|
48
|
+
}, fullWidth: {
|
|
49
|
+
type: 'boolean',
|
|
48
50
|
} }),
|
|
49
51
|
},
|
|
50
52
|
};
|
|
@@ -22,6 +22,17 @@ unpredictable css rules order in build */
|
|
|
22
22
|
line-height: var(--g-text-display-1-line-height, var(--pc-text-display-1-line-height));
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
+
.pc-highlight-table-block__legend {
|
|
26
|
+
display: flex;
|
|
27
|
+
column-gap: 28px;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
margin-bottom: 12px;
|
|
31
|
+
}
|
|
32
|
+
.pc-highlight-table-block__legend-item {
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
}
|
|
25
36
|
.pc-highlight-table-block__table {
|
|
26
37
|
overflow: auto;
|
|
27
38
|
}
|
|
@@ -6,7 +6,7 @@ import { block } from '../../utils';
|
|
|
6
6
|
import './HighlightTable.css';
|
|
7
7
|
const b = block('highlight-table-block');
|
|
8
8
|
export const HighlightTableBlock = (props) => {
|
|
9
|
-
const { title, description, table } = props;
|
|
9
|
+
const { title, description, table, legend } = props;
|
|
10
10
|
const firstRow = table.content[0] || [];
|
|
11
11
|
const otherRows = table.content.slice(1);
|
|
12
12
|
const customColumnWidth = table.customColumnWidth || [];
|
|
@@ -70,6 +70,7 @@ export const HighlightTableBlock = (props) => {
|
|
|
70
70
|
React.createElement(Text, { className: b('title'), variant: "header-2" }, title),
|
|
71
71
|
description && (React.createElement("div", { className: b('description') },
|
|
72
72
|
React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))),
|
|
73
|
+
(legend === null || legend === void 0 ? void 0 : legend.length) && (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement("div", { className: b('legend-item'), key: String(index) }, item))))),
|
|
73
74
|
React.createElement("div", { ref: tableRef, className: b('table') },
|
|
74
75
|
React.createElement("div", { ref: tableContentRef, className: b('content') },
|
|
75
76
|
React.createElement("div", { className: b('head') }, renderRow(firstRow, 0)),
|
|
@@ -302,6 +302,7 @@ export interface HighlightTableBlockProps {
|
|
|
302
302
|
title?: string;
|
|
303
303
|
description?: string;
|
|
304
304
|
table: HighlightTableData;
|
|
305
|
+
legend?: string[];
|
|
305
306
|
}
|
|
306
307
|
export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>, WithBorder {
|
|
307
308
|
tabName: string;
|
|
@@ -489,6 +490,7 @@ export interface FormBlockProps {
|
|
|
489
490
|
backgroundColor?: string;
|
|
490
491
|
image?: string;
|
|
491
492
|
slug?: string;
|
|
493
|
+
fullWidth?: boolean;
|
|
492
494
|
}
|
|
493
495
|
export type HeaderBlockModel = {
|
|
494
496
|
type: BlockType.HeaderBlock;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export function normalizeBackgroundValue(str) {
|
|
2
2
|
if (!str)
|
|
3
3
|
return undefined;
|
|
4
|
-
return /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(str) ? `url(${str})` : str;
|
|
4
|
+
return /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(str) ? `url('${str}')` : str;
|
|
5
5
|
}
|
|
6
6
|
export function getBlockBackgroundStyles(blockBackground) {
|
|
7
7
|
const isStringBackground = typeof blockBackground === 'string';
|
|
@@ -9,6 +9,8 @@ export function getBlockBackgroundStyles(blockBackground) {
|
|
|
9
9
|
if (isStringBackground) {
|
|
10
10
|
return {
|
|
11
11
|
background: normalizeBackgroundValue(blockBackground),
|
|
12
|
+
backgroundSize: 'cover',
|
|
13
|
+
backgroundRepeat: 'no-repeat',
|
|
12
14
|
};
|
|
13
15
|
}
|
|
14
16
|
if (isObjectBackground) {
|