@cleartrip/ct-design-header 1.2.0-SNAPSHOT-header-v0.11.0 → 1.2.0-SNAPSHOT-header-fix-v3.0

package/dist/ct-design-header.umd.js

@@ -1,8 +1,12 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-button'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-icons')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-button', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-icons'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignIcons));
-})(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-button'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-icons'), require('styled-components'), require('@cleartrip/ct-design-shimmer')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-button', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-icons', 'styled-components', '@cleartrip/ct-design-shimmer'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignIcons, global.styled, global.ctDesignShimmer));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons, styled, ctDesignShimmer) { 'use strict';
+
+    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+    var styled__default = /*#__PURE__*/_interopDefault(styled);
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -39,6 +43,16 @@
       }
       return to.concat(ar || Array.prototype.slice.call(from));
     }
+    function __makeTemplateObject(cooked, raw) {
+      if (Object.defineProperty) {
+        Object.defineProperty(cooked, "raw", {
+          value: raw
+        });
+      } else {
+        cooked.raw = raw;
+      }
+      return cooked;
+    }
     typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
       var e = new Error(message);
       return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -140,14 +154,14 @@
     var THEME_CONFIG = {
       NOVAC: {
         headerBackground: 'transparent',
-        hoverColor: '#FFB8A5',
+        hoverColor: '#FDBA12',
         logoFill: '#FFF',
         fkcompanyColor: '#FFF',
         typographyColor: '#FFF',
         loginButtonColorVariant: ctDesignButton.ButtonColor.NEUTRAL
       },
       DEFAULT: {
-        headerBackground: '#F7FAFF',
+        headerBackground: '#FFFFFF',
         hoverColor: '#FF4F17',
         logoFill: '#FF4F17',
         fkcompanyColor: '#1A1A1A',
@@ -181,44 +195,54 @@
         alignItems: 'center',
         justifyContent: 'center',
         padding: '16px',
-        height: '64',
-        background: '#F3F5FA',
+        background: '#F7FAFF',
         top: '64px',
         zIndex: 2,
         css: {
-          gap: 40
+          gap: 24
         }
       }, {
         children: LOB_DATA.map(function (item, index) {
           var title = item.title,
             link = item.link,
             image = item.image;
-          return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-            display: 'flex',
-            alignItems: 'center',
-            cursor: 'pointer',
-            css: {
-              gap: 8,
-              background: selectedLOB === title ? '#FFFFFF' : 'transparent',
-              borderRadius: selectedLOB === title ? '40px' : '0',
-              padding: selectedLOB === title ? '8px 16px 8px 8px' : '0'
-            },
-            onClick: function () {
-              window.location.href = link;
+          var isSelected = selectedLOB === title;
+          return jsxRuntime.jsx("a", __assign({
+            href: isSelected ? undefined : link,
+            style: {
+              textDecoration: 'none',
+              pointerEvents: isSelected ? 'none' : 'auto'
             }
           }, {
-            children: [jsxRuntime.jsx("img", {
-              src: image,
-              alt: title,
-              width: 32,
-              height: 32
-            }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-              variant: selectedLOB === title ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1,
-              isClickable: true
+            children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+              display: 'flex',
+              alignItems: 'center',
+              width: '116px',
+              height: '48px',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              css: {
+                gap: 8,
+                background: isSelected ? '#FFFFFF' : 'transparent',
+                border: isSelected ? '1px solid #E6E6E6' : '',
+                borderRadius: '40px',
+                padding: '8px 16px 8px 8px',
+                transition: 'background 0.2s ease'
+              }
             }, {
-              children: title
-            }))]
-          }), index);
+              children: [jsxRuntime.jsx("img", {
+                src: image,
+                alt: title,
+                width: 32,
+                height: 32
+              }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
+                variant: isSelected ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1,
+                isClickable: true
+              }, {
+                children: title
+              }))]
+            }), index)
+          }));
         })
       }));
     };
@@ -566,34 +590,41 @@
               details = _a.details,
               link = _a.link,
               ravenActionName = _a.ravenActionName;
