@doyourjob/gravity-ui-page-constructor-addons 2.1.34 → 2.1.36

package/build/cjs/components/NewHeader/NewHeader.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   --g-color-scroll-handle: var(--g-color-base-generic);
   --g-color-scroll-handle-hover: var(--g-color-line-generic);
   width: 100%;
-  z-index: 100;
   background: var(--pc-transparent);
 }
 
@@ -13,6 +12,11 @@ unpredictable css rules order in build */
   background: var(--g-color-base-background);
 }
 
+.pc-addons-new-header_is-mobile-opened {
+  position: fixed;
+  top: 0;
+}
+
 .pc-addons-new-header__container {
   position: relative;
   width: 100%;
@@ -37,7 +41,6 @@ unpredictable css rules order in build */
 }
 
 .pc-addons-new-header__left {
-  margin-right: 32px;
   gap: 20px;
 }
 
@@ -137,11 +140,6 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
 }
 
-.pc-addons-new-header__logo-img {
-  display: block;
-  height: 36px;
-}
-
 .pc-addons-new-header_search .pc-addons-new-header__left,
 .pc-addons-new-header_search .pc-addons-new-header__navigation,
 .pc-addons-new-header_search .pc-addons-new-header__wrap > div:not(.pc-addons-new-header__icons-container) {

package/build/cjs/components/NewHeader/NewHeader.js

@@ -6,13 +6,14 @@ const react_1 = tslib_1.__importStar(require("react"));
 const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
 const cn_1 = require("../../utils/cn");
 const NHLoginButton_1 = require("./components/NHLoginButton/NHLoginButton");
+const NHLogo_1 = require("./components/NHLogo/NHLogo");
 const NHMobileNavigation_1 = require("./components/NHMobileNavigation/NHMobileNavigation");
 const NHNavigation_1 = require("./components/NHNavigation/NHNavigation");
 const route_change_1 = require("./contexts/route-change");
 const b = (0, cn_1.block)('new-header');
 exports.MOBILE_ICON_SIZE = 24;
 const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scrollOffset = 0, }) => {
-    const { logo, buttons, left, right, mobile, login } = data;
+    const { logo, buttons, left, right, login } = data;
     const headerRef = (0, react_1.useRef)(null);
     const [withBackground, setWithBackground] = (0, react_1.useState)(false);
     const [isSearchMode, setIsSearchMode] = (0, react_1.useState)(false);
@@ -51,11 +52,12 @@ const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scr
     return (react_1.default.createElement(route_change_1.RouteChangeHandlerContext.Provider, { value: setupRouteChangeHandler },
         react_1.default.createElement("header", { className: b({
                 search: isSearchMode,
-                'with-background': withBackground,
+                'is-mobile-opened': isMobileNavigationOpen,
+                'with-background': withBackground || isMobileNavigationOpen,
             }, className), ref: headerRef },
             react_1.default.createElement("div", { className: b('container') },
                 react_1.default.createElement("div", { className: b('left') },
-                    logo && (react_1.default.createElement("a", Object.assign({ href: logo.href, className: b('logo') }, (0, gravity_ui_page_constructor_1.getLinkProps)(logo.href || '')), logo.src && (react_1.default.createElement("img", { className: b('logo-img'), alt: logo.alt, src: logo.src })))),
+                    logo && react_1.default.createElement(NHLogo_1.NHLogo, { data: logo }),
                     left ? (react_1.default.createElement("div", { className: b('navigation') },
                         react_1.default.createElement(NHNavigation_1.NHNavigation, { data: left, headerRef: headerRef }))) : null),
                 react_1.default.createElement("div", { className: b('right') },
@@ -65,8 +67,8 @@ const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scr
                         renderSearch && (react_1.default.createElement("div", { className: b('icons-container') }, renderSearch({ onActiveToggle: toggleSearch }))),
                         react_1.default.createElement("div", { className: b('buttons') },
                             showButtonsContainer &&
-                                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { className: b('button'), size: "l", key: button.text }))))),
+                                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => (react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { className: b('button'), size: "l", key: index }))))),
                             login && react_1.default.createElement(NHLoginButton_1.NHLoginButton, { data: login, headerRef: headerRef })),
