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

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

@@ -1,10 +1,11 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-addons-nh-mobile-navigation-item {
+  padding: 16px 8px 16px 0;
+  cursor: pointer;
   display: flex;
   justify-content: space-between;
-  position: relative;
-  padding: 12px 0;
+  align-items: center;
 }
 
 .pc-addons-nh-mobile-navigation-item_type_link {
@@ -12,64 +13,64 @@ unpredictable css rules order in build */
   text-decoration: none;
   display: block;
   color: var(--g-color-text-primary);
-}
-
-.pc-addons-nh-mobile-navigation-item__arrow {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
+  font-weight: 500;
+  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));
 }
 
 .pc-addons-nh-mobile-navigation-item__text {
-  padding-right: 20px;
+  font-weight: 500;
+  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);
 }
 
-.pc-addons-nh-mobile-navigation-item__list {
-  padding: 10px 20px;
-  background-color: var(--g-color-base-generic);
-  border-radius: var(--g-border-radius-l);
+.pc-addons-nh-mobile-navigation-item__arrow {
+  color: var(--g-color-text-secondary);
 }
 
-.pc-addons-nh-mobile-navigation-item__list:not(:first-child) {
-  margin-top: 12px;
+.pc-addons-nh-mobile-navigation-item__content {
+  padding: 32px 0 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  background: var(--g-color-base-background);
 }
 
-.pc-addons-nh-mobile-navigation-item__list-items {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.pc-addons-nh-mobile-navigation-item__section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.pc-addons-nh-mobile-navigation-item__list-title {
+.pc-addons-nh-mobile-navigation-item__section-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));
-  margin: 0;
-  padding: 10px 0;
-}
-
-.pc-addons-nh-mobile-navigation-item__list-item {
-  color: inherit;
-  text-decoration: none;
-  display: block;
   color: var(--g-color-text-primary);
-  padding: 10px 0;
+  font-weight: 500;
 }
 
-.pc-addons-nh-mobile-navigation-item__list-item:hover, .pc-addons-nh-mobile-navigation-item__list-item:active {
-  --pc-text-header-color: inherit;
-  color: inherit;
+.pc-addons-nh-mobile-navigation-item__section-items {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
 }
 
+@media (min-width: 577px) {
+  .pc-addons-nh-mobile-navigation-item__section-items {
+    gap: 24px 40px;
+    grid-template-columns: 1fr 1fr;
+  }
+}
 .pc-addons-nh-mobile-navigation-item__list-link {
   color: inherit;
   text-decoration: none;
-  outline: none;
+  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);
+  padding: 12px 0;
+}
+
+.pc-addons-nh-mobile-navigation-item__list-link:hover {
   color: var(--g-color-text-link);
-  text-decoration: none;
-  cursor: pointer;
-  display: block;
-  padding: 10px 0;
 }

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

@@ -1,3 +1,7 @@
 import React from 'react';
-import { NHMobileNavigationItemData } from '../../models';
-export declare const NHMobileNavigationItem: (props: NHMobileNavigationItemData) => React.JSX.Element | null;
+import { NHNavigationItemData } from '../../models';
+interface NHMobileNavigationItemProps {
+    item?: NHNavigationItemData;
+}
+export declare const NHMobileNavigationItem: ({ item }: NHMobileNavigationItemProps) => React.JSX.Element | null;
+export {};

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

@@ -5,25 +5,29 @@ 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 models_1 = require("../../models");
+const NHDefaultPopupContent_1 = require("./components/NHDefaultPopupContent/NHDefaultPopupContent");
 const b = (0, cn_1.block)('nh-mobile-navigation-item');
-const NHMobileNavigationItem = (props) => {
+const NHMobileNavigationItem = ({ item }) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const toggleOpen = (0, react_1.useCallback)(() => {
         setIsOpened(!isOpened);
     }, [isOpened]);
-    if ('link' in props) {
-        return (react_1.default.createElement("a", Object.assign({ href: props.link.url, className: b({ type: 'link' }) }, (0, gravity_ui_page_constructor_1.getLinkProps)(props.link.url || '', undefined, props.link.target)), props.title));
-    }
-    if ('data' in props) {
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            toggleOpen();
+        }
+    }, [toggleOpen]);
+    if (item) {
+        if (item.type === models_1.NHNavigationItemType.Link) {
+            return (react_1.default.createElement("a", Object.assign({ href: item.data.url, className: b({ type: 'link' }) }, (0, gravity_ui_page_constructor_1.getLinkProps)(item.data.url || '', undefined, item.data.target)), item.title));
+        }
         return (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement("div", { className: b({ opened: isOpened }), onClick: toggleOpen },
-                react_1.default.createElement("div", { className: b('text') }, props.title),
+            react_1.default.createElement("div", { className: b(), onClick: toggleOpen, role: "button", tabIndex: 0, onKeyDown: handleKeyDown },
+                react_1.default.createElement("div", { className: b('text') }, item.title),
                 react_1.default.createElement("div", { className: b('arrow') },
                     react_1.default.createElement(gravity_ui_page_constructor_1.ToggleArrow, { size: 12, type: "vertical", open: isOpened, iconType: "navigation" }))),
-            react_1.default.createElement(gravity_ui_page_constructor_1.Foldable, { isOpened: isOpened }, props.data.map(({ title: itemTitle, items, }) => (react_1.default.createElement("div", { className: b('list'), key: items[0].title },
-                itemTitle && react_1.default.createElement("h5", { className: b('list-title') }, itemTitle),
-                react_1.default.createElement("ul", { className: b('list-items') }, items.map((linkItem) => (react_1.default.createElement("li", { className: b('li'), key: linkItem.title },
-                    react_1.default.createElement("a", Object.assign({ href: linkItem.url, className: b('list-item') }, (0, gravity_ui_page_constructor_1.getLinkProps)(linkItem.url || '')), linkItem.title)))))))))));
+            react_1.default.createElement(gravity_ui_page_constructor_1.Foldable, { isOpened: isOpened }, item.type === models_1.NHNavigationItemType.NHDefaultPopup && (react_1.default.createElement(NHDefaultPopupContent_1.NHDefaultPopupContent, { data: item.data })))));
     }
     return null;
 };

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