-            return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-              cursor: 'pointer',
-              width: '200px',
-              className: 'bd-hover-container',
+            return jsxRuntime.jsxs(BDHoverContainer, __assign({
+              className: 'bd-hover-container-js',
               onClick: function () {
                 return handleBusinessDropdownClick(link, title, ravenActionName);
               }
             }, {
               children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
                 display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                columnGap: '8px'
+                flexDirection: 'column',
+                rowGap: '4px'
               }, {
-                children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-                  variant: 'HM2',
-                  className: 'color-orange-on-hover'
+                children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  columnGap: '8px'
                 }, {
-                  children: title
-                })), jsxRuntime.jsx(AnimatedArrow, {})]
-              })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-                variant: 'B3',
-                css: {
-                  marginTop: '4px',
-                  opacity: 0.75
-                }
-              }, {
-                children: subtitle
+                  children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
+                    variant: 'HM2',
+                    className: 'color-orange-on-hover-js',
+                    css: {
+                      transition: 'color 200ms ease'
+                    }
+                  }, {
+                    children: title
+                  })), jsxRuntime.jsx(AnimatedArrow, {})]
+                })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
+                  variant: 'B3',
+                  css: {
+                    marginTop: '4px',
+                    opacity: 0.75
+                  }
+                }, {
+                  children: subtitle
+                }))]
               })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                 variant: 'P3',
                 color: 'subheading',
@@ -610,17 +641,38 @@
     };
     var AnimatedArrow = function () {
       return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-        className: 'bd-arrow-container'
+        className: 'bd-arrow-container-js',
+        css: arrowContainerStyles
       }, {
         children: __spreadArray([], Array(3), true).map(function (_, index) {
           return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-            className: 'bd-arrow-wrapper'
+            className: 'bd-arrow-wrapper-js',
+            display: 'flex',
+            alignItems: 'center'
           }, {
             children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
           }), index);
         })
       }));
     };
+    var moveRight = styled.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
+    var moveRightAgain = styled.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
+    var arrowContainerStyles = {
+      display: 'flex',
+      backgroundColor: 'black',
+      transition: 'background-color 200ms ease',
+      'flex-direction': 'row',
+      justifyContent: 'center',
+      width: '20px',
+      height: '20px',
+      overflow: 'hidden',
+      borderRadius: '50%'
+    };
+    var BDHoverContainer = /*#__PURE__*/styled__default.default.div.withConfig({
+      displayName: "BusinessDropdown__BDHoverContainer",
+      componentId: "sc-1tsshe4-0"
+    })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"], ["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"])), moveRight, moveRightAgain);
+    var templateObject_1, templateObject_2, templateObject_3;
 
     var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
       text: 'My Profile',
@@ -942,22 +994,20 @@
           gap: '4px'
         }
       }, {
-        children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
+        children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
           width: '50px',
           height: '32px',
-          borderRadius: '8px',
-          backgroundColor: '#efefef'
+          borderRadius: '8px'
         }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip && jsxRuntime.jsx(LoyaltyChip, {
           icon: LOYALTY_DATA[selectedLoyaltyType].icon,
           borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
           backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
           chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF',
           handleChipClick: loyaltyChipClick
-        }), superCoinsLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
+        }), superCoinsLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
           width: '50px',
           height: '32px',
-          borderRadius: '8px',
-          backgroundColor: '#efefef'
+          borderRadius: '8px'
         }) : !hideSupercoinsChip && jsxRuntime.jsx(ExpandableItem, {
           icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, {
             width: 20,
@@ -966,11 +1016,10 @@
           value: superCoinBalance,
           handleChipClick: supercoinsChipClick,
           type: 'supercoin'
-        }), walletLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
+        }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
           width: '50px',
           height: '32px',
-          borderRadius: '8px',
-          backgroundColor: '#efefef'
+          borderRadius: '8px'
         }) : !hideWalletChip && jsxRuntime.jsx(ExpandableItem, {
           icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
             width: 20,
@@ -1041,11 +1090,9 @@
             variant: variant,
             color: color
           }, {
-            children: loading ? jsxRuntime.jsx(ctDesignContainer.Container, {
+            children: loading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
               height: variant === 'HM3' ? '18px' : '12px',
-              width: variant === 'HM3' ? '140px' : '200px',
-              backgroundColor: '#efefef',
-              borderRadius: '8px'
+              width: variant === 'HM3' ? '140px' : '200px'
             }) : content
           }));
         };