-                        mobile ? (react_1.default.createElement(NHMobileNavigation_1.NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: mobile, buttons: buttons, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })) : null))))));
+                        react_1.default.createElement(NHMobileNavigation_1.NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: data, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })))))));
 };
 exports.NewHeader = NewHeader;

package/build/cjs/components/NewHeader/components/NHBanner/NHBanner.css

@@ -0,0 +1,42 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-banner {
+  color: inherit;
+  text-decoration: none;
+  grid-area: 1/3/3/4;
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  gap: 20px;
+  background: var(--nh-banner-background, transparent);
+}
+
+.pc-addons-nh-banner_border {
+  border: 1px solid var(--g-color-line-generic-solid);
+}
+
+.pc-addons-nh-banner__wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 4px;
+}
+
+.pc-addons-nh-banner__title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  color: var(--nh-banner-color, var(--g-color-text-primary));
+  font-weight: 600;
+}
+
+.pc-addons-nh-banner__description {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  color: var(--nh-banner-color, var(--g-color-text-secondary));
+}
+
+.pc-addons-nh-banner__image {
+  display: block;
+  width: 86px;
+  aspect-ratio: 1;
+}

package/build/cjs/components/NewHeader/components/NHBanner/NHBanner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NHProductBannerData } from '../../models';
+export declare const NHBanner: ({ title, description, image, url, background, color, border, }: NHProductBannerData) => React.JSX.Element;

package/build/cjs/components/NewHeader/components/NHBanner/NHBanner.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHBanner = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const b = (0, cn_1.block)('nh-banner');
+const NHBanner = ({ title, description, image, url, background, color, border, }) => {
+    const styles = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (background ? { '--nh-banner-background': background } : {})), (color ? { '--nh-banner-color': color } : {}))), [background, color]);
+    return (react_1.default.createElement("a", Object.assign({ href: url, className: b({ border }), style: styles }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image'), src: image }),
+        react_1.default.createElement("div", { className: b('wrap') },
+            react_1.default.createElement("div", { className: b('title') }, title),
+            react_1.default.createElement("div", { className: b('description') }, description))));
+};
+exports.NHBanner = NHBanner;

package/build/cjs/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.css

@@ -51,119 +51,67 @@ unpredictable css rules order in build */
   gap: 24px;
 }
 
