@codecademy/brand 3.28.0-alpha.0a9279111d.0 → 3.28.0-alpha.0f5fb538f5.0

package/dist/GlobalHeader/context.js

@@ -16,11 +16,11 @@ export const DropdownPositions = {
   free: {
     catalogDropdown: {
       narrow: '-9rem',
-      wide: '-14rem'
+      wide: '-14.5rem'
     },
     resourceDropdown: {
       narrow: '-14.5rem',
-      wide: '-19.5rem'
+      wide: '-20rem'
     }
   },
   anon: {
@@ -35,34 +35,34 @@ export const DropdownPositions = {
   },
   pro: {
     catalogDropdown: {
-      narrow: '-14rem',
-      wide: '-14rem'
+      narrow: '-14.5rem',
+      wide: '-14.5rem'
     },
     resourceDropdown: {
-      narrow: '-19.5rem',
-      wide: '-19.5rem'
+      narrow: '-20rem',
+      wide: '-20rem'
     }
   },
   teams: {
     catalogDropdown: {
-      narrow: '-14rem',
-      wide: '-14rem'
+      narrow: '-14.5rem',
+      wide: '-14.5rem'
     },
     resourceDropdown: {
-      narrow: '-19.5rem',
-      wide: '-19.5rem'
+      narrow: '-20rem',
+      wide: '-20rem'
     }
   },
   // 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: '-14rem',
-      wide: '-14rem'
+      narrow: '-14.5rem',
+      wide: '-14.5rem'
     },
     resourceDropdown: {
-      narrow: '-19.5rem',
-      wide: '-19.5rem'
+      narrow: '-20rem',
+      wide: '-20rem'
     }
   }
 };
@@ -74,4 +74,8 @@ const HeaderDisplayContext = /*#__PURE__*/React.createContext({
 export const useHeaderDisplayContext = () => {
   return useContext(HeaderDisplayContext);
 };
-export { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext };
+const HighlightLiveLearningContext = /*#__PURE__*/createContext(false);
+const useHighlightLiveLearningContext = () => {
+  return useContext(HighlightLiveLearningContext);
+};
+export { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext, HighlightLiveLearningContext, useHighlightLiveLearningContext };

package/dist/GlobalHeader/index.js

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
 import { AppHeader, AppHeaderMobile, isAppHeaderItemWithHref } from '..';
-import { DropdownPositions, GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext } from './context';
+import { DropdownPositions, GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext, HeaderDisplayContext, HighlightLiveLearningContext } 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';
@@ -129,52 +129,55 @@ export const GlobalHeader = props => {
         return 'default';
       }, [props.type])
     },
-    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,
-              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(HighlightLiveLearningContext.Provider, {
+      value: !!props.displayHighlightLiveLearning,
+      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,
+                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

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

package/package.json

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

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.d.ts

@@ -1,20 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
-interface NavTabPanelProps extends PropsWithChildren {
-    isActiveTab: boolean;
-    index: number;
-    id: string;
-}
-declare const NavTabPanel: ({ children, isActiveTab, index, id, }: NavTabPanelProps) => import("react/jsx-runtime").JSX.Element;
-declare const NavTabList: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    type: string;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const NavTab: ({ item, onSelect, isActive, onKeyDown, index, }: {
-    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
-    onSelect: (id: string, event?: React.MouseEvent, item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem) => void;
-    isActive: boolean;
-    onKeyDown: (event: React.KeyboardEvent) => void;
-    index: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export { NavTabPanel, NavTabList, NavTab };

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.js

@@ -1,126 +0,0 @@
-import { Box, FlexBox } from '@codecademy/gamut';
-import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
-import React, { useContext, useEffect, useRef } from 'react';
-import { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { NavIconButton, NavIconButtonContainer, NavigationButton, OverflowText, StyledNavTabPanel } from './elements';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Tab content, only one should be visible at a time
-const NavTabPanel = ({
-  children,
-  isActiveTab,
-  index,
-  id
-}) => {
-  return /*#__PURE__*/_jsx(StyledNavTabPanel, {
-    isFirst: index === 0,
-    role: "tabpanel",
-    id: `${id}-panel`,
-    "aria-labelledby": `${id}-tab`,
-    display: isActiveTab ? 'block' : 'none',
-    gridColumn: "2 / span 12",
-    gridRow: "1 / span 8",
-    bg: "background",
-    px: 32,
-    pt: 16,
-    pb: 24,
-    children: children
-  });
-};
-
-// Holds all of the tab buttons
-const NavTabList = /*#__PURE__*/React.forwardRef(({
-  children,
-  type
-}, ref) => {
-  return /*#__PURE__*/_jsx(FlexBox, {
-    role: "tablist",
-    "aria-label": `${type.replace('-dropdown', '')} navigation`,
-    "aria-orientation": "vertical",
-    flexDirection: "column",
-    gap: 8,
-    ref: ref,
-    children: children
-  });
-});
-
-// Tab button, lets you switch between tabs
-// at larger breakpoints we use a normal button, at smaller
-// breakpoints we use an IconButton.
-const NavTab = ({
-  item,
-  onSelect,
-  isActive,
-  onKeyDown,
-  index
-}) => {
-  const sharedButtonProps = {
-    role: 'tab',
-    'aria-selected': isActive,
-    'aria-controls': `${item.id}-panel`,
-    onClick: event => onSelect(item.id, event, item),
-    onKeyDown,
-    tabIndex: isActive ? 0 : -1,
-    isActive,
-    id: `${item.id}-tab`
-  };
-  const buttonRef = useRef(null);
-  const {
-    setFirstItemRef
-  } = useContext(AppHeaderDropdownContext);
-  useEffect(() => {
-    if (index === 0 && buttonRef.current) {
-      setFirstItemRef?.(buttonRef.current);
-    }
-  }, [index, setFirstItemRef]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(NavigationButton, {
-      ref: buttonRef,
-      ...sharedButtonProps,
-      children: [/*#__PURE__*/_jsxs(FlexBox, {
-        gap: 8,
-        alignItems: "center",
-        children: [item.icon && /*#__PURE__*/_jsx(Box, {
-          height: 24,
-          width: 24,
-          children: /*#__PURE__*/_jsx(item.icon, {
-            size: 24
-          })
-        }), /*#__PURE__*/_jsx(OverflowText, {
-          variant: "p-large",
-          maxWidth: {
-            _: '110px',
-            md: 'none'
-          },
-          children: item.text
-        })]
-      }), isActive && /*#__PURE__*/_jsx(Box, {
-        display: {
-          _: 'none',
-          sm: 'block'
-        },
-        mt: 4,
-        children: /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
-          "data-testid": "chevron-right-icon"
-        })
-      })]
-    }), item.icon && /*#__PURE__*/_jsx(NavIconButtonContainer, {
-      display: {
-        _: 'none',
-        xs: 'grid',
-        sm: 'none'
-      },
-      ...sharedButtonProps,
-      children: /*#__PURE__*/_jsx(NavIconButton, {
-        icon: item.icon,
-        tip: item.text,
-        tipProps: {
-          alignment: 'right-center',
-          narrow: false,
-          placement: 'floating'
-        },
-        "aria-label": item.text
-      })
-    })]
-  });
-};
-export { NavTabPanel, NavTabList, NavTab };