@@ -1100,13 +1147,13 @@
               icon = _a.icon,
               redirectionLink = _a.redirectionLink;
             return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-              className: 'hoverable-container',
               padding: '8px',
               borderRadius: '8px',
               cursor: 'pointer',
               onClick: function () {
                 return handleAccountOptionsClick(text, redirectionLink);
-              }
+              },
+              css: __assign({}, getAccountOptionHoverStyles())
             }, {
               children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
                 display: 'flex',
@@ -1132,12 +1179,13 @@
               borderBottom: '1px dashed #E6E6E6'
             }
           }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-            className: 'logout-button',
             display: 'flex',
             padding: '8px',
             borderRadius: '8px',
             cursor: 'pointer',
-            onClick: handleLogoutClick
+            columnGap: '8px',
+            onClick: handleLogoutClick,
+            css: __assign({}, getLogoutButtonHoverStyles())
           }, {
             children: [jsxRuntime.jsx(ctDesignIcons.Signout, {
               height: 24,
@@ -1157,6 +1205,22 @@
         }))]
       }));
     };
+    var getAccountOptionHoverStyles = function () {
+      return {
+        transition: 'background-color 0.2s ease-in-out',
+        '&:hover': {
+          backgroundColor: '#ECF3FF'
+        }
+      };
+    };
+    var getLogoutButtonHoverStyles = function () {
+      return {
+        transition: 'background-color 0.2s ease-in-out',
+        '&:hover': {
+          backgroundColor: '#FBEFEF'
+        }
+      };
+    };
 
     var UserAccount = function () {
       var _a = useHeaderContext(),
@@ -1181,7 +1245,7 @@
         setScrolled = _d[1];
       react.useEffect(function () {
         var handleScroll = function () {
-          setScrolled(window.scrollY >= 100);
+          setScrolled(window.scrollY >= 50);
         };
         window.addEventListener('scroll', handleScroll);
         return function () {
@@ -1283,20 +1347,20 @@
         setScrolled = _f[1];
       react.useEffect(function () {
         var handleScroll = function () {
-          setScrolled(window.scrollY >= 100);
+          setScrolled(window.scrollY >= 50);
         };
         window.addEventListener('scroll', handleScroll);
         return function () {
           return window.removeEventListener('scroll', handleScroll);
         };
       }, []);
-      var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
-      var headerBackground = theme.headerBackground,
-        logoFill = theme.logoFill,
-        loginButtonColorVariant = theme.loginButtonColorVariant,
-        hoverColor = theme.hoverColor,
-        fkcompanyColor = theme.fkcompanyColor,
-        typographyColor = theme.typographyColor;
+      var headerTheme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+      var headerBackground = headerTheme.headerBackground,
+        logoFill = headerTheme.logoFill,
+        loginButtonColorVariant = headerTheme.loginButtonColorVariant,
+        hoverColor = headerTheme.hoverColor,
+        fkcompanyColor = headerTheme.fkcompanyColor,
+        typographyColor = headerTheme.typographyColor;
       var _g = useHoverDropdown({
           openDelay: 0
         }),
@@ -1471,23 +1535,16 @@
                 }, {
                   children: jsxRuntime.jsx(UserAccount, {})
                 })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({
-                  variant: 'outline',
-                  color: loginButtonColorVariant,
-                  className: "".concat(headerBackground === 'transparent' ? 'novac-login-button' : 'login-button'),
                   onClick: onLoginButtonClick,
                   css: {
                     width: 153,
                     height: 40
                   },
-                  loading: false
+                  loading: false,
+                  color: loginButtonColorVariant,
+                  variant: ctDesignButton.ButtonVariant.OUTLINE
                 }, {
-                  children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-                    componentNode: 'span',
-                    variant: 'L2',
-                    color: loginButtonColorVariant === ctDesignButton.ButtonColor.NEUTRAL ? 'neutral' : 'primary'
-                  }, {
-                    children: LOG_IN_TEXT
-                  }))
+                  children: LOG_IN_TEXT
                 }))
               })]
             }))]