-.pc-addons-nh-default-popup__wrap {
-  display: grid;
-  gap: 24px 40px;
-  align-items: flex-start;
+.pc-addons-nh-default-popup__section_side-head {
+  flex-direction: row;
+  gap: 0;
 }
 
-.pc-addons-nh-default-popup__right {
-  width: 100%;
-  max-width: 320px;
-  flex-shrink: 0;
-  border-left: 1px solid var(--g-color-line-generic-solid);
+.pc-addons-nh-default-popup__section-head {
   display: flex;
   flex-direction: column;
-  padding: 24px 32px;
-  gap: 20px;
+  width: 200px;
+  padding-right: 32px;
+  flex-shrink: 0;
+  gap: 2px;
 }
 
-.pc-addons-nh-default-popup__cards {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+.pc-addons-nh-default-popup__wrap {
+  display: grid;
+  gap: 24px 40px;
+  align-items: flex-start;
 }
 
-.pc-addons-nh-default-popup__card {
-  color: inherit;
-  text-decoration: none;
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  cursor: pointer;
-  transition: opacity 0.2s;
+.pc-addons-nh-default-popup__wrap_mode_run {
+  grid-template-columns: repeat(12, 1fr);
 }
 
-.pc-addons-nh-default-popup__card:hover {
-  opacity: 0.8;
+.pc-addons-nh-default-popup__wrap_mode_run > a {
+  grid-column: span 4;
+  grid-row: 1;
 }
 
-.pc-addons-nh-default-popup__card-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.pc-addons-nh-default-popup__wrap_mode_run > .pc-addons-nh-default-popup__inner-wrap:empty {
+  display: none;
 }
 
-.pc-addons-nh-default-popup__card-caption {
-  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
-  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
-  color: var(--g-color-text-secondary);
+.pc-addons-nh-default-popup__wrap_mode_run > a + .pc-addons-nh-default-popup__inner-wrap {
+  grid-column: span 8;
 }
 
-.pc-addons-nh-default-popup__card-title {
-  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
-  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
-  color: var(--g-color-text-primary);
-  font-weight: 600;
+.pc-addons-nh-default-popup__wrap_mode_run > .pc-addons-nh-default-popup__inner-wrap:last-child {
+  grid-column: span 12;
 }
 
-.pc-addons-nh-default-popup__card-description {
-  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
-  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
-  color: var(--g-color-text-secondary);
+.pc-addons-nh-default-popup__inner-wrap {
+  display: grid;
+  gap: 24px 40px;
+  align-items: flex-start;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-.pc-addons-nh-default-popup__card-image {
-  display: block;
+.pc-addons-nh-default-popup__right {
   width: 100%;
-  aspect-ratio: 16/9;
-  object-fit: cover;
-}
-
-.pc-addons-nh-default-popup__stock {
-  position: relative;
-  padding: 20px;
+  max-width: 320px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--g-color-line-generic-solid);
   display: flex;
   flex-direction: column;
-  height: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-  max-height: 300px;
-}
-
-.pc-addons-nh-default-popup__stock-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.pc-addons-nh-default-popup__stock-title {
-  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
-  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
-  color: var(--g-color-text-primary);
-  font-weight: 600;
-  z-index: 1;
-  margin-bottom: 4px;
-}
-
-.pc-addons-nh-default-popup__stock-value {
-  color: var(--g-color-text-primary);
-  font-size: 36px;
-  line-height: 48px;
-  font-weight: 600;
-  z-index: 1;
-  margin-top: auto;
+  padding: 24px 32px;
+  gap: 20px;
 }
 
-.pc-addons-nh-default-popup__stock-date {
-  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
-  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
-  color: var(--g-color-text-secondary);
-  z-index: 1;
-  margin-top: 4px;
+.pc-addons-nh-default-popup__cards {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 }

package/build/cjs/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.js

@@ -3,33 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NHDefaultPopup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
 const cn_1 = require("../../../../utils/cn");
+const NHBanner_1 = require("../NHBanner/NHBanner");
+const NHEventCard_1 = require("../NHEventCard/NHEventCard");
 const NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
+const NHStock_1 = require("../NHStock/NHStock");
+const NHStoryCard_1 = require("../NHStoryCard/NHStoryCard");
 const b = (0, cn_1.block)('nh-default-popup');
-const NHStoryCard = ({ title, description, image, url }) => (react_1.default.createElement("a", Object.assign({ href: url, className: b('card') }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
-    react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('card-image'), src: image }),
-    react_1.default.createElement("div", { className: b('card-wrap') },
-        react_1.default.createElement("div", { className: b('card-title') }, title),
-        react_1.default.createElement("div", { className: b('card-description') }, description))));
-const NHEventCard = ({ title, caption, description, image, url }) => (react_1.default.createElement("a", Object.assign({ href: url, className: b('card') }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
-    react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('card-image'), src: image }),
-    react_1.default.createElement("div", { className: b('card-wrap') },
-        react_1.default.createElement("div", { className: b('card-caption') }, caption),
-        react_1.default.createElement("div", { className: b('card-title') }, title),
-        react_1.default.createElement("div", { className: b('card-description') }, description))));
-const NHStock = ({ title, delayed, image }) => {
-    const data = (0, react_1.useContext)(gravity_ui_page_constructor_1.HeaderStockContext);
-    if (!data.price)
-        return null;
-    return (react_1.default.createElement("div", { className: b('stock') },
-        image ? (react_1.default.createElement("img", { className: b('stock-background'), src: image, alt: "Stock background" })) : null,
-        react_1.default.createElement("div", { className: b('stock-title') }, title),
-        react_1.default.createElement("div", { className: b('stock-title') }, data.price.percent),
-        react_1.default.createElement("div", { className: b('stock-value') }, data.price.price),
-        react_1.default.createElement("div", { className: b('stock-date') }, data.price.update),
-        react_1.default.createElement("div", { className: b('stock-date') }, delayed)));
-};
 const NHDefaultPopup = ({ sections, right, maxWidth, primaryColor, primaryColorHover, }) => {
     const rootStyle = (0, react_1.useMemo)(() => maxWidth
         ? {
@@ -38,26 +18,41 @@ const NHDefaultPopup = ({ sections, right, maxWidth, primaryColor, primaryColorH
         }
         : undefined, [maxWidth]);
     const wrapsStyle = (0, react_1.useMemo)(() => sections.map((section) => ({
-        gridTemplateColumns: `repeat(${section.columns || 3}, 1fr)`,
+        gridTemplateColumns: section.mode === 'run' ? undefined : `repeat(${section.columns || 3}, 1fr)`,
     })), [sections]);
     const cards = (0, react_1.useMemo)(() => {
         if (right === null || right === void 0 ? void 0 : right.stories) {
-            return right.stories.map((card, index) => react_1.default.createElement(NHStoryCard, Object.assign({ key: index }, card)));
+            return right.stories.map((card, index) => react_1.default.createElement(NHStoryCard_1.NHStoryCard, Object.assign({ key: index }, card)));
         }
         if (right === null || right === void 0 ? void 0 : right.events) {
-            return right.events.map((card, index) => react_1.default.createElement(NHEventCard, Object.assign({ key: index }, card)));
+            return right.events.map((card, index) => react_1.default.createElement(NHEventCard_1.NHEventCard, Object.assign({ key: index }, card)));
         }
         return null;
     }, [right]);
+    const renderSectionContent = (section, index) => {
+        var _a, _b, _c;
+        if (section.mode === 'run') {
+            return (react_1.default.createElement("div", { className: b('wrap', { mode: 'run' }) },
+                ((_a = section.items) === null || _a === void 0 ? void 0 : _a[0]) && react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({}, section.items[0], { column: true })),
+                react_1.default.createElement("div", { className: b('inner-wrap') }, (_b = section.items) === null || _b === void 0 ? void 0 : _b.slice(1, 4).map((item, cardIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: cardIndex }, item, { column: true }))))),
+                react_1.default.createElement("div", { className: b('inner-wrap') }, (_c = section.items) === null || _c === void 0 ? void 0 : _c.slice(4).map((item, cardIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: cardIndex }, item, { column: true })))))));
+        }
+        return (react_1.default.createElement("div", { className: b('wrap'), style: wrapsStyle[index] },
+            section.items.map((item, idx) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: idx }, item, { imageColor: primaryColor, imageColorHover: primaryColorHover })))),
+            section.mode === 'scale' && section.banner && react_1.default.createElement(NHBanner_1.NHBanner, Object.assign({}, section.banner))));
+    };
     return (react_1.default.createElement("div", { className: b(), style: rootStyle },
-        react_1.default.createElement("div", { className: b('left') }, sections.map((section, index) => (react_1.default.createElement("div", { key: index, className: b('section') },
-            section.title || section.subtitle ? (react_1.default.createElement("div", { className: b('head') },
-                react_1.default.createElement("div", { className: b('title') }, section.title),
-                react_1.default.createElement("div", { className: b('subtitle') }, section.subtitle))) : null,
-            react_1.default.createElement("div", { className: b('wrap'), style: wrapsStyle[index] }, section.items.map((item) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: item.title }, item, { imageColor: primaryColor, imageColorHover: primaryColorHover }))))))))),
+        react_1.default.createElement("div", { className: b('left') }, sections.map((section, index) => {
+            const hasSideHead = Boolean(section.mode);
+            return (react_1.default.createElement("div", { key: index, className: b('section', { 'side-head': hasSideHead }) },
+                section.title || section.subtitle ? (react_1.default.createElement("div", { className: b(hasSideHead ? 'section-head' : 'head') },
+                    react_1.default.createElement("div", { className: b('title') }, section.title),
+                    react_1.default.createElement("div", { className: b('subtitle') }, section.subtitle))) : null,
+                renderSectionContent(section, index)));
+        })),
         right && (react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('title') }, right.title),
             cards && react_1.default.createElement("div", { className: b('cards') }, cards),
