@codecademy/brand 3.14.0-alpha.b4a7d94973.0 → 3.14.0-alpha.c1be8cc71a.0

package/dist/GlobalHeader/GlobalHeaderVariants.js

@@ -11,12 +11,12 @@ const transformSimpleResourcesDropdownlabels = resourcesLabel => ({
     text: resourcesLabel?.[item.id] || item.text
   }))
 });
-const anonHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant) => {
+const anonHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHeroExperimentVariant) => {
   const specialLogo = {
     ...logo,
     checkMini: true
   };
-  const leftItems = [specialLogo, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), liveLearningHub, businessSolutions];
+  const leftItems = [specialLogo, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions];
   const rightItems = [];
   if (isBusinessPage(isBlpHeroExperimentVariant)) {
     if (renderSignUp) {
@@ -38,7 +38,7 @@ const anonHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHero
     right: rightItems
   };
 };
-const anonMobileHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant) => {
+const anonMobileHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHeroExperimentVariant) => {
   const specialLogo = {
     ...logo,
     checkMini: true
@@ -60,43 +60,43 @@ const anonMobileHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isB
       rightItems.push(signUp);
     }
   }
-  const mainMenuItems = [catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), liveLearningHub, businessSolutions];
+  const mainMenuItems = [catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions];
   return {
     left: leftItems,
     right: rightItems,
     mainMenu: mainMenuItems
   };
 };
-export const anonDefaultHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant) => {
-  return anonHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant);
+export const anonDefaultHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant) => {
+  return anonHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant);
 };
-export const anonDefaultMobileHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant) => {
-  return anonMobileHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant);
+export const anonDefaultMobileHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant) => {
+  return anonMobileHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant);
 };
-export const anonLandingHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
-  return anonHeaderItems(true, false, hidePricing, user, false, isInRevampedBlpExperimentVariant);
+export const anonLandingHeaderItems = (hidePricing, user) => {
+  return anonHeaderItems(true, false, hidePricing, user);
 };
-export const anonLandingMobileHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
-  return anonMobileHeaderItems(true, false, hidePricing, user, false, isInRevampedBlpExperimentVariant);
+export const anonLandingMobileHeaderItems = (hidePricing, user) => {
+  return anonMobileHeaderItems(true, false, hidePricing, user);
 };
-export const anonLoginHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
-  return anonHeaderItems(false, true, hidePricing, user, false, isInRevampedBlpExperimentVariant);
+export const anonLoginHeaderItems = (hidePricing, user) => {
+  return anonHeaderItems(false, true, hidePricing, user);
 };
-export const anonLoginMobileHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
-  return anonMobileHeaderItems(false, true, hidePricing, user, false, isInRevampedBlpExperimentVariant);
+export const anonLoginMobileHeaderItems = (hidePricing, user) => {
+  return anonMobileHeaderItems(false, true, hidePricing, user);
 };
-export const anonSignupHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
-  return anonHeaderItems(true, false, hidePricing, user, false, isInRevampedBlpExperimentVariant);
+export const anonSignupHeaderItems = (hidePricing, user) => {
+  return anonHeaderItems(true, false, hidePricing, user);
 };
-export const anonSignupMobileHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
-  return anonMobileHeaderItems(true, false, hidePricing, user, false, isInRevampedBlpExperimentVariant);
+export const anonSignupMobileHeaderItems = (hidePricing, user) => {
+  return anonMobileHeaderItems(true, false, hidePricing, user);
 };
-export const freeHeaderItems = (user, hidePricing, isInRevampedBlpExperimentVariant) => {
+export const freeHeaderItems = (user, hidePricing) => {
   const specialLogo = {
     ...logo,
     checkMini: true
   };
-  const leftItems = [specialLogo, myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), liveLearningHub, businessSolutions];
+  const leftItems = [specialLogo, myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions];
   const upgradeButton = upgradeToPro(user.proCheckoutUrl);
   const rightItems = [];
   rightItems.push(freeProfile(user));
@@ -106,7 +106,7 @@ export const freeHeaderItems = (user, hidePricing, isInRevampedBlpExperimentVari
     right: rightItems
   };
 };
