@codecademy/brand 2.9.0-alpha.f019d85d25.0 → 2.9.0

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.js

@@ -1,13 +1,18 @@
 import { ContentContainer, FillButton, Text, TextButton } from '@codecademy/gamut';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import * as React from 'react';
 import { AppHeaderLink } from '../../AppHeader/AppHeaderElements/AppHeaderLink';
 import { AppHeaderLinkSections } from '../../AppHeader/AppHeaderElements/AppHeaderLinkSections';
-import { login, signUp } from '../../GlobalHeader/GlobalHeaderItems';
+import { BlpHeroExperimentContext } from '../../GlobalHeader';
+import { login, requestTeamsDemo, signUp, signUpTextButton } from '../../GlobalHeader/GlobalHeaderItems';
 import { AppHeaderSubNavMobile } from '../AppHeaderSubMenuMobile';
 import { MobileUlWrapper } from '../AppHeaderSubMenuMobile/elements';
 import { AppHeaderSubMenuRow } from '../AppHeaderSubMenuTarget';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const isBusinessPageExperiment = isBlpHeroExperimentVariant => {
+  if (typeof window === 'undefined') return false;
+  return window.location.pathname === '/business' && isBlpHeroExperimentVariant;
+};
 export const AppHeaderMainMenuMobile = ({
   action,
   items,
@@ -16,6 +21,7 @@ export const AppHeaderMainMenuMobile = ({
   handleCloseMainMenu
 }) => {
   const [subMenuItem, setSubMenuItem] = useState();
+  const isBlpHeroExperimentVariant = useContext(BlpHeroExperimentContext);
   const openSubMenu = (event, item) => {
     action(event, item);
     setSubMenuItem(item);
@@ -86,7 +92,7 @@ export const AppHeaderMainMenuMobile = ({
     tabIndex: -1,
     children: /*#__PURE__*/_jsxs(MobileUlWrapper, {
       as: "ul",
-      children: [items.map(item => mapItemToElement(item, action)), isAnon && /*#__PURE__*/_jsxs("div", {
+      children: [items.map(item => mapItemToElement(item, action)), isAnon && /*#__PURE__*/_jsx("div", {
         style: {
           display: 'flex',
           alignItems: 'baseline',
@@ -94,17 +100,31 @@ export const AppHeaderMainMenuMobile = ({
           paddingTop: '16px',
           borderTop: '1px solid var(--border-tertiary)'
         },
-        children: [/*#__PURE__*/_jsx(FillButton, {
-          "data-testid": signUp.dataTestId,
-          href: signUp.href,
-          onClick: event => action(event, signUp),
-          children: signUp.text
-        }, signUp.id), /*#__PURE__*/_jsx(TextButton, {
-          "data-testid": login.dataTestId,
-          href: login.href,
-          onClick: event => action(event, login),
-          children: login.text
-        }, login.id)]
+        children: isBusinessPageExperiment(isBlpHeroExperimentVariant) ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(TextButton, {
+            "data-testid": signUpTextButton.dataTestId,
+            href: signUpTextButton.href,
+            onClick: event => action(event, signUpTextButton),
+            children: signUpTextButton.text
+          }, signUpTextButton.id), /*#__PURE__*/_jsx(FillButton, {
+            "data-testid": requestTeamsDemo.dataTestId,
+            href: requestTeamsDemo.href,
+            onClick: event => action(event, requestTeamsDemo),
+            children: requestTeamsDemo.text
+          }, requestTeamsDemo.id)]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(FillButton, {
+            "data-testid": signUp.dataTestId,
+            href: signUp.href,
+            onClick: event => action(event, signUp),
+            children: signUp.text
+          }, signUp.id), /*#__PURE__*/_jsx(TextButton, {
+            "data-testid": login.dataTestId,
+            href: login.href,
+            onClick: event => action(event, login),
+            children: login.text
+          }, login.id)]
+        })
       })]
     })
   });

package/dist/GlobalHeader/GlobalHeaderItems.d.ts

@@ -22,4 +22,6 @@ export declare const upgradeToPro: (checkoutUrl?: string) => AppHeaderFillButton
 export declare const unpausePro: AppHeaderFillButtonItem;
 export declare const login: AppHeaderTextButtonItem;
 export declare const signUp: AppHeaderFillButtonItem;
+export declare const signUpTextButton: AppHeaderTextButtonItem;
 export declare const bootcampCta: (bootcampSlug: string) => AppHeaderFillButtonItem;
+export declare const requestTeamsDemo: AppHeaderFillButtonItem;

package/dist/GlobalHeader/GlobalHeaderItems.js

@@ -392,6 +392,15 @@ export const signUp = {
   type: 'fill-button',
   redirect: true
 };
+export const signUpTextButton = {
+  dataTestId: 'header-sign-up-variant',
+  id: 'signup',
+  text: 'Sign Up',
+  href: '/register',
+  trackingTarget: 'topnav_signup',
+  type: 'text-button',
+  redirect: true
+};
 export const bootcampCta = bootcampSlug => ({
   dataTestId: 'bootcamp-header-cta',
   id: 'bootcamp-header-cta',
@@ -402,4 +411,12 @@ export const bootcampCta = bootcampSlug => ({
   variant: 'secondary',
   icon: MiniArrowRightIcon,
   iconPosition: 'right'
-});
+});
+export const requestTeamsDemo = {
+  dataTestId: 'request-teams-demo',
+  id: 'request-teams-demo',
+  text: 'Request a demo',
+  href: '/business/teams-quote',
+  trackingTarget: 'topnav_request_teams_demo',
+  type: 'fill-button'
+};

package/dist/GlobalHeader/GlobalHeaderVariants.d.ts

@@ -1,8 +1,8 @@
 import { AppHeaderItem, FormattedAppHeaderItems, FormattedMobileAppHeaderItems } from '../AppHeader/shared';
 import { GlobalHeaderProps } from '.';
 import { User } from './types';
-export declare const anonDefaultHeaderItems: (hidePricing?: boolean, user?: User) => FormattedAppHeaderItems;
-export declare const anonDefaultMobileHeaderItems: (hidePricing?: boolean, user?: User) => FormattedMobileAppHeaderItems;
+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;

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/index.d.ts

@@ -27,7 +27,6 @@ export * from './ContentGroupBaseCard';
 export * from './ContentGroupBaseCard/types';
 export * from './ContentGroupBaseCard/helpers';
 export * from './CourseCard';
-export * from './CourseRecommendationsLink';
 export * from './CurriculumCard';
 export * from './CurriculumCard/Difficulty';
 export * from './CurriculumCard/Difficulty/types';

package/dist/index.js

@@ -27,7 +27,6 @@ export * from './ContentGroupBaseCard';
 export * from './ContentGroupBaseCard/types';
 export * from './ContentGroupBaseCard/helpers';
 export * from './CourseCard';
-export * from './CourseRecommendationsLink';
 export * from './CurriculumCard';
 export * from './CurriculumCard/Difficulty';
 export * from './CurriculumCard/Difficulty/types';

package/package.json

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

package/dist/CourseRecommendationsLink/index.d.ts

@@ -1,3 +0,0 @@
-export declare const CourseRecommendationsLink: React.FC<{
-    onClick?: () => void;
-}>;

package/dist/CourseRecommendationsLink/index.js

@@ -1,27 +0,0 @@
-import { FillButton, FlexBox, Text } from '@codecademy/gamut';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CourseRecommendationsLink = ({
-  onClick
-}) => /*#__PURE__*/_jsxs(FlexBox, {
-  column: true,
-  p: 16,
-  bg: "navy-100",
-  border: 1,
-  borderColor: "border-tertiary",
-  borderRadius: "lg",
-  children: [/*#__PURE__*/_jsx(Text, {
-    variant: "p-large",
-    fontWeight: "bold",
-    children: "Get personalized course recommendations"
-  }), /*#__PURE__*/_jsx(Text, {
-    variant: "p-base",
-    mt: 8,
-    children: "Answer a few quick questions about your interests and skill level. We\u2019ll create a custom list of courses just for you."
-  }), /*#__PURE__*/_jsx(FillButton, {
-    size: "small",
-    mt: 16,
-    href: "/welcome/find-a-course",
-    onClick: onClick,
-    children: "Take the quiz"
-  })]
-});