-            right.stock && react_1.default.createElement(NHStock, Object.assign({}, right.stock))))));
+            right.stock && react_1.default.createElement(NHStock_1.NHStock, Object.assign({}, right.stock))))));
 };
 exports.NHDefaultPopup = NHDefaultPopup;

package/build/cjs/components/NewHeader/components/NHEventCard/NHEventCard.css

@@ -0,0 +1,48 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-event-card {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.pc-addons-nh-event-card:hover {
+  opacity: 0.8;
+}
+
+.pc-addons-nh-event-card__wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pc-addons-nh-event-card__caption {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-nh-event-card__title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  color: var(--g-color-text-primary);
+  font-weight: 600;
+}
+
+.pc-addons-nh-event-card__description {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-nh-event-card__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
+}

package/build/cjs/components/NewHeader/components/NHEventCard/NHEventCard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NHEventCardData } from '../../models';
+export declare const NHEventCard: ({ title, caption, description, image, url }: NHEventCardData) => React.JSX.Element;

package/build/cjs/components/NewHeader/components/NHEventCard/NHEventCard.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHEventCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const b = (0, cn_1.block)('nh-event-card');
+const NHEventCard = ({ title, caption, description, image, url }) => (react_1.default.createElement("a", Object.assign({ href: url, className: b() }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
+    react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image'), src: image }),
+    react_1.default.createElement("div", { className: b('wrap') },
+        react_1.default.createElement("div", { className: b('caption') }, caption),
+        react_1.default.createElement("div", { className: b('title') }, title),
+        react_1.default.createElement("div", { className: b('description') }, description))));
+exports.NHEventCard = NHEventCard;

package/build/cjs/components/NewHeader/components/NHLogo/NHLogo.css

@@ -0,0 +1,4 @@
+.pc-addons-nh-logo__img {
+  display: block;
+  height: 36px;
+}

package/build/cjs/components/NewHeader/components/NHLogo/NHLogo.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NHLogoData } from '../../models';
+export interface NHLogoProps {
+    data: NHLogoData;
+}
+export declare const NHLogo: ({ data }: NHLogoProps) => React.JSX.Element;

