oolib 2.55.5 → 2.55.7

package/dist/components/Accordion/styled.js

@@ -15,7 +15,7 @@ var mixins_1 = require("../../themes/mixins");
 var greyColor100 = themes_1.colors.greyColor100;
 exports.StyledAccordionContentsWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    overflow: hidden;\n    \n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    overflow: hidden;\n    \n"])));
 exports.StyledHeaderStyle1Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"])), themes_1.colors.greyColor5, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor10);
-exports.StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n"])), themes_1.colors.white, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'));
+exports.StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 0; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 0; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n"])), themes_1.colors.white, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'));
 exports.StyledHeaderStyle3Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n\n    background-color: ", ";\n    border: 1px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n\n    background-color: ", ";\n    border: 1px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"])), themes_1.colors.none, themes_1.colors.greyColor15, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor3);
 exports.NormalizedButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border: none;\n    background-color: ", ";\n"], ["\n    border: none;\n    background-color: ", ";\n"])), themes_1.colors.none);
 exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n"])));

package/dist/components/DatePicker/index.js

@@ -208,7 +208,7 @@ function DatePicker(props) {
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledDateInputContainer, { invert: invert },
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, getReadOnlyDate())) : (react_1.default.createElement(styled_1.StyledDateInputWrapper, null,
-                react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef) }))),
+                react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: 'SANS_3', invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef) }))),
             react_1.default.createElement(styled_1.StyledCalenderContainer, { ref: calenderRef, className: "calender-container ".concat(from ? 'right-class' : ''), invert: invert },
                 react_1.default.createElement(styled_1.StyledMonthView, null,
                     react_1.default.createElement(styled_1.StyledHeader, null,

package/dist/components/DatePicker/styled.js

@@ -13,12 +13,14 @@ var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100, primaryColor40 = themes_1.colors.primaryColor40;
 exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    width: fit-content;\n\n\n    &:focus-within .calender-container {\n        visibility: visible;\n    }\n\n"], ["\n    position: relative;\n    width: fit-content;\n\n\n    &:focus-within .calender-container {\n        visibility: visible;\n    }\n\n"])));
-exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    font-size: 1.6rem;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n        font-size: 1.6rem;\n    }\n\n"], ["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    font-size: 1.6rem;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n        font-size: 1.6rem;\n    }\n\n"])), function (_a) {
+exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"], ["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor80 : greyColor5);
 }, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
-    return disabled ? greyColor100 : invert && white;
+    return invert
+        ? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
+        : disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
 }, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
     return disabled ? greyColor15 : invert ? primaryColor40 : greyColor10;

package/dist/components/HomeCover/index.js

@@ -47,6 +47,7 @@ var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
 var HomeCover = function (_a) {
     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;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
     var history = (0, react_router_dom_1.useHistory)();
     //   const {deployment: {_CoverImages : coverImagesConfig}} = useGetQueryData('platformConfigs');
     //backwards compat
@@ -54,12 +55,26 @@ var HomeCover = function (_a) {
         ? coverImagesConfig
         : coverImagesConfig.map(function (c) { return c.publicUrl; });
     var _c = (0, react_1.useState)(undefined), dynamicTitleWidth = _c[0], setDynamicTitleWidth = _c[1];
-    var _d = (0, react_1.useState)({
+    var initDesktopState = {
         currLayer: "layer1",
         layer1: [0, 1],
         layer2: [2, 3],
-    }), coverImageIdx = _d[0], setCoverImageIdx = _d[1];
-    //console.log({_CoverImages:_CoverImages[coverImageIdx.layer1[0]]})
+    };
+    var initMobileState = {
+        currLayer: "layer1",
+        layer1: [0],
+        layer2: [1],
+    };
+    var _d = (0, react_1.useState)(isDesktop ? initDesktopState : initMobileState), coverImageIdx = _d[0], setCoverImageIdx = _d[1];
+    var firstMount = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(function () {
+        //basically if a switch happens between mobile and desktop then switch to the initial desktop / mobile state
+        if (firstMount.current)
+            firstMount.current = false;
+        else {
+            setCoverImageIdx(isDesktop ? initDesktopState : initMobileState);
+        }
+    }, [isDesktop]);
     var titleTextSpan_ref = (0, react_1.useRef)(null);
     var title_ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
@@ -83,10 +98,24 @@ var HomeCover = function (_a) {
                     setCoverImageIdx(function (prev) {
                         var _a;
                         var layerToSwitch = prev.currLayer === "layer1" ? "layer2" : "layer1";
-                        return __assign(__assign({}, prev), (_a = {}, _a[layerToSwitch] = [
-                            (prev[layerToSwitch][0] + 4) % _CoverImages.length,
-                            (prev[layerToSwitch][1] + 4) % _CoverImages.length,
-                        ], _a));
+                        return __assign(__assign({}, prev), (_a = {}, _a[layerToSwitch] = isDesktop
+                            ? /**
+                               * i.e there are 2 images showing ----------------> layer1 > img idx 0 | img idx 1
+                               * the hidden layer below that will reveal has ---> layer2 > img idx 2 | img idx 3
+                               *
+                               * after reveal, 0 needs to become 4 & 1 needs to become 5
+                               */
+                                [
+                                    (prev[layerToSwitch][0] + 4) % _CoverImages.length,
+                                    (prev[layerToSwitch][1] + 4) % _CoverImages.length,
+                                ]
+                            : /**
+                               * i.e there is only 1 image showing ----------------> layer1 > img idx 0
+                               * the hidden layer below that will reveal has ---> layer2 > img idx 1
+                               *
+                               * after reveal, 0 needs to become 2 & 1 needs to become 3
+                               */
+                                [(prev[layerToSwitch][0] + 2) % _CoverImages.length], _a));
                     });
                 }, 300); // the interval here shoudl be the same as the css transition interval
             }
@@ -96,22 +125,7 @@ var HomeCover = function (_a) {
             clearTimeout(timeout);
             clearInterval(interval);
         };
-    }, []);
-    //   const getFontSize = (titleLength) => {
-    //     let decay = (80 / (titleLength * 0.08));
-    //     let max = 40;
-    //     let min = 20;
-    //     return (
-    //       (decay < max && decay > min)
-    //       ? decay
-    //       : decay > max
-    //         ? 40
-    //         : decay < min
-    //         && 20
-    //     )
-    //   }
-    // console.log({MED:mediaQuery("md")})
-    var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
+    }, [isDesktop]);
     var genCTALink = function (_a) {
         var CTALink = _a.CTALink, variant = _a.variant, isDesktop = _a.isDesktop;
         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 () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.55.5",
+  "version": "2.55.7",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",