@@ -0,0 +1,56 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-default-popup-content {
+  padding: 32px 0 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  background: var(--g-color-base-background);
+}
+
+.pc-addons-nh-default-popup-content__section, .pc-addons-nh-default-popup-content__section-items {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.pc-addons-nh-default-popup-content__banner-container {
+  margin-top: 16px;
+}
+
+.pc-addons-nh-default-popup-content__section-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: 500;
+}
+
+.pc-addons-nh-default-popup-content__section-items {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+@media (min-width: 577px) {
+  .pc-addons-nh-default-popup-content__section-items {
+    gap: 24px 40px;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.pc-addons-nh-default-popup-content__right-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.pc-addons-nh-default-popup-content__right-items {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+@media (min-width: 577px) {
+  .pc-addons-nh-default-popup-content__right-items {
+    grid-template-columns: 1fr 1fr;
+  }
+}

package/build/cjs/components/NewHeader/components/NHMobileNavigationItem/components/NHDefaultPopupContent/NHDefaultPopupContent.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NHDefaultPopupData } from '../../../../models';
+export declare const NHDefaultPopupContent: ({ data }: {
+    data: NHDefaultPopupData;
+}) => React.JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHDefaultPopupContent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+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-content');
+const NHDefaultPopupContent = ({ data }) => {
+    var _a, _b;
+    return (react_1.default.createElement("div", { className: b() },
+        data.sections.map((section, idx) => {
+            const isRun = section.mode === 'run';
+            const hasSideHead = Boolean(section.mode);
+            return (react_1.default.createElement("div", { key: idx, className: b('section') },
+                section.title && react_1.default.createElement("div", { className: b('section-title') }, section.title),
+                react_1.default.createElement("div", { className: b('section-items') }, section.items.map((item, index) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: index, imageColor: hasSideHead && !isRun ? data.primaryColor : undefined, imageColorHover: hasSideHead && !isRun ? data.primaryColorHover : undefined }, item, { column: isRun }))))),
+                section.banner && (react_1.default.createElement("div", { className: b('banner-container') },
+                    react_1.default.createElement(NHBanner_1.NHBanner, Object.assign({}, section.banner))))));
+        }),
+        data.right && (react_1.default.createElement("div", { className: b('right-section') },
+            data.right.title && react_1.default.createElement("div", { className: b('section-title') }, data.right.title),
+            react_1.default.createElement("div", { className: b('right-items') }, (_a = data.right.stories) === null || _a === void 0 ? void 0 :
+                _a.map((story, i) => (react_1.default.createElement(NHStoryCard_1.NHStoryCard, Object.assign({ key: i }, story)))), (_b = data.right.events) === null || _b === void 0 ? void 0 :
+                _b.map((event, i) => (react_1.default.createElement(NHEventCard_1.NHEventCard, Object.assign({ key: i }, event)))),
+                data.right.stock && react_1.default.createElement(NHStock_1.NHStock, Object.assign({}, data.right.stock)))))));
+};
+exports.NHDefaultPopupContent = NHDefaultPopupContent;

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

