@codecademy/brand 3.0.0-alpha.da574fc3ea.0 → 3.1.0-alpha.02a4ffb480.0

package/dist/GlobalHeader/GlobalHeaderVariants.js

@@ -1,4 +1,8 @@
-import { addPayment, bootcampCta, businessSolutions, catalogDropdown, communityDropdown, enterpriseLogo, freeProfile, liveLearningHub, loading, login, logo, myHome, myPercipioHome, pricingDropdown, proProfile, resourcesDropdown, signUp, simpleResourcesDropdown, tryProForFree, unpausePro, upgradePlan, upgradeToPro } from './GlobalHeaderItems';
+import { addPayment, bootcampCta, businessSolutions, catalogDropdown, communityDropdown, enterpriseLogo, freeProfile, liveLearningHub, loading, login, logo, myHome, myPercipioHome, pricingDropdown, proProfile, requestTeamsDemo, resourcesDropdown, signUp, signUpTextButton, simpleResourcesDropdown, tryProForFree, unpausePro, upgradePlan, upgradeToPro } from './GlobalHeaderItems';
+const isBusinessPage = isBlpHeroExperimentVariant => {
+  if (typeof window === 'undefined') return false;
+  return window.location.pathname === '/business' && Boolean(isBlpHeroExperimentVariant);
+};
 const transformSimpleResourcesDropdownlabels = resourcesLabel => ({
   ...simpleResourcesDropdown,
   text: resourcesLabel?.title || simpleResourcesDropdown.text,
@@ -7,36 +11,54 @@ const transformSimpleResourcesDropdownlabels = resourcesLabel => ({
     text: resourcesLabel?.[item.id] || item.text
   }))
 });