package/build/cjs/components/NewHeader/components/NHLogo/NHLogo.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHLogo = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const b = (0, cn_1.block)('nh-logo');
+const NHLogo = ({ data }) => {
+    return (react_1.default.createElement("a", Object.assign({ href: data.href, className: b() }, (0, gravity_ui_page_constructor_1.getLinkProps)(data.href || '')), data.src && react_1.default.createElement("img", { className: b('img'), alt: data.alt, src: data.src })));
+};
+exports.NHLogo = NHLogo;

package/build/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.css

@@ -25,21 +25,56 @@ unpredictable css rules order in build */
   color: var(--g-color-text-complementary);
 }
 
-.pc-addons-nh-mobile-navigation__icon-icon {
-  position: relative;
-  top: 3px;
-}
-
 .pc-addons-nh-mobile-navigation__icon_hidden {
   display: none;
 }
 
-.pc-addons-nh-mobile-navigation__user {
-  margin-top: 24px;
+.pc-addons-nh-mobile-navigation__nav {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+}
+
+.pc-addons-nh-mobile-navigation__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+
+.pc-addons-nh-mobile-navigation__list > li + li {
+  border-top: 1px solid var(--g-color-line-generic);
+}
+
+.pc-addons-nh-mobile-navigation__list + .pc-addons-nh-mobile-navigation__list {
+  margin-top: 150px;
 }
 
 .pc-addons-nh-mobile-navigation__buttons {
-  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+}
+
+.pc-addons-nh-mobile-navigation__button {
+  width: 100%;
+}
+
+.pc-addons-nh-mobile-navigation__login-items {
+  display: flex;
+  flex-direction: column;
+  margin-top: 32px;
+}
+
+.pc-addons-nh-mobile-navigation__login-item {
+  padding: 8px 0;
+}
+
+.pc-addons-nh-mobile-navigation__login-item + .pc-addons-nh-mobile-navigation__login-item {
+  border-top: 1px solid var(--g-color-line-generic);
 }
 
 @media (max-width: 1081px) {

package/build/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import type { ButtonProps } from '@doyourjob/gravity-ui-page-constructor';
-import { NHMobileNavigationItemData } from '../../models';
+import { NHLoginPopupData, NHNavigationData } from '../../models';
 interface MobileNavigationProps {
     isOpened: boolean;
     toogleOpen: (isOpened: boolean) => void;
     isSearchOpen: boolean;
-    data: NHMobileNavigationItemData[];
+    data?: NHNavigationData;
     onMenuScroll: (scrollTop: number) => void;
     popupClassName?: string;
     buttons?: ButtonProps[];
+    login?: NHLoginPopupData;
 }
-export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
+export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
 export {};

package/build/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.js

@@ -9,17 +9,24 @@ const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn");
 const NHMobileNavigationItem_1 = require("../NHMobileNavigationItem/NHMobileNavigationItem");
 const NHMobileNavigationPopup_1 = require("../NHMobileNavigationPopup/NHMobileNavigationPopup");
+const NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
 const b = (0, cn_1.block)('nh-mobile-navigation');
-const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }) => (react_1.default.createElement("div", { className: b() },
-    react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
-            e.stopPropagation();
-            toogleOpen(!isOpened);
-        } },
-        react_1.default.createElement(uikit_1.Icon, { data: isOpened ? icons_1.Xmark : icons_1.Bars, size: 24 })),
-    react_1.default.createElement(NHMobileNavigationPopup_1.NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
-        react_1.default.createElement("nav", null,
-            react_1.default.createElement("ul", { className: b() }, data.map((item) => (react_1.default.createElement("li", { className: b(), key: item.title },
-                react_1.default.createElement(NHMobileNavigationItem_1.NHMobileNavigationItem, Object.assign({}, item)))))),
-            buttons &&
-                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { size: "l", key: button.text }))))))));
+const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }) => {
+    var _a, _b;
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
+                e.stopPropagation();
+                toogleOpen(!isOpened);
+            } },
+            react_1.default.createElement(uikit_1.Icon, { data: isOpened ? icons_1.Xmark : icons_1.Bars, size: 24 })),
+        react_1.default.createElement(NHMobileNavigationPopup_1.NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
+            react_1.default.createElement("nav", { className: b('nav') },
+                react_1.default.createElement("ul", { className: b('list') }, (_a = data === null || data === void 0 ? void 0 : data.left) === null || _a === void 0 ? void 0 : _a.map((item, index) => (react_1.default.createElement("li", { className: b('item'), key: index },
+                    react_1.default.createElement(NHMobileNavigationItem_1.NHMobileNavigationItem, { item: item }))))),
+                react_1.default.createElement("ul", { className: b('list') }, (_b = data === null || data === void 0 ? void 0 : data.right) === null || _b === void 0 ? void 0 : _b.map((item, index) => (react_1.default.createElement("li", { className: b('item'), key: index },
+                    react_1.default.createElement(NHMobileNavigationItem_1.NHMobileNavigationItem, { item: item }))))),
+                (data === null || data === void 0 ? void 0 : data.buttons) && (react_1.default.createElement("div", { className: b('buttons') }, data.buttons.map((button, index) => (react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { size: "l", key: index, className: b('button') })))))),
+                (data === null || data === void 0 ? void 0 : data.login) && (react_1.default.createElement("div", { className: b('login-items') }, data.login.items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('login-item') },
+                    react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({}, item)))))))))));
+};
 exports.NHMobileNavigation = NHMobileNavigation;