@gravity-ui/page-constructor 4.26.0 → 4.27.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.
Files changed (23) hide show
  1. package/build/cjs/blocks/Header/Header.css +12 -0
  2. package/build/cjs/blocks/Header/Header.js +6 -2
  3. package/build/cjs/blocks/Header/schema.d.ts +8 -0
  4. package/build/cjs/blocks/Header/schema.js +4 -0
  5. package/build/cjs/blocks/HeaderSlider/schema.d.ts +4 -0
  6. package/build/cjs/components/Table/Table.css +1 -1
  7. package/build/cjs/containers/PageConstructor/PageConstructor.css +1 -1
  8. package/build/cjs/models/constructor-items/blocks.d.ts +1 -0
  9. package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css +1 -1
  10. package/build/esm/blocks/Header/Header.css +12 -0
  11. package/build/esm/blocks/Header/Header.js +6 -2
  12. package/build/esm/blocks/Header/schema.d.ts +8 -0
  13. package/build/esm/blocks/Header/schema.js +4 -0
  14. package/build/esm/blocks/HeaderSlider/schema.d.ts +4 -0
  15. package/build/esm/components/Table/Table.css +1 -1
  16. package/build/esm/containers/PageConstructor/PageConstructor.css +1 -1
  17. package/build/esm/models/constructor-items/blocks.d.ts +1 -0
  18. package/build/esm/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css +1 -1
  19. package/package.json +1 -1
  20. package/server/models/constructor-items/blocks.d.ts +1 -0
  21. package/styles/styles.css +1 -1
  22. package/styles/yfm.scss +1 -1
  23. package/widget/index.js +1 -1
package/build/cjs/blocks/Header/Header.css CHANGED
@@ -180,6 +180,18 @@ unpredictable css rules order in build */
180
180
  --pc-text-header-color: var(--g-color-text-link-hover);
181
181
  color: var(--g-color-text-link-hover);
182
182
  }
