@codecademy/brand 4.0.0-alpha.fb4adf2b4d.0 → 4.0.0

package/dist/GlobalHeader/GlobalHeaderItems.js

@@ -0,0 +1,420 @@
+import { Shimmer, Text } from '@codecademy/gamut';
+import { AccountingCoinsIcon, ArrowThickCircleUpIcon, ArticleIcon, BookFlipPageIcon, BriefcaseIcon, CalendarIcon, CoachingIcon, CommunityIcon, EarthIcon, GearIcon, HouseEntranceIcon, MiniArrowRightIcon, NotebookIcon, OfficeBuildingDoubleIcon, OnlineClassStudentIcon, PersonIcon, PersonPonytailIcon, PieLineGraphIcon, SupportIcon } from '@codecademy/gamut-icons';
+import { formatEnterpriseUrl } from './urlHelpers';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const shouldShowBusinessDashboardLink = user => {
+  return !!(user?.isAccountManager || user?.isBusinessAdmin) && !user?.isSkillsoftUser;
+};
+export const loading = {
+  id: 'header-loading',
+  type: 'render-element',
+  renderElement: () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Shimmer, {
+      "aria-hidden": true,
+      height: 36,
+      width: 128
+    }), /*#__PURE__*/_jsx(Text, {
+      screenreader: true,
+      children: "Loading menu bar"
+    })]
+  })
+};
+export const logo = {
+  dataTestId: 'header-logo',
+  id: 'logo',
+  href: '/',
+  enterprise: false,
+  pro: false,
+  trackingTarget: 'topnav_logo',
+  type: 'logo'
+};
+export const enterpriseLogo = (user, removeAnchorLink) => {
+  return {
+    dataTestId: 'header-logo',
+    id: 'logo',
+    href: formatEnterpriseUrl(user?.enterpriseUrl) ?? 'https://www.skillsoft.com/login-skillsoft',
+    enterprise: true,
+    pro: false,
+    trackingTarget: 'topnav_enterprise_logo',
+    type: 'logo',
+    removeAnchorLink
+  };
+};
+export const myHome = {
+  dataTestId: 'header-home',
+  icon: HouseEntranceIcon,
+  id: 'my-home',
+  text: 'My Home',
+  href: '/learn',
+  trackingTarget: 'topnav_home',
+  type: 'link'
+};
+export const bootcampsHub = {
+  dataTestId: 'header-bootcamps-hub',
+  icon: OnlineClassStudentIcon,
+  id: 'bootcamps-hub',
+  text: 'Bootcamps',
+  href: '/bootcamps',
+  trackingTarget: 'topnav_bootcamps_hub',
+  type: 'link'
+};
+export const coaching = {
+  dataTestId: 'header-coaching',
+  icon: CoachingIcon,
+  id: 'coaching',
+  text: 'Coaching',
+  href: '/coaching',
+  trackingTarget: 'topnav_coaching',
+  type: 'link'
+};
+export const myPercipioHome = (user, customTitle) => {
+  return {
+    dataTestId: 'header-percihome',
+    icon: HouseEntranceIcon,
+    id: 'my-home',
+    text: customTitle || 'Home',
+    ariaLabel: 'Home, opens in a new tab',
+    href: formatEnterpriseUrl(user?.enterpriseUrl) ?? 'https://www.skillsoft.com/login-skillsoft',
+    newTab: true,
+    trackingTarget: 'topnav_enterprise_home',
+    type: 'link'
+  };
+};
+export const catalogDropdown = hideCareerPaths => ({
+  dataTestId: 'header-catalog',
+  icon: BookFlipPageIcon,
+  id: 'catalog-dropdown',
+  text: 'Catalog',
+  trackingTarget: 'topnav_catalog',
+  type: 'catalog-dropdown',
+  hideCareerPaths
+});
+export const resourcesDropdown = () => ({
+  dataTestId: 'header-resources',
+  icon: NotebookIcon,
+  id: 'resources-dropdown',
+  text: 'Resources',
+  trackingTarget: 'topnav_resources',
+  type: 'resources-dropdown'
+});
+export const simpleResourcesDropdown = {
+  dataTestId: 'header-resources',
+  icon: NotebookIcon,
+  id: 'resources-simple-dropdown',
+  text: 'Resources',
+  popover: [{
+    id: 'articles',
+    href: '/articles',
+    trackingTarget: 'topnav_enterprise_articles',
+    text: 'Articles',
+    type: 'link'
+  }, {
+    id: 'docs',
+    href: '/resources/docs',
+    trackingTarget: 'topnav_enterprise_docs',
+    text: 'Docs',
+    type: 'link'
+  }, {
+    id: 'workspaces',
+    href: '/users/me/workspaces',
+    trackingTarget: 'topnav_enterprise_workspaces',
+    text: 'Workspaces',
+    type: 'link'
+  }],
+  trackingTarget: 'topnav_resources',
+  type: 'resources-simple-dropdown'
+};
+export const communityDropdown = () => ({
+  icon: CommunityIcon,
+  id: 'community',
+  text: 'Community',
+  popover: [{
+    id: 'visit-community',
+    href: 'https://community.codecademy.com/c/start-here/',
+    newTab: true,
+    trackingTarget: 'topnav_visit_community',
+    text: 'Visit Community',
+    type: 'link',
+    icon: EarthIcon
+  }, {
+    id: 'events',
+    href: '/events',
+    trackingTarget: 'topnav_community_events',
+    text: 'Events',
+    type: 'link',
+    icon: CalendarIcon
+  }, {
+    id: 'learner-stories',
+    href: '/resources/blog/category/learner-stories/',
+    trackingTarget: 'topnav_learner_stories_hub',
+    text: 'Learner Stories',
+    type: 'link',
+    icon: ArticleIcon
+  }, {
+    id: 'code-crew',
+    href: 'https://try.codecademy.com/code-crew/',
+    newTab: true,
+    trackingTarget: 'topnav_code_crew',
+    text: 'Code Crew',
+    type: 'link',
+    icon: PersonPonytailIcon
+  }],
+  trackingTarget: 'topnav_community',
+  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,
+  id: 'upgrade-plan',
+  trackingTarget: 'topnav_upgrade_plan',
+  text: 'Upgrade',
+  href: '/pricing',
+  type: 'link'
+};
+export const businessSolutions = {
+  icon: OfficeBuildingDoubleIcon,
+  id: 'business-solutions',
+  trackingTarget: 'topnav_business',
+  text: 'Teams',
+  href: '/business',
+  type: 'link'
+};
+export const careerCenter = {
+  icon: BriefcaseIcon,
+  id: 'career-center',
+  trackingTarget: 'topnav_career_center',
+  text: 'Career Center',
+  href: '/career-center',
+  type: 'link'
+};
+const profileMyProfile = {
+  id: 'my-profile',
+  icon: PersonIcon,
+  href: '/profiles/me',
+  trackingTarget: 'avatar_my_profile',
+  text: 'Profile',
+  type: 'link'
+};
+const profileAccount = {
+  id: 'account',
+  icon: GearIcon,
+  href: '/account',
+  trackingTarget: 'avatar_settings',
+  text: 'Account + Billing',
+  type: 'link'
+};
+const profileMyHome = {
+  id: 'my-home',
+  icon: HouseEntranceIcon,
+  href: '/learn',
+  trackingTarget: 'avatar_dashboard',
+  text: 'My Home',
+  type: 'link'
+};
+const profileBusinessAccount = {
+  id: 'business',
+  icon: PieLineGraphIcon,
+  href: '/business/plans',
+  trackingTarget: 'avatar_business',
+  text: 'Admin Dashboard',
+  type: 'link'
+};
+const profileHelpCenter = {
+  id: 'help-center',
+  icon: SupportIcon,
+  href: '/help',
+  newTab: true,
+  trackingTarget: 'avatar_help',
+  text: 'Help Center',
+  type: 'link'
+};
+const profileAdmin = {
+  id: 'admin',
+  dataTestId: 'admin-link',
+  href: '/admin',
+  trackingTarget: 'avatar_admin',
+  text: 'Admin',
+  type: 'link'
+};
+const profileCustomerSupport = {
+  id: 'customer-support',
+  href: '/admin/concessions',
+  trackingTarget: 'avatar_customer_support',
+  text: 'Customer Support',
+  type: 'link'
+};
+const profileReportBug = {
+  id: 'report-bug',
+  href: 'https://codecademy.atlassian.net/servicedesk/customer/portal/9',
+  newTab: true,
+  trackingTarget: 'avatar_report_bug',
+  text: 'Report a Bug [ADMIN]',
+  type: 'link'
+};
+const profileLogOut = {
+  id: 'log-out',
+  href: '/sign_out',
+  trackingTarget: 'avatar_log_out',
+  text: 'Log Out',
+  type: 'link'
+};
+export const freeProfile = user => {
+  const topSection = [profileMyProfile];
+  if (user?.isBusinessAdmin || !user?.isBusinessSsoUser) {
+    topSection.push(profileAccount);
+  }
+  topSection.push(profileMyHome);
+  if (shouldShowBusinessDashboardLink(user)) {
+    topSection.push(profileBusinessAccount);
+  }
+  topSection.push(profileHelpCenter);
+  const bottomSection = [profileLogOut];
+  const popover = [topSection, bottomSection];
+  return {
+    avatar: user.avatar,
+    userDisplayName: user.displayName,
+    id: 'profile',
+    text: 'Profile',
+    popover,
+    trackingTarget: 'topnav_profile',
+    type: 'profile-dropdown'
+  };
+};
+export const proProfile = user => {
+  const topSection = [profileMyProfile];
+  if (user.isBusinessAdmin || !user.isBusinessSsoUser) {
+    topSection.push(profileAccount);
+  }
+  topSection.push(profileMyHome);
+  topSection.push(profileHelpCenter);
+  const teamsAdminSection = [];
+  if (shouldShowBusinessDashboardLink(user)) {
+    teamsAdminSection.push(profileBusinessAccount);
+  }
+  const middleSection = [];
+  if (user.isAdmin) {
+    middleSection.push(profileAdmin);
+  }
+  if (user.isCustomerSupport) {
+    middleSection.push(profileCustomerSupport);
+  }
+  if (user.isAdmin) {
+    middleSection.push(profileReportBug);
+  }
+  const bottomSection = [profileLogOut];
+  const popover = [topSection, teamsAdminSection, middleSection, bottomSection];
+  return {
+    avatar: user.avatar,
+    userDisplayName: user.displayName,
+    id: 'profile',
+    text: 'Profile',
+    popover,
+    trackingTarget: 'topnav_profile',
+    type: 'profile-dropdown'
+  };
+};
+export const addPayment = {
+  dataTestId: 'add-payment-link',
+  id: 'add-payment',
+  text: 'Add payment',
+  href: '/business/checkout?plan_type=upgrade',
+  trackingTarget: 'topnav_add_payment',
+  type: 'fill-button'
+};
+export const tryProForFree = checkoutUrl => ({
+  dataTestId: 'upgrade-link',
+  id: 'try-pro',
+  text: 'Start free trial',
+  href: checkoutUrl || '/pages/pro',
+  trackingTarget: 'topnav_pro_trial',
+  type: 'fill-button'
+});
+export const upgradeToPro = checkoutUrl => ({
+  dataTestId: 'upgrade-link',
+  id: 'upgrade-to-pro',
+  text: 'Upgrade plan',
+  href: checkoutUrl || '/pages/pro',
+  trackingTarget: 'topnav_pro_upgrade',
+  type: 'fill-button'
+});
+export const unpausePro = {
+  dataTestId: 'unpause-link',
+  id: 'unpause-pro',
+  text: 'Unpause Now',
+  href: '/account/billing',
+  trackingTarget: 'topnav_pro_unpause',
+  type: 'fill-button'
+};
+export const login = {
+  dataTestId: 'header-sign-in',
+  id: 'login',
+  text: 'Log In',
+  href: '/login',
+  trackingTarget: 'topnav_login',
+  type: 'text-button',
+  redirect: true
+};
+export const signUp = {
+  dataTestId: 'header-sign-up',
+  id: 'signup',
+  text: 'Sign Up',
+  href: '/register',
+  trackingTarget: 'topnav_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',
+  text: 'Register Now',
+  href: `/pay/bootcamp/${bootcampSlug}`,
+  trackingTarget: 'topnav_bootcamp_cta',
+  type: 'fill-button',
+  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: 'business_enterprise',
+  type: 'fill-button'
+};

package/dist/GlobalHeader/GlobalHeaderVariants.d.ts

@@ -0,0 +1,83 @@
+import { FormattedAppHeaderItems, FormattedMobileAppHeaderItems } from '../AppHeader/shared';
+import { GlobalHeaderProps } from '.';
+import { User } from './types';
+export declare const anonDefaultHeaderItems: ({ hidePricing, user, isInRevampedBlpExperimentVariant, }: {
+    hidePricing?: boolean;
+    user?: User;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedAppHeaderItems;
+export declare const anonDefaultMobileHeaderItems: ({ hidePricing, user, isInRevampedBlpExperimentVariant, }: {
+    hidePricing?: boolean;
+    user?: User;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedMobileAppHeaderItems;
+export declare const anonLandingHeaderItems: ({ hidePricing, user, isInRevampedBlpExperimentVariant, }: {
+    hidePricing?: boolean;
+    user?: User;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedAppHeaderItems;
+export declare const anonLandingMobileHeaderItems: ({ hidePricing, user, isInRevampedBlpExperimentVariant, }: {
+    hidePricing?: boolean;
+    user?: User;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedMobileAppHeaderItems;
+export declare const anonLoginHeaderItems: ({ hidePricing, user, isInRevampedBlpExperimentVariant, }: {
+    hidePricing?: boolean;
+    user?: User;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedAppHeaderItems;
+export declare const anonLoginMobileHeaderItems: ({ hidePricing, user, isInRevampedBlpExperimentVariant, }: {
+    hidePricing?: boolean;
+    user?: User;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedMobileAppHeaderItems;
+export declare const anonSignupHeaderItems: ({ hidePricing, user, isInRevampedBlpExperimentVariant, }: {
+    hidePricing?: boolean;
+    user?: User;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedAppHeaderItems;
+export declare const anonSignupMobileHeaderItems: ({ hidePricing, user, isInRevampedBlpExperimentVariant, }: {
+    hidePricing?: boolean;
+    user?: User;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedMobileAppHeaderItems;
+export declare const freeHeaderItems: ({ user, hidePricing, isInRevampedBlpExperimentVariant, }: {
+    user: User;
+    hidePricing?: boolean;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedAppHeaderItems;
+export declare const freeMobileHeaderItems: ({ user, hidePricing, isInRevampedBlpExperimentVariant, }: {
+    user: User;
+    hidePricing?: boolean;
+    isInRevampedBlpExperimentVariant?: boolean;
+}) => FormattedMobileAppHeaderItems;
+export declare const enterpriseHeaderItems: ({ user, props, }: {
+    user: User;
+    props: GlobalHeaderProps;
+}) => FormattedAppHeaderItems;
+export declare const proHeaderItems: ({ user, }: {
+    user: User;
+}) => FormattedAppHeaderItems;
+export declare const teamsHeaderItems: ({ user, }: {
+    user: User;
+}) => FormattedAppHeaderItems;
+export declare const enterpriseMobileHeaderItems: ({ user, props, }: {
+    user: User;
+    props: GlobalHeaderProps;
+}) => FormattedMobileAppHeaderItems;
+export declare const proMobileHeaderItems: ({ user, }: {
+    user: User;
+}) => FormattedMobileAppHeaderItems;
+export declare const teamsMobileHeaderItems: ({ user, }: {
+    user: User;
+}) => FormattedMobileAppHeaderItems;
+export declare const loadingHeaderItems: FormattedAppHeaderItems;
+export declare const loadingMobileHeaderItems: FormattedMobileAppHeaderItems;
+export declare const simpleHeaderItems: FormattedAppHeaderItems;
+export declare const simpleMobileHeaderItems: FormattedMobileAppHeaderItems;
+export declare const simpleBootcampHeaderItems: ({ bootcampSlug, }: {
+    bootcampSlug: string;
+}) => FormattedAppHeaderItems;
+export declare const simpleBootcampMobileHeaderItems: ({ bootcampSlug, }: {
+    bootcampSlug: string;
+}) => FormattedMobileAppHeaderItems;