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

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

@@ -126,8 +126,10 @@ unpredictable css rules order in build */
   padding: 20px;
   display: flex;
   flex-direction: column;
-  min-height: 310px;
+  height: 100%;
   border-radius: 8px;
+  overflow: hidden;
+  max-height: 300px;
 }
 
 .pc-addons-nh-default-popup__stock-background {
@@ -145,8 +147,8 @@ unpredictable css rules order in build */
   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;
-  margin-bottom: auto;
   z-index: 1;
+  margin-bottom: 4px;
 }
 
 .pc-addons-nh-default-popup__stock-value {
@@ -154,8 +156,8 @@ unpredictable css rules order in build */
   font-size: 36px;
   line-height: 48px;
   font-weight: 600;
-  margin-bottom: 4px;
   z-index: 1;
+  margin-top: auto;
 }
 
 .pc-addons-nh-default-popup__stock-date {
@@ -163,4 +165,5 @@ unpredictable css rules order in build */
   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/NHDefaultPopup/NHDefaultPopup.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { NHDefaultPopupData } from '../../models';
-export declare const NHDefaultPopup: ({ sections, right, maxWidth }: NHDefaultPopupData) => React.JSX.Element;
+export declare const NHDefaultPopup: ({ sections, right, maxWidth, primaryColor, primaryColorHover, }: NHDefaultPopupData) => React.JSX.Element;

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

@@ -18,7 +18,19 @@ const NHEventCard = ({ title, caption, description, image, url }) => (react_1.de
         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 NHDefaultPopup = ({ sections, right, maxWidth }) => {
+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
         ? {
             marginLeft: 'auto',
@@ -42,14 +54,10 @@ const NHDefaultPopup = ({ sections, right, maxWidth }) => {
             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))))))))),
+            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 }))))))))),
         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("div", { className: b('stock') },
-                right.stock.background ? (react_1.default.createElement("img", { className: b('stock-background'), src: right.stock.background, alt: "Stock background" })) : null,
-                react_1.default.createElement("div", { className: b('stock-title') }, right.stock.title),
-                react_1.default.createElement("div", { className: b('stock-value') }, right.stock.value),
-                react_1.default.createElement("div", { className: b('stock-date') }, right.stock.date)))))));
+            right.stock && react_1.default.createElement(NHStock, Object.assign({}, right.stock))))));
 };
 exports.NHDefaultPopup = NHDefaultPopup;

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

@@ -88,6 +88,16 @@ unpredictable css rules order in build */
   height: 24px;
 }
 
+@media (max-width: 769px) {
+  .pc-addons-nh-navigation-popup-item__image_desktop {
+    display: none;
+  }
+}
+@media (min-width: 770px) {
+  .pc-addons-nh-navigation-popup-item__image_mobile {
+    display: none;
+  }
+}
 .pc-addons-nh-navigation-popup-item__image-container {
   padding: 8px;
   border-radius: 8px;

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

@@ -9,11 +9,13 @@ const cn_1 = require("../../../../utils/cn");
 const ArrowRight_1 = require("./ArrowRight");
 const b = (0, cn_1.block)('nh-navigation-popup-item');
 const NHPopupItem = (props) => {
-    const { url, target, title, description, image, imageColor, imageColorHover, column } = props;
+    const { url, target, title, description, image, imageMobile, imageColor, imageColorHover, column, } = props;
     const styleImageContainer = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (imageColor ? { '--nh-popup-item-color': imageColor } : {})), (imageColorHover ? { '--nh-popup-item-color-hover': imageColorHover } : {}))), [imageColor, imageColorHover]);
