@codecademy/brand 3.17.0-alpha.2758d7b250.0 → 3.18.0-alpha.2de280f935.0

package/dist/GlobalHeader/GlobalHeaderItems.d.ts

@@ -10,7 +10,7 @@ export declare const catalogDropdown: (hideCareerPaths?: boolean) => AppHeaderCa
 export declare const resourcesDropdown: () => AppHeaderResourcesDropdownItem;
 export declare const simpleResourcesDropdown: AppHeaderResourcesSimpleDropdownItem;
 export declare const communityDropdown: () => AppHeaderSimpleDropdownItem;
-export declare const pricingDropdown: AppHeaderSimpleDropdownItem;
+export declare const pricingDropdown: (isInRevampedBlpExperimentVariant?: boolean) => AppHeaderSimpleDropdownItem;
 export declare const upgradePlan: AppHeaderLinkItem;
 export declare const businessSolutions: AppHeaderLinkItem;
 export declare const careerCenter: AppHeaderLinkItem;

package/dist/GlobalHeader/GlobalHeaderItems.js

@@ -155,31 +155,33 @@ export const communityDropdown = () => ({
   trackingTarget: 'topnav_community',
   type: 'dropdown'
 });
-export const pricingDropdown = {
-  icon: AccountingCoinsIcon,
-  id: 'pricing',
-  text: 'Pricing',
-  popover: [{
-    id: 'pro-membership',
-    href: '/pricing',
-    trackingTarget: 'topnav_pro_membership',
-    text: 'For Individuals',
-    type: 'link'
-  }, {
-    id: 'for-students',
-    href: '/student-center',
-    trackingTarget: 'topnav_pricing_students',
-    text: 'For Students',
-    type: 'link'
-  }, {
-    id: 'for-teams',
-    href: '/business#section-pricing-table',
-    trackingTarget: 'topnav_pricing_business',
-    text: 'For Business',
-    type: 'link'
-  }],
-  trackingTarget: 'topnav_pricing',
-  type: 'dropdown'
+export const pricingDropdown = isInRevampedBlpExperimentVariant => {
+  return {
+    icon: AccountingCoinsIcon,
+    id: 'pricing',
+    text: 'Pricing',
+    popover: [{
+      id: 'pro-membership',
+      href: '/pricing',
+      trackingTarget: 'topnav_pro_membership',
+      text: 'For Individuals',
+      type: 'link'
+    }, {
+      id: 'for-students',
+      href: '/student-center',
+      trackingTarget: 'topnav_pricing_students',
+      text: 'For Students',
+      type: 'link'
+    }, {
+      id: 'for-teams',
+      href: isInRevampedBlpExperimentVariant ? '/business/pricing' : '/business#section-pricing-table',
+      trackingTarget: 'topnav_pricing_business',
+      text: 'For Business',
+      type: 'link'
+    }],
+    trackingTarget: 'topnav_pricing',
+    type: 'dropdown'
+  };
 };
 export const upgradePlan = {
   icon: ArrowThickCircleUpIcon,

package/dist/GlobalHeader/GlobalHeaderVariants.d.ts

@@ -1,16 +1,16 @@
 import { AppHeaderItem, FormattedAppHeaderItems, FormattedMobileAppHeaderItems } from '../AppHeader/shared';
 import { GlobalHeaderProps } from '.';
 import { User } from './types';
-export declare const anonDefaultHeaderItems: (hidePricing?: boolean, user?: User, isBlpHeroExperimentVariant?: boolean) => FormattedAppHeaderItems;
-export declare const anonDefaultMobileHeaderItems: (hidePricing?: boolean, user?: User, isBlpHeroExperimentVariant?: boolean) => FormattedMobileAppHeaderItems;
-export declare const anonLandingHeaderItems: (hidePricing?: boolean, user?: User) => FormattedAppHeaderItems;
-export declare const anonLandingMobileHeaderItems: (hidePricing?: boolean, user?: User) => FormattedMobileAppHeaderItems;
-export declare const anonLoginHeaderItems: (hidePricing?: boolean, user?: User) => FormattedAppHeaderItems;
-export declare const anonLoginMobileHeaderItems: (hidePricing?: boolean, user?: User) => FormattedMobileAppHeaderItems;
-export declare const anonSignupHeaderItems: (hidePricing?: boolean, user?: User) => FormattedAppHeaderItems;
-export declare const anonSignupMobileHeaderItems: (hidePricing?: boolean, user?: User) => FormattedMobileAppHeaderItems;
-export declare const freeHeaderItems: (user: User, hidePricing?: boolean) => FormattedAppHeaderItems;
-export declare const freeMobileHeaderItems: (user: User, hidePricing?: boolean) => FormattedMobileAppHeaderItems;
+export declare const anonDefaultHeaderItems: (hidePricing?: boolean, user?: User, isBlpHeroExperimentVariant?: boolean, isInRevampedBlpExperimentVariant?: boolean) => FormattedAppHeaderItems;
+export declare const anonDefaultMobileHeaderItems: (hidePricing?: boolean, user?: User, isBlpHeroExperimentVariant?: boolean, isInRevampedBlpExperimentVariant?: boolean) => FormattedMobileAppHeaderItems;
+export declare const anonLandingHeaderItems: (hidePricing?: boolean, user?: User, isInRevampedBlpExperimentVariant?: boolean) => FormattedAppHeaderItems;
+export declare const anonLandingMobileHeaderItems: (hidePricing?: boolean, user?: User, isInRevampedBlpExperimentVariant?: boolean) => FormattedMobileAppHeaderItems;
+export declare const anonLoginHeaderItems: (hidePricing?: boolean, user?: User, isInRevampedBlpExperimentVariant?: boolean) => FormattedAppHeaderItems;
+export declare const anonLoginMobileHeaderItems: (hidePricing?: boolean, user?: User, isInRevampedBlpExperimentVariant?: boolean) => FormattedMobileAppHeaderItems;
+export declare const anonSignupHeaderItems: (hidePricing?: boolean, user?: User, isInRevampedBlpExperimentVariant?: boolean) => FormattedAppHeaderItems;
+export declare const anonSignupMobileHeaderItems: (hidePricing?: boolean, user?: User, isInRevampedBlpExperimentVariant?: boolean) => FormattedMobileAppHeaderItems;
+export declare const freeHeaderItems: (user: User, hidePricing?: boolean, isInRevampedBlpExperimentVariant?: boolean) => FormattedAppHeaderItems;
+export declare const freeMobileHeaderItems: (user: User, hidePricing?: boolean, isInRevampedBlpExperimentVariant?: boolean) => FormattedMobileAppHeaderItems;
 export declare const enterpriseHeaderItems: (user: User, props: GlobalHeaderProps) => {
     left: AppHeaderItem[];
     right: never[];

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) => {
+const anonHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant) => {
   const specialLogo = {
     ...logo,
     checkMini: true
   };
-  const leftItems = [specialLogo, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions];
+  const leftItems = [specialLogo, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), 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) => {
+const anonMobileHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant) => {
   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]), liveLearningHub, businessSolutions];
