@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.0

package/build/cjs/blocks/Header/Header.css

@@ -6,7 +6,6 @@
 unpredictable css rules order in build */
 .pc-header-block {
   position: relative;
-  margin: 16px 0;
 }
 .pc-header-block_full-width {
   --pc-border-radius: 0;
@@ -24,22 +23,22 @@ unpredictable css rules order in build */
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm,
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm * {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-header-block__content_vertical-offset {
   margin: 16px 0;
 }
 .pc-header-block__content_vertical-offset_s {
-  padding: 48px 0;
+  padding: 64px 0;
 }
 .pc-header-block__content_vertical-offset_m {
-  padding: calc(96px - 16px) 0;
+  padding: 96px 0;
 }
 .pc-header-block__content_vertical-offset_l {
-  padding: calc(128px - 16px) 0;
+  padding: 128px 0;
 }
 .pc-header-block__content_vertical-offset_xl {
-  padding: calc(160px - 16px) 0;
+  padding: 160px 0;
 }
 .pc-header-block__content_offset_large {
   padding: calc(128px - 16px) 0 16px;
@@ -49,21 +48,21 @@ unpredictable css rules order in build */
   z-index: 10;
 }
 .pc-header-block__title {
-  font-size: var(--yc-text-display-4-font-size);
-  line-height: var(--yc-text-display-4-line-height);
+  font-size: var(--g-text-display-4-font-size);
+  line-height: var(--g-text-display-4-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   position: relative;
 }
 @media (max-width: 577px) {
   .pc-header-block__title {
-    font-size: var(--yc-text-display-2-font-size);
-    line-height: var(--yc-text-display-2-line-height);
+    font-size: var(--g-text-display-2-font-size);
+    line-height: var(--g-text-display-2-line-height);
   }
 }
 .pc-header-block__title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -71,18 +70,21 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-header-block__title a:hover, .pc-header-block__title a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-header-block__description {
   margin-top: 16px;
   font-weight: normal;
+  font-size: var(--g-text-caption-2-font-size);
+  line-height: var(--g-text-caption-2-line-height);
+  margin-block-end: var(--g-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  color: var(--yc-color-text-primary);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--g-color-text-primary);
 }
 .pc-header-block__buttons {
   margin-top: 16px;
@@ -95,10 +97,10 @@ unpredictable css rules order in build */
 .pc-header-block__media {
   position: absolute;
   display: none;
-  top: 0;
+  top: 16px;
   right: 0;
   width: 50%;
-  height: 100%;
+  height: calc(100% - 2 * 16px);
   overflow: hidden;
   object-fit: cover;
   border-radius: var(--pc-border-radius);
@@ -163,17 +165,18 @@ unpredictable css rules order in build */
   transform: none;
   max-width: none;
   width: 100%;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
 }
 .pc-header-block__overtitle {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  margin-block-start: var(--g-text-body-3-line-height);
   margin-bottom: 8px;
   font-weight: 400;
 }
 .pc-header-block__overtitle a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -181,8 +184,8 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-header-block__overtitle a:hover, .pc-header-block__overtitle a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 @media (max-width: 1440px) {
   .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {

package/build/cjs/blocks/Header/Header.js

@@ -8,7 +8,7 @@ const HeaderBreadcrumbs_1 = tslib_1.__importDefault(require("../../components/He
 const utils_1 = require("../../components/Media/Image/utils");
 const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrapper/YFMWrapper"));
 const mobileContext_1 = require("../../context/mobileContext");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const utils_2 = require("../../utils");
 const utils_3 = require("./utils");
@@ -23,7 +23,7 @@ const FullWidthBackground = ({ background }) => (react_1.default.createElement("
 const HeaderBlock = (props) => {
     const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const hasRightSideImage = Boolean(image || video);
     const curImageSize = imageSize || (0, utils_3.getImageSize)(width);
     const titleSizes = hasRightSideImage ? (0, utils_3.titleWithImageSizes)(curImageSize) : (0, utils_3.getTitleSizes)(width);
@@ -51,16 +51,15 @@ const HeaderBlock = (props) => {
                                 'vertical-offset': curVerticalOffset,
                             }) },
                             react_1.default.createElement(grid_1.Col, { sizes: titleSizes, className: b('content-inner') },
-                                overtitle && (react_1.default.createElement("h4", { className: b('overtitle') },
+                                overtitle && (react_1.default.createElement("div", { className: b('overtitle') },
                                     react_1.default.createElement(components_1.HTML, null, overtitle))),
                                 react_1.default.createElement("h1", { className: b('title') },
                                     status,
                                     react_1.default.createElement(components_1.HTML, null, title)),
-                                description && (react_1.default.createElement("h5", { className: b('description') },
+                                description && (react_1.default.createElement("div", { className: b('description') },
                                     react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } }))),
-                                buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons &&
-                                    buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },
-                                        react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
+                                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 },
+                                    react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
                                 children))),
                     hasRightSideImage && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
 };