@doyourjob/gravity-ui-page-constructor-addons 2.1.31 → 2.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/build/cjs/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.css +167 -0
  2. package/build/cjs/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.d.ts +3 -0
  3. package/build/cjs/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.js +63 -0
  4. package/build/cjs/components/NewHeader/components/NHLoginPopup/NHLoginPopup.css +5 -31
  5. package/build/cjs/components/NewHeader/components/NHLoginPopup/NHLoginPopup.js +3 -4
  6. package/build/cjs/components/NewHeader/components/NHNavigation/NHNavigation.js +5 -21
  7. package/build/cjs/components/NewHeader/components/NHPopupItem/NHPopupItem.css +29 -3
  8. package/build/cjs/components/NewHeader/components/NHPopupItem/NHPopupItem.d.ts +0 -2
  9. package/build/cjs/components/NewHeader/components/NHPopupItem/NHPopupItem.js +5 -3
  10. package/build/cjs/components/NewHeader/components/NHProductsPopup/NHProductsPopup.css +1 -2
  11. package/build/cjs/components/NewHeader/components/NHProductsPopup/NHProductsPopup.js +5 -5
  12. package/build/cjs/components/NewHeader/models.d.ts +31 -111
  13. package/build/cjs/components/NewHeader/models.js +2 -13
  14. package/build/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.css +167 -0
  15. package/build/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.d.ts +4 -0
  16. package/build/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.js +59 -0
  17. package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.css +5 -31
  18. package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.js +3 -4
  19. package/build/esm/components/NewHeader/components/NHNavigation/NHNavigation.js +6 -22
  20. package/build/esm/components/NewHeader/components/NHPopupItem/NHPopupItem.css +29 -3
  21. package/build/esm/components/NewHeader/components/NHPopupItem/NHPopupItem.d.ts +0 -2
  22. package/build/esm/components/NewHeader/components/NHPopupItem/NHPopupItem.js +5 -3
  23. package/build/esm/components/NewHeader/components/NHProductsPopup/NHProductsPopup.css +1 -2
  24. package/build/esm/components/NewHeader/components/NHProductsPopup/NHProductsPopup.js +5 -5
  25. package/build/esm/components/NewHeader/models.d.ts +31 -111
  26. package/build/esm/components/NewHeader/models.js +1 -12
  27. package/package.json +2 -2
  28. package/build/cjs/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.css +0 -30
  29. package/build/cjs/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.d.ts +0 -3
  30. package/build/cjs/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.js +0 -18
  31. package/build/cjs/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.css +0 -86
  32. package/build/cjs/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.d.ts +0 -3
  33. package/build/cjs/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.js +0 -22
  34. package/build/cjs/components/NewHeader/components/NHMediumPopup/NHMediumPopup.css +0 -8
  35. package/build/cjs/components/NewHeader/components/NHMediumPopup/NHMediumPopup.d.ts +0 -3
  36. package/build/cjs/components/NewHeader/components/NHMediumPopup/NHMediumPopup.js +0 -13
  37. package/build/cjs/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.css +0 -209
  38. package/build/cjs/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.d.ts +0 -3
  39. package/build/cjs/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.js +0 -42
  40. package/build/cjs/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.css +0 -48
  41. package/build/cjs/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.d.ts +0 -3
  42. package/build/cjs/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.js +0 -17
  43. package/build/cjs/components/NewHeader/components/NHTag/NHTag.css +0 -21
  44. package/build/cjs/components/NewHeader/components/NHTag/NHTag.d.ts +0 -6
  45. package/build/cjs/components/NewHeader/components/NHTag/NHTag.js +0 -22
  46. package/build/cjs/components/NewHeader/components/NHWhyPopup/NHWhyPopup.css +0 -80
  47. package/build/cjs/components/NewHeader/components/NHWhyPopup/NHWhyPopup.d.ts +0 -3
  48. package/build/cjs/components/NewHeader/components/NHWhyPopup/NHWhyPopup.js +0 -21
  49. package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.css +0 -30
  50. package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.d.ts +0 -4
  51. package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.js +0 -14
  52. package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.css +0 -86
  53. package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.d.ts +0 -4
  54. package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.js +0 -18
  55. package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.css +0 -8
  56. package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.d.ts +0 -4
  57. package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.js +0 -9
  58. package/build/esm/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.css +0 -209
  59. package/build/esm/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.d.ts +0 -4
  60. package/build/esm/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.js +0 -38
  61. package/build/esm/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.css +0 -48
  62. package/build/esm/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.d.ts +0 -4
  63. package/build/esm/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.js +0 -13
  64. package/build/esm/components/NewHeader/components/NHTag/NHTag.css +0 -21
  65. package/build/esm/components/NewHeader/components/NHTag/NHTag.d.ts +0 -7
  66. package/build/esm/components/NewHeader/components/NHTag/NHTag.js +0 -18
  67. package/build/esm/components/NewHeader/components/NHWhyPopup/NHWhyPopup.css +0 -80
  68. package/build/esm/components/NewHeader/components/NHWhyPopup/NHWhyPopup.d.ts +0 -4
  69. package/build/esm/components/NewHeader/components/NHWhyPopup/NHWhyPopup.js +0 -17