-const anonHeaderItems = (renderLogin, renderSignUp, hidePricing, user) => {
+const anonHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHeroExperimentVariant) => {
   const specialLogo = {
     ...logo,
     checkMini: true
   };
   const leftItems = [specialLogo, catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions];
   const rightItems = [];
-  if (renderLogin) {
-    rightItems.push(login);
-  }
-  if (renderSignUp) {
-    rightItems.push(signUp);
+  if (isBusinessPage(isBlpHeroExperimentVariant)) {
+    if (renderSignUp) {
+      rightItems.push(signUpTextButton);
+    }
+    if (renderLogin) {
+      rightItems.push(requestTeamsDemo);
+    }
+  } else {
+    if (renderLogin) {
+      rightItems.push(login);
+    }
+    if (renderSignUp) {
+      rightItems.push(signUp);
+    }
   }
   return {
     left: leftItems,
     right: rightItems
   };
 };
-const anonMobileHeaderItems = (renderLogin, renderSignUp, hidePricing, user) => {
+const anonMobileHeaderItems = (renderLogin, renderSignUp, hidePricing, user, isBlpHeroExperimentVariant) => {
   const specialLogo = {
     ...logo,
     checkMini: true
   };
   const leftItems = [specialLogo];
   const rightItems = [];
-  if (renderLogin) {
-    rightItems.push(login);
-  }
-  if (renderSignUp) {
-    rightItems.push(signUp);
+  if (isBusinessPage(isBlpHeroExperimentVariant)) {
+    if (renderSignUp) {
+      rightItems.push(signUpTextButton);
+    }
+    if (renderLogin) {
+      rightItems.push(requestTeamsDemo);
+    }
+  } else {
+    if (renderLogin) {
+      rightItems.push(login);
+    }
+    if (renderSignUp) {
+      rightItems.push(signUp);
+    }
   }
   const mainMenuItems = [catalogDropdown(user?.hideCareerPaths), resourcesDropdown(), communityDropdown(), ...(hidePricing ? [] : [pricingDropdown]), liveLearningHub, businessSolutions];
   return {
@@ -45,11 +67,11 @@ const anonMobileHeaderItems = (renderLogin, renderSignUp, hidePricing, user) =>
     mainMenu: mainMenuItems
   };
 };
-export const anonDefaultHeaderItems = (hidePricing, user) => {
-  return anonHeaderItems(true, true, hidePricing, user);
+export const anonDefaultHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant) => {
+  return anonHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant);
 };
-export const anonDefaultMobileHeaderItems = (hidePricing, user) => {
-  return anonMobileHeaderItems(true, true, hidePricing, user);
+export const anonDefaultMobileHeaderItems = (hidePricing, user, isBlpHeroExperimentVariant) => {
+  return anonMobileHeaderItems(true, true, hidePricing, user, isBlpHeroExperimentVariant);
 };
 export const anonLandingHeaderItems = (hidePricing, user) => {
   return anonHeaderItems(true, false, hidePricing, user);

package/dist/GlobalHeader/index.d.ts

@@ -7,5 +7,6 @@ export declare const HeaderQuizContext: React.Context<{
     showSortingQuiz?: boolean;
 }>;
 export declare const GlobalNavRedesignContext: React.Context<boolean>;
+export declare const BlpHeroExperimentContext: 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

@@ -13,6 +13,7 @@ export const HeaderQuizContext = /*#__PURE__*/React.createContext({
   showSortingQuiz: false
 });
 export const GlobalNavRedesignContext = /*#__PURE__*/React.createContext(false);
+export const BlpHeroExperimentContext = /*#__PURE__*/React.createContext(false);
 
 // Overloading getAppHeaderItems function to return different types based on mobile parameter
 
@@ -30,7 +31,7 @@ function getAppHeaderItems(props, mobile) {
         case 'signup':
           return mobile ? anonSignupMobileHeaderItems(hidePricing, props.user) : anonSignupHeaderItems(hidePricing, props.user);
         default:
-          return mobile ? anonDefaultMobileHeaderItems(hidePricing, props.user) : anonDefaultHeaderItems(hidePricing, props.user);
+          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);
@@ -68,47 +69,50 @@ export const GlobalHeader = props => {
     },
     children: /*#__PURE__*/_jsx(GlobalNavRedesignContext.Provider, {
       value: !!props.displayGlobalNavRedesign,
-      children: /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
-        value: {
-          globalHeaderItemClick: combinedAction
-        },
-        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),
-            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),
-            ...(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(BlpHeroExperimentContext.Provider, {
+        value: !!props.isBlpHeroExperimentVariant,
+        children: /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
+          value: {
+            globalHeaderItemClick: combinedAction
+          },
+          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),
+              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),
+              ...(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

@@ -31,6 +31,7 @@ interface BaseHeader extends WithChildrenProp, AppHeaderAction {
     localizedLabels?: localizedLabels;
     search: AppHeaderSearch;
     displayGlobalNavRedesign?: boolean;
+    isBlpHeroExperimentVariant?: boolean;
 }
 export type User = {
     avatar: string;

package/dist/LearningOutcomeFlyout/LearningOutcomeCardList.d.ts

@@ -1,6 +1,7 @@
-import { ParentLearningOutcome } from '../LearningOutcomeFlyout';
+import { ParentLearningOutcome } from './types';
 interface LearningOutcomeCardListProps {
     learningOutcomes: ParentLearningOutcome[];
+    onClick?: (misc: Record<string, string>) => void;
 }
 export declare const LearningOutcomeCardList: React.FC<LearningOutcomeCardListProps>;
 export {};

package/dist/LearningOutcomeFlyout/LearningOutcomeCardList.js

@@ -1,8 +1,10 @@
-import { FlexBox } from '@codecademy/gamut';
+import { Anchor, Box, FlexBox } from '@codecademy/gamut';
 import { LearningOutcomeCard } from '../LearningOutcomeCard';
+import { getLearningOutcomePath, miscTrackingData } from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const LearningOutcomeCardList = ({
-  learningOutcomes
+  learningOutcomes,
+  onClick
 }) => {
   return /*#__PURE__*/_jsx(FlexBox, {
     as: "ul",
@@ -14,10 +16,27 @@ export const LearningOutcomeCardList = ({
       id,
       level,
       outcome
-    }) => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      as: "li",
-      level: level,
-      outcome: outcome
-    }, id))
+    }) => {
+      const trackingData = miscTrackingData(level, id, undefined, outcome);
+      return /*#__PURE__*/_jsx(Box, {
+        as: "li",
+        listStyle: "none",
+        m: 0,
+        p: 0,
+        width: "100%",
+        children: /*#__PURE__*/_jsx(Anchor, {
+          href: getLearningOutcomePath(id),
+          onClick: () => onClick?.(trackingData),
+          target: "_blank",
+          variant: "interface",
+          width: "100%",
+          children: /*#__PURE__*/_jsx(LearningOutcomeCard, {
+            level: level,
+            outcome: outcome,
+            isInteractive: true
+          })
+        })
+      }, id);
+    })
   });
 };

package/dist/LearningOutcomeFlyout/index.d.ts

@@ -1,50 +1,8 @@
 import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
-export declare enum SkillClassification {
-    Language = "language",
-    Subject = "subject"
-}
-interface LearningOutcomeSkill {
-    id: string;
-    slug: string;
-    title?: string | null;
-    classification?: SkillClassification | null;
-}
-export interface ParentLearningOutcome {
-    id: string;
-    outcome: string;
-    level: number | null | undefined;
-}
-export interface LearningOutcomeDetailsProps {
-    level: LearningOutcomeLevels;
-    outcome: string;
-    percentComplete: number | undefined | null;
-    highestScore: number | undefined | null;
-    highestScoreAchievedAt: string | undefined | null;
-    latestScore: number | undefined | null;
-    latestScoreAchievedAt: string | undefined | null;
-    parentLOs?: ParentLearningOutcome[];
-    skills?: LearningOutcomeSkill[] | null;
-    childLearningOutcomes?: {
-        id: string;
-        outcome: string;
-        percentComplete?: number | undefined | null;
-        progress?: {
-            latestScore?: number | null;
-            covered: boolean | undefined | null;
-            coveredAt?: string | null;
-            highestScore?: number | null;
-        };
-    }[];
-}
-interface LearningOutcomeFlyoutProps {
-    expanded: boolean;
-    onClose: () => void;
-    learningOutcome: LearningOutcomeDetailsProps;
-    learningOutcomeHref: string;
-    learningOutcomeOnClick?: () => void;
-    skillTagOnClick?: (skillSlug: string) => void;
-    childLearningOutcomeOnClick?: () => void;
-}
+import { LearningOutcomeFlyoutProps, LearningOutcomeSkill } from './types';
 export declare const sortSkillsByClassification: (skills?: LearningOutcomeSkill[] | null) => LearningOutcomeSkill[];
+export declare const getLearningOutcomePath: (id?: string) => string;
+export declare const miscTrackingData: (level?: LearningOutcomeLevels | null, id?: string, latestScore?: number | null, outcome?: string) => {
+    misc: string;
+};
 export declare const LearningOutcomeFlyout: React.FC<LearningOutcomeFlyoutProps>;
-export {};