@@ -3,53 +3,34 @@ unpredictable css rules order in build */
 .pc-addons-nh-mobile-navigation-popup {
   width: 100%;
   position: fixed;
-  top: 0;
-  z-index: 99;
-  padding: 48px 0 32px;
+  top: 64px;
+  left: 0;
+  z-index: 1000;
+  height: calc(100vh - 64px);
   background-color: var(--g-color-base-background);
-  border-radius: 0 0 var(--pc-border-radius, 24px) var(--pc-border-radius, 24px);
-  box-shadow: 0 3px 10px var(--g-color-base-generic);
+  box-shadow: none;
 }
 
 .pc-addons-nh-mobile-navigation-popup__transition-enter {
-  transform: translateY(-30px);
-  opacity: 0;
+  transform: translateY(-100%);
 }
 
 .pc-addons-nh-mobile-navigation-popup__transition-enter-active {
   transform: translateY(0);
-  opacity: 1;
-  transition: transform 0.4s, opacity 0.4s;
+  transition: transform 0.4s ease-out;
 }
 
 .pc-addons-nh-mobile-navigation-popup__transition-exit {
   transform: translateY(0);
-  opacity: 1;
-}
-
-.pc-addons-nh-mobile-navigation-popup__transition-exit .pc-addons-nh-mobile-navigation-popup__container {
-  opacity: 0;
 }
 
 .pc-addons-nh-mobile-navigation-popup__transition-exit-active {
-  transform: translateY(-30px);
-  opacity: 0;
-  transition: transform 0.4s, opacity 0.4s;
-}
-
-.pc-addons-nh-mobile-navigation-popup__no-scroll {
-  overflow: hidden;
+  transform: translateY(-100%);
+  transition: transform 0.4s ease-in;
 }
 
 .pc-addons-nh-mobile-navigation-popup__container {
-  padding: 4px 48px 0;
-  overflow: scroll;
+  padding: 0;
+  overflow-y: auto;
   height: 100%;
-}
-
-@media (max-width: 576px) {
-  .pc-addons-nh-mobile-navigation-popup__container {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
 }

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

@@ -10,12 +10,9 @@ const react_transition_group_1 = require("react-transition-group");
 const cn_1 = require("../../../../utils/cn");
 const b = (0, cn_1.block)('nh-mobile-navigation-popup');
 const TRANSITION_TIME = 400;
-const POPUP_MARGIN = 80;
-const HEADER_HEIGHT = 68;
 const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) => {
     const [body, setBody] = (0, react_1.useState)();
     const ref = (0, react_1.useRef)(null);
-    const [containerHeight, setContainerHeight] = (0, react_1.useState)(0);
     const handleScroll = (0, react_1.useCallback)(() => {
         var _a;
         const containerScrollTop = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop;
@@ -26,7 +23,6 @@ const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, })
     (0, uikit_1.useBodyScrollLock)({ enabled: isOpened });
     (0, react_1.useEffect)(() => {
         setBody(document.body);
-        setContainerHeight((window === null || window === void 0 ? void 0 : window.innerHeight) - POPUP_MARGIN - HEADER_HEIGHT);
         const element = ref.current;
         if (element) {
             element.addEventListener('scroll', handleScroll);
@@ -42,6 +38,6 @@ const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, })
     }
     return react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpened, classNames: b('transition'), unmountOnExit: true, timeout: TRANSITION_TIME },
         react_1.default.createElement(gravity_ui_page_constructor_1.OutsideClick, { className: b(), onOutsideClick: onClose },
-            react_1.default.createElement("div", { ref: ref, className: b('container'), style: { maxHeight: `${containerHeight}px` } }, children))), body);
+            react_1.default.createElement("div", { ref: ref, className: b('container') }, children))), body);
 };
 exports.NHMobileNavigationPopup = NHMobileNavigationPopup;

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

@@ -9,13 +9,10 @@ const models_1 = require("../../models");
 const NHDefaultPopup_1 = require("../NHDefaultPopup/NHDefaultPopup");
 const NHNavigationItem_1 = require("../NHNavigationItem/NHNavigationItem");
 const NHNavigationPopup_1 = require("../NHNavigationPopup/NHNavigationPopup");