@@ -0,0 +1,167 @@
1
+ /* use this for style redefinitions to awoid problems with
2
+ unpredictable css rules order in build */
3
+ .pc-addons-nh-default-popup {
4
+ background: var(--g-color-base-float);
5
+ box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
6
+ max-height: calc(100vh - 64px - 64px);
7
+ overflow: auto;
8
+ width: 100%;
9
+ border-radius: var(--pc-border-radius, 24px);
10
+ scrollbar-width: none;
11
+ display: flex;
12
+ }
13
+
14
+ .pc-addons-nh-default-popup::-webkit-scrollbar {
15
+ display: none;
16
+ }
17
+
18
+ .pc-addons-nh-default-popup__head {
19
+ display: flex;
20
+ align-items: baseline;
21
+ column-gap: 12px;
22
+ row-gap: 2px;
23
+ flex-wrap: wrap;
24
+ }
25
+
26
+ .pc-addons-nh-default-popup__title {
27
+ font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
28
+ line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
29
+ color: var(--g-color-text-primary);
30
+ font-weight: 500;
31
+ }
32
+
33
+ .pc-addons-nh-default-popup__subtitle {
34
+ font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
35
+ line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
36
+ color: var(--g-color-text-secondary);
37
+ }
38
+
39
+ .pc-addons-nh-default-popup__left {
40
+ flex: 1;
41
+ }
42
+
43
+ .pc-addons-nh-default-popup__left > div + div {
44
+ border-top: 1px solid var(--g-color-line-generic-solid);
45
+ }
46
+
47
+ .pc-addons-nh-default-popup__section {
48
+ display: flex;
49
+ padding: 24px 32px;
50
+ flex-direction: column;
51
+ gap: 24px;
52
+ }
53
+
54
+ .pc-addons-nh-default-popup__wrap {
55
+ display: grid;
56
+ gap: 24px 40px;
57
+ align-items: flex-start;
58
+ }
59
+
60
+ .pc-addons-nh-default-popup__right {
61
+ width: 100%;
62
+ max-width: 320px;
63
+ flex-shrink: 0;
64
+ border-left: 1px solid var(--g-color-line-generic-solid);
65
+ display: flex;
66
+ flex-direction: column;
67
+ padding: 24px 32px;
68
+ gap: 20px;
69
+ }
70
+
71
+ .pc-addons-nh-default-popup__cards {
72
+ display: flex;
73
+ flex-direction: column;
74
+ gap: 24px;
75
+ }
76
+
77
+ .pc-addons-nh-default-popup__card {
78
+ color: inherit;
79
+ text-decoration: none;
80
+ border-radius: 16px;
81
+ display: flex;
82
+ flex-direction: column;
83
+ gap: 12px;
84
+ cursor: pointer;
85
+ transition: opacity 0.2s;
86
+ }
87
+
88
+ .pc-addons-nh-default-popup__card:hover {
89
+ opacity: 0.8;
90
+ }
91
+
92
+ .pc-addons-nh-default-popup__card-wrap {
93
+ display: flex;
94
+ flex-direction: column;
95
+ gap: 4px;
96
+ }
97
+
98
+ .pc-addons-nh-default-popup__card-caption {
99
+ font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
100
+ line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
101
+ color: var(--g-color-text-secondary);
102
+ }
103
+
104
+ .pc-addons-nh-default-popup__card-title {
105
+ font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
106
+ line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
107
+ color: var(--g-color-text-primary);
108
+ font-weight: 600;
109
+ }
110
+
111
+ .pc-addons-nh-default-popup__card-description {
112
+ font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
113
+ line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
114
+ color: var(--g-color-text-secondary);
115
+ }
116
+
117
+ .pc-addons-nh-default-popup__card-image {
118
+ display: block;
119
+ width: 100%;
120
+ aspect-ratio: 16/9;
121
+ object-fit: cover;
122
+ }
123
+
124
+ .pc-addons-nh-default-popup__stock {
125
+ position: relative;
126
+ padding: 20px;
127
+ display: flex;
128
+ flex-direction: column;
129
+ min-height: 310px;
130
+ border-radius: 8px;
131
+ }
132
+
133
+ .pc-addons-nh-default-popup__stock-background {
134
+ position: absolute;
135
+ top: 0;
136
+ left: 0;
137
+ width: 100%;
138
+ height: 100%;
139
+ object-fit: cover;
140
+ display: block;
141
+ }
142
+
143
+ .pc-addons-nh-default-popup__stock-title {
144
+ font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
145
+ line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
146
+ color: var(--g-color-text-primary);
147
+ font-weight: 600;
148
+ z-index: 1;
149
+ margin-bottom: 4px;
150
+ }
151
+
152
+ .pc-addons-nh-default-popup__stock-value {
153
+ color: var(--g-color-text-primary);
154
+ font-size: 36px;
155
+ line-height: 48px;
156
+ font-weight: 600;
157
+ z-index: 1;
158
+ margin-top: auto;
159
+ }
160
+
161
+ .pc-addons-nh-default-popup__stock-date {
162
+ font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
163
+ line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
164
+ color: var(--g-color-text-secondary);
165
+ z-index: 1;
166
+ margin-top: 4px;
167
+ }
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { NHDefaultPopupData } from '../../models';
3
+ export declare const NHDefaultPopup: ({ sections, right, maxWidth, primaryColor, primaryColorHover, }: NHDefaultPopupData) => React.JSX.Element;
@@ -0,0 +1,63 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.NHDefaultPopup = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importStar(require("react"));
6
+ const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
7
+ const cn_1 = require("../../../../utils/cn");
8
+ const NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
9
+ const b = (0, cn_1.block)('nh-default-popup');
10
+ 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)),
11
+ react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('card-image'), src: image }),
12
+ react_1.default.createElement("div", { className: b('card-wrap') },
13
+ react_1.default.createElement("div", { className: b('card-title') }, title),
14
+ react_1.default.createElement("div", { className: b('card-description') }, description))));
15
+ 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)),
16
+ react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('card-image'), src: image }),
17
+ react_1.default.createElement("div", { className: b('card-wrap') },
18
+ react_1.default.createElement("div", { className: b('card-caption') }, caption),
19
+ react_1.default.createElement("div", { className: b('card-title') }, title),
20
+ react_1.default.createElement("div", { className: b('card-description') }, description))));
21
+ const NHStock = ({ background }) => {
22
+ const data = (0, react_1.useContext)(gravity_ui_page_constructor_1.HeaderStockContext);
23
+ if (!data.price)
24
+ return null;
25
+ return (react_1.default.createElement("div", { className: b('stock') },
26
+ background ? (react_1.default.createElement("img", { className: b('stock-background'), src: background, alt: "Stock background" })) : null,
27
+ react_1.default.createElement("div", { className: b('stock-title') }, data.price.name),
28
+ react_1.default.createElement("div", { className: b('stock-title') }, data.price.percent),
29
+ react_1.default.createElement("div", { className: b('stock-value') }, data.price.price),
30
+ react_1.default.createElement("div", { className: b('stock-date') }, data.price.update),
31
+ react_1.default.createElement("div", { className: b('stock-date') }, data.price.delayed)));
32
+ };
33
+ const NHDefaultPopup = ({ sections, right, maxWidth, primaryColor, primaryColorHover, }) => {
34
+ const rootStyle = (0, react_1.useMemo)(() => maxWidth
35
+ ? {
36
+ marginLeft: 'auto',
37
+ maxWidth,
38
+ }
39
+ : undefined, [maxWidth]);
40
+ const wrapsStyle = (0, react_1.useMemo)(() => sections.map((section) => ({
41
+ gridTemplateColumns: `repeat(${section.columns || 3}, 1fr)`,
42
+ })), [sections]);
43
+ const cards = (0, react_1.useMemo)(() => {
44
+ if (right === null || right === void 0 ? void 0 : right.stories) {
45
+ return right.stories.map((card, index) => react_1.default.createElement(NHStoryCard, Object.assign({ key: index }, card)));
46
+ }
47
+ if (right === null || right === void 0 ? void 0 : right.events) {
48
+ return right.events.map((card, index) => react_1.default.createElement(NHEventCard, Object.assign({ key: index }, card)));
49
+ }
50
+ return null;
51
+ }, [right]);
52
+ return (react_1.default.createElement("div", { className: b(), style: rootStyle },
53
+ react_1.default.createElement("div", { className: b('left') }, sections.map((section, index) => (react_1.default.createElement("div", { key: index, className: b('section') },
54
+ section.title || section.subtitle ? (react_1.default.createElement("div", { className: b('head') },
55
+ react_1.default.createElement("div", { className: b('title') }, section.title),
56
+ react_1.default.createElement("div", { className: b('subtitle') }, section.subtitle))) : null,
57
+ 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 }))))))))),
58
+ right && (react_1.default.createElement("div", { className: b('right') },
59
+ react_1.default.createElement("div", { className: b('title') }, right.title),
60
+ cards && react_1.default.createElement("div", { className: b('cards') }, cards),
61
+ right.stock && react_1.default.createElement(NHStock, { background: right.stockImage })))));
62
+ };
63
+ exports.NHDefaultPopup = NHDefaultPopup;
@@ -6,9 +6,9 @@ unpredictable css rules order in build */
6
6
  box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
