@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.
- package/build/cjs/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.css +167 -0
- package/build/cjs/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.d.ts +3 -0
- package/build/cjs/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.js +63 -0
- package/build/cjs/components/NewHeader/components/NHLoginPopup/NHLoginPopup.css +5 -31
- package/build/cjs/components/NewHeader/components/NHLoginPopup/NHLoginPopup.js +3 -4
- package/build/cjs/components/NewHeader/components/NHNavigation/NHNavigation.js +5 -21
- package/build/cjs/components/NewHeader/components/NHPopupItem/NHPopupItem.css +29 -3
- package/build/cjs/components/NewHeader/components/NHPopupItem/NHPopupItem.d.ts +0 -2
- package/build/cjs/components/NewHeader/components/NHPopupItem/NHPopupItem.js +5 -3
- package/build/cjs/components/NewHeader/components/NHProductsPopup/NHProductsPopup.css +1 -2
- package/build/cjs/components/NewHeader/components/NHProductsPopup/NHProductsPopup.js +5 -5
- package/build/cjs/components/NewHeader/models.d.ts +31 -111
- package/build/cjs/components/NewHeader/models.js +2 -13
- package/build/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.css +167 -0
- package/build/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.d.ts +4 -0
- package/build/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.js +59 -0
- package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.css +5 -31
- package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.js +3 -4
- package/build/esm/components/NewHeader/components/NHNavigation/NHNavigation.js +6 -22
- package/build/esm/components/NewHeader/components/NHPopupItem/NHPopupItem.css +29 -3
- package/build/esm/components/NewHeader/components/NHPopupItem/NHPopupItem.d.ts +0 -2
- package/build/esm/components/NewHeader/components/NHPopupItem/NHPopupItem.js +5 -3
- package/build/esm/components/NewHeader/components/NHProductsPopup/NHProductsPopup.css +1 -2
- package/build/esm/components/NewHeader/components/NHProductsPopup/NHProductsPopup.js +5 -5
- package/build/esm/components/NewHeader/models.d.ts +31 -111
- package/build/esm/components/NewHeader/models.js +1 -12
- package/package.json +2 -2
- package/build/cjs/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.css +0 -30
- package/build/cjs/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.d.ts +0 -3
- package/build/cjs/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.js +0 -18
- package/build/cjs/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.css +0 -86
- package/build/cjs/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.d.ts +0 -3
- package/build/cjs/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.js +0 -22
- package/build/cjs/components/NewHeader/components/NHMediumPopup/NHMediumPopup.css +0 -8
- package/build/cjs/components/NewHeader/components/NHMediumPopup/NHMediumPopup.d.ts +0 -3
- package/build/cjs/components/NewHeader/components/NHMediumPopup/NHMediumPopup.js +0 -13
- package/build/cjs/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.css +0 -209
- package/build/cjs/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.d.ts +0 -3
- package/build/cjs/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.js +0 -42
- package/build/cjs/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.css +0 -48
- package/build/cjs/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.d.ts +0 -3
- package/build/cjs/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.js +0 -17
- package/build/cjs/components/NewHeader/components/NHTag/NHTag.css +0 -21
- package/build/cjs/components/NewHeader/components/NHTag/NHTag.d.ts +0 -6
- package/build/cjs/components/NewHeader/components/NHTag/NHTag.js +0 -22
- package/build/cjs/components/NewHeader/components/NHWhyPopup/NHWhyPopup.css +0 -80
- package/build/cjs/components/NewHeader/components/NHWhyPopup/NHWhyPopup.d.ts +0 -3
- package/build/cjs/components/NewHeader/components/NHWhyPopup/NHWhyPopup.js +0 -21
- package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.css +0 -30
- package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.d.ts +0 -4
- package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.js +0 -14
- package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.css +0 -86
- package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.d.ts +0 -4
- package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.js +0 -18
- package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.css +0 -8
- package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.d.ts +0 -4
- package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.js +0 -9
- package/build/esm/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.css +0 -209
- package/build/esm/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.d.ts +0 -4
- package/build/esm/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.js +0 -38
- package/build/esm/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.css +0 -48
- package/build/esm/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.d.ts +0 -4
- package/build/esm/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.js +0 -13
- package/build/esm/components/NewHeader/components/NHTag/NHTag.css +0 -21
- package/build/esm/components/NewHeader/components/NHTag/NHTag.d.ts +0 -7
- package/build/esm/components/NewHeader/components/NHTag/NHTag.js +0 -18
- package/build/esm/components/NewHeader/components/NHWhyPopup/NHWhyPopup.css +0 -80
- package/build/esm/components/NewHeader/components/NHWhyPopup/NHWhyPopup.d.ts +0 -4
- 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,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:
|
|
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-
|
|
20
|
-
|
|
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:
|
|
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(
|
|
10
|
-
react_1.default.createElement(
|
|
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
|
|
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
|
-
|
|
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.
|
|
28
|
-
return react_1.default.createElement(
|
|
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
|
-
|
|
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:
|
|
54
|
-
|
|
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
|
-
|
|
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
|
|
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], {
|
|
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, {
|
|
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, {
|
|
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
|
|
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
|
|
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 },
|