@gravity-ui/page-constructor 5.23.2 → 5.24.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 (16) hide show
  1. package/build/cjs/blocks/Header/Header.css +3 -0
  2. package/build/cjs/blocks/Header/Header.js +2 -1
  3. package/build/cjs/blocks/Slider/Arrow/Arrow.css +1 -1
  4. package/build/cjs/blocks/Slider/Slider.css +19 -0
  5. package/build/cjs/components/DefaultVideo/DefaultVideo.js +3 -3
  6. package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.css +14 -11
  7. package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js +4 -2
  8. package/build/esm/blocks/Header/Header.css +3 -0
  9. package/build/esm/blocks/Header/Header.js +2 -1
  10. package/build/esm/blocks/Slider/Arrow/Arrow.css +1 -1
  11. package/build/esm/blocks/Slider/Slider.css +19 -0
  12. package/build/esm/components/DefaultVideo/DefaultVideo.js +3 -3
  13. package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.css +14 -11
  14. package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js +4 -2
  15. package/package.json +1 -1
  16. package/widget/index.js +1 -1
package/build/cjs/blocks/Header/Header.css CHANGED
@@ -27,6 +27,9 @@ unpredictable css rules order in build */
27
27
  .pc-header-block__content_theme_dark .pc-header-block__overtitle {
28
28
  color: var(--g-color-text-light-primary);
29
29
  }
30
+ .pc-header-block__content_theme_dark .pc-header-block__description .yfm {
31
+ color: var(--g-color-text-light-primary);
32
+ }
30
33
  .pc-header-block__content_vertical-offset {
31
34
  margin: 16px 0;
32
35
  }
package/build/cjs/blocks/Header/Header.js CHANGED
@@ -41,6 +41,7 @@ const HeaderBlock = (props) => {
41
41
  ['has-media']: hasRightSideImage,
42
42
  ['full-width']: fullWidth,
43
43
  ['media-view']: mediaView,
44
+ ['controls-view']: textTheme,
44
45
  }, className) },
45
46
  backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
46
47
  backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
@@ -62,7 +63,7 @@ const HeaderBlock = (props) => {
62
63
  react_1.default.createElement("h1", { className: b('title'), id: titleId },
63
64
  status,
64
65
  renderTitle ? renderTitle(title) : react_1.default.createElement(components_1.HTML, null, title)),
65
- description && (react_1.default.createElement("div", { className: b('description') },
66
+ description && (react_1.default.createElement("div", { className: b('description', { theme: textTheme }) },
66
67
  react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: {
67
68
  constructor: true,
68
69
  constructorTheme: textTheme,
package/build/cjs/blocks/Slider/Arrow/Arrow.css CHANGED
@@ -47,7 +47,7 @@ unpredictable css rules order in build */
47
47
  border-radius: 100%;
48
48
  background-color: var(--g-color-base-background);
49
49
  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
50
- transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
50
+ transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
51
51
  }
52
52
  .pc-slider-block-arrow__button:focus {
53
53
  outline: 2px solid var(--g-color-line-focus);
package/build/cjs/blocks/Slider/Slider.css CHANGED
@@ -146,6 +146,7 @@ unpredictable css rules order in build */
146
146
  border-radius: 100%;
147
147
  background-color: var(--g-color-line-generic-accent);
148
148
  cursor: pointer;
149
+ transition: background-color 1s;
149
150
  }
150
151
  .pc-SliderBlock__dot:hover {
151
152
  background-color: var(--g-color-line-generic-accent-hover);
@@ -606,6 +607,24 @@ unpredictable css rules order in build */
606
607
  .pc-SliderBlock_type_header-card .slick-arrow:hover button {
607
608
  box-shadow: none;
608
609
  }
610
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_light) .pc-slider-block-arrow__button {
611
+ color: var(--g-color-text-dark-primary);
612
+ }
613
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_light) .pc-SliderBlock__dot {
614
+ background-color: var(--g-color-private-black-150);
615
+ }
616
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_light) .pc-SliderBlock__dot_active {
617
+ background-color: var(--g-color-private-black-300);
618
+ }
619
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_dark) .pc-slider-block-arrow__button {
620
+ color: var(--g-color-text-light-primary);
621
+ }
622
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_dark) .pc-SliderBlock__dot {
623
+ background-color: var(--g-color-private-white-150);
624
+ }
625
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_dark) .pc-SliderBlock__dot_active {
626
+ background-color: var(--g-color-private-white-300);
627
+ }
609
628
  .pc-SliderBlock_type_header-card .slick-slide {
610
629
  padding: 0;
611
630
  }