183
+ .pc-header-block_media-view_fit .pc-header-block__video > video,
184
+ .pc-header-block_media-view_fit .pc-header-block__image {
185
+ object-fit: contain;
186
+ height: auto;
187
+ width: auto;
188
+ max-height: 100%;
189
+ max-width: 100%;
190
+ position: relative;
191
+ top: 50%;
192
+ left: 50%;
193
+ transform: translate(-50%, -50%);
194
+ }
183
195
  @media (max-width: 1440px) {
184
196
  .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
185
197
  left: 0;
package/build/cjs/blocks/Header/Header.js CHANGED
@@ -21,7 +21,7 @@ const Background = ({ background, isMobile }) => {
21
21
  };
22
22
  const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
23
23
  const HeaderBlock = (props) => {
24
- const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
24
+ const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, mediaView = 'full', } = props;
25
25
  const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
26
26
  const theme = (0, theme_1.useTheme)();
27
27
  const hasRightSideImage = Boolean(image || video);
@@ -35,7 +35,11 @@ const HeaderBlock = (props) => {
35
35
  const imageThemed = image && (0, utils_2.getThemedValue)(image, theme);
36
36
  const videoThemed = video && (0, utils_2.getThemedValue)(video, theme);
37
37
  const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
38
- return (react_1.default.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
38
+ return (react_1.default.createElement("header", { className: b({
39
+ ['has-media']: hasRightSideImage,
40
+ ['full-width']: fullWidth,
41
+ ['media-view']: mediaView,
42
+ }, className) },
39
43
  backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
40
44
  backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
41
45
  react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },
package/build/cjs/blocks/Header/schema.d.ts CHANGED
@@ -407,6 +407,10 @@ export declare const HeaderProperties: {
407
407
  optionName: string;
408
408
  })[];
409
409
  };
410
+ mediaView: {
411
+ type: string;
412
+ enum: string[];
413
+ };
410
414
  backLink: {
411
415
  type: string;
412
416
  required: string[];
@@ -887,6 +891,10 @@ export declare const HeaderBlock: {
887
891
  optionName: string;
888
892
  })[];
889
893
  };
894
+ mediaView: {
895
+ type: string;
896
+ enum: string[];
897
+ };
890
898
  backLink: {
891
899
  type: string;
892
900
  required: string[];
package/build/cjs/blocks/Header/schema.js CHANGED
@@ -35,6 +35,10 @@ exports.HeaderProperties = {
35
35
  },
36
36
  image: (0, common_1.withTheme)(schema_1.ImageProps),
37
37
  video: (0, common_1.withTheme)(common_1.VideoProps),
38
+ mediaView: {
39
+ type: 'string',
40
+ enum: ['fit', 'full'],
41
+ },
38
42
  backLink: {
39
43
  type: 'object',
40
44
  required: ['url', 'title'],
package/build/cjs/blocks/HeaderSlider/schema.d.ts CHANGED
@@ -163,6 +163,10 @@ export declare const HeaderSliderBlock: {
163
163
  optionName: string;
164
164
  })[];
165
165
  };
166
+ mediaView: {
167
+ type: string;
168
+ enum: string[];
169
+ };
166
170
  backLink: {
167
171
  type: string;
168
172
  required: string[];
package/build/cjs/components/Table/Table.css CHANGED
@@ -13,7 +13,7 @@ unpredictable css rules order in build */
13
13
  display: flex;
14
14
  }
15
15
  .pc-table__row:first-child {
16
- font-weight: 500;
16
+ font-weight: var(--g-text-accent-font-weight);
17
17
  }
18
18
  .pc-table__row:first-child .pc-table__cell {
19
19
  border-bottom-color: var(--g-color-line-generic-active);
package/build/cjs/containers/PageConstructor/PageConstructor.css CHANGED
@@ -99,7 +99,7 @@ unpredictable css rules order in build */
99
99
  margin: 0 0 12px;
100
100
  }
101
101
  .yfm_constructor.yfm_constructor p strong {
102
- font-weight: 500;
102
+ font-weight: var(--g-text-accent-font-weight);
103
103
  }
104
104
  .yfm_constructor.yfm_constructor_size_s ul,
105
105
  .yfm_constructor.yfm_constructor_size_s ol,
package/build/cjs/models/constructor-items/blocks.d.ts CHANGED
@@ -103,6 +103,7 @@ export interface HeaderBlockProps {
103
103
  offset?: HeaderOffset;
104
104
  image?: ThemedImage;
105
105
  video?: ThemedMediaVideoProps;
106
+ mediaView?: 'fit' | 'full';
106
107
  background?: ThemedHeaderBlockBackground;
107
108
  theme?: 'light' | 'dark';
108
109
  verticalOffset?: 's' | 'm' | 'l' | 'xl';
package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css CHANGED
@@ -16,7 +16,7 @@ unpredictable css rules order in build */
16
16
  line-height: var(--g-text-body-1-line-height);
17
17
  }
18
18
  .pc-price-description__main-title {
19
- font-weight: 500;
19
+ font-weight: var(--g-text-accent-font-weight);
20
20
  }
21
21
  .pc-price-description__main-title_color_cornflower {
22
22
  color: var(--g-color-base-brand);
package/build/esm/blocks/Header/Header.css CHANGED
@@ -180,6 +180,18 @@ unpredictable css rules order in build */
180
180
  --pc-text-header-color: var(--g-color-text-link-hover);
181
181
  color: var(--g-color-text-link-hover);
182
182
  }
183
+ .pc-header-block_media-view_fit .pc-header-block__video > video,
184
+ .pc-header-block_media-view_fit .pc-header-block__image {
185
+ object-fit: contain;
186
+ height: auto;
187
+ width: auto;
188
+ max-height: 100%;
189
+ max-width: 100%;
190
+ position: relative;
191
+ top: 50%;
192
+ left: 50%;
193
+ transform: translate(-50%, -50%);
194
+ }
183
195
  @media (max-width: 1440px) {
184
196
  .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
185
197
  left: 0;
package/build/esm/blocks/Header/Header.js CHANGED
@@ -18,7 +18,7 @@ const Background = ({ background, isMobile }) => {
18
18
  };
19
19
  const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
20
20
  export const HeaderBlock = (props) => {
21
- const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
21
+ const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, mediaView = 'full', } = props;
22
22
  const isMobile = useContext(MobileContext);
23
23
  const theme = useTheme();
24
24
  const hasRightSideImage = Boolean(image || video);
@@ -32,7 +32,11 @@ export const HeaderBlock = (props) => {
32
32
  const imageThemed = image && getThemedValue(image, theme);
33
33
  const videoThemed = video && getThemedValue(video, theme);
34
34
  const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
35
- return (React.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
35
+ return (React.createElement("header", { className: b({
36
+ ['has-media']: hasRightSideImage,
37
+ ['full-width']: fullWidth,
38
+ ['media-view']: mediaView,
39
+ }, className) },
36
40
  backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
37
41
  backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
38
42
  React.createElement(Grid, { containerClass: b('container-fluid') },
package/build/esm/blocks/Header/schema.d.ts CHANGED
@@ -407,6 +407,10 @@ export declare const HeaderProperties: {
407
407
  optionName: string;
408
408
  })[];
409
409
  };
410
+ mediaView: {
411
+ type: string;
412
+ enum: string[];
413
+ };
410
414
  backLink: {
411
415
  type: string;
412
416
  required: string[];
@@ -887,6 +891,10 @@ export declare const HeaderBlock: {
887
891
  optionName: string;
888
892
  })[];
889
893
  };
894
+ mediaView: {
895
+ type: string;
896
+ enum: string[];
897
+ };
890
898
  backLink: {
891
899
  type: string;
892
900
  required: string[];
package/build/esm/blocks/Header/schema.js CHANGED
@@ -32,6 +32,10 @@ export const HeaderProperties = {
32
32
  },
33
33
  image: withTheme(ImageProps),
34
34
  video: withTheme(VideoProps),
35
+ mediaView: {
36
+ type: 'string',
37
+ enum: ['fit', 'full'],
38
+ },
35
39
  backLink: {
36
40
  type: 'object',
37
41
  required: ['url', 'title'],
package/build/esm/blocks/HeaderSlider/schema.d.ts CHANGED
@@ -163,6 +163,10 @@ export declare const HeaderSliderBlock: {
163
163
  optionName: string;
164
164
  })[];
165
165
  };
166
+ mediaView: {
167
+ type: string;
168
+ enum: string[];
169
+ };
166
170
  backLink: {
167
171
  type: string;
168
172
  required: string[];
package/build/esm/components/Table/Table.css CHANGED
@@ -13,7 +13,7 @@ unpredictable css rules order in build */
13
13
  display: flex;
14
14
  }
15
15
  .pc-table__row:first-child {
16
- font-weight: 500;
16
+ font-weight: var(--g-text-accent-font-weight);
17
17
  }
18
18
  .pc-table__row:first-child .pc-table__cell {
19
19
  border-bottom-color: var(--g-color-line-generic-active);
package/build/esm/containers/PageConstructor/PageConstructor.css CHANGED
@@ -99,7 +99,7 @@ unpredictable css rules order in build */
99
99
  margin: 0 0 12px;
100
100
  }
101
101
  .yfm_constructor.yfm_constructor p strong {
102
- font-weight: 500;
102
+ font-weight: var(--g-text-accent-font-weight);
103
103
  }
104
104
  .yfm_constructor.yfm_constructor_size_s ul,
105
105
  .yfm_constructor.yfm_constructor_size_s ol,
package/build/esm/models/constructor-items/blocks.d.ts CHANGED
@@ -103,6 +103,7 @@ export interface HeaderBlockProps {
103
103
  offset?: HeaderOffset;
104
104
  image?: ThemedImage;
105
105
  video?: ThemedMediaVideoProps;
106
+ mediaView?: 'fit' | 'full';
106
107
  background?: ThemedHeaderBlockBackground;
107
108
  theme?: 'light' | 'dark';
108
109
  verticalOffset?: 's' | 'm' | 'l' | 'xl';
package/build/esm/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css CHANGED
@@ -16,7 +16,7 @@ unpredictable css rules order in build */
16
16
  line-height: var(--g-text-body-1-line-height);
17
17
  }
18
18
  .pc-price-description__main-title {
19
- font-weight: 500;
19
+ font-weight: var(--g-text-accent-font-weight);
20
20
  }
21
21
  .pc-price-description__main-title_color_cornflower {
22
22
  color: var(--g-color-base-brand);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.26.0",
3
+ "version": "4.27.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
package/server/models/constructor-items/blocks.d.ts CHANGED
@@ -103,6 +103,7 @@ export interface HeaderBlockProps {
103
103
  offset?: HeaderOffset;
104
104
  image?: ThemedImage;
105
105
  video?: ThemedMediaVideoProps;
106
+ mediaView?: 'fit' | 'full';
106
107
  background?: ThemedHeaderBlockBackground;
107
108
  theme?: 'light' | 'dark';
108
109
  verticalOffset?: 's' | 'm' | 'l' | 'xl';
package/styles/styles.css CHANGED
@@ -41,7 +41,7 @@ unpredictable css rules order in build */
41
41
  margin: 0 0 12px;
42
42
  }
43
43
  .yfm_constructor.yfm_constructor p strong {
44
- font-weight: 500;
44
+ font-weight: var(--g-text-accent-font-weight);
45
45
  }
46
46
  .yfm_constructor.yfm_constructor_size_s ul,
47
47
  .yfm_constructor.yfm_constructor_size_s ol,
package/styles/yfm.scss CHANGED
@@ -49,7 +49,7 @@
49
49
  }
50
50
 
51
51
  p strong {
52
- font-weight: 500;
52
+ font-weight: var(--g-text-accent-font-weight);
53
53
  }
54
54
 
55
55
  &_size_s {