+    const hasImage = image || imageMobile;
     return (react_1.default.createElement("a", Object.assign({ className: b({ disable: !url, column }), href: url }, (0, gravity_ui_page_constructor_1.getLinkProps)(url || '', undefined, target)),
-        image && (react_1.default.createElement("div", { className: b('image-container', { 'no-bg': !imageColor }), style: styleImageContainer },
-            react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image'), src: image }))),
+        hasImage && (react_1.default.createElement("div", { className: b('image-container', { 'no-bg': !imageColor }), style: styleImageContainer },
+            image && (react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image', { desktop: Boolean(imageMobile) }), src: image })),
+            imageMobile && (react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image', { mobile: true }), src: imageMobile })))),
         react_1.default.createElement("div", { className: b('container') },
             react_1.default.createElement("div", { className: b('title') },
                 title,

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

@@ -15,6 +15,7 @@ export interface NHPopupItemData {
     slug?: string;
     description?: string;
     image?: string | null;
+    imageMobile?: string | null;
     imageColor?: string;
     imageColorHover?: string;
     target?: string;
@@ -66,14 +67,15 @@ export interface NHEventCardData {
     url: string;
 }
 export interface NHStockData {
-    title: string;
-    value: string;
-    date: string;
-    background?: string;
+    title?: string;
+    image?: string;
+    delayed?: string;
 }
 export interface NHDefaultPopupData {
     sections: NHDefaultPopupSection[];
     maxWidth?: number;
+    primaryColor?: string;
+    primaryColorHover?: string;
     right?: {
         title: string;
         stories?: NHStoryCardData[];

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

@@ -126,8 +126,10 @@ unpredictable css rules order in build */
   padding: 20px;
   display: flex;
   flex-direction: column;
-  min-height: 310px;
+  height: 100%;
   border-radius: 8px;
+  overflow: hidden;
+  max-height: 300px;
 }
 
 .pc-addons-nh-default-popup__stock-background {
@@ -145,8 +147,8 @@ unpredictable css rules order in build */
   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;
-  margin-bottom: auto;
   z-index: 1;
+  margin-bottom: 4px;
 }
 
 .pc-addons-nh-default-popup__stock-value {
@@ -154,8 +156,8 @@ unpredictable css rules order in build */
   font-size: 36px;
   line-height: 48px;
   font-weight: 600;
-  margin-bottom: 4px;
   z-index: 1;
+  margin-top: auto;
 }
 
 .pc-addons-nh-default-popup__stock-date {
@@ -163,4 +165,5 @@ unpredictable css rules order in build */
   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/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { NHDefaultPopupData } from '../../models';
 import './NHDefaultPopup.css';
-export declare const NHDefaultPopup: ({ sections, right, maxWidth }: NHDefaultPopupData) => React.JSX.Element;
+export declare const NHDefaultPopup: ({ sections, right, maxWidth, primaryColor, primaryColorHover, }: NHDefaultPopupData) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import { Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import React, { useContext, useMemo } from 'react';
+import { HeaderStockContext, Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../../../utils/cn';
 import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
 import './NHDefaultPopup.css';
@@ -15,7 +15,19 @@ const NHEventCard = ({ title, caption, description, image, url }) => (React.crea
         React.createElement("div", { className: b('card-caption') }, caption),
         React.createElement("div", { className: b('card-title') }, title),
         React.createElement("div", { className: b('card-description') }, description))));
-export const NHDefaultPopup = ({ sections, right, maxWidth }) => {
+const NHStock = ({ title, delayed, image }) => {
+    const data = useContext(HeaderStockContext);
+    if (!data.price)
+        return null;
+    return (React.createElement("div", { className: b('stock') },
+        image ? (React.createElement("img", { className: b('stock-background'), src: image, alt: "Stock background" })) : null,
+        React.createElement("div", { className: b('stock-title') }, title),
+        React.createElement("div", { className: b('stock-title') }, data.price.percent),
+        React.createElement("div", { className: b('stock-value') }, data.price.price),
+        React.createElement("div", { className: b('stock-date') }, data.price.update),
+        React.createElement("div", { className: b('stock-date') }, delayed)));
+};
+export const NHDefaultPopup = ({ sections, right, maxWidth, primaryColor, primaryColorHover, }) => {
     const rootStyle = useMemo(() => maxWidth
         ? {
             marginLeft: 'auto',
@@ -39,13 +51,9 @@ export const NHDefaultPopup = ({ sections, right, maxWidth }) => {
             section.title || section.subtitle ? (React.createElement("div", { className: b('head') },
                 React.createElement("div", { className: b('title') }, section.title),
                 React.createElement("div", { className: b('subtitle') }, section.subtitle))) : null,
-            React.createElement("div", { className: b('wrap'), style: wrapsStyle[index] }, section.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title }, item))))))))),
+            React.createElement("div", { className: b('wrap'), style: wrapsStyle[index] }, section.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title }, item, { imageColor: primaryColor, imageColorHover: primaryColorHover }))))))))),
         right && (React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('title') }, right.title),
             cards && React.createElement("div", { className: b('cards') }, cards),
-            right.stock && (React.createElement("div", { className: b('stock') },
-                right.stock.background ? (React.createElement("img", { className: b('stock-background'), src: right.stock.background, alt: "Stock background" })) : null,
-                React.createElement("div", { className: b('stock-title') }, right.stock.title),
-                React.createElement("div", { className: b('stock-value') }, right.stock.value),
-                React.createElement("div", { className: b('stock-date') }, right.stock.date)))))));
+            right.stock && React.createElement(NHStock, Object.assign({}, right.stock))))));
 };

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

@@ -88,6 +88,16 @@ unpredictable css rules order in build */
   height: 24px;
 }
 
+@media (max-width: 769px) {
+  .pc-addons-nh-navigation-popup-item__image_desktop {
+    display: none;
+  }
+}
+@media (min-width: 770px) {
+  .pc-addons-nh-navigation-popup-item__image_mobile {
+    display: none;
+  }
+}
 .pc-addons-nh-navigation-popup-item__image-container {
   padding: 8px;
   border-radius: 8px;

package/build/esm/components/NewHeader/components/NHPopupItem/NHPopupItem.js

@@ -6,11 +6,13 @@ import { ArrowRight } from './ArrowRight';
 import './NHPopupItem.css';
 const b = block('nh-navigation-popup-item');
 export const NHPopupItem = (props) => {
-    const { url, target, title, description, image, imageColor, imageColorHover, column } = props;
+    const { url, target, title, description, image, imageMobile, imageColor, imageColorHover, column, } = props;
     const styleImageContainer = useMemo(() => (Object.assign(Object.assign({}, (imageColor ? { '--nh-popup-item-color': imageColor } : {})), (imageColorHover ? { '--nh-popup-item-color-hover': imageColorHover } : {}))), [imageColor, imageColorHover]);
+    const hasImage = image || imageMobile;
     return (React.createElement("a", Object.assign({ className: b({ disable: !url, column }), href: url }, getLinkProps(url || '', undefined, target)),
-        image && (React.createElement("div", { className: b('image-container', { 'no-bg': !imageColor }), style: styleImageContainer },
-            React.createElement(Image, { className: b('image'), src: image }))),
+        hasImage && (React.createElement("div", { className: b('image-container', { 'no-bg': !imageColor }), style: styleImageContainer },
+            image && (React.createElement(Image, { className: b('image', { desktop: Boolean(imageMobile) }), src: image })),
+            imageMobile && (React.createElement(Image, { className: b('image', { mobile: true }), src: imageMobile })))),
         React.createElement("div", { className: b('container') },
             React.createElement("div", { className: b('title') },
                 title,

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

@@ -15,6 +15,7 @@ export interface NHPopupItemData {
     slug?: string;
     description?: string;
     image?: string | null;
+    imageMobile?: string | null;
     imageColor?: string;
     imageColorHover?: string;
     target?: string;
@@ -66,14 +67,15 @@ export interface NHEventCardData {
     url: string;
 }
 export interface NHStockData {
-    title: string;
-    value: string;
-    date: string;
-    background?: string;
+    title?: string;
+    image?: string;
+    delayed?: string;
 }
 export interface NHDefaultPopupData {
     sections: NHDefaultPopupSection[];
     maxWidth?: number;
+    primaryColor?: string;
+    primaryColorHover?: string;
     right?: {
         title: string;
         stories?: NHStoryCardData[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor-addons",
-  "version": "2.1.32",
+  "version": "2.1.34",
   "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
   "license": "MIT",
   "repository": {
@@ -72,7 +72,7 @@
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
-    "@doyourjob/gravity-ui-page-constructor": "^5.31.32",
+    "@doyourjob/gravity-ui-page-constructor": "^5.31.256",
     "@gravity-ui/uikit": "^6.23.1",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },