@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.esm.js

@@ -1,11 +1,13 @@
-import { __assign, __spreadArray } from 'tslib';
+import { __assign, __makeTemplateObject, __spreadArray } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Container } from '@cleartrip/ct-design-container';
 import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
-import { ButtonColor, Button } from '@cleartrip/ct-design-button';
+import { ButtonColor, Button, ButtonVariant } from '@cleartrip/ct-design-button';
 import { Divider } from '@cleartrip/ct-design-divider';
 import { Offers, BusinessBag, ChevronDown, MyTrips, SupportIcon, ArrowRight, MyAccount, SavedCard, Travellers, HiFive, Wallet, SettingsCog, PrivacyRights, HeaderChevronRight, FkVip, FkPremium, InsiderIcon, InsiderElite, CtLoyalty, Supercoin, Signout, CTLogo, Fkcompany } from '@cleartrip/ct-design-icons';
+import styled, { keyframes } from 'styled-components';
+import { Shimmer } from '@cleartrip/ct-design-shimmer';
 
 var OFFERS_URL = 'all-offers/?categories=flights';
 var MY_TRIPS_URL = '/account/trips';
@@ -103,14 +105,14 @@ var LOG_IN_TEXT = 'Log in';
 var THEME_CONFIG = {
   NOVAC: {
     headerBackground: 'transparent',
-    hoverColor: '#FFB8A5',
+    hoverColor: '#FDBA12',
     logoFill: '#FFF',
     fkcompanyColor: '#FFF',
     typographyColor: '#FFF',
     loginButtonColorVariant: ButtonColor.NEUTRAL
   },
   DEFAULT: {
-    headerBackground: '#F7FAFF',
+    headerBackground: '#FFFFFF',
     hoverColor: '#FF4F17',
     logoFill: '#FF4F17',
     fkcompanyColor: '#1A1A1A',
@@ -144,44 +146,54 @@ var LobsHeader = function () {
     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 jsxs(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 jsx("a", __assign({
+        href: isSelected ? undefined : link,
+        style: {
+          textDecoration: 'none',
+          pointerEvents: isSelected ? 'none' : 'auto'
         }
       }, {
-        children: [jsx("img", {
-          src: image,
-          alt: title,
-          width: 32,
-          height: 32
-        }), jsx(Typography, __assign({
-          variant: selectedLOB === title ? TypographyVariant.HM3 : TypographyVariant.B1,
-          isClickable: true
+        children: jsxs(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: [jsx("img", {
+            src: image,
+            alt: title,
+            width: 32,
+            height: 32
+          }), jsx(Typography, __assign({
+            variant: isSelected ? TypographyVariant.HM3 : TypographyVariant.B1,
+            isClickable: true
+          }, {
+            children: title
+          }))]
+        }), index)
+      }));
     })
   }));
 };
@@ -529,34 +541,41 @@ var BusinessDropdownContent = function (_a) {
           details = _a.details,
           link = _a.link,
           ravenActionName = _a.ravenActionName;
-        return jsxs(Container, __assign({
-          cursor: 'pointer',
-          width: '200px',
-          className: 'bd-hover-container',
+        return jsxs(BDHoverContainer, __assign({
+          className: 'bd-hover-container-js',
           onClick: function () {
             return handleBusinessDropdownClick(link, title, ravenActionName);
           }
         }, {
           children: [jsxs(Container, __assign({
             display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            columnGap: '8px'
+            flexDirection: 'column',
+            rowGap: '4px'
           }, {
-            children: [jsx(Typography, __assign({
-              variant: 'HM2',
-              className: 'color-orange-on-hover'
+            children: [jsxs(Container, __assign({
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              columnGap: '8px'
             }, {
-              children: title
-            })), jsx(AnimatedArrow, {})]
-          })), jsx(Typography, __assign({
-            variant: 'B3',
-            css: {
-              marginTop: '4px',
-              opacity: 0.75
-            }
-          }, {
-            children: subtitle
+              children: [jsx(Typography, __assign({
+                variant: 'HM2',
+                className: 'color-orange-on-hover-js',
+                css: {
+                  transition: 'color 200ms ease'
+                }
+              }, {
+                children: title
+              })), jsx(AnimatedArrow, {})]
+            })), jsx(Typography, __assign({
+              variant: 'B3',
+              css: {
+                marginTop: '4px',
+                opacity: 0.75
+              }
+            }, {
+              children: subtitle
+            }))]
           })), jsx(Typography, __assign({
             variant: 'P3',
             color: 'subheading',
@@ -573,17 +592,38 @@ var BusinessDropdownContent = function (_a) {
 };
 var AnimatedArrow = function () {
   return jsx(Container, __assign({
-    className: 'bd-arrow-container'
+    className: 'bd-arrow-container-js',
+    css: arrowContainerStyles
   }, {
     children: __spreadArray([], Array(3), true).map(function (_, index) {
       return jsx(Container, __assign({
-        className: 'bd-arrow-wrapper'
+        className: 'bd-arrow-wrapper-js',
+        display: 'flex',
+        alignItems: 'center'
       }, {
         children: jsx(ArrowRight, {})
       }), index);
     })
   }));
 };
+var moveRight = 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 = 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.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',
@@ -905,22 +945,20 @@ var RewardsSection = function () {
       gap: '4px'
     }
   }, {
-    children: [loyaltyLoading ? jsx(Container, {
+    children: [loyaltyLoading ? jsx(Shimmer, {
       width: '50px',
       height: '32px',
-      borderRadius: '8px',
-      backgroundColor: '#efefef'
+      borderRadius: '8px'
     }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip && 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 ? jsx(Container, {
+    }), superCoinsLoading ? jsx(Shimmer, {
       width: '50px',
       height: '32px',
-      borderRadius: '8px',
-      backgroundColor: '#efefef'
+      borderRadius: '8px'
     }) : !hideSupercoinsChip && jsx(ExpandableItem, {
       icon: jsx(Supercoin, {
         width: 20,
@@ -929,11 +967,10 @@ var RewardsSection = function () {
       value: superCoinBalance,
       handleChipClick: supercoinsChipClick,
       type: 'supercoin'
-    }), walletLoading ? jsx(Container, {
+    }), walletLoading ? jsx(Shimmer, {
       width: '50px',
       height: '32px',
-      borderRadius: '8px',
-      backgroundColor: '#efefef'
+      borderRadius: '8px'
     }) : !hideWalletChip && jsx(ExpandableItem, {
       icon: jsx(Wallet, {
         width: 20,
@@ -1004,11 +1041,9 @@ var AccountDropdownContent = function (_a) {
         variant: variant,
         color: color
       }, {
-        children: loading ? jsx(Container, {
+        children: loading ? jsx(Shimmer, {
           height: variant === 'HM3' ? '18px' : '12px',
-          width: variant === 'HM3' ? '140px' : '200px',
-          backgroundColor: '#efefef',
-          borderRadius: '8px'
+          width: variant === 'HM3' ? '140px' : '200px'
         }) : content
       }));
     };
@@ -1063,13 +1098,13 @@ var AccountDropdownContent = function (_a) {
           icon = _a.icon,
           redirectionLink = _a.redirectionLink;
         return jsx(Container, __assign({
-          className: 'hoverable-container',
           padding: '8px',
           borderRadius: '8px',
           cursor: 'pointer',
           onClick: function () {
             return handleAccountOptionsClick(text, redirectionLink);
-          }
+          },
+          css: __assign({}, getAccountOptionHoverStyles())
         }, {
           children: jsxs(Container, __assign({
             display: 'flex',
@@ -1095,12 +1130,13 @@ var AccountDropdownContent = function (_a) {
           borderBottom: '1px dashed #E6E6E6'
         }
       }), jsxs(Container, __assign({
-        className: 'logout-button',
         display: 'flex',
         padding: '8px',
         borderRadius: '8px',
         cursor: 'pointer',
-        onClick: handleLogoutClick
+        columnGap: '8px',
+        onClick: handleLogoutClick,
+        css: __assign({}, getLogoutButtonHoverStyles())
       }, {
         children: [jsx(Signout, {
           height: 24,
@@ -1120,6 +1156,22 @@ var AccountDropdownContent = function (_a) {
     }))]
   }));
 };
+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(),
@@ -1144,7 +1196,7 @@ var UserAccount = function () {
     setScrolled = _d[1];
   useEffect(function () {
     var handleScroll = function () {
-      setScrolled(window.scrollY >= 100);
+      setScrolled(window.scrollY >= 50);
     };
     window.addEventListener('scroll', handleScroll);
     return function () {
@@ -1246,20 +1298,20 @@ var HeaderContent = function () {
     setScrolled = _f[1];
   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
     }),
@@ -1434,23 +1486,16 @@ var HeaderContent = function () {
             }, {
               children: jsx(UserAccount, {})
             })) : jsx(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: ButtonVariant.OUTLINE
             }, {
-              children: jsx(Typography, __assign({
-                componentNode: 'span',
-                variant: 'L2',
-                color: loginButtonColorVariant === ButtonColor.NEUTRAL ? 'neutral' : 'primary'
-              }, {
-                children: LOG_IN_TEXT
-              }))
+              children: LOG_IN_TEXT
             }))
           })]
         }))]