-export const freeMobileHeaderItems = (user, hidePricing, isInRevampedBlpExperimentVariant) => {
+export const freeMobileHeaderItems = (user, hidePricing) => {
   const specialLogo = {
     ...logo,
     checkMini: true
@@ -114,7 +114,7 @@ export const freeMobileHeaderItems = (user, hidePricing, isInRevampedBlpExperime
   const leftItems = [specialLogo];
   const rightItems = [];
   const upgradeButton = upgradeToPro(user.proCheckoutUrl);
-  const mainMenuItems = [myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), liveLearningHub, businessSolutions, freeProfile(user), user.showProUpgrade ? upgradeButton : tryProForFree(user.proCheckoutUrl)];
+  const mainMenuItems = [myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions, freeProfile(user), user.showProUpgrade ? upgradeButton : tryProForFree(user.proCheckoutUrl)];
   return {
     left: leftItems,
     right: rightItems,

package/dist/GlobalHeader/context.d.ts

@@ -11,4 +11,24 @@ export interface GlobalHeaderDynamicDataContextType {
 }
 declare const GlobalHeaderDynamicDataContext: React.Context<GlobalHeaderDynamicDataContextType>;
 export declare const useGlobalHeaderDynamicDataContext: () => GlobalHeaderDynamicDataContextType;
-export { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext };
+export declare const DropdownPositions: Record<'free' | 'anon' | 'pro' | 'teams' | 'default', {
+    catalogDropdown: {
+        narrow: string;
+        wide: string;
+    };
+    resourceDropdown: {
+        narrow: string;
+        wide: string;
+    };
+}>;
+declare const HeaderDisplayContext: React.Context<{
+    showOnboardingQuiz?: boolean;
+    showSortingQuiz?: boolean;
+    headerType: keyof typeof DropdownPositions;
+}>;
+export declare const useHeaderDisplayContext: () => {
+    showOnboardingQuiz?: boolean;
+    showSortingQuiz?: boolean;
+    headerType: keyof typeof DropdownPositions;
+};
+export { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext, };

package/dist/GlobalHeader/context.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 const GlobalHeaderItemClickContext = /*#__PURE__*/createContext({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   globalHeaderItemClick: () => {}
@@ -12,4 +12,66 @@ const GlobalHeaderDynamicDataContext = /*#__PURE__*/createContext({
 export const useGlobalHeaderDynamicDataContext = () => {
   return useContext(GlobalHeaderDynamicDataContext);
 };
-export { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext };
+export const DropdownPositions = {
+  free: {
+    catalogDropdown: {
+      narrow: '-9rem',
+      wide: '-14rem'
+    },
+    resourceDropdown: {
+      narrow: '-14.5rem',
+      wide: '-19.5rem'
+    }
+  },
+  anon: {
+    catalogDropdown: {
+      narrow: '-4rem',
+      wide: '-9.5rem'
+    },
+    resourceDropdown: {
+      narrow: '-9.5rem',
+      wide: '-14.5rem'
+    }
+  },
+  pro: {
+    catalogDropdown: {
+      narrow: '-14rem',
+      wide: '-14rem'
+    },
+    resourceDropdown: {
+      narrow: '-19.5rem',
+      wide: '-19.5rem'
+    }
+  },
+  teams: {
+    catalogDropdown: {
+      narrow: '-14rem',
+      wide: '-14rem'
+    },
+    resourceDropdown: {
+      narrow: '-19.5rem',
+      wide: '-19.5rem'
+    }
+  },
+  // won't be used, but is here to handle the case where the header type is not one of the above
+  // other header types are not part of the experiment
+  default: {
+    catalogDropdown: {
+      narrow: '-9rem',
+      wide: '-9rem'
+    },
+    resourceDropdown: {
+      narrow: '-14.5rem',
+      wide: '-14.5rem'
+    }
+  }
+};
+const HeaderDisplayContext = /*#__PURE__*/React.createContext({
+  showOnboardingQuiz: false,
+  showSortingQuiz: false,
+  headerType: 'default'
+});
+export const useHeaderDisplayContext = () => {
+  return useContext(HeaderDisplayContext);
+};
+export { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext };

package/dist/GlobalHeader/index.d.ts

@@ -2,12 +2,7 @@ import * as React from 'react';
 import { AnonHeader, EnterpriseHeader, FreeHeader, LoadingHeader, ProHeader, SimpleBootcampHeader, SimpleHeader, TeamsHeader } from './types';
 export * from './types';
 export declare const LiveLearningHubContext: React.Context<boolean>;
-export declare const HeaderQuizContext: React.Context<{
-    showOnboardingQuiz?: boolean;
-    showSortingQuiz?: boolean;
-}>;
 export declare const GlobalNavRedesignContext: React.Context<boolean>;
 export declare const BlpHeroExperimentContext: React.Context<boolean>;
-export declare const RevampedBlpExperimentContext: React.Context<boolean>;
 export type GlobalHeaderProps = AnonHeader | FreeHeader | ProHeader | EnterpriseHeader | TeamsHeader | LoadingHeader | SimpleHeader | SimpleBootcampHeader;
 export declare const GlobalHeader: React.FC<GlobalHeaderProps>;

package/dist/GlobalHeader/index.js

@@ -3,18 +3,13 @@ import { useTheme } from '@emotion/react';
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
 import { AppHeader, AppHeaderMobile, isAppHeaderItemWithHref } from '..';
-import { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext } from './context';
+import { DropdownPositions, GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext } from './context';
 import { anonDefaultHeaderItems, anonDefaultMobileHeaderItems, anonLandingHeaderItems, anonLandingMobileHeaderItems, anonLoginHeaderItems, anonLoginMobileHeaderItems, anonSignupHeaderItems, anonSignupMobileHeaderItems, enterpriseHeaderItems, enterpriseMobileHeaderItems, freeHeaderItems, freeMobileHeaderItems, loadingHeaderItems, loadingMobileHeaderItems, proHeaderItems, proMobileHeaderItems, simpleBootcampHeaderItems, simpleBootcampMobileHeaderItems, simpleHeaderItems, simpleMobileHeaderItems, teamsHeaderItems, teamsMobileHeaderItems } from './GlobalHeaderVariants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export * from './types';
 export const LiveLearningHubContext = /*#__PURE__*/React.createContext(false);
-export const HeaderQuizContext = /*#__PURE__*/React.createContext({
-  showOnboardingQuiz: false,
-  showSortingQuiz: false
-});
 export const GlobalNavRedesignContext = /*#__PURE__*/React.createContext(false);
 export const BlpHeroExperimentContext = /*#__PURE__*/React.createContext(false);
-export const RevampedBlpExperimentContext = /*#__PURE__*/React.createContext(false);
 
 // Overloading getAppHeaderItems function to return different types based on mobile parameter
 
@@ -29,18 +24,18 @@ function getAppHeaderItems(props, mobile, dynamicDataLoading) {
     case 'anon':
       switch (props.variant) {
         case 'landing':
-          return mobile ? anonLandingMobileHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant) : anonLandingHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant);
+          return mobile ? anonLandingMobileHeaderItems(hidePricing, props.user) : anonLandingHeaderItems(hidePricing, props.user);
         case 'login':
-          return mobile ? anonLoginMobileHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant) : anonLoginHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant);
+          return mobile ? anonLoginMobileHeaderItems(hidePricing, props.user) : anonLoginHeaderItems(hidePricing, props.user);
         case 'signup':
-          return mobile ? anonSignupMobileHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant) : anonSignupHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant);
+          return mobile ? anonSignupMobileHeaderItems(hidePricing, props.user) : anonSignupHeaderItems(hidePricing, props.user);
         default:
-          return mobile ? anonDefaultMobileHeaderItems(hidePricing, props.user, props.isBlpHeroExperimentVariant, props.isInRevampedBlpExperimentVariant) : anonDefaultHeaderItems(hidePricing, props.user, props.isBlpHeroExperimentVariant, props.isInRevampedBlpExperimentVariant);
+          return mobile ? anonDefaultMobileHeaderItems(hidePricing, props.user, props.isBlpHeroExperimentVariant) : anonDefaultHeaderItems(hidePricing, props.user, props.isBlpHeroExperimentVariant);
       }
     case 'enterprise':
       return mobile ? enterpriseMobileHeaderItems(props.user, props) : enterpriseHeaderItems(props.user, props);
     case 'free':
-      return mobile ? freeMobileHeaderItems(props.user, hidePricing, props.isInRevampedBlpExperimentVariant) : freeHeaderItems(props.user, hidePricing, props.isInRevampedBlpExperimentVariant);
+      return mobile ? freeMobileHeaderItems(props.user, hidePricing) : freeHeaderItems(props.user, hidePricing);
     case 'pro':
       return mobile ? proMobileHeaderItems(props.user) : proHeaderItems(props.user);
     case 'teams':
@@ -68,63 +63,64 @@ export const GlobalHeader = props => {
   const hideNotification = props.type === 'loading' || props.type === 'enterprise' || props.type === 'simple' || props.type === 'bootcamp';
   const showOnboardingQuiz = props.type === 'anon' || (props.type === 'free' || props.type === 'pro') && !props.user.enrolledInTwoOrMoreContainers;
   const showSortingQuiz = (props.type === 'free' || props.type === 'pro') && props.user.enrolledInTwoOrMoreContainers;
-  return /*#__PURE__*/_jsx(HeaderQuizContext.Provider, {
+  return /*#__PURE__*/_jsx(HeaderDisplayContext.Provider, {
     value: {
       showOnboardingQuiz,
-      showSortingQuiz
+      showSortingQuiz,
+      headerType: useMemo(() => {
+        if (props.type in DropdownPositions) return props.type;
+        return 'default';
+      }, [props.type])
     },
     children: /*#__PURE__*/_jsx(GlobalNavRedesignContext.Provider, {
       value: !!props.displayGlobalNavRedesign,
       children: /*#__PURE__*/_jsx(BlpHeroExperimentContext.Provider, {
         value: !!props.isBlpHeroExperimentVariant,
-        children: /*#__PURE__*/_jsx(RevampedBlpExperimentContext.Provider, {
-          value: !!props.isInRevampedBlpExperimentVariant,
-          children: /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
-            value: {
-              globalHeaderItemClick: combinedAction
-            },
-            children: /*#__PURE__*/_jsx(GlobalHeaderDynamicDataContext.Provider, {
-              value: useMemo(() => ({
-                globalHeaderDynamicData: dynamicData ?? null
-              }), [dynamicData]),
-              children: /*#__PURE__*/_jsxs(Box, {
-                as: "header",
-                position: "sticky",
-                top: 0,
-                zIndex: theme.elements.headerZ,
-                overflow: {
-                  _: 'hidden',
-                  sm: 'visible'
-                } // Prevent tooltip overflow on mobile
-                ,
-                children: [/*#__PURE__*/_jsx(AppHeader, {
-                  action: combinedAction,
-                  items: getAppHeaderItems(props, false, dynamicDataLoading ?? false),
-                  search: props.search,
-                  ...(props.type === 'anon' ? {
-                    redirectParam: props.redirectParam
-                  } : hideNotification ? {} : {
-                    notifications: props.notifications
-                  }),
-                  hideRightButtonDefaults: hideNotification,
-                  isAnon: props.type === 'anon',
-                  isTeams: props.type === 'teams',
-                  type: hideNotification ? 'enterprise' : 'standard'
-                }), /*#__PURE__*/_jsx(AppHeaderMobile, {
-                  action: combinedAction,
-                  items: getAppHeaderItems(props, true, dynamicDataLoading ?? false),
-                  ...(props.type === 'anon' || hideNotification ? {} : {
-                    notifications: props.notifications
-                  }),
-                  search: props.search,
-                  redirectParam: props.type === 'anon' ? props.redirectParam : undefined,
-                  isEnterprise: props.type === 'enterprise',
-                  isAnon: props.type === 'anon',
-                  isSimple: props.type === 'simple',
-                  hideRightMenuButton: props.type === 'simple' || props.type === 'loading',
-                  navigationMenuFormattedLabel: props?.localizedLabels?.navigationMenuFormattedLabel
-                }), props.children]
-              })
+        children: /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
+          value: {
+            globalHeaderItemClick: combinedAction
+          },
+          children: /*#__PURE__*/_jsx(GlobalHeaderDynamicDataContext.Provider, {
+            value: useMemo(() => ({
+              globalHeaderDynamicData: dynamicData ?? null
+            }), [dynamicData]),
+            children: /*#__PURE__*/_jsxs(Box, {
+              as: "header",
+              position: "sticky",
+              top: 0,
+              zIndex: theme.elements.headerZ,
+              overflow: {
+                _: 'hidden',
+                sm: 'visible'
+              } // Prevent tooltip overflow on mobile
+              ,
+              children: [/*#__PURE__*/_jsx(AppHeader, {
+                action: combinedAction,
+                items: getAppHeaderItems(props, false, dynamicDataLoading ?? false),
+                search: props.search,
+                ...(props.type === 'anon' ? {
+                  redirectParam: props.redirectParam
+                } : hideNotification ? {} : {
+                  notifications: props.notifications
+                }),
+                hideRightButtonDefaults: hideNotification,
+                isAnon: props.type === 'anon',
+                isTeams: props.type === 'teams',
+                type: hideNotification ? 'enterprise' : 'standard'
+              }), /*#__PURE__*/_jsx(AppHeaderMobile, {
+                action: combinedAction,
+                items: getAppHeaderItems(props, true, dynamicDataLoading ?? false),
+                ...(props.type === 'anon' || hideNotification ? {} : {
+                  notifications: props.notifications
+                }),
+                search: props.search,
+                redirectParam: props.type === 'anon' ? props.redirectParam : undefined,
+                isEnterprise: props.type === 'enterprise',
+                isAnon: props.type === 'anon',
+                isSimple: props.type === 'simple',
+                hideRightMenuButton: props.type === 'simple' || props.type === 'loading',
+                navigationMenuFormattedLabel: props?.localizedLabels?.navigationMenuFormattedLabel
+              }), props.children]
             })
           })
         })

package/dist/GlobalHeader/types.d.ts

@@ -33,7 +33,6 @@ interface BaseHeader extends WithChildrenProp, AppHeaderAction {
     search: AppHeaderSearch;
     displayGlobalNavRedesign?: boolean;
     isBlpHeroExperimentVariant?: boolean;
-    isInRevampedBlpExperimentVariant?: boolean;
     dynamicData?: GlobalHeaderDynamicData | null;
     dynamicDataLoading?: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "3.14.0-alpha.b4a7d94973.0",
+  "version": "3.14.0-alpha.c1be8cc71a.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",