7
7
  max-height: calc(100vh - 64px - 64px);
8
8
  overflow: auto;
9
- max-width: 260px;
10
9
  margin-left: auto;
11
- width: 100%;
10
+ width: max-content;
11
+ min-width: 212px;
12
12
  scrollbar-width: none;
13
13
  }
14
14
 
@@ -16,36 +16,10 @@ unpredictable css rules order in build */
16
16
  display: none;
17
17
  }
18
18
 
19
- .pc-addons-nh-login-popup__container {
20
- padding: 8px;
21
- gap: 8px;
22
- display: flex;
23
- flex-direction: column;
19
+ .pc-addons-nh-login-popup > div + div {
20
+ border-top: 1px solid var(--g-color-line-generic-solid);
24
21
  }
25
22
 
26
23
  .pc-addons-nh-login-popup__item {
27
- padding: 8px;
28
- display: flex;
29
- flex-direction: column;
30
- gap: 4px;
31
- width: 100%;
32
- border-radius: 8px;
33
- cursor: pointer;
34
- }
35
-
36
- .pc-addons-nh-login-popup__item:hover {
37
- background: var(--g-color-private-black-50);
38
- }
39
-
40
- .pc-addons-nh-login-popup__title {
41
- font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
42
- line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
43
- font-weight: 500;
44
- }
45
-
46
- .pc-addons-nh-login-popup__subtitle {
47
- font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
48
- line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
49
- font-weight: 500;
50
- color: #9fb1bd;
24
+ padding: 16px;
51
25
  }
@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.NHLoginPopup = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
- const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
7
6
  const cn_1 = require("../../../../utils/cn");
7
+ const NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
8
8
  const b = (0, cn_1.block)('nh-login-popup');
9
- const NHLoginPopup = ({ items }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') }, items.map((item) => (react_1.default.createElement("a", Object.assign({ href: item.url, className: b('item'), key: item.title }, (0, gravity_ui_page_constructor_1.getLinkProps)(item.url || '')),
10
- react_1.default.createElement("div", { className: b('title') }, item.title),
11
- react_1.default.createElement("div", { className: b('subtitle') }, item.subtitle))))));
9
+ const NHLoginPopup = ({ items }) => (react_1.default.createElement("div", { className: b() }, items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('item') },
10
+ react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({}, item)))))));
12
11
  exports.NHLoginPopup = NHLoginPopup;