-const NHProductsPopup_1 = require("../NHProductsPopup/NHProductsPopup");
 const b = (0, cn_1.block)('nh-navigation');
 const tooltipPrefixId = 'navigation-item-key';
 const getPopupContent = (sectionData) => {
     switch (sectionData.type) {
-        case models_1.NHNavigationItemType.NHProductsPopup:
-            return react_1.default.createElement(NHProductsPopup_1.NHProductsPopup, Object.assign({}, sectionData.data));
         case models_1.NHNavigationItemType.NHDefaultPopup:
             return react_1.default.createElement(NHDefaultPopup_1.NHDefaultPopup, Object.assign({}, sectionData.data));
         default:
@@ -53,6 +50,6 @@ const NHNavigation = ({ data, headerRef, setupRouteChangeHandler }) => {
         };
     }, [onEscapeKeyDown]);
     return (react_1.default.createElement("nav", null,
-        react_1.default.createElement("ul", { className: b() }, data.map((item, i) => (react_1.default.createElement(NHNavigationItem_1.NHNavigationItem, { key: item.title, item: item, handleActiveTab: handleActiveTab, index: i, isActive: activeTab === i, tooltipId: `${tooltipPrefixId}-${i}` }, activeTab === i && item.type !== models_1.NHNavigationItemType.Link && (react_1.default.createElement(NHNavigationPopup_1.NHNavigationPopup, { headerRef: headerRef, id: `${tooltipPrefixId}-${i}` }, getPopupContent(item)))))))));
+        react_1.default.createElement("ul", { className: b() }, data.map((item, i) => (react_1.default.createElement(NHNavigationItem_1.NHNavigationItem, { key: i, item: item, handleActiveTab: handleActiveTab, index: i, isActive: activeTab === i, tooltipId: `${tooltipPrefixId}-${i}` }, activeTab === i && item.type !== models_1.NHNavigationItemType.Link && (react_1.default.createElement(NHNavigationPopup_1.NHNavigationPopup, { headerRef: headerRef, id: `${tooltipPrefixId}-${i}` }, getPopupContent(item)))))))));
 };
 exports.NHNavigation = NHNavigation;

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

@@ -21,11 +21,11 @@ const NHNavigationItem = ({ item, isActive, handleActiveTab, index, children, to
         handleMouseLeave();
     }), [handleMouseLeave, setupRouteChangeHandler]);
     if (item.type === models_1.NHNavigationItemType.Link) {
-        return (react_1.default.createElement("li", { key: item.title, className: b({ disable: !((_a = item.data) === null || _a === void 0 ? void 0 : _a.url) }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        return (react_1.default.createElement("li", { className: b({ disable: !((_a = item.data) === null || _a === void 0 ? void 0 : _a.url) }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
             react_1.default.createElement("a", Object.assign({ className: b('text', { active: isActive }), href: (_b = item.data) === null || _b === void 0 ? void 0 : _b.url }, (0, gravity_ui_page_constructor_1.getLinkProps)(((_c = item.data) === null || _c === void 0 ? void 0 : _c.url) || '', undefined, (_d = item.data) === null || _d === void 0 ? void 0 : _d.target)), item.title),
             children));
     }
-    return (react_1.default.createElement("li", { key: item.title, className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+    return (react_1.default.createElement("li", { className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         react_1.default.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), onClick: handleMouseEnter, "aria-expanded": isActive, "aria-controls": tooltipId },
             item.title,
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: isActive ? ChevronUp_1.ChevronUp : ChevronDown_1.ChevronDown, size: 16 })),

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

@@ -30,6 +30,20 @@ unpredictable css rules order in build */
   align-self: initial;
 }
 
+@media (max-width: 769px) {
+  .pc-addons-nh-navigation-popup-item_column {
+    flex-direction: row;
+  }
+  .pc-addons-nh-navigation-popup-item_column .pc-addons-nh-navigation-popup-item__image {
+    width: 30px;
+    height: 30px;
+  }
+  .pc-addons-nh-navigation-popup-item_column .pc-addons-nh-navigation-popup-item__image-container {
+    padding: 5px;
+    border-radius: 0;
+    border: none;
+  }
+}
 .pc-addons-nh-navigation-popup-item:hover .pc-addons-nh-navigation-popup-item__description, .pc-addons-nh-navigation-popup-item:active .pc-addons-nh-navigation-popup-item__description {
   color: var(--g-color-text-primary);
 }
@@ -55,7 +69,7 @@ unpredictable css rules order in build */
   position: relative;
   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));
-  font-weight: 600;
+  font-weight: 500;
   color: var(--g-color-text-primary);
 }
 

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

@@ -0,0 +1,47 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-stock {
+  position: relative;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+  min-height: 240px;
+}
+
+.pc-addons-nh-stock__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.pc-addons-nh-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-stock__value {
+  color: var(--g-color-text-primary);
+  font-size: 36px;
+  line-height: 48px;
+  font-weight: 600;
+  z-index: 1;
+  margin-top: auto;
+}
+
+.pc-addons-nh-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;
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NHStockData } from '../../models';
+export declare const NHStock: ({ title, delayed, image }: NHStockData) => React.JSX.Element | null;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHStock = 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-stock');
+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() },
+        image ? react_1.default.createElement("img", { className: b('background'), src: image, alt: "Stock background" }) : null,
+        react_1.default.createElement("div", { className: b('title') }, title),
+        react_1.default.createElement("div", { className: b('title') }, data.price.percent),
+        react_1.default.createElement("div", { className: b('value') }, data.price.price),
+        react_1.default.createElement("div", { className: b('date') }, data.price.update),
+        react_1.default.createElement("div", { className: b('date') }, delayed)));
+};
+exports.NHStock = NHStock;

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

