@doyourjob/gravity-ui-page-constructor 5.31.259 → 5.31.261
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/blocks/Header/Header.css +14 -0
- package/build/cjs/blocks/Header/Header.js +5 -1
- package/build/cjs/blocks/Header/schema.d.ts +12 -0
- package/build/cjs/blocks/Header/schema.js +2 -0
- package/build/cjs/blocks/HeaderSlider/schema.d.ts +6 -0
- package/build/cjs/models/constructor-items/blocks.d.ts +2 -0
- package/build/cjs/sub-blocks/MiniCaseCard/MiniCaseCard.css +9 -0
- package/build/cjs/sub-blocks/MiniCaseCard/MiniCaseCard.js +4 -3
- package/build/esm/blocks/Header/Header.css +14 -0
- package/build/esm/blocks/Header/Header.js +6 -2
- package/build/esm/blocks/Header/schema.d.ts +12 -0
- package/build/esm/blocks/Header/schema.js +2 -0
- package/build/esm/blocks/HeaderSlider/schema.d.ts +6 -0
- package/build/esm/models/constructor-items/blocks.d.ts +2 -0
- package/build/esm/sub-blocks/MiniCaseCard/MiniCaseCard.css +9 -0
- package/build/esm/sub-blocks/MiniCaseCard/MiniCaseCard.js +4 -3
- package/package.json +1 -1
- package/schema/index.js +1 -1
- package/server/models/constructor-items/blocks.d.ts +2 -0
- package/widget/index.js +1 -1
|
@@ -204,6 +204,20 @@ unpredictable css rules order in build */
|
|
|
204
204
|
width: 100%;
|
|
205
205
|
object-fit: cover;
|
|
206
206
|
}
|
|
207
|
+
.pc-header-block__background.pc-header-block__background_unicorn, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn {
|
|
208
|
+
z-index: 5;
|
|
209
|
+
}
|
|
210
|
+
@media (max-width: 769px) {
|
|
211
|
+
.pc-header-block_has-background .pc-header-block__background.pc-header-block__background_unicorn, .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn {
|
|
212
|
+
display: none;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
.pc-header-block_full-width .pc-header-block__background.pc-header-block__background_unicorn, .pc-header-block_full-width .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn {
|
|
216
|
+
width: 100%;
|
|
217
|
+
left: 0;
|
|
218
|
+
transform: none;
|
|
219
|
+
max-width: none;
|
|
220
|
+
}
|
|
207
221
|
.pc-header-block__background_full-width {
|
|
208
222
|
left: 0;
|
|
209
223
|
transform: none;
|
|
@@ -30,7 +30,7 @@ const Background = ({ background, isMobile }) => {
|
|
|
30
30
|
const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
|
|
31
31
|
// eslint-disable-next-line complexity
|
|
32
32
|
const HeaderBlock = (props) => {
|
|
33
|
-
const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, } = props;
|
|
33
|
+
const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, } = props;
|
|
34
34
|
const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
|
|
35
35
|
const { backButton, blockTag } = (0, react_1.useContext)(headerContext_1.HeaderContext);
|
|
36
36
|
const theme = (0, theme_1.useTheme)();
|
|
@@ -44,6 +44,7 @@ const HeaderBlock = (props) => {
|
|
|
44
44
|
const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
|
|
45
45
|
const titleId = (0, uikit_1.useUniqId)();
|
|
46
46
|
const headerRef = (0, react_1.useRef)(null);
|
|
47
|
+
const hasBackground = Boolean(backgroundThemed || backgroundEffect);
|
|
47
48
|
const backButtonItem = (0, react_1.useMemo)(() => {
|
|
48
49
|
if (backLink) {
|
|
49
50
|
return { link: backLink.url, text: backLink.title };
|
|
@@ -55,6 +56,7 @@ const HeaderBlock = (props) => {
|
|
|
55
56
|
}, [backButton, backLink, breadcrumbs, verticalOffset]);
|
|
56
57
|
return (react_1.default.createElement("header", { ref: headerRef, className: b({
|
|
57
58
|
['has-media']: hasRightSideImage,
|
|
59
|
+
['has-background']: hasBackground,
|
|
58
60
|
['full-width']: fullWidth,
|
|
59
61
|
['media-view']: mediaView,
|
|
60
62
|
['controls-view']: textTheme,
|
|
@@ -63,6 +65,8 @@ const HeaderBlock = (props) => {
|
|
|
63
65
|
backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
|
|
64
66
|
backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
|
|
65
67
|
backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (react_1.default.createElement(components_1.BackgroundEffect, Object.assign({}, backgroundEffect, { attachRef: headerRef }))),
|
|
68
|
+
unicorn && (react_1.default.createElement("div", { className: b('background', { unicorn: true }) },
|
|
69
|
+
react_1.default.createElement(components_1.UnicornScene, { jsonFilePath: unicorn, sdkUrl: unicornSdkUrl }))),
|
|
66
70
|
react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },
|
|
67
71
|
react_1.default.createElement(Breadcrumbs_1.default, { breadcrumbs: breadcrumbs, theme: textTheme }),
|
|
68
72
|
react_1.default.createElement(BackButton_1.default, { backButton: backButtonItem, theme: textTheme }),
|
|
@@ -920,6 +920,12 @@ export declare const HeaderProperties: {
|
|
|
920
920
|
type: string;
|
|
921
921
|
enum: string[];
|
|
922
922
|
};
|
|
923
|
+
unicorn: {
|
|
924
|
+
type: string;
|
|
925
|
+
};
|
|
926
|
+
unicornSdkUrl: {
|
|
927
|
+
type: string;
|
|
928
|
+
};
|
|
923
929
|
breadcrumbs: {
|
|
924
930
|
type: string;
|
|
925
931
|
additionalProperties: boolean;
|
|
@@ -1632,6 +1638,12 @@ export declare const HeaderBlock: {
|
|
|
1632
1638
|
type: string;
|
|
1633
1639
|
enum: string[];
|
|
1634
1640
|
};
|
|
1641
|
+
unicorn: {
|
|
1642
|
+
type: string;
|
|
1643
|
+
};
|
|
1644
|
+
unicornSdkUrl: {
|
|
1645
|
+
type: string;
|
|
1646
|
+
};
|
|
1635
1647
|
breadcrumbs: {
|
|
1636
1648
|
type: string;
|
|
1637
1649
|
additionalProperties: boolean;
|
|
@@ -611,6 +611,12 @@ export declare const HeaderSliderBlock: {
|
|
|
611
611
|
type: string;
|
|
612
612
|
enum: string[];
|
|
613
613
|
};
|
|
614
|
+
unicorn: {
|
|
615
|
+
type: string;
|
|
616
|
+
};
|
|
617
|
+
unicornSdkUrl: {
|
|
618
|
+
type: string;
|
|
619
|
+
};
|
|
614
620
|
breadcrumbs: {
|
|
615
621
|
type: string;
|
|
616
622
|
additionalProperties: boolean;
|
|
@@ -226,6 +226,8 @@ export interface HeaderBlockProps {
|
|
|
226
226
|
mediaView?: MediaView;
|
|
227
227
|
background?: ThemedHeaderBlockBackground;
|
|
228
228
|
theme?: 'light' | 'dark';
|
|
229
|
+
unicorn?: string;
|
|
230
|
+
unicornSdkUrl?: string;
|
|
229
231
|
verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';
|
|
230
232
|
verticalOffsetTop?: 's' | 'm' | 'l' | 'xl';
|
|
231
233
|
verticalOffsetBottom?: 's' | 'm' | 'l' | 'xl';
|
|
@@ -72,6 +72,7 @@ unpredictable css rules order in build */
|
|
|
72
72
|
.pc-mini-case-card__title {
|
|
73
73
|
font-size: var(--g-text-display-3-font-size, var(--pc-text-display-3-font-size));
|
|
74
74
|
line-height: var(--g-text-display-3-line-height, var(--pc-text-display-3-line-height));
|
|
75
|
+
margin: 0;
|
|
75
76
|
font-weight: var(--g-text-accent-font-weight);
|
|
76
77
|
}
|
|
77
78
|
@media (max-width: 769px) {
|
|
@@ -110,6 +111,14 @@ unpredictable css rules order in build */
|
|
|
110
111
|
min-width: 100%;
|
|
111
112
|
}
|
|
112
113
|
}
|
|
114
|
+
.pc-mini-case-card__inner-container {
|
|
115
|
+
min-height: 80px;
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: column;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
align-items: center;
|
|
120
|
+
text-align: center;
|
|
121
|
+
}
|
|
113
122
|
.pc-mini-case-card__value {
|
|
114
123
|
font-size: 40px;
|
|
115
124
|
line-height: 48px;
|
|
@@ -33,7 +33,7 @@ const MiniCaseCardHead = ({ title, shouldShowStory, showQuote, text, quote, avat
|
|
|
33
33
|
return null;
|
|
34
34
|
}
|
|
35
35
|
return (react_1.default.createElement("div", { className: b('head') },
|
|
36
|
-
title && (react_1.default.createElement("
|
|
36
|
+
title && (react_1.default.createElement("h2", { className: `${b('title')} title-font-family` },
|
|
37
37
|
react_1.default.createElement(components_1.HTML, null, title))),
|
|
38
38
|
shouldShowStory && react_1.default.createElement(components_1.HTML, { className: b('text') }, text),
|
|
39
39
|
showQuote && quote && react_1.default.createElement(components_1.HTML, { className: b('quote') }, quote),
|
|
@@ -49,7 +49,8 @@ const MiniCaseCard = ({ title, showStory = true, showQuote = true, text, quote,
|
|
|
49
49
|
react_1.default.createElement(MiniCaseCardHead, { title: title, shouldShowStory: shouldShowStory, showQuote: showQuote, text: text, quote: quote, avatar: avatar, author: author, position: position })),
|
|
50
50
|
react_1.default.createElement(MiniCaseCardTags, { tagUsecase: tagUsecase, tagIndustry: tagIndustry })),
|
|
51
51
|
react_1.default.createElement("div", { className: b('rhs') }, data === null || data === void 0 ? void 0 : data.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('box'), style: backgroundData ? { background: backgroundData } : undefined },
|
|
52
|
-
react_1.default.createElement("div", { className:
|
|
53
|
-
|
|
52
|
+
react_1.default.createElement("div", { className: b('inner-container') },
|
|
53
|
+
react_1.default.createElement("div", { className: `${b('value')} title-font-family` }, item.value),
|
|
54
|
+
react_1.default.createElement("div", { className: b('label') }, item.label))))))));
|
|
54
55
|
};
|
|
55
56
|
exports.default = MiniCaseCard;
|
|
@@ -204,6 +204,20 @@ unpredictable css rules order in build */
|
|
|
204
204
|
width: 100%;
|
|
205
205
|
object-fit: cover;
|
|
206
206
|
}
|
|
207
|
+
.pc-header-block__background.pc-header-block__background_unicorn, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn {
|
|
208
|
+
z-index: 5;
|
|
209
|
+
}
|
|
210
|
+
@media (max-width: 769px) {
|
|
211
|
+
.pc-header-block_has-background .pc-header-block__background.pc-header-block__background_unicorn, .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn {
|
|
212
|
+
display: none;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
.pc-header-block_full-width .pc-header-block__background.pc-header-block__background_unicorn, .pc-header-block_full-width .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn {
|
|
216
|
+
width: 100%;
|
|
217
|
+
left: 0;
|
|
218
|
+
transform: none;
|
|
219
|
+
max-width: none;
|
|
220
|
+
}
|
|
207
221
|
.pc-header-block__background_full-width {
|
|
208
222
|
left: 0;
|
|
209
223
|
transform: none;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useContext, useMemo, useRef } from 'react';
|
|
2
2
|
import { useUniqId } from '@gravity-ui/uikit';
|
|
3
|
-
import { BackgroundEffect, HTML, Media } from '../../components';
|
|
3
|
+
import { BackgroundEffect, HTML, Media, UnicornScene } from '../../components';
|
|
4
4
|
import { getMediaImage } from '../../components/Media/Image/utils';
|
|
5
5
|
import { HeaderContext } from '../../context/headerContext';
|
|
6
6
|
import { MobileContext } from '../../context/mobileContext';
|
|
@@ -27,7 +27,7 @@ const Background = ({ background, isMobile }) => {
|
|
|
27
27
|
const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
|
|
28
28
|
// eslint-disable-next-line complexity
|
|
29
29
|
export const HeaderBlock = (props) => {
|
|
30
|
-
const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, } = props;
|
|
30
|
+
const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, } = props;
|
|
31
31
|
const isMobile = useContext(MobileContext);
|
|
32
32
|
const { backButton, blockTag } = useContext(HeaderContext);
|
|
33
33
|
const theme = useTheme();
|
|
@@ -41,6 +41,7 @@ export const HeaderBlock = (props) => {
|
|
|
41
41
|
const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
|
|
42
42
|
const titleId = useUniqId();
|
|
43
43
|
const headerRef = useRef(null);
|
|
44
|
+
const hasBackground = Boolean(backgroundThemed || backgroundEffect);
|
|
44
45
|
const backButtonItem = useMemo(() => {
|
|
45
46
|
if (backLink) {
|
|
46
47
|
return { link: backLink.url, text: backLink.title };
|
|
@@ -52,6 +53,7 @@ export const HeaderBlock = (props) => {
|
|
|
52
53
|
}, [backButton, backLink, breadcrumbs, verticalOffset]);
|
|
53
54
|
return (React.createElement("header", { ref: headerRef, className: b({
|
|
54
55
|
['has-media']: hasRightSideImage,
|
|
56
|
+
['has-background']: hasBackground,
|
|
55
57
|
['full-width']: fullWidth,
|
|
56
58
|
['media-view']: mediaView,
|
|
57
59
|
['controls-view']: textTheme,
|
|
@@ -60,6 +62,8 @@ export const HeaderBlock = (props) => {
|
|
|
60
62
|
backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
|
|
61
63
|
backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
|
|
62
64
|
backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (React.createElement(BackgroundEffect, Object.assign({}, backgroundEffect, { attachRef: headerRef }))),
|
|
65
|
+
unicorn && (React.createElement("div", { className: b('background', { unicorn: true }) },
|
|
66
|
+
React.createElement(UnicornScene, { jsonFilePath: unicorn, sdkUrl: unicornSdkUrl }))),
|
|
63
67
|
React.createElement(Grid, { containerClass: b('container-fluid') },
|
|
64
68
|
React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs, theme: textTheme }),
|
|
65
69
|
React.createElement(BackButton, { backButton: backButtonItem, theme: textTheme }),
|
|
@@ -920,6 +920,12 @@ export declare const HeaderProperties: {
|
|
|
920
920
|
type: string;
|
|
921
921
|
enum: string[];
|
|
922
922
|
};
|
|
923
|
+
unicorn: {
|
|
924
|
+
type: string;
|
|
925
|
+
};
|
|
926
|
+
unicornSdkUrl: {
|
|
927
|
+
type: string;
|
|
928
|
+
};
|
|
923
929
|
breadcrumbs: {
|
|
924
930
|
type: string;
|
|
925
931
|
additionalProperties: boolean;
|
|
@@ -1632,6 +1638,12 @@ export declare const HeaderBlock: {
|
|
|
1632
1638
|
type: string;
|
|
1633
1639
|
enum: string[];
|
|
1634
1640
|
};
|
|
1641
|
+
unicorn: {
|
|
1642
|
+
type: string;
|
|
1643
|
+
};
|
|
1644
|
+
unicornSdkUrl: {
|
|
1645
|
+
type: string;
|
|
1646
|
+
};
|
|
1635
1647
|
breadcrumbs: {
|
|
1636
1648
|
type: string;
|
|
1637
1649
|
additionalProperties: boolean;
|
|
@@ -611,6 +611,12 @@ export declare const HeaderSliderBlock: {
|
|
|
611
611
|
type: string;
|
|
612
612
|
enum: string[];
|
|
613
613
|
};
|
|
614
|
+
unicorn: {
|
|
615
|
+
type: string;
|
|
616
|
+
};
|
|
617
|
+
unicornSdkUrl: {
|
|
618
|
+
type: string;
|
|
619
|
+
};
|
|
614
620
|
breadcrumbs: {
|
|
615
621
|
type: string;
|
|
616
622
|
additionalProperties: boolean;
|
|
@@ -226,6 +226,8 @@ export interface HeaderBlockProps {
|
|
|
226
226
|
mediaView?: MediaView;
|
|
227
227
|
background?: ThemedHeaderBlockBackground;
|
|
228
228
|
theme?: 'light' | 'dark';
|
|
229
|
+
unicorn?: string;
|
|
230
|
+
unicornSdkUrl?: string;
|
|
229
231
|
verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';
|
|
230
232
|
verticalOffsetTop?: 's' | 'm' | 'l' | 'xl';
|
|
231
233
|
verticalOffsetBottom?: 's' | 'm' | 'l' | 'xl';
|
|
@@ -72,6 +72,7 @@ unpredictable css rules order in build */
|
|
|
72
72
|
.pc-mini-case-card__title {
|
|
73
73
|
font-size: var(--g-text-display-3-font-size, var(--pc-text-display-3-font-size));
|
|
74
74
|
line-height: var(--g-text-display-3-line-height, var(--pc-text-display-3-line-height));
|
|
75
|
+
margin: 0;
|
|
75
76
|
font-weight: var(--g-text-accent-font-weight);
|
|
76
77
|
}
|
|
77
78
|
@media (max-width: 769px) {
|
|
@@ -110,6 +111,14 @@ unpredictable css rules order in build */
|
|
|
110
111
|
min-width: 100%;
|
|
111
112
|
}
|
|
112
113
|
}
|
|
114
|
+
.pc-mini-case-card__inner-container {
|
|
115
|
+
min-height: 80px;
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: column;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
align-items: center;
|
|
120
|
+
text-align: center;
|
|
121
|
+
}
|
|
113
122
|
.pc-mini-case-card__value {
|
|
114
123
|
font-size: 40px;
|
|
115
124
|
line-height: 48px;
|
|
@@ -31,7 +31,7 @@ const MiniCaseCardHead = ({ title, shouldShowStory, showQuote, text, quote, avat
|
|
|
31
31
|
return null;
|
|
32
32
|
}
|
|
33
33
|
return (React.createElement("div", { className: b('head') },
|
|
34
|
-
title && (React.createElement("
|
|
34
|
+
title && (React.createElement("h2", { className: `${b('title')} title-font-family` },
|
|
35
35
|
React.createElement(HTML, null, title))),
|
|
36
36
|
shouldShowStory && React.createElement(HTML, { className: b('text') }, text),
|
|
37
37
|
showQuote && quote && React.createElement(HTML, { className: b('quote') }, quote),
|
|
@@ -47,7 +47,8 @@ const MiniCaseCard = ({ title, showStory = true, showQuote = true, text, quote,
|
|
|
47
47
|
React.createElement(MiniCaseCardHead, { title: title, shouldShowStory: shouldShowStory, showQuote: showQuote, text: text, quote: quote, avatar: avatar, author: author, position: position })),
|
|
48
48
|
React.createElement(MiniCaseCardTags, { tagUsecase: tagUsecase, tagIndustry: tagIndustry })),
|
|
49
49
|
React.createElement("div", { className: b('rhs') }, data === null || data === void 0 ? void 0 : data.map((item, index) => (React.createElement("div", { key: index, className: b('box'), style: backgroundData ? { background: backgroundData } : undefined },
|
|
50
|
-
React.createElement("div", { className:
|
|
51
|
-
|
|
50
|
+
React.createElement("div", { className: b('inner-container') },
|
|
51
|
+
React.createElement("div", { className: `${b('value')} title-font-family` }, item.value),
|
|
52
|
+
React.createElement("div", { className: b('label') }, item.label))))))));
|
|
52
53
|
};
|
|
53
54
|
export default MiniCaseCard;
|