@@ -6,34 +6,18 @@ const react_1 = tslib_1.__importStar(require("react"));
6
6
  const cn_1 = require("../../../../utils/cn");
7
7
  const constants_1 = require("../../constants");
8
8
  const models_1 = require("../../models");
9
- const NHCompanyPopup_1 = require("../NHCompanyPopup/NHCompanyPopup");
10
- const NHInvestorPopup_1 = require("../NHInvestorPopup/NHInvestorPopup");
11
- const NHMediumPopup_1 = require("../NHMediumPopup/NHMediumPopup");
9
+ const NHDefaultPopup_1 = require("../NHDefaultPopup/NHDefaultPopup");
12
10
  const NHNavigationItem_1 = require("../NHNavigationItem/NHNavigationItem");
13
11
  const NHNavigationPopup_1 = require("../NHNavigationPopup/NHNavigationPopup");
14
12
  const NHProductsPopup_1 = require("../NHProductsPopup/NHProductsPopup");
15
- const NHResourcesPopup_1 = require("../NHResourcesPopup/NHResourcesPopup");
16
- const NHSolutionsPopup_1 = require("../NHSolutionsPopup/NHSolutionsPopup");
17
- const NHWhyPopup_1 = require("../NHWhyPopup/NHWhyPopup");
18
13
  const b = (0, cn_1.block)('nh-navigation');