+  const mainMenuItems = [catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), liveLearningHub, businessSolutions];
   return {
     left: leftItems,
     right: rightItems,
     mainMenu: mainMenuItems
   };
 };
-export const anonDefaultHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant) => {
-  return anonHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant);
+export const anonDefaultHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant) => {
+  return anonHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant);
 };
-export const anonDefaultMobileHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant) => {
-  return anonMobileHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant);
+export const anonDefaultMobileHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant) => {
+  return anonMobileHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant, isInRevampedBlpExperimentVariant);
 };
-export const anonLandingHeaderItems = (hidePricing, user) => {
-  return anonHeaderItems(true, false, hidePricing, user);
+export const anonLandingHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
+  return anonHeaderItems(true, false, hidePricing, user, false, isInRevampedBlpExperimentVariant);
 };
-export const anonLandingMobileHeaderItems = (hidePricing, user) => {
-  return anonMobileHeaderItems(true, false, hidePricing, user);
+export const anonLandingMobileHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
+  return anonMobileHeaderItems(true, false, hidePricing, user, false, isInRevampedBlpExperimentVariant);
 };
-export const anonLoginHeaderItems = (hidePricing, user) => {
-  return anonHeaderItems(false, true, hidePricing, user);
+export const anonLoginHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
+  return anonHeaderItems(false, true, hidePricing, user, false, isInRevampedBlpExperimentVariant);
 };
-export const anonLoginMobileHeaderItems = (hidePricing, user) => {
-  return anonMobileHeaderItems(false, true, hidePricing, user);
+export const anonLoginMobileHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
+  return anonMobileHeaderItems(false, true, hidePricing, user, false, isInRevampedBlpExperimentVariant);
 };
-export const anonSignupHeaderItems = (hidePricing, user) => {
-  return anonHeaderItems(true, false, hidePricing, user);
+export const anonSignupHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
+  return anonHeaderItems(true, false, hidePricing, user, false, isInRevampedBlpExperimentVariant);
 };
