oolib 2.171.1 → 2.172.0
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/dist/v2/components/HomeCover/comps/ImageSwitcher/index.d.ts +4 -2
- package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.js +31 -52
- package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.d.ts +2 -0
- package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.js +9 -3
- package/dist/v2/components/HomeCover/index.d.ts +1 -3
- package/dist/v2/components/HomeCover/index.js +10 -6
- package/dist/v2/components/HomeCover/styled.js +5 -2
- package/dist/v2/themes/typo.js +2 -2
- package/package.json +1 -1
|
@@ -48,72 +48,51 @@ exports.ImageSwitcher = void 0;
|
|
|
48
48
|
var react_1 = __importStar(require("react"));
|
|
49
49
|
var styled_1 = require("./styled");
|
|
50
50
|
var ImageSwitcher = function (_a) {
|
|
51
|
-
var images = _a.images, _b = _a.isDesktop, isDesktop = _b === void 0 ? true : _b;
|
|
52
|
-
//
|
|
53
|
-
var
|
|
51
|
+
var images = _a.images, _b = _a.isDesktop, isDesktop = _b === void 0 ? true : _b, theme = _a.theme;
|
|
52
|
+
// Common state structure for both desktop and mobile
|
|
53
|
+
var initState = {
|
|
54
54
|
currLayer: "layer1",
|
|
55
|
-
layer1: [0, 1],
|
|
56
|
-
layer2: [2, 3],
|
|
55
|
+
layer1: isDesktop ? [0, 1] : [0],
|
|
56
|
+
layer2: isDesktop ? [2, 3] : [1],
|
|
57
57
|
};
|
|
58
|
-
|
|
59
|
-
var initMobileState = {
|
|
60
|
-
currentIndex: 0,
|
|
61
|
-
};
|
|
62
|
-
var _c = (0, react_1.useState)(isDesktop ? initDesktopState : initMobileState), coverImageIdx = _c[0], setCoverImageIdx = _c[1];
|
|
58
|
+
var _c = (0, react_1.useState)(initState), coverImageIdx = _c[0], setCoverImageIdx = _c[1];
|
|
63
59
|
// Reset state when desktop/mobile mode changes
|
|
64
60
|
(0, react_1.useEffect)(function () {
|
|
65
|
-
setCoverImageIdx(
|
|
61
|
+
setCoverImageIdx(initState);
|
|
66
62
|
}, [isDesktop]);
|
|
67
63
|
(0, react_1.useEffect)(function () {
|
|
68
64
|
var interval, timeout;
|
|
69
|
-
var
|
|
70
|
-
if (images.length >=
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
setCoverImageIdx(function (prev) { return (__assign(__assign({}, prev), { currLayer: prev.currLayer === "layer1" ? "layer2" : "layer1" })); });
|
|
75
|
-
timeout = setTimeout(function () {
|
|
76
|
-
setCoverImageIdx(function (prev) {
|
|
77
|
-
var _a;
|
|
78
|
-
var layerToSwitch = prev.currLayer === "layer1" ? "layer2" : "layer1";
|
|
79
|
-
return __assign(__assign({}, prev), (_a = {}, _a[layerToSwitch] = [
|
|
80
|
-
(prev[layerToSwitch][0] + 4) % images.length,
|
|
81
|
-
(prev[layerToSwitch][1] + 4) % images.length,
|
|
82
|
-
], _a));
|
|
83
|
-
});
|
|
84
|
-
}, 300);
|
|
85
|
-
}, 3000);
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
88
|
-
// Mobile random switching logic
|
|
89
|
-
interval = setInterval(function () {
|
|
65
|
+
var minImages = isDesktop ? 4 : 2;
|
|
66
|
+
if (images.length >= minImages) {
|
|
67
|
+
interval = setInterval(function () {
|
|
68
|
+
setCoverImageIdx(function (prev) { return (__assign(__assign({}, prev), { currLayer: prev.currLayer === "layer1" ? "layer2" : "layer1" })); });
|
|
69
|
+
timeout = setTimeout(function () {
|
|
90
70
|
setCoverImageIdx(function (prev) {
|
|
91
|
-
var
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
} while (newIndex === prev.currentIndex);
|
|
96
|
-
return { currentIndex: newIndex };
|
|
71
|
+
var _a;
|
|
72
|
+
var layerToSwitch = prev.currLayer === "layer1" ? "layer2" : "layer1";
|
|
73
|
+
var increment = isDesktop ? 4 : 2;
|
|
74
|
+
return __assign(__assign({}, prev), (_a = {}, _a[layerToSwitch] = prev[layerToSwitch].map(function (idx) { return (idx + increment) % images.length; }), _a));
|
|
97
75
|
});
|
|
98
|
-
},
|
|
99
|
-
}
|
|
76
|
+
}, 800); // Match transition duration
|
|
77
|
+
}, 3000);
|
|
100
78
|
}
|
|
101
79
|
return function () {
|
|
102
80
|
clearTimeout(timeout);
|
|
103
81
|
clearInterval(interval);
|
|
104
82
|
};
|
|
105
83
|
}, [isDesktop, images.length]);
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
84
|
+
if (isDesktop) {
|
|
85
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
86
|
+
react_1.default.createElement(styled_1.ImageWrapper, null,
|
|
87
|
+
react_1.default.createElement(styled_1.StyledContentWrapper, { "$backgroundImage": images[coverImageIdx.layer1[0]], "$opacity": coverImageIdx.currLayer === "layer1" ? 1 : 0, theme: theme }),
|
|
88
|
+
react_1.default.createElement(styled_1.StyledContentWrapper, { "$backgroundImage": images[coverImageIdx.layer2[0]], "$opacity": coverImageIdx.currLayer === "layer2" ? 1 : 0, theme: theme })),
|
|
89
|
+
react_1.default.createElement(styled_1.ImageWrapper, null,
|
|
90
|
+
react_1.default.createElement(styled_1.StyledContentWrapper, { "$backgroundImage": images[coverImageIdx.layer1[1]], "$opacity": coverImageIdx.currLayer === "layer1" ? 1 : 0, theme: theme }),
|
|
91
|
+
react_1.default.createElement(styled_1.StyledContentWrapper, { "$backgroundImage": images[coverImageIdx.layer2[1]], "$opacity": coverImageIdx.currLayer === "layer2" ? 1 : 0, theme: theme }))));
|
|
92
|
+
}
|
|
93
|
+
// Mobile render - single image with opacity transition
|
|
94
|
+
return (react_1.default.createElement(styled_1.MobileWrapper, null,
|
|
95
|
+
react_1.default.createElement(styled_1.StyledContentWrapper, { "$backgroundImage": images[coverImageIdx.layer1[0]], "$opacity": coverImageIdx.currLayer === "layer1" ? 1 : 0, className: "mobile" }),
|
|
96
|
+
react_1.default.createElement(styled_1.StyledContentWrapper, { "$backgroundImage": images[coverImageIdx.layer2[0]], "$opacity": coverImageIdx.currLayer === "layer2" ? 1 : 0, className: "mobile" })));
|
|
118
97
|
};
|
|
119
98
|
exports.ImageSwitcher = ImageSwitcher;
|
|
@@ -1 +1,3 @@
|
|
|
1
|
+
export const ImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
1
3
|
export const StyledContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -7,8 +7,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StyledContentWrapper = void 0;
|
|
10
|
+
exports.StyledContentWrapper = exports.MobileWrapper = exports.ImageWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var mixins_1 = require("../../../../../themes/mixins");
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
var utils_1 = require("../../../../themes/utils");
|
|
14
|
+
exports.ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: 100%;\n"], ["\n position: relative;\n width: 100%;\n height: 100%;\n"])));
|
|
15
|
+
exports.MobileWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: inherit;\n"], ["\n position: relative;\n width: 100%;\n height: inherit;\n"])));
|
|
16
|
+
exports.StyledContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", "; \n background-image: url(", ");\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n background-position: center;\n border-radius: 1rem;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: ", ";\n ", "\n\n &.mobile {\n border-radius: 1.6rem;\n }\n"], ["\n background-color: ", "; \n background-image: url(", ");\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n background-position: center;\n border-radius: 1rem;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: ", ";\n ", "\n\n &.mobile {\n border-radius: 1.6rem;\n }\n"])), function (_a) {
|
|
17
|
+
var colors = _a.theme.colors;
|
|
18
|
+
return (0, utils_1.getSecondaryContainer)(colors);
|
|
19
|
+
}, function (props) { return props.$backgroundImage; }, function (props) { return props.$opacity; }, (0, mixins_1.transition)("opacity"));
|
|
20
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
export function HomeCover({ title,
|
|
1
|
+
export function HomeCover({ title, desc, CTALink, coverImagesConfig, variant, }: {
|
|
2
2
|
title: any;
|
|
3
|
-
subtitle: any;
|
|
4
3
|
desc: any;
|
|
5
4
|
CTALink: any;
|
|
6
|
-
customComp: any;
|
|
7
5
|
coverImagesConfig: any;
|
|
8
6
|
variant?: string;
|
|
9
7
|
}): React.JSX.Element;
|
|
@@ -16,7 +16,11 @@ var ImageSwitcher_1 = require("./comps/ImageSwitcher");
|
|
|
16
16
|
var WrapperContentSection_1 = require("./comps/WrapperContentSection");
|
|
17
17
|
var styled_components_1 = require("styled-components");
|
|
18
18
|
var HomeCover = function (_a) {
|
|
19
|
-
var title = _a.title,
|
|
19
|
+
var title = _a.title,
|
|
20
|
+
// subtitle,
|
|
21
|
+
desc = _a.desc, CTALink = _a.CTALink,
|
|
22
|
+
// customComp,
|
|
23
|
+
coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
|
|
20
24
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
21
25
|
var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
|
|
22
26
|
var navigate = (0, react_router_dom_1.useNavigate)();
|
|
@@ -29,16 +33,16 @@ var HomeCover = function (_a) {
|
|
|
29
33
|
react_1.default.createElement("div", { style: { position: "relative", height: '100%', borderRadius: '1rem', display: 'flex', alignItems: 'center', padding: '1.6rem' } },
|
|
30
34
|
react_1.default.createElement("div", null,
|
|
31
35
|
react_1.default.createElement(Typo2_1.UI_DISPLAY_SM, null, title),
|
|
32
|
-
react_1.default.createElement(Typo2_1.UI_TITLE, { style: { color: themes_1.colors.grey80 } }, desc)),
|
|
36
|
+
react_1.default.createElement(Typo2_1.UI_TITLE, { style: { color: themes_1.colors.grey80, marginTop: "0.8rem" } }, desc)),
|
|
33
37
|
CTALink && react_1.default.createElement(Buttons_1.ButtonTertiary, { style: { position: "absolute", bottom: "1.6rem", left: "1.6rem" }, iconSize: "S", icon: (CTALink === null || CTALink === void 0 ? void 0 : CTALink.icon) || "ArrowRight", onClick: function () { return navigate((CTALink === null || CTALink === void 0 ? void 0 : CTALink.url) || CTALink); } }, CTALink === null || CTALink === void 0 ? void 0 : CTALink.text))),
|
|
34
|
-
react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages }));
|
|
35
|
-
var mobile = react_1.default.createElement(styled_1.StyledMobileHomeCover,
|
|
36
|
-
react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages, isDesktop: false }),
|
|
38
|
+
react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages, theme: theme }));
|
|
39
|
+
var mobile = react_1.default.createElement(styled_1.StyledMobileHomeCover, { id: "StyledMobileHomeCover", theme: theme, variant: variant },
|
|
40
|
+
react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages, isDesktop: false, theme: theme }),
|
|
37
41
|
react_1.default.createElement(styled_1.StyledMobileContentWrapper, null,
|
|
38
42
|
react_1.default.createElement("div", { style: { alignContent: "end", height: '100%', gap: "1.6rem" } },
|
|
39
43
|
react_1.default.createElement("div", { style: { color: "white" } },
|
|
40
44
|
react_1.default.createElement(Typo2_1.UI_DISPLAY_SM, null, title),
|
|
41
|
-
react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, { style: {
|
|
45
|
+
variant !== "small" && react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, { style: { marginTop: "0.8rem", opacity: 0.8 } }, desc)),
|
|
42
46
|
CTALink && react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { responsive: true, style: { marginTop: '1.6rem' }, iconSize: "S", icon: (CTALink === null || CTALink === void 0 ? void 0 : CTALink.icon) || "ArrowRight", onClick: function () { return navigate((CTALink === null || CTALink === void 0 ? void 0 : CTALink.url) || CTALink); } }, CTALink === null || CTALink === void 0 ? void 0 : CTALink.text))));
|
|
43
47
|
return (isDesktop ? deskTop : mobile);
|
|
44
48
|
};
|
|
@@ -10,6 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.StyledMobileContentWrapper = exports.StyledMobileHomeCover = exports.StyledHomeCover = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.StyledHomeCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 98svw;\n height: 40rem;\n display: grid;\n margin: 1rem auto;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 0.8rem;\n"], ["\n width: 98svw;\n height: 40rem;\n display: grid;\n margin: 1rem auto;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 0.8rem;\n"])));
|
|
13
|
-
exports.StyledMobileHomeCover = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 96svw;\n
|
|
14
|
-
|
|
13
|
+
exports.StyledMobileHomeCover = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 96svw;\n display: flex;\n height: ", ";\n margin: 1rem auto;\n border-radius: 1.6rem;\n position: relative;\n"], ["\n width: 96svw;\n display: flex;\n height: ", ";\n margin: 1rem auto;\n border-radius: 1.6rem;\n position: relative;\n"])), function (_a) {
|
|
14
|
+
var variant = _a.variant;
|
|
15
|
+
return variant === "small" ? "55svh" : "70svh";
|
|
16
|
+
});
|
|
17
|
+
exports.StyledMobileContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 1.6rem;\n padding: 1.6rem;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 55.06%, rgba(0, 0, 0, 0.60) 65.69%);\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 1.6rem;\n padding: 1.6rem;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 55.06%, rgba(0, 0, 0, 0.60) 65.69%);\n"])));
|
|
15
18
|
var templateObject_1, templateObject_2, templateObject_3;
|
package/dist/v2/themes/typo.js
CHANGED
|
@@ -20,8 +20,8 @@ var fontCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
|
|
|
20
20
|
});
|
|
21
21
|
var uiFont = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: 'DM Sans', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"], ["\n font-family: 'DM Sans', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"])));
|
|
22
22
|
var contentFont = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-family: 'Familjen Grotesk', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"], ["\n font-family: 'Familjen Grotesk', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"])));
|
|
23
|
-
var UI_DISPLAY = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", ";\n font-size: 40px;\n line-height: 52px
|
|
24
|
-
var UI_DISPLAY_SM = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n ", ";\n font-size: 32px;\n line-height: 42px
|
|
23
|
+
var UI_DISPLAY = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", ";\n font-size: 40px;\n /* line-height: 52px; */\n font-weight: 700;\n"], ["\n ", ";\n ", ";\n font-size: 40px;\n /* line-height: 52px; */\n font-weight: 700;\n"])), uiFont, fontCss);
|
|
24
|
+
var UI_DISPLAY_SM = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n ", ";\n font-size: 32px;\n /* line-height: 42px; */\n font-weight: 700;\n"], ["\n ", ";\n ", ";\n font-size: 32px;\n /* line-height: 42px; */\n font-weight: 700;\n"])), uiFont, fontCss);
|
|
25
25
|
var UI_HEADLINE = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 32px;\n line-height: 42px;\n font-weight: 500;\n"], ["\n ", ";\n ", ";;\n font-size: 32px;\n line-height: 42px;\n font-weight: 500;\n"])), uiFont, fontCss);
|
|
26
26
|
var UI_HEADLINE_SM = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 28px;\n line-height: 36px;\n font-weight: 600;\n"], ["\n ", ";\n ", ";;\n font-size: 28px;\n line-height: 36px;\n font-weight: 600;\n"])), uiFont, fontCss);
|
|
27
27
|
var UI_TITLE = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 20px;\n line-height: 26px;\n font-weight: 500;\n letter-spacing: 0.2px;\n ", ";\n ", ";\n"], ["\n font-size: 20px;\n line-height: 26px;\n font-weight: 500;\n letter-spacing: 0.2px;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|