19
14
  const tooltipPrefixId = 'navigation-item-key';
20
15
  const getPopupContent = (sectionData) => {
21
- const { type, data } = sectionData;
22
- switch (type) {
23
- case models_1.NHNavigationItemType.NHMediumPopup:
24
- return react_1.default.createElement(NHMediumPopup_1.NHMediumPopup, Object.assign({}, data));
16
+ switch (sectionData.type) {
25
17
  case models_1.NHNavigationItemType.NHProductsPopup:
26
- return react_1.default.createElement(NHProductsPopup_1.NHProductsPopup, Object.assign({}, data));
27
- case models_1.NHNavigationItemType.NHSolutionsPopup:
28
- return react_1.default.createElement(NHSolutionsPopup_1.NHSolutionsPopup, Object.assign({}, data));
29
- case models_1.NHNavigationItemType.NHWhyPopup:
30
- return react_1.default.createElement(NHWhyPopup_1.NHWhyPopup, Object.assign({}, data));
31
- case models_1.NHNavigationItemType.NHResourcesPopup:
32
- return react_1.default.createElement(NHResourcesPopup_1.NHResourcesPopup, Object.assign({}, data));
33
- case models_1.NHNavigationItemType.NHCompanyPopup:
34
- return react_1.default.createElement(NHCompanyPopup_1.NHCompanyPopup, Object.assign({}, data));
35
- case models_1.NHNavigationItemType.NHInvestorPopup:
36
- return react_1.default.createElement(NHInvestorPopup_1.NHInvestorPopup, Object.assign({}, data));
18
+ return react_1.default.createElement(NHProductsPopup_1.NHProductsPopup, Object.assign({}, sectionData.data));
19
+ case models_1.NHNavigationItemType.NHDefaultPopup:
20
+ return react_1.default.createElement(NHDefaultPopup_1.NHDefaultPopup, Object.assign({}, sectionData.data));
37
21
  default:
38
22
  return null;
39
23
  }
@@ -26,6 +26,10 @@ unpredictable css rules order in build */
26
26
  border: none;
27
27
  }
28
28
 
29
+ .pc-addons-nh-navigation-popup-item_column .pc-addons-nh-navigation-popup-item__container {
30
+ align-self: initial;
31
+ }
32
+
29
33
  .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 {
30
34
  color: var(--g-color-text-primary);
31
35
  }
@@ -35,14 +39,20 @@ unpredictable css rules order in build */
35
39
  }