@@ -0,0 +1,42 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-story-card {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.pc-addons-nh-story-card:hover {
+  opacity: 0.8;
+}
+
+.pc-addons-nh-story-card__wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pc-addons-nh-story-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-story-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-story-card__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
+}

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHStoryCard = 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-story-card');
+const NHStoryCard = ({ title, 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('title') }, title),
+        react_1.default.createElement("div", { className: b('description') }, description))));
+exports.NHStoryCard = NHStoryCard;

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

@@ -1,6 +1,5 @@
 import type { ButtonProps, LinkProps } from '@doyourjob/gravity-ui-page-constructor';
 export declare enum NHNavigationItemType {
-    NHProductsPopup = "products-popup",
     NHDefaultPopup = "default-popup",
     Link = "link"
 }
@@ -29,29 +28,13 @@ export interface NHProductBannerData {
     color?: string;
     border?: boolean;
 }
-export interface NHProductsPopupSectionBase {
-    title: string;
-    subtitle: string;
-    items?: NHPopupItemData[];
-}
-export interface NHProductsPopupSectionRun extends NHProductsPopupSectionBase {
-    mode: 'run';
-}
-export interface NHProductsPopupSectionScale extends NHProductsPopupSectionBase {
-    mode: 'scale';
-    banner?: NHProductBannerData;
-}
-export type NHProductsPopupSection = NHProductsPopupSectionRun | NHProductsPopupSectionScale | NHProductsPopupSectionBase;
-export interface NHProductsPopupData {
-    primaryColor?: string;
-    primaryColorHover?: string;
-    sections: NHProductsPopupSection[];
-}
 export interface NHDefaultPopupSection {
     title: string;
     subtitle: string;
     items: NHPopupItemData[];
     columns?: number;
+    mode?: 'run' | 'scale' | 'build';
+    banner?: NHProductBannerData;
 }
 export interface NHStoryCardData {
     title: string;
@@ -99,35 +82,14 @@ export interface NHNavigationLinkData extends NHNavigationDefaultData {
     type: NHNavigationItemType.Link;
     data: LinkProps;
 }
-export interface NHNavigationProductsPopupData extends NHNavigationDefaultData {
-    type: NHNavigationItemType.NHProductsPopup;
-    data: NHProductsPopupData;
-}
 export interface NHNavigationDefaultPopupData extends NHNavigationDefaultData {
     type: NHNavigationItemType.NHDefaultPopup;
     data: NHDefaultPopupData;
 }
-export type NHNavigationItemData = NHNavigationLinkData | NHNavigationProductsPopupData | NHNavigationDefaultPopupData;
-export interface NHMobileNavigationDefaultData {
-    title: string;
-}
-export interface NHMobileNavigationLinkData extends NHMobileNavigationDefaultData {
-    link: LinkProps;
-}
-export interface NHMobileNavigationGroupData extends NHMobileNavigationDefaultData {
-    data: {
-        title?: string;
-        items: {
-            title: string;
-            url: string;
-        }[];
-    }[];
-}
-export type NHMobileNavigationItemData = NHMobileNavigationLinkData | NHMobileNavigationGroupData;
+export type NHNavigationItemData = NHNavigationLinkData | NHNavigationDefaultPopupData;
 export interface NHNavigationData {
     left?: NHNavigationItemData[];
     right?: NHNavigationItemData[];
-    mobile?: NHMobileNavigationItemData[];
     login?: NHLoginPopupData;
     logo?: NHLogoData;
     buttons?: ButtonProps[];

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NHNavigationItemType = void 0;
 var NHNavigationItemType;
 (function (NHNavigationItemType) {
-    NHNavigationItemType["NHProductsPopup"] = "products-popup";
     NHNavigationItemType["NHDefaultPopup"] = "default-popup";
     NHNavigationItemType["Link"] = "link";
 })(NHNavigationItemType = exports.NHNavigationItemType || (exports.NHNavigationItemType = {}));