@gravity-ui/page-constructor 5.33.4 → 5.35.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.
@@ -12,6 +12,7 @@ const mobileContext_1 = require("../../context/mobileContext");
12
12
  const theme_1 = require("../../context/theme");
13
13
  const grid_1 = require("../../grid");
14
14
  const utils_2 = require("../../utils");
15
+ const microdata_1 = require("../../utils/microdata");
15
16
  const utils_3 = require("./utils");
16
17
  const b = (0, utils_2.block)('header-block');
17
18
  const Background = ({ background, isMobile }) => {
@@ -35,6 +36,10 @@ const HeaderBlock = (props) => {
35
36
  const backgroundThemed = background && (0, utils_2.getThemedValue)(background, theme);
36
37
  const imageThemed = image && (0, utils_2.getThemedValue)(image, theme);
37
38
  const videoThemed = video && (0, utils_2.getThemedValue)(video, theme);
39
+ const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)(videoThemed, {
40
+ name: title,
41
+ description,
42
+ });
38
43
  const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
39
44
  const titleId = (0, uikit_1.useUniqId)();
40
45
  return (react_1.default.createElement("header", { className: b({
@@ -58,8 +63,7 @@ const HeaderBlock = (props) => {
58
63
  'vertical-offset': curVerticalOffset,
59
64
  }) },
60
65
  react_1.default.createElement(grid_1.Col, { sizes: titleSizes, className: b('content-inner') },
61
- overtitle && (react_1.default.createElement("div", { className: b('overtitle') },
62
- react_1.default.createElement(components_1.HTML, null, overtitle))),
66
+ overtitle && (react_1.default.createElement("div", { className: b('overtitle') }, typeof overtitle === 'string' ? (react_1.default.createElement(components_1.HTML, null, overtitle)) : (overtitle))),
63
67
  react_1.default.createElement("h1", { className: b('title'), id: titleId },
64
68
  status,
65
69
  renderTitle ? renderTitle(title) : react_1.default.createElement(components_1.HTML, null, title)),
@@ -71,7 +75,7 @@ const HeaderBlock = (props) => {
71
75
  buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },
72
76
  react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl", extraProps: Object.assign({ 'aria-describedby': titleId }, button.extraProps) }, button))))))),
73
77
  children))),
74
- hasRightSideImage && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
78
+ hasRightSideImage && (react_1.default.createElement(components_1.Media, Object.assign({ className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image') }, mediaWithMicrodata, { image: imageThemed }))))))));
75
79
  };
76
80
  exports.HeaderBlock = HeaderBlock;
77
81
  exports.default = exports.HeaderBlock;
@@ -46,6 +46,7 @@ unpredictable css rules order in build */
46
46
  line-height: var(--g-text-body-2-line-height);
47
47
  flex: 1;
48
48
  padding: 32px;
49
+ padding-bottom: 36px;
49
50
  }
50
51
  .pc-card-base-block__header + .pc-card-base-block__body {
51
52
  padding: 24px 32px 32px;
@@ -109,7 +109,7 @@ export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, P
109
109
  export type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;
110
110
  export interface HeaderBlockProps {
111
111
  title: string;
112
- overtitle?: string;
112
+ overtitle?: string | JSX.Element;
113
113
  description?: string;
114
114
  buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];
115
115
  width?: HeaderWidth;
@@ -27,6 +27,7 @@ unpredictable css rules order in build */
27
27
  .pc-image-card .pc-image-card__content {
28
28
  display: flex;
29
29
  padding: 32px;
30
+ padding-bottom: 36px;
30
31
  flex: auto;
31
32
  }
32
33
  .pc-image-card .pc-image-card__image_inner {
@@ -44,6 +45,7 @@ unpredictable css rules order in build */
44
45
  }
45
46
  .pc-image-card .pc-image-card__image_margins_m {
46
47
  padding: 32px;
48
+ padding-bottom: 36px;
47
49
  }
48
50
  .pc-image-card .pc-image-card__image_margins_m .pc-image-card__image_inner {
49
51
  border-radius: initial;
@@ -8,6 +8,7 @@ import { MobileContext } from '../../context/mobileContext';
8
8
  import { useTheme } from '../../context/theme';
9
9
  import { Col, Grid, Row } from '../../grid';
10
10
  import { block, getThemedValue } from '../../utils';
11
+ import { mergeVideoMicrodata } from '../../utils/microdata';
11
12
  import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
12
13
  import './Header.css';
13
14
  const b = block('header-block');
@@ -32,6 +33,10 @@ export const HeaderBlock = (props) => {
32
33
  const backgroundThemed = background && getThemedValue(background, theme);
33
34
  const imageThemed = image && getThemedValue(image, theme);
34
35
  const videoThemed = video && getThemedValue(video, theme);
36
+ const mediaWithMicrodata = mergeVideoMicrodata(videoThemed, {
37
+ name: title,
38
+ description,
39
+ });
35
40
  const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
36
41
  const titleId = useUniqId();
37
42
  return (React.createElement("header", { className: b({
@@ -55,8 +60,7 @@ export const HeaderBlock = (props) => {
55
60
  'vertical-offset': curVerticalOffset,
56
61
  }) },
57
62
  React.createElement(Col, { sizes: titleSizes, className: b('content-inner') },
58
- overtitle && (React.createElement("div", { className: b('overtitle') },
59
- React.createElement(HTML, null, overtitle))),
63
+ overtitle && (React.createElement("div", { className: b('overtitle') }, typeof overtitle === 'string' ? (React.createElement(HTML, null, overtitle)) : (overtitle))),
60
64
  React.createElement("h1", { className: b('title'), id: titleId },
61
65
  status,
62
66
  renderTitle ? renderTitle(title) : React.createElement(HTML, null, title)),
@@ -68,6 +72,6 @@ export const HeaderBlock = (props) => {
68
72
  buttons && (React.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },
69
73
  React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl", extraProps: Object.assign({ 'aria-describedby': titleId }, button.extraProps) }, button))))))),
70
74
  children))),
71
- hasRightSideImage && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
75
+ hasRightSideImage && (React.createElement(Media, Object.assign({ className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image') }, mediaWithMicrodata, { image: imageThemed }))))))));
72
76
  };
73
77
  export default HeaderBlock;
@@ -46,6 +46,7 @@ unpredictable css rules order in build */
46
46
  line-height: var(--g-text-body-2-line-height);
47
47
  flex: 1;
48
48
  padding: 32px;
49
+ padding-bottom: 36px;
49
50
  }
50
51
  .pc-card-base-block__header + .pc-card-base-block__body {
51
52
  padding: 24px 32px 32px;
@@ -109,7 +109,7 @@ export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, P
109
109
  export type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;
110
110
  export interface HeaderBlockProps {
111
111
  title: string;
112
- overtitle?: string;
112
+ overtitle?: string | JSX.Element;
113
113
  description?: string;
114
114
  buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];
115
115
  width?: HeaderWidth;
@@ -27,6 +27,7 @@ unpredictable css rules order in build */
27
27
  .pc-image-card .pc-image-card__content {
28
28
  display: flex;
29
29
  padding: 32px;
30
+ padding-bottom: 36px;
30
31
  flex: auto;
31
32
  }
32
33
  .pc-image-card .pc-image-card__image_inner {
@@ -44,6 +45,7 @@ unpredictable css rules order in build */
44
45
  }
45
46
  .pc-image-card .pc-image-card__image_margins_m {
46
47
  padding: 32px;
48
+ padding-bottom: 36px;
47
49
  }
48
50
  .pc-image-card .pc-image-card__image_margins_m .pc-image-card__image_inner {
49
51
  border-radius: initial;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "5.33.4",
3
+ "version": "5.35.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -109,7 +109,7 @@ export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, P
109
109
  export type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;
110
110
  export interface HeaderBlockProps {
111
111
  title: string;
112
- overtitle?: string;
112
+ overtitle?: string | JSX.Element;
113
113
  description?: string;
114
114
  buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];
115
115
  width?: HeaderWidth;