36
40
 
37
41
  .pc-addons-nh-navigation-popup-item:hover .pc-addons-nh-navigation-popup-item__title > svg, .pc-addons-nh-navigation-popup-item:active .pc-addons-nh-navigation-popup-item__title > svg {
38
- display: inline-block;
42
+ pointer-events: initial;
43
+ opacity: 1;
39
44
  }
40
45
 
41
46
  .pc-addons-nh-navigation-popup-item_disable {
42
47
  pointer-events: none;
43
48
  }
44
49
 
50
+ .pc-addons-nh-navigation-popup-item__container {
51
+ align-self: center;
52
+ }
53
+
45
54
  .pc-addons-nh-navigation-popup-item__title {
55
+ position: relative;
46
56
  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
47
57
  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
48
58
  font-weight: 600;
@@ -50,13 +60,18 @@ unpredictable css rules order in build */
50
60
  }
51
61
 
52
62
  .pc-addons-nh-navigation-popup-item__title > svg {
53
- display: none;
54
- vertical-align: sub;
63
+ display: inline-block;
64
+ position: absolute;
65
+ margin-top: 3px;
66
+ transition: opacity 0.2s;
67
+ opacity: 0;
68
+ pointer-events: none;
55
69
  }
56
70
 
57
71
  .pc-addons-nh-navigation-popup-item__description {
58
72
  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
59
73
  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
74
+ transition: color 0.2s;
60
75
  display: block;
61
76
  margin-top: 1px;
62
77
  color: var(--g-color-text-secondary);
@@ -73,10 +88,21 @@ unpredictable css rules order in build */
73
88
  height: 24px;
74
89
  }
75
90
 
91
+ @media (max-width: 769px) {
92
+ .pc-addons-nh-navigation-popup-item__image_desktop {
93
+ display: none;
94
+ }
95
+ }
96
+ @media (min-width: 770px) {
97
+ .pc-addons-nh-navigation-popup-item__image_mobile {
98
+ display: none;
99
+ }
100
+ }
76
101
  .pc-addons-nh-navigation-popup-item__image-container {
77
102
  padding: 8px;
78
103
  border-radius: 8px;
79
104
  background: var(--nh-popup-item-color);
105
+ transition: background 0.2s;
80
106
  }
81
107
 
82
108
  .pc-addons-nh-navigation-popup-item__image-container_no-bg {
@@ -1,8 +1,6 @@
1
1
  import React from 'react';
2
2
  import { NHPopupItemData } from '../../models';
3
3
  export interface NHPopupItemProps extends Partial<NHPopupItemData> {
4
- hover?: boolean;
5
4
  column?: boolean;
6
- target?: string;
7
5
  }
8
6
  export declare const NHPopupItem: (props: NHPopupItemProps) => React.JSX.Element;
@@ -9,11 +9,13 @@ const cn_1 = require("../../../../utils/cn");
9
9
  const ArrowRight_1 = require("./ArrowRight");
10
10
  const b = (0, cn_1.block)('nh-navigation-popup-item');
11
11
  const NHPopupItem = (props) => {
12
- const { url, target, title, description, image, imageColor, imageColorHover, column } = props;
12
+ const { url, target, title, description, image, imageMobile, imageColor, imageColorHover, column, } = props;
13
13
  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]);
14
+ const hasImage = image || imageMobile;
14
15
  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)),
15
- image && (react_1.default.createElement("div", { className: b('image-container', { 'no-bg': !imageColor }), style: styleImageContainer },
16
- react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image'), src: image }))),
16
+ hasImage && (react_1.default.createElement("div", { className: b('image-container', { 'no-bg': !imageColor }), style: styleImageContainer },
17
+ image && (react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image', { desktop: Boolean(imageMobile) }), src: image })),
18
+ imageMobile && (react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image', { mobile: true }), src: imageMobile })))),
17
19
  react_1.default.createElement("div", { className: b('container') },
18
20
  react_1.default.createElement("div", { className: b('title') },
19
21
  title,
@@ -15,7 +15,7 @@ unpredictable css rules order in build */
15
15
  }
16
16
 
17
17
  .pc-addons-nh-products-popup > div + div {
18
- border-top: 1px solid #e4ebf0;
18
+ border-top: 1px solid var(--g-color-line-generic-solid);
19
19
  }
20
20
 
21
21
  .pc-addons-nh-products-popup__section {
@@ -80,7 +80,6 @@ unpredictable css rules order in build */
80
80
  color: inherit;
81
81
  text-decoration: none;
82
82
  grid-area: 1/3/3/4;
83
- font-weight: 500;
84
83
  border-radius: 16px;
85
84
  padding: 16px;
86
85
  display: flex;
@@ -20,18 +20,18 @@ const NHProductsPopup = ({ sections, primaryColor, primaryColorHover, }) => (rea
20
20
  let content;
21
21
  if ('mode' in section && section.mode === 'run') {
22
22
  content = (react_1.default.createElement("div", { className: b('wrap-scale') },
23
- ((_a = section.items) === null || _a === void 0 ? void 0 : _a[0]) && react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({}, section.items[0], { hover: true, column: true })),
24
- 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, { hover: true, column: true }))))),
25
- 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, { hover: true, column: true })))))));
23
+ ((_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 })),
24
+ 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 }))))),
25
+ 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 })))))));
26
26
  }
27
27
  else if ('mode' in section && section.mode === 'scale') {
28
28
  content = (react_1.default.createElement("div", { className: b('wrap') }, (_d = section.items) === null || _d === void 0 ? void 0 :
29
- _d.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}`, imageColor: primaryColor, imageColorHover: primaryColorHover }, item, { hover: true })))),
29
+ _d.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}`, imageColor: primaryColor, imageColorHover: primaryColorHover }, item)))),
30
30
  section.banner && react_1.default.createElement(NHBanner, Object.assign({}, section.banner))));
31
31
  }
32
32
  else {
33
33
  content = (react_1.default.createElement("div", { className: b('wrap') }, (_e = section.items) === null || _e === void 0 ? void 0 :
34
- _e.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}`, imageColor: primaryColor, imageColorHover: primaryColorHover }, item, { hover: true })))),
34
+ _e.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}`, imageColor: primaryColor, imageColorHover: primaryColorHover }, item)))),
35
35
  ' '));
36
36
  }
37
37
  return (react_1.default.createElement("div", { className: b('section'), key: section.title },