-export const anonSignupMobileHeaderItems = (hidePricing, user) => {
-  return anonMobileHeaderItems(true, false, hidePricing, user);
+export const anonSignupMobileHeaderItems = (hidePricing, user, isInRevampedBlpExperimentVariant) => {
+  return anonMobileHeaderItems(true, false, hidePricing, user, false, isInRevampedBlpExperimentVariant);
 };
-export const freeHeaderItems = (user, hidePricing) => {
+export const freeHeaderItems = (user, hidePricing, isInRevampedBlpExperimentVariant) => {
   const specialLogo = {
     ...logo,
     checkMini: true
   };
-  const leftItems = [specialLogo, myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions];
+  const leftItems = [specialLogo, myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), liveLearningHub, businessSolutions];
   const upgradeButton = upgradeToPro(user.proCheckoutUrl);
   const rightItems = [];
   rightItems.push(freeProfile(user));
@@ -106,7 +106,7 @@ export const freeHeaderItems = (user, hidePricing) => {
     right: rightItems
   };
 };
-export const freeMobileHeaderItems = (user, hidePricing) => {
+export const freeMobileHeaderItems = (user, hidePricing, isInRevampedBlpExperimentVariant) => {
   const specialLogo = {
     ...logo,
     checkMini: true
@@ -114,7 +114,7 @@ export const freeMobileHeaderItems = (user, hidePricing) => {
   const leftItems = [specialLogo];
   const rightItems = [];
   const upgradeButton = upgradeToPro(user.proCheckoutUrl);
-  const mainMenuItems = [myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions, freeProfile(user), user.showProUpgrade ? upgradeButton : tryProForFree(user.proCheckoutUrl)];
+  const mainMenuItems = [myHome, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown(isInRevampedBlpExperimentVariant)]), liveLearningHub, businessSolutions, freeProfile(user), user.showProUpgrade ? upgradeButton : tryProForFree(user.proCheckoutUrl)];
   return {
     left: leftItems,
     right: rightItems,

package/dist/GlobalHeader/index.d.ts

@@ -4,5 +4,6 @@ export * from './types';
 export declare const LiveLearningHubContext: React.Context<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

@@ -10,6 +10,7 @@ export * from './types';
 export const LiveLearningHubContext = /*#__PURE__*/React.createContext(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
 
@@ -24,18 +25,18 @@ function getAppHeaderItems(props, mobile, dynamicDataLoading) {
     case 'anon':
       switch (props.variant) {
         case 'landing':
-          return mobile ? anonLandingMobileHeaderItems(hidePricing, props.user) : anonLandingHeaderItems(hidePricing, props.user);
+          return mobile ? anonLandingMobileHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant) : anonLandingHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant);
         case 'login':
-          return mobile ? anonLoginMobileHeaderItems(hidePricing, props.user) : anonLoginHeaderItems(hidePricing, props.user);
+          return mobile ? anonLoginMobileHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant) : anonLoginHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant);
         case 'signup':
-          return mobile ? anonSignupMobileHeaderItems(hidePricing, props.user) : anonSignupHeaderItems(hidePricing, props.user);
+          return mobile ? anonSignupMobileHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant) : anonSignupHeaderItems(hidePricing, props.user, props.isInRevampedBlpExperimentVariant);
         default:
-          return mobile ? anonDefaultMobileHeaderItems(hidePricing, props.user, props.isBlpHeroExperimentVariant) : anonDefaultHeaderItems(hidePricing, props.user, props.isBlpHeroExperimentVariant);
+          return mobile ? anonDefaultMobileHeaderItems(hidePricing, props.user, props.isBlpHeroExperimentVariant, props.isInRevampedBlpExperimentVariant) : anonDefaultHeaderItems(hidePricing, props.user, props.isBlpHeroExperimentVariant, props.isInRevampedBlpExperimentVariant);
       }
     case 'enterprise':
       return mobile ? enterpriseMobileHeaderItems(props.user, props) : enterpriseHeaderItems(props.user, props);
     case 'free':
-      return mobile ? freeMobileHeaderItems(props.user, hidePricing) : freeHeaderItems(props.user, hidePricing);
+      return mobile ? freeMobileHeaderItems(props.user, hidePricing, props.isInRevampedBlpExperimentVariant) : freeHeaderItems(props.user, hidePricing, props.isInRevampedBlpExperimentVariant);
     case 'pro':
       return mobile ? proMobileHeaderItems(props.user) : proHeaderItems(props.user);
     case 'teams':
@@ -76,51 +77,54 @@ export const GlobalHeader = props => {
       value: !!props.displayGlobalNavRedesign,
       children: /*#__PURE__*/_jsx(BlpHeroExperimentContext.Provider, {
         value: !!props.isBlpHeroExperimentVariant,
-        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(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]
+              })
             })
           })
         })

package/dist/GlobalHeader/types.d.ts

@@ -33,6 +33,7 @@ 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.17.0-alpha.2758d7b250.0",
+  "version": "3.18.0-alpha.2de280f935.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",