@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.
@@ -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
  }) },
@@ -420,6 +420,9 @@ export declare const FormBlock: {
420
420
  required: string[];
421
421
  })[];
422
422
  };
423
+ fullWidth: {
424
+ type: string;
425
+ };
423
426
  anchor: {
424
427
  type: string;
425
428
  additionalProperties: boolean;
@@ -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)),
@@ -9,6 +9,12 @@ export declare const HighlightTableBlock: {
9
9
  description: {
10
10
  type: string;
11
11
  };
12
+ legend: {
13
+ type: string;
14
+ items: {
15
+ type: string;
16
+ };
17
+ };
12
18
  table: {
13
19
  additionalProperties: boolean;
14
20
  required: string[];
@@ -10,6 +10,11 @@ exports.HighlightTableBlock = {
10
10
  type: 'string',
11
11
  }, description: {
12
12
  type: 'string',
13
+ }, legend: {
14
+ type: 'array',
15
+ items: {
16
+ type: 'string',
17
+ },
13
18
  }, table: {
14
19
  additionalProperties: false,
15
20
  required: ['content'],
@@ -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
  }) },
@@ -420,6 +420,9 @@ export declare const FormBlock: {
420
420
  required: string[];
421
421
  })[];
422
422
  };
423
+ fullWidth: {
424
+ type: string;
425
+ };
423
426
  anchor: {
424
427
  type: string;
425
428
  additionalProperties: boolean;
@@ -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)),
@@ -9,6 +9,12 @@ export declare const HighlightTableBlock: {
9
9
  description: {
10
10
  type: string;
11
11
  };
12
+ legend: {
13
+ type: string;
14
+ items: {
15
+ type: string;
16
+ };
17
+ };
12
18
  table: {
13
19
  additionalProperties: boolean;
14
20
  required: string[];
@@ -7,6 +7,11 @@ export const HighlightTableBlock = {
7
7
  type: 'string',
8
8
  }, description: {
9
9
  type: 'string',
10
+ }, legend: {
11
+ type: 'array',
12
+ items: {
13
+ type: 'string',
14
+ },
10
15
  }, table: {
11
16
  additionalProperties: false,
12
17
  required: ['content'],
@@ -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) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.49",
3
+ "version": "5.31.51",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {