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

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

@@ -14,111 +14,105 @@ unpredictable css rules order in build */
   display: none;
 }
 
-.pc-addons-nh-products-popup__container {
-  padding: 0;
+.pc-addons-nh-products-popup > div + div {
+  border-top: 1px solid var(--g-color-line-generic-solid);
 }
 
-.pc-addons-nh-products-popup > div + div {
-  border-top: 1px solid #e4ebf0;
+.pc-addons-nh-products-popup__section {
+  display: flex;
+  padding: 24px 32px;
 }
 
-.pc-addons-nh-products-popup__wrap {
-  padding: 24px;
-  gap: 24px;
+.pc-addons-nh-products-popup__section-head {
   display: flex;
   flex-direction: column;
+  width: 200px;
+  padding-right: 32px;
+  flex-shrink: 0;
+  gap: 2px;
 }
 
 .pc-addons-nh-products-popup__title {
-  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
-  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
-  padding: 24px;
-  max-width: 108px;
-  font-weight: 600;
-  background-color: #e0e0e0;
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+  color: var(--g-color-text-primary);
+  font-weight: 500;
 }
 
 .pc-addons-nh-products-popup__subtitle {
-  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
-  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
-  font-weight: 700;
-  color: #e0e0e0;
+  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-products-popup__powered-card {
-  color: inherit;
-  text-decoration: 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));
-  font-weight: 500;
-  background-color: #f2f6f9;
-  border-radius: 16px;
-  padding: 16px;
-  display: flex;
-  gap: 24px;
+.pc-addons-nh-products-popup__wrap, .pc-addons-nh-products-popup__wrap-scale {
+  display: grid;
+  gap: 24px 40px;
+  align-items: flex-start;
 }
 
-.pc-addons-nh-products-popup__powered-card-wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  gap: 20px;
+.pc-addons-nh-products-popup__wrap {
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-.pc-addons-nh-products-popup__powered-card-description {
-  color: #9fb1bd;
+.pc-addons-nh-products-popup__wrap-scale {
+  grid-template-columns: repeat(12, 1fr);
 }
 
-.pc-addons-nh-products-popup__powered-card-container-image {
-  flex: 1;
-  max-width: 140px;
+.pc-addons-nh-products-popup__wrap-scale > a {
+  grid-column: span 4;
+  grid-row: 1;
 }
 
-.pc-addons-nh-products-popup__powered-card-image {
-  width: 100%;
-  aspect-ratio: 1;
+.pc-addons-nh-products-popup__wrap-scale > .pc-addons-nh-products-popup__wrap:empty {
+  display: none;
+}
+
+.pc-addons-nh-products-popup__wrap-scale > a + .pc-addons-nh-products-popup__wrap {
+  grid-column: span 8;
 }
 
-.pc-addons-nh-products-popup__powered-card:hover {
-  background-color: var(--g-color-base-simple-hover);
+.pc-addons-nh-products-popup__wrap-scale > .pc-addons-nh-products-popup__wrap:last-child {
+  grid-column: span 12;
 }
 
-.pc-addons-nh-products-popup__run-card {
+.pc-addons-nh-products-popup__banner {
   color: inherit;
   text-decoration: 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));
-  font-weight: 500;
+  grid-area: 1/3/3/4;
   border-radius: 16px;
-  background-color: #f2f6f9;
   padding: 16px;
   display: flex;
-  flex-direction: column;
   gap: 20px;
-  height: 100%;
+  background: var(--nh-products-banner-background, transparent);
 }
 
-.pc-addons-nh-products-popup__run-card_border {
-  border: 1px solid #e4ebf0;
-  background-color: transparent;
+.pc-addons-nh-products-popup__banner_border {
+  border: 1px solid var(--g-color-line-generic-solid);
 }
 
-.pc-addons-nh-products-popup__run-card-wrap {
+.pc-addons-nh-products-popup__banner-wrap {
   display: flex;
   flex-direction: column;
   flex: 1;
   gap: 4px;
 }
 
-.pc-addons-nh-products-popup__run-card-description {
-  color: #9fb1bd;
+.pc-addons-nh-products-popup__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-products-banner-color, var(--g-color-text-primary));
+  font-weight: 600;
 }
 
-.pc-addons-nh-products-popup__run-card-image {
-  height: 40px;
+.pc-addons-nh-products-popup__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-products-banner-color, var(--g-color-text-secondary));
 }
 
-.pc-addons-nh-products-popup__run-card:hover {
-  background-color: var(--g-color-base-simple-hover);
+.pc-addons-nh-products-popup__banner-image {
+  display: block;
+  width: 86px;
+  aspect-ratio: 1;
 }

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

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

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

@@ -2,64 +2,42 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NHProductsPopup = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+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 NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
 const b = (0, cn_1.block)('nh-products-popup');
-const PoweredCard = ({ title, description, image, url }) => {
-    return (react_1.default.createElement("a", Object.assign({ href: url, className: b('powered-card') }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
-        react_1.default.createElement("div", { className: b('powered-card-wrap') },
-            react_1.default.createElement("div", { className: b('powered-card-title') }, title),
-            react_1.default.createElement("div", { className: b('powered-card-description') }, description)),
-        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('powered-card-image'), containerClassName: b('powered-card-container-image'), src: image })));
+const NHBanner = ({ title, description, image, url, background, color, border, }) => {
+    const styles = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (background ? { '--nh-products-banner-background': background } : {})), (color ? { '--nh-products-banner-color': color } : {}))), [background, color]);
+    return (react_1.default.createElement("a", Object.assign({ href: url, className: b('banner', { border }), style: styles }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('banner-image'), src: image }),
+        react_1.default.createElement("div", { className: b('banner-wrap') },
+            react_1.default.createElement("div", { className: b('banner-title') }, title),
+            react_1.default.createElement("div", { className: b('banner-description') }, description))));
 };
-const RunCard = ({ title, description, image, border, url }) => {
-    return (react_1.default.createElement("a", Object.assign({ href: url, className: b('run-card', { border: border }) }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
-        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('run-card-image'), src: image }),
-        react_1.default.createElement("div", { className: b('run-card-wrap') },
-            react_1.default.createElement("div", { className: b('run-card-title') }, title),
-            react_1.default.createElement("div", { className: b('run-card-description') }, description))));
-};
-const NHProductsPopup = ({ sections, poweredCard }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') }, sections.map((section, index) => {
-    var _a, _b, _c;
-    const isScaleSection = index === 2; // "Scale" section is usually the 3rd one
-    const isRunSection = section.runCards && section.runCards.length > 0;
+const NHProductsPopup = ({ sections, primaryColor, primaryColorHover, }) => (react_1.default.createElement("div", { className: b() }, sections.map((section) => {
+    var _a, _b, _c, _d, _e;
     let content;
-    if (isRunSection) {
-        content = (react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
-            react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, (_a = section.runCards) === null || _a === void 0 ? void 0 : _a.map((card, cardIndex) => (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { key: `${card.title}-${cardIndex}`, sizes: {
-                    [gravity_ui_page_constructor_1.GridColumnSize.Md]: 3,
-                    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
-                } },
-                react_1.default.createElement(RunCard, Object.assign({}, card))))))));
+    if ('mode' in section && section.mode === 'run') {
+        content = (react_1.default.createElement("div", { className: b('wrap-scale') },
+            ((_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('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: `${item.title}-${cardIndex + 1}` }, item, { column: true }))))),
+            react_1.default.createElement("div", { className: b('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: `${item.title}-${cardIndex + 4}` }, item, { column: true })))))));
     }
-    else if (isScaleSection) {
-        content = (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { sizes: {
-                    [gravity_ui_page_constructor_1.GridColumnSize.Md]: 8,
-                    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
-                } },
-                react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, (_b = section.items) === null || _b === void 0 ? void 0 : _b.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}` }, item, { hover: true, sizes: {
-                        [gravity_ui_page_constructor_1.GridColumnSize.Md]: 6,
-                        [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
-                    } })))))),
-            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { sizes: {
-                    [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4,
-                    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
-                } }, poweredCard && react_1.default.createElement(PoweredCard, Object.assign({}, poweredCard)))));
+    else if ('mode' in section && section.mode === 'scale') {
+        content = (react_1.default.createElement("div", { className: b('wrap') }, (_d = section.items) === null || _d === void 0 ? void 0 :
+            _d.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}`, imageColor: primaryColor, imageColorHover: primaryColorHover }, item)))),
+            section.banner && react_1.default.createElement(NHBanner, Object.assign({}, section.banner))));
     }
     else {
-        content = (_c = section.items) === null || _c === void 0 ? void 0 : _c.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}` }, item, { hover: true, sizes: {
-                [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4,
-                [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
-            } }))));
+        content = (react_1.default.createElement("div", { className: b('wrap') }, (_e = section.items) === null || _e === void 0 ? void 0 :
+            _e.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}`, imageColor: primaryColor, imageColorHover: primaryColorHover }, item)))),
+            ' '));
     }
