oolib 2.171.2 → 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.
Files changed (7) hide show
  1. package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.d.ts +2 -1
  2. package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.js +5 -5
  3. package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.js +5 -1
  4. package/dist/v2/components/HomeCover/index.js +5 -5
  5. package/dist/v2/components/HomeCover/styled.js +5 -2
  6. package/dist/v2/themes/typo.js +2 -2
  7. package/package.json +1 -1
package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- export function ImageSwitcher({ images, isDesktop }: {
1
+ export function ImageSwitcher({ images, isDesktop, theme }: {
2
2
  images: any;
3
3
  isDesktop?: boolean;
4
+ theme: any;
4
5
  }): React.JSX.Element;
5
6
  import React from "react";
package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.js CHANGED
@@ -48,7 +48,7 @@ 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;
51
+ var images = _a.images, _b = _a.isDesktop, isDesktop = _b === void 0 ? true : _b, theme = _a.theme;
52
52
  // Common state structure for both desktop and mobile
53
53
  var initState = {
54
54
  currLayer: "layer1",
@@ -84,11 +84,11 @@ var ImageSwitcher = function (_a) {
84
84
  if (isDesktop) {
85
85
  return (react_1.default.createElement(react_1.default.Fragment, null,
86
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 }),
88
- react_1.default.createElement(styled_1.StyledContentWrapper, { "$backgroundImage": images[coverImageIdx.layer2[0]], "$opacity": coverImageIdx.currLayer === "layer2" ? 1 : 0 })),
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
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 }),
91
- react_1.default.createElement(styled_1.StyledContentWrapper, { "$backgroundImage": images[coverImageIdx.layer2[1]], "$opacity": coverImageIdx.currLayer === "layer2" ? 1 : 0 }))));
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
92
  }
93
93
  // Mobile render - single image with opacity transition
94
94
  return (react_1.default.createElement(styled_1.MobileWrapper, null,
package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.js CHANGED
@@ -10,7 +10,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
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
+ var utils_1 = require("../../../../themes/utils");
13
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"])));
14
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"])));
15
- exports.StyledContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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-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 (props) { return props.$backgroundImage; }, function (props) { return props.$opacity; }, (0, mixins_1.transition)("opacity"));
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"));
16
20
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/v2/components/HomeCover/index.js CHANGED
@@ -33,16 +33,16 @@ var HomeCover = function (_a) {
33
33
  react_1.default.createElement("div", { style: { position: "relative", height: '100%', borderRadius: '1rem', display: 'flex', alignItems: 'center', padding: '1.6rem' } },
34
34
  react_1.default.createElement("div", null,
35
35
  react_1.default.createElement(Typo2_1.UI_DISPLAY_SM, null, title),
36
- 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)),
37
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))),
38
- react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages }));
39
- var mobile = react_1.default.createElement(styled_1.StyledMobileHomeCover, { id: "StyledMobileHomeCover" },
40
- 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 }),
41
41
  react_1.default.createElement(styled_1.StyledMobileContentWrapper, null,
42
42
  react_1.default.createElement("div", { style: { alignContent: "end", height: '100%', gap: "1.6rem" } },
43
43
  react_1.default.createElement("div", { style: { color: "white" } },
44
44
  react_1.default.createElement(Typo2_1.UI_DISPLAY_SM, null, title),
45
- react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, null, desc)),
45
+ variant !== "small" && react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, { style: { marginTop: "0.8rem", opacity: 0.8 } }, desc)),
46
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))));
47
47
  return (isDesktop ? deskTop : mobile);
48
48
  };
package/dist/v2/components/HomeCover/styled.js CHANGED
@@ -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 display: flex;\n height: 40rem;\n margin: 1rem auto;\n border-radius: 1.6rem;\n position: relative;\n"], ["\n width: 96svw;\n display: flex;\n height: 40rem;\n margin: 1rem auto;\n border-radius: 1.6rem;\n position: relative;\n"])));
14
- 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) 48.06%, rgba(0, 0, 0, 0.60) 68.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) 48.06%, rgba(0, 0, 0, 0.60) 68.69%);\n"])));
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;\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);
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.171.2",
3
+ "version": "2.172.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",