oolib 2.204.1 → 2.205.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.
|
@@ -47,6 +47,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
47
47
|
exports.HomeCover_Mobile_ = exports.HomeCover_ = void 0;
|
|
48
48
|
var react_1 = __importStar(require("react"));
|
|
49
49
|
var HomeCover_1 = require("../../../v2/components/HomeCover");
|
|
50
|
+
var Paddings_1 = require("../../../components/Paddings");
|
|
50
51
|
exports.default = {
|
|
51
52
|
title: "Oolib V 2.0/components/HomeCover",
|
|
52
53
|
argTypes: {
|
|
@@ -83,10 +84,10 @@ exports.default = {
|
|
|
83
84
|
variant: "Default",
|
|
84
85
|
CTALink: '#',
|
|
85
86
|
coverImagesConfig: [
|
|
86
|
-
"https://
|
|
87
|
-
"https://
|
|
88
|
-
"https://
|
|
89
|
-
"https://
|
|
87
|
+
"https://images.unsplash.com/photo-1682686578707-140b042e8f19?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8",
|
|
88
|
+
"https://images.unsplash.com/photo-1735657090736-0c8484323c90?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw3fHx8ZW58MHx8fHx8",
|
|
89
|
+
"https://images.unsplash.com/photo-1683009427500-71296178737f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwzMXx8fGVufDB8fHx8fA%3D%3D",
|
|
90
|
+
"https://images.unsplash.com/photo-1753191326444-f00046939b59?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0M3x8fGVufDB8fHx8fA%3D%3D",
|
|
90
91
|
],
|
|
91
92
|
},
|
|
92
93
|
};
|
|
@@ -97,11 +98,13 @@ var HomeCover_ = function (args) {
|
|
|
97
98
|
element[0].style.padding = '0';
|
|
98
99
|
}
|
|
99
100
|
}, []);
|
|
100
|
-
return react_1.default.createElement(
|
|
101
|
+
return (react_1.default.createElement(Paddings_1.PaddingTopBottom10, { style: { margin: '0 1rem' } },
|
|
102
|
+
react_1.default.createElement(HomeCover_1.HomeCover, __assign({}, args))));
|
|
101
103
|
};
|
|
102
104
|
exports.HomeCover_ = HomeCover_;
|
|
103
105
|
var HomeCover_Mobile_ = function (args) {
|
|
104
|
-
return (react_1.default.createElement(
|
|
106
|
+
return (react_1.default.createElement(Paddings_1.PaddingTopBottom10, { style: { margin: '0 1rem' } },
|
|
107
|
+
react_1.default.createElement(HomeCover_1.HomeCover, __assign({}, args))));
|
|
105
108
|
};
|
|
106
109
|
exports.HomeCover_Mobile_ = HomeCover_Mobile_;
|
|
107
110
|
exports.HomeCover_Mobile_.parameters = {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
export function HomeCover({ title, desc, CTALink, coverImagesConfig, variant, }: {
|
|
1
|
+
export function HomeCover({ title, desc, CTALink, coverImagesConfig, variant, style }: {
|
|
2
2
|
title: any;
|
|
3
3
|
desc: any;
|
|
4
4
|
CTALink: any;
|
|
5
5
|
coverImagesConfig: any;
|
|
6
6
|
variant?: string;
|
|
7
|
+
style: any;
|
|
7
8
|
}): React.JSX.Element;
|
|
8
9
|
import React from "react";
|
|
@@ -20,7 +20,8 @@ var HomeCover = function (_a) {
|
|
|
20
20
|
// subtitle,
|
|
21
21
|
desc = _a.desc, CTALink = _a.CTALink,
|
|
22
22
|
// customComp,
|
|
23
|
-
coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b
|
|
23
|
+
coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b, //alt = 'small'
|
|
24
|
+
style = _a.style;
|
|
24
25
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
25
26
|
var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
|
|
26
27
|
var navigate = (0, react_router_dom_1.useNavigate)();
|
|
@@ -28,7 +29,7 @@ var HomeCover = function (_a) {
|
|
|
28
29
|
var _CoverImages = coverImagesConfig.every(function (c) { return typeof c === "string"; })
|
|
29
30
|
? coverImagesConfig
|
|
30
31
|
: coverImagesConfig.map(function (c) { return c.publicUrl; });
|
|
31
|
-
var deskTop = react_1.default.createElement(styled_1.StyledHomeCover, { variant: variant },
|
|
32
|
+
var deskTop = react_1.default.createElement(styled_1.StyledHomeCover, { variant: variant, style: style },
|
|
32
33
|
react_1.default.createElement(WrapperContentSection_1.WrapperContentSection, { theme: theme },
|
|
33
34
|
react_1.default.createElement("div", { style: { position: "relative", height: '100%', borderRadius: '1rem', display: 'flex', alignItems: 'center', padding: '1.6rem' } },
|
|
34
35
|
react_1.default.createElement("div", null,
|
|
@@ -36,7 +37,7 @@ var HomeCover = function (_a) {
|
|
|
36
37
|
react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_DF, { style: { color: themes_1.colors.grey80, marginTop: "0.8rem" } }, desc)),
|
|
37
38
|
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))),
|
|
38
39
|
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
|
+
var mobile = react_1.default.createElement(styled_1.StyledMobileHomeCover, { id: "StyledMobileHomeCover", theme: theme, variant: variant, style: style },
|
|
40
41
|
react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages, isDesktop: false, theme: theme }),
|
|
41
42
|
react_1.default.createElement(styled_1.StyledMobileContentWrapper, null,
|
|
42
43
|
react_1.default.createElement("div", { style: { alignContent: "end", height: '100%', gap: "1.6rem" } },
|
|
@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
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
|
-
exports.StyledHomeCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
13
|
-
exports.StyledMobileHomeCover = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
12
|
+
exports.StyledHomeCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 40rem;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 0.8rem;\n"], ["\n height: 40rem;\n display: grid;\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 display: flex;\n height: ", ";\n border-radius: 1.6rem;\n position: relative;\n"], ["\n display: flex;\n height: ", ";\n border-radius: 1.6rem;\n position: relative;\n"])), function (_a) {
|
|
14
14
|
var variant = _a.variant;
|
|
15
15
|
return variant === "small" ? "55svh" : "70svh";
|
|
16
16
|
});
|