-    return (react_1.default.createElement(gravity_ui_page_constructor_1.Row, { key: section.title },
-        react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('title') }, section.title),
-        react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('wrap') },
-            react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
-                react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('subtitle') }, section.subtitle)),
-            react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, content))));
+    return (react_1.default.createElement("div", { className: b('section'), key: section.title },
+        react_1.default.createElement("div", { className: b('section-head') },
+            react_1.default.createElement("div", { className: b('title') }, section.title),
+            react_1.default.createElement("div", { className: b('subtitle') }, section.subtitle)),
+        content));
 })));
 exports.NHProductsPopup = NHProductsPopup;

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

@@ -1,134 +1,85 @@
 import type { ButtonProps, LinkProps } from '@doyourjob/gravity-ui-page-constructor';
 export declare enum NHNavigationItemType {
-    NHMediumPopup = "medium-popup",
     NHProductsPopup = "products-popup",
-    NHSolutionsPopup = "solutions-popup",
-    NHWhyPopup = "why-popup",
-    NHResourcesPopup = "resources-popup",
-    NHCompanyPopup = "company-popup",
-    NHInvestorPopup = "investor-popup",
+    NHDefaultPopup = "default-popup",
     Link = "link"
 }
-export declare enum NHNavigationTagColor {
-    Green = "green",
-    Yellow = "yellow",
-    Blue = "blue"
-}
 export interface NHLogoData {
     href?: string;
     src?: string;
     alt?: string;
 }
-export interface NHNavigationTag {
-    text: string;
-    color?: string;
-    textColor?: string;
-    size?: 's' | 'm';
-}
 export interface NHPopupItemData {
     title: string;
     url: string;
     slug?: string;
     description?: string;
-    icon?: string;
     image?: string | null;
-    tag?: NHNavigationTag;
-}
-export interface NHCategoryGroupData {
-    title?: string;
-    items: NHPopupItemData[];
-    imageSize?: 's' | 'xm' | 'm';
-    url?: string;
-}
-export interface NHMediumPopupData {
-    groups: NHCategoryGroupData[];
+    imageColor?: string;
+    imageColorHover?: string;
+    target?: string;
 }
-export interface NHSpecialCardData {
+export interface NHProductBannerData {
     title: string;
     description: string;
     image: string;
     url: string;
-}
-export interface NHRunCardData {
-    title: string;
-    description: string;
-    image: string;
+    background?: string;
+    color?: string;
     border?: boolean;
-    url: string;
 }
-export interface NHProductsPopupSection {
+export interface NHProductsPopupSectionBase {
     title: string;
     subtitle: string;
     items?: NHPopupItemData[];
-    runCards?: NHRunCardData[];
 }
+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[];
-    poweredCard: NHSpecialCardData;
 }
-export interface NHSolutionsPopupSection {
+export interface NHDefaultPopupSection {
     title: string;
     subtitle: string;
     items: NHPopupItemData[];
+    columns?: number;
 }
-export interface NHSolutionsPopupData {
-    sections: NHSolutionsPopupSection[];
-}
-export interface NHWhyPopupGroup {
-    title: string;
-    items: NHPopupItemData[];
-}
-export interface NHWhyPopupData {
-    groups: NHWhyPopupGroup[];
-    card: NHSpecialCardData;
-}
-export interface NHBannerData {
+export interface NHStoryCardData {
     title: string;
     description: string;
     image: string;
-    icon: string;
     url: string;
 }
 export interface NHEventCardData {
-    url: string;
-    tag: string;
     title: string;
-    date: string;
+    caption: string;
+    description: string;
     image: string;
-    location: string;
-}
-export interface NHResourcesPopupGroup {
-    title: string;
-    subtitle: string;
     url: string;
-    items: NHPopupItemData[];
-}
-export interface NHResourcesPopupData {
-    groups: NHResourcesPopupGroup[];
-    banner: NHBannerData;
-    events: {
-        title: string;
-        items: NHEventCardData[];
-    };
-}
-export interface NHCompanyPopupSection {
-    title: string;
-    items: NHPopupItemData[];
-}
-export interface NHCompanyPopupData {
-    sections: NHCompanyPopupSection[];
 }
 export interface NHStockData {
     title: string;
-    price: string;
+    value: string;
     date: string;
+    background?: string;
 }
-export interface NHInvestorPopupData {
-    title: string;
-    subtitle: string;
-    url: string;
-    items: NHPopupItemData[];
-    stock: NHStockData;
+export interface NHDefaultPopupData {
+    sections: NHDefaultPopupSection[];
+    maxWidth?: number;
+    right?: {
+        title: string;
+        stories?: NHStoryCardData[];
+        events?: NHEventCardData[];
+        stock?: NHStockData;
+    };
 }
 export interface NHLoginItemData {
     title: string;
@@ -137,7 +88,7 @@ export interface NHLoginItemData {
 }
 export interface NHLoginPopupData {
     text: string;
-    items: NHLoginItemData[];
+    items: NHPopupItemData[];
 }
 export interface NHNavigationDefaultData {
     title: string;
@@ -146,35 +97,15 @@ export interface NHNavigationLinkData extends NHNavigationDefaultData {
     type: NHNavigationItemType.Link;
     data: LinkProps;
 }
-export interface NHNavigationMediumPopupData extends NHNavigationDefaultData {
-    type: NHNavigationItemType.NHMediumPopup;
-    data: NHMediumPopupData;
-}
 export interface NHNavigationProductsPopupData extends NHNavigationDefaultData {
     type: NHNavigationItemType.NHProductsPopup;
     data: NHProductsPopupData;
 }
-export interface NHNavigationSolutionsPopupData extends NHNavigationDefaultData {
-    type: NHNavigationItemType.NHSolutionsPopup;
-    data: NHSolutionsPopupData;
-}
-export interface NHNavigationWhyPopupData extends NHNavigationDefaultData {
-    type: NHNavigationItemType.NHWhyPopup;
-    data: NHWhyPopupData;
-}
-export interface NHNavigationResourcesPopupData extends NHNavigationDefaultData {
-    type: NHNavigationItemType.NHResourcesPopup;
-    data: NHResourcesPopupData;
-}
-export interface NHNavigationCompanyPopupData extends NHNavigationDefaultData {
-    type: NHNavigationItemType.NHCompanyPopup;
-    data: NHCompanyPopupData;
-}
-export interface NHNavigationInvestorPopupData extends NHNavigationDefaultData {
-    type: NHNavigationItemType.NHInvestorPopup;
-    data: NHInvestorPopupData;
+export interface NHNavigationDefaultPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHDefaultPopup;
+    data: NHDefaultPopupData;
 }
-export type NHNavigationItemData = NHNavigationLinkData | NHNavigationMediumPopupData | NHNavigationProductsPopupData | NHNavigationSolutionsPopupData | NHNavigationWhyPopupData | NHNavigationResourcesPopupData | NHNavigationCompanyPopupData | NHNavigationInvestorPopupData;
+export type NHNavigationItemData = NHNavigationLinkData | NHNavigationProductsPopupData | NHNavigationDefaultPopupData;
 export interface NHMobileNavigationDefaultData {
     title: string;
 }
@@ -192,11 +123,11 @@ export interface NHMobileNavigationGroupData extends NHMobileNavigationDefaultDa
 }
 export type NHMobileNavigationItemData = NHMobileNavigationLinkData | NHMobileNavigationGroupData;
 export interface NHNavigationData {
-    left: NHNavigationItemData[];
-    right: NHNavigationItemData[];
-    mobile: NHMobileNavigationItemData[];
-    login: NHLoginPopupData;
-    logo: NHLogoData;
-    buttons: ButtonProps[];
+    left?: NHNavigationItemData[];
+    right?: NHNavigationItemData[];
+    mobile?: NHMobileNavigationItemData[];
+    login?: NHLoginPopupData;
+    logo?: NHLogoData;
+    buttons?: ButtonProps[];
 }
 export type SetupRouteChangeHandler = (handler: () => void) => void;

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

@@ -1,20 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NHNavigationTagColor = exports.NHNavigationItemType = void 0;
+exports.NHNavigationItemType = void 0;
 var NHNavigationItemType;
 (function (NHNavigationItemType) {
-    NHNavigationItemType["NHMediumPopup"] = "medium-popup";
     NHNavigationItemType["NHProductsPopup"] = "products-popup";
-    NHNavigationItemType["NHSolutionsPopup"] = "solutions-popup";
-    NHNavigationItemType["NHWhyPopup"] = "why-popup";
-    NHNavigationItemType["NHResourcesPopup"] = "resources-popup";
-    NHNavigationItemType["NHCompanyPopup"] = "company-popup";
-    NHNavigationItemType["NHInvestorPopup"] = "investor-popup";
+    NHNavigationItemType["NHDefaultPopup"] = "default-popup";
     NHNavigationItemType["Link"] = "link";
 })(NHNavigationItemType = exports.NHNavigationItemType || (exports.NHNavigationItemType = {}));
-var NHNavigationTagColor;
-(function (NHNavigationTagColor) {
-    NHNavigationTagColor["Green"] = "green";
-    NHNavigationTagColor["Yellow"] = "yellow";
-    NHNavigationTagColor["Blue"] = "blue";
-})(NHNavigationTagColor = exports.NHNavigationTagColor || (exports.NHNavigationTagColor = {}));