package/build/cjs/components/DefaultVideo/DefaultVideo.js CHANGED
@@ -2,8 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.DefaultVideo = void 0;
4
4
  const tslib_1 = require("tslib");
5
- /* eslint-disable jsx-a11y/media-has-caption */
6
- // TODO fix in https://github.com/gravity-ui/page-constructor/issues/967
7
5
  const react_1 = tslib_1.__importStar(require("react"));
8
6
  const models_1 = require("../../models");
9
7
  const utils_1 = require("../../utils");
@@ -53,7 +51,9 @@ exports.DefaultVideo = react_1.default.forwardRef((props, ref) => {
53
51
  react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true,
54
52
  // @ts-ignore
55
53
  // eslint-disable-next-line react/no-unknown-property
56
- pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type, "data-qa": qa })))),
54
+ pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick },
55
+ (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type, "data-qa": qa }))),
56
+ react_1.default.createElement("track", { default: true, kind: "captions" })),
57
57
  controls === models_1.MediaVideoControlsType.Custom && (react_1.default.createElement(CustomBarControls_1.default, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
58
58
  isMuted: Boolean(isMuted),
59
59
  changeMute: onMuteToggle,
package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.css CHANGED
@@ -1,15 +1,19 @@
1
- @charset "UTF-8";
2
1
  /* use this for style redefinitions to awoid problems with
3
2
  unpredictable css rules order in build */
4
3
  .pc-header-breadcrumbs {
5
4
  z-index: 11;
6
5
  }
6
+ .pc-header-breadcrumbs__list {
7
+ margin: 0;
8
+ padding: 0;
9
+ list-style: none;
10
+ }
7
11
  .pc-header-breadcrumbs__item {
12
+ font-size: var(--g-text-body-2-font-size);
13
+ line-height: var(--g-text-body-2-line-height);
8
14
  display: inline-block;
9
15
  }
10
16
  .pc-header-breadcrumbs__text {
11
- font-size: var(--g-text-body-2-font-size);
12
- line-height: var(--g-text-body-2-line-height);
13
17
  outline: none;
14
18
  color: var(--g-color-text-link);
15
19
  text-decoration: none;
@@ -23,20 +27,19 @@ unpredictable css rules order in build */
23
27
  --pc-text-header-color: var(--g-color-text-link-hover);
24
28
  color: var(--g-color-text-link-hover);
25
29
  }
26
- .pc-header-breadcrumbs__text:after {
27
- content: " / ";
28
- margin: 0 8px 0 6px;
29
- color: var(--g-color-text-secondary);
30
- }
31
30
  .pc-header-breadcrumbs__text:hover {
32
31
  color: var(--g-color-text-primary);
33
32
  }
34
- .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text {
35
- color: var(--g-color-text-light-secondary);
33
+ .pc-header-breadcrumbs__separator {
34
+ margin: 0 8px 0 6px;
35
+ color: var(--g-color-text-secondary);
36
36
  }
37
- .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:after {
37
+ .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text {
38
38
  color: var(--g-color-text-light-secondary);
39
39
  }
40
40
  .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:hover {
41
41
  color: var(--g-color-text-light-primary);
42
+ }
43
+ .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__separator {
44
+ color: var(--g-color-text-light-secondary);
42
45
  }
package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js CHANGED
@@ -13,7 +13,9 @@ function HeaderBreadcrumbs(props) {
13
13
  const onClick = (0, react_1.useCallback)(() => {
14
14
  handleAnalytics(analyticsEvents);
15
15
  }, [analyticsEvents, handleAnalytics]);
16
- return (react_1.default.createElement("div", { className: b({ theme }, className), "aria-label": (0, i18n_1.i18n)('label') }, items === null || items === void 0 ? void 0 : items.map((item) => (react_1.default.createElement("div", { className: b('item'), key: item.url },
17
- react_1.default.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
16
+ return (react_1.default.createElement("nav", { className: b({ theme }, className), "aria-label": (0, i18n_1.i18n)('label') },
17
+ react_1.default.createElement("ol", { className: b('list') }, items === null || items === void 0 ? void 0 : items.map(({ url, text }) => (react_1.default.createElement("li", { className: b('item'), key: url },
18
+ react_1.default.createElement("a", { href: url, className: b('text'), onClick: onClick }, text),
19
+ react_1.default.createElement("span", { className: b('separator'), "aria-hidden": true }, "/")))))));
18
20
  }
19
21
  exports.default = HeaderBreadcrumbs;
package/build/esm/blocks/Header/Header.css CHANGED
@@ -27,6 +27,9 @@ unpredictable css rules order in build */
27
27
  .pc-header-block__content_theme_dark .pc-header-block__overtitle {
28
28
  color: var(--g-color-text-light-primary);
29
29
  }
30
+ .pc-header-block__content_theme_dark .pc-header-block__description .yfm {
31
+ color: var(--g-color-text-light-primary);
32
+ }
30
33
  .pc-header-block__content_vertical-offset {
31
34
  margin: 16px 0;
32
35
  }
package/build/esm/blocks/Header/Header.js CHANGED
@@ -38,6 +38,7 @@ export const HeaderBlock = (props) => {
38
38
  ['has-media']: hasRightSideImage,
39
39
  ['full-width']: fullWidth,
40
40
  ['media-view']: mediaView,
41
+ ['controls-view']: textTheme,
41
42
  }, className) },
42
43
  backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
43
44
  backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
@@ -59,7 +60,7 @@ export const HeaderBlock = (props) => {
59
60
  React.createElement("h1", { className: b('title'), id: titleId },
60
61
  status,
61
62
  renderTitle ? renderTitle(title) : React.createElement(HTML, null, title)),
62
- description && (React.createElement("div", { className: b('description') },
63
+ description && (React.createElement("div", { className: b('description', { theme: textTheme }) },
63
64
  React.createElement(YFMWrapper, { content: description, modifiers: {
64
65
  constructor: true,
65
66
  constructorTheme: textTheme,
package/build/esm/blocks/Slider/Arrow/Arrow.css CHANGED
@@ -47,7 +47,7 @@ unpredictable css rules order in build */
47
47
  border-radius: 100%;
48
48
  background-color: var(--g-color-base-background);
49
49
  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
50
- transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
50
+ transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
51
51
  }
52
52
  .pc-slider-block-arrow__button:focus {
53
53
  outline: 2px solid var(--g-color-line-focus);
package/build/esm/blocks/Slider/Slider.css CHANGED
@@ -146,6 +146,7 @@ unpredictable css rules order in build */
146
146
  border-radius: 100%;
147
147
  background-color: var(--g-color-line-generic-accent);
148
148
  cursor: pointer;
149
+ transition: background-color 1s;
149
150
  }
150
151
  .pc-SliderBlock__dot:hover {
151
152
  background-color: var(--g-color-line-generic-accent-hover);
@@ -606,6 +607,24 @@ unpredictable css rules order in build */
606
607
  .pc-SliderBlock_type_header-card .slick-arrow:hover button {
607
608
  box-shadow: none;
608
609
  }
610
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_light) .pc-slider-block-arrow__button {
611
+ color: var(--g-color-text-dark-primary);
612
+ }
613
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_light) .pc-SliderBlock__dot {
614
+ background-color: var(--g-color-private-black-150);
615
+ }
616
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_light) .pc-SliderBlock__dot_active {
617
+ background-color: var(--g-color-private-black-300);
618
+ }
619
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_dark) .pc-slider-block-arrow__button {
620
+ color: var(--g-color-text-light-primary);
621
+ }
622
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_dark) .pc-SliderBlock__dot {
623
+ background-color: var(--g-color-private-white-150);
624
+ }
625
+ .pc-SliderBlock_type_header-card:has(.slick-active .pc-header-block_controls-view_dark) .pc-SliderBlock__dot_active {
626
+ background-color: var(--g-color-private-white-300);
627
+ }
609
628
  .pc-SliderBlock_type_header-card .slick-slide {
610
629
  padding: 0;
611
630
  }
package/build/esm/components/DefaultVideo/DefaultVideo.js CHANGED
@@ -1,5 +1,3 @@
1
- /* eslint-disable jsx-a11y/media-has-caption */
2
- // TODO fix in https://github.com/gravity-ui/page-constructor/issues/967
3
1
  import React, { Fragment, useCallback, useImperativeHandle, useRef, useState } from 'react';
4
2
  import { CustomControlsType, MediaVideoControlsType } from '../../models';
5
3
  import { block } from '../../utils';
@@ -50,7 +48,9 @@ export const DefaultVideo = React.forwardRef((props, ref) => {
50
48
  React.createElement("video", { disablePictureInPicture: true, playsInline: true,
51
49
  // @ts-ignore
52
50
  // eslint-disable-next-line react/no-unknown-property
53
- pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type, "data-qa": qa })))),
51
+ pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick },
52
+ getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type, "data-qa": qa }))),
53
+ React.createElement("track", { default: true, kind: "captions" })),
54
54
  controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
55
55
  isMuted: Boolean(isMuted),
56
56
  changeMute: onMuteToggle,
package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.css CHANGED
@@ -1,15 +1,19 @@
1
- @charset "UTF-8";
2
1
  /* use this for style redefinitions to awoid problems with
3
2
  unpredictable css rules order in build */
4
3
  .pc-header-breadcrumbs {
5
4
  z-index: 11;
6
5
  }
6
+ .pc-header-breadcrumbs__list {
7
+ margin: 0;
8
+ padding: 0;
9
+ list-style: none;
10
+ }
7
11
  .pc-header-breadcrumbs__item {
12
+ font-size: var(--g-text-body-2-font-size);
13
+ line-height: var(--g-text-body-2-line-height);
8
14
  display: inline-block;
9
15
  }
10
16
  .pc-header-breadcrumbs__text {
11
- font-size: var(--g-text-body-2-font-size);
12
- line-height: var(--g-text-body-2-line-height);
13
17
  outline: none;
14
18
  color: var(--g-color-text-link);
15
19
  text-decoration: none;
@@ -23,20 +27,19 @@ unpredictable css rules order in build */
23
27
  --pc-text-header-color: var(--g-color-text-link-hover);
24
28
  color: var(--g-color-text-link-hover);
25
29
  }
26
- .pc-header-breadcrumbs__text:after {
27
- content: " / ";
28
- margin: 0 8px 0 6px;
29
- color: var(--g-color-text-secondary);
30
- }
31
30
  .pc-header-breadcrumbs__text:hover {
32
31
  color: var(--g-color-text-primary);
33
32
  }
34
- .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text {
35
- color: var(--g-color-text-light-secondary);
33
+ .pc-header-breadcrumbs__separator {
34
+ margin: 0 8px 0 6px;
35
+ color: var(--g-color-text-secondary);
36
36
  }
37
- .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:after {
37
+ .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text {
38
38
  color: var(--g-color-text-light-secondary);
39
39
  }
40
40
  .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:hover {
41
41
  color: var(--g-color-text-light-primary);
42
+ }
43
+ .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__separator {
44
+ color: var(--g-color-text-light-secondary);
42
45
  }
package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js CHANGED
@@ -11,6 +11,8 @@ export default function HeaderBreadcrumbs(props) {
11
11
  const onClick = useCallback(() => {
12
12
  handleAnalytics(analyticsEvents);
13
13
  }, [analyticsEvents, handleAnalytics]);
14
- return (React.createElement("div", { className: b({ theme }, className), "aria-label": i18n('label') }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement("div", { className: b('item'), key: item.url },
15
- React.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
14
+ return (React.createElement("nav", { className: b({ theme }, className), "aria-label": i18n('label') },
15
+ React.createElement("ol", { className: b('list') }, items === null || items === void 0 ? void 0 : items.map(({ url, text }) => (React.createElement("li", { className: b('item'), key: url },
16
+ React.createElement("a", { href: url, className: b('text'), onClick: onClick }, text),
17
+ React.createElement("span", { className: b('separator'), "aria-hidden": true }, "/")))))));
16
18
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "5.23.2",
3
+ "version": "5.24.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {