oolib 2.55.3 → 2.55.4
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.
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
export function HomeCover({ title, subtitle, desc, CTALink, customComp, coverImagesConfig, }: {
|
|
1
|
+
export function HomeCover({ title, subtitle, desc, CTALink, customComp, coverImagesConfig, variant, }: {
|
|
2
2
|
title: any;
|
|
3
3
|
subtitle: any;
|
|
4
4
|
desc: any;
|
|
5
5
|
CTALink: any;
|
|
6
6
|
customComp: any;
|
|
7
7
|
coverImagesConfig: any;
|
|
8
|
+
variant?: string;
|
|
8
9
|
}): any;
|
|
@@ -45,7 +45,7 @@ var Typo_1 = require("../Typo");
|
|
|
45
45
|
var styled_1 = require("./styled");
|
|
46
46
|
var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
|
|
47
47
|
var HomeCover = function (_a) {
|
|
48
|
-
var title = _a.title, subtitle = _a.subtitle, desc = _a.desc, CTALink = _a.CTALink, customComp = _a.customComp, coverImagesConfig = _a.coverImagesConfig;
|
|
48
|
+
var title = _a.title, subtitle = _a.subtitle, desc = _a.desc, CTALink = _a.CTALink, customComp = _a.customComp, coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
|
|
49
49
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
50
50
|
var history = (0, react_router_dom_1.useHistory)();
|
|
51
51
|
// const {deployment: {_CoverImages : coverImagesConfig}} = useGetQueryData('platformConfigs');
|
|
@@ -53,12 +53,12 @@ var HomeCover = function (_a) {
|
|
|
53
53
|
var _CoverImages = coverImagesConfig.every(function (c) { return typeof c === "string"; })
|
|
54
54
|
? coverImagesConfig
|
|
55
55
|
: coverImagesConfig.map(function (c) { return c.publicUrl; });
|
|
56
|
-
var
|
|
57
|
-
var
|
|
56
|
+
var _c = (0, react_1.useState)(undefined), dynamicTitleWidth = _c[0], setDynamicTitleWidth = _c[1];
|
|
57
|
+
var _d = (0, react_1.useState)({
|
|
58
58
|
currLayer: "layer1",
|
|
59
59
|
layer1: [0, 1],
|
|
60
60
|
layer2: [2, 3],
|
|
61
|
-
}), coverImageIdx =
|
|
61
|
+
}), coverImageIdx = _d[0], setCoverImageIdx = _d[1];
|
|
62
62
|
//console.log({_CoverImages:_CoverImages[coverImageIdx.layer1[0]]})
|
|
63
63
|
var titleTextSpan_ref = (0, react_1.useRef)(null);
|
|
64
64
|
var title_ref = (0, react_1.useRef)(null);
|
|
@@ -112,27 +112,30 @@ var HomeCover = function (_a) {
|
|
|
112
112
|
// }
|
|
113
113
|
// console.log({MED:mediaQuery("md")})
|
|
114
114
|
var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
var genCTALink = function (_a) {
|
|
116
|
+
var CTALink = _a.CTALink, variant = _a.variant, isDesktop = _a.isDesktop;
|
|
117
|
+
return CTALink && (react_1.default.createElement(Buttons_1.ButtonPrimary, { className: "HomeCover__cta", icon: "CaretRight", M: variant === "small" && !isDesktop && true, style: __assign({ position: "absolute", bottom: 0, borderRadius: 0, right: variant === "small" && !isDesktop ? "2rem" : 0 }, (variant === "small" && !isDesktop ? { zIndex: 100 } : {})), onClick: function () {
|
|
118
|
+
history.push(CTALink);
|
|
119
|
+
} }));
|
|
120
|
+
};
|
|
121
|
+
var TitleTypoComp = variant === "small" ? Typo_1.SERIF_8_9 : Typo_1.SERIF_9_10;
|
|
122
|
+
return (react_1.default.createElement(styled_1.StyledHomeCover, { variant: variant },
|
|
123
|
+
(title || subtitle) && (react_1.default.createElement(styled_1.StyledHomeCoverTitle, { ref: title_ref, style: dynamicTitleWidth && { width: dynamicTitleWidth + "px" }, variant: variant },
|
|
124
|
+
react_1.default.createElement(TitleTypoComp, null,
|
|
118
125
|
react_1.default.createElement("span", { ref: titleTextSpan_ref, className: "__textSpan" }, title)),
|
|
119
|
-
subtitle && react_1.default.createElement(Typo_1.SANS_3, { style: { paddingTop: "1rem" } }, subtitle)),
|
|
120
|
-
react_1.default.createElement(styled_1.StyledHomeCoverDesc, null,
|
|
121
|
-
react_1.default.createElement(styled_1.StyledHomeCoverDescContents,
|
|
126
|
+
subtitle && variant !== "small" && (react_1.default.createElement(Typo_1.SANS_3, { style: { paddingTop: "1rem" } }, subtitle)))),
|
|
127
|
+
(variant !== "small" || isDesktop) && (react_1.default.createElement(styled_1.StyledHomeCoverDesc, null,
|
|
128
|
+
react_1.default.createElement(styled_1.StyledHomeCoverDescContents, { variant: variant },
|
|
122
129
|
desc &&
|
|
123
130
|
(0, toArray_1.toArray)(desc).map(function (d, i) { return (react_1.default.createElement(Typo_1.SERIF_3_4, { key: i, style: {
|
|
124
131
|
paddingBottom: i + 1 !== (0, toArray_1.toArray)(desc).length ? "1rem" : 0,
|
|
125
132
|
} }, d)); }),
|
|
126
133
|
customComp && customComp,
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}, onClick: function () {
|
|
133
|
-
history.push(CTALink);
|
|
134
|
-
} })))),
|
|
135
|
-
react_1.default.createElement(styled_1.StyledHomeCoverImgWrapper, { breakPoint: "none" },
|
|
134
|
+
genCTALink({ CTALink: CTALink, variant: variant, isDesktop: isDesktop })))),
|
|
135
|
+
variant === "small" &&
|
|
136
|
+
!isDesktop &&
|
|
137
|
+
genCTALink({ CTALink: CTALink, variant: variant, isDesktop: isDesktop }),
|
|
138
|
+
react_1.default.createElement(styled_1.StyledHomeCoverImgWrapper, { breakPoint: variant === "small" && !isDesktop ? "lessThanMd_variantSmall" : "none" },
|
|
136
139
|
react_1.default.createElement(styled_1.StyledHomeCoverImg, { backgroundImage: _CoverImages[coverImageIdx.layer1[0]], opacity: coverImageIdx.currLayer === "layer1" ? 1 : 0 }),
|
|
137
140
|
react_1.default.createElement(styled_1.StyledHomeCoverImg, { backgroundImage: _CoverImages[coverImageIdx.layer2[0]], opacity: coverImageIdx.currLayer === "layer2" ? 1 : 0 })),
|
|
138
141
|
isDesktop && (react_1.default.createElement(styled_1.StyledHomeCoverImgWrapper, { breakPoint: "md" },
|
|
@@ -33,30 +33,43 @@ var mixins_1 = require("../../themes/mixins");
|
|
|
33
33
|
var themes_1 = require("../../themes");
|
|
34
34
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
35
35
|
var greyColor3 = themes_1.colors.greyColor3, white = themes_1.colors.white;
|
|
36
|
-
exports.StyledHomeCover = styled_components_1.default.div(
|
|
37
|
-
|
|
36
|
+
exports.StyledHomeCover = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n position: relative;\n ", "\n"], ["\n display: flex;\n position: relative;\n ", "\n"])), function (_a) {
|
|
37
|
+
var variant = _a.variant;
|
|
38
|
+
return variant === "default"
|
|
39
|
+
? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: calc(100vh - 6rem);\n ", " {\n height: 60rem;\n }\n "], ["\n height: calc(100vh - 6rem);\n ", " {\n height: 60rem;\n }\n "])), (0, mixins_1.mediaQuery)("sm")) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 30rem;\n "], ["\n height: 30rem;\n "])));
|
|
40
|
+
});
|
|
41
|
+
exports.StyledHomeCoverImg = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-size: cover;\n background-position: center;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-image: ", ";\n opacity: ", ";\n ", "\n"], ["\n background-size: cover;\n background-position: center;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-image: ", ";\n opacity: ", ";\n ", "\n"])), function (_a) {
|
|
38
42
|
var backgroundImage = _a.backgroundImage;
|
|
39
43
|
return "url(".concat(backgroundImage, ")");
|
|
40
44
|
}, function (_a) {
|
|
41
45
|
var opacity = _a.opacity;
|
|
42
46
|
return "".concat(opacity);
|
|
43
47
|
}, (0, mixins_1.transition)("opacity"));
|
|
44
|
-
exports.StyledHomeCoverImgWrapper = styled_components_1.default.div(
|
|
48
|
+
exports.StyledHomeCoverImgWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: relative;\n ", "\n"], ["\n position: relative;\n ", "\n"])), function (_a) {
|
|
45
49
|
var breakPoint = _a.breakPoint;
|
|
46
50
|
switch (breakPoint) {
|
|
47
51
|
case "none":
|
|
48
|
-
return (0, styled_components_1.css)(
|
|
52
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 5rem;\n height: 0;\n padding-bottom: 130%;\n\n ", " {\n width: 50%;\n }\n\n ", " {\n margin-top: 0;\n height: auto;\n padding-bottom: unset;\n }\n "], ["\n width: 100%;\n margin-top: 5rem;\n height: 0;\n padding-bottom: 130%;\n\n ", " {\n width: 50%;\n }\n\n ", " {\n margin-top: 0;\n height: auto;\n padding-bottom: unset;\n }\n "])), (0, mixins_1.mediaQuery)("md"), (0, mixins_1.mediaQuery)("sm"));
|
|
49
53
|
case "md":
|
|
50
|
-
return (0, styled_components_1.css)(
|
|
54
|
+
return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 50%;\n "], ["\n width: 50%;\n "])));
|
|
55
|
+
case "lessThanMd_variantSmall":
|
|
56
|
+
return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "])));
|
|
51
57
|
}
|
|
52
58
|
});
|
|
53
|
-
exports.StyledHomeCoverTitle = styled_components_1.default.div(
|
|
59
|
+
exports.StyledHomeCoverTitle = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: absolute;\n\n top: 0;\n\n background-color: ", ";\n\n color: ", ";\n z-index: 100;\n width: 22rem;\n\n ", "\n\n ", " {\n left: 6rem;\n }\n ", " {\n width: 26rem;\n }\n"], ["\n position: absolute;\n\n top: 0;\n\n background-color: ", ";\n\n color: ", ";\n z-index: 100;\n width: 22rem;\n\n ", "\n\n ", " {\n left: 6rem;\n }\n ", " {\n width: 26rem;\n }\n"])), function (_a) {
|
|
54
60
|
var colors = _a.theme.colors;
|
|
55
61
|
return (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
56
|
-
}, white,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
62
|
+
}, white, function (_a) {
|
|
63
|
+
var variant = _a.variant;
|
|
64
|
+
return variant === "default"
|
|
65
|
+
? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: 0;\n padding: 5rem;\n "], ["\n left: 0;\n padding: 5rem;\n "]))) : (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n left: 2rem;\n padding: 2rem;\n\n ", " {\n padding: 3rem;\n }\n "], ["\n left: 2rem;\n padding: 2rem;\n\n ", " {\n padding: 3rem;\n }\n "])), (0, mixins_1.mediaQuery)("md"));
|
|
66
|
+
}, (0, mixins_1.mediaQuery)("sm"), (0, mixins_1.mediaQuery)("lg"));
|
|
67
|
+
exports.StyledHomeCoverDesc = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n width: 100%;\n z-index: 100;\n\n padding: 2rem;\n\n ", " {\n left: 50%;\n right: unset;\n }\n\n ", " {\n padding: 0;\n right: 6rem;\n width: 40rem;\n }\n"], ["\n position: absolute;\n bottom: 0;\n width: 100%;\n z-index: 100;\n\n padding: 2rem;\n\n ", " {\n left: 50%;\n right: unset;\n }\n\n ", " {\n padding: 0;\n right: 6rem;\n width: 40rem;\n }\n"])), (0, mixins_1.mediaQuery)("md"), (0, mixins_1.mediaQuery)("sm"));
|
|
68
|
+
exports.StyledHomeCoverDescContents = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding: ", ";\n background-color: ", ";\n position: relative;\n"], ["\n padding: ", ";\n background-color: ", ";\n position: relative;\n"])), function (_a) {
|
|
69
|
+
var variant = _a.variant;
|
|
70
|
+
return (variant === "small" ? "3rem" : "5rem");
|
|
71
|
+
}, greyColor3);
|
|
72
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
60
73
|
// export const StyledHomeCoverCta = styled.div`
|
|
61
74
|
// position: absolute;
|
|
62
75
|
// bottom: 0;
|