@codecademy/brand 3.28.0-alpha.e4c902328e.0 → 3.29.0-alpha.58c5f2c7f5.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/dist/stories/Atoms/BetaSticker.stories.js

@@ -15,7 +15,6 @@ export const Small = {
   render: args => /*#__PURE__*/_jsx(BetaSticker, {
     ...args
   }),
-  name: 'Small',
   args: {
     size: 'small'
   }

package/dist/stories/Molecules/AppBar.stories.d.ts

@@ -11,5 +11,4 @@ export declare const Default: {
 };
 export declare const Header: {
     render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
 };

package/dist/stories/Molecules/AppBar.stories.js

@@ -27,6 +27,5 @@ export const Header = {
       position: "right",
       children: "Sign In"
     })]
-  }),
-  name: 'Header'
+  })
 };

package/dist/stories/Molecules/AppHeader/AppHeaderLink.stories.js

@@ -23,7 +23,6 @@ export const CurrentTab = {
   render: args => /*#__PURE__*/_jsx(AppHeaderLink, {
     ...args
   }),
-  name: 'Current Tab',
   args: {
     item: {
       id: 'link-current-tab',
@@ -38,7 +37,6 @@ export const NewTab = {
   render: args => /*#__PURE__*/_jsx(AppHeaderLink, {
     ...args
   }),
-  name: 'New Tab',
   args: {
     item: {
       id: 'link-new-tab',

package/dist/stories/Molecules/AppHeader/AppHeaderLogo.stories.js

@@ -23,8 +23,7 @@ export const Default = {
 export const Pro = {
   render: args => /*#__PURE__*/_jsx(AppHeaderLogo, {
     ...args
-  }),
-  name: 'Pro'
+  })
 };
 export const FreeAnon = {
   render: args => /*#__PURE__*/_jsx(AppHeaderLogo, {

package/dist/stories/Molecules/Banner.stories.js

@@ -18,7 +18,6 @@ export const Navy = {
   render: args => /*#__PURE__*/_jsx(Banner, {
     ...args
   }),
-  name: 'Navy',
   args: {
     children: 'Navy',
     variant: 'navy'
@@ -28,7 +27,6 @@ export const Yellow = {
   render: args => /*#__PURE__*/_jsx(Banner, {
     ...args
   }),
-  name: 'Yellow',
   args: {
     children: 'Yellow',
     variant: 'yellow'
@@ -38,7 +36,6 @@ export const Subtle = {
   render: args => /*#__PURE__*/_jsx(Banner, {
     ...args
   }),
-  name: 'Subtle',
   args: {
     children: 'Subtle',
     variant: 'subtle'

package/dist/stories/Molecules/CurriculumCard.stories.js

@@ -43,7 +43,6 @@ export const CurriculumCardEnrolled = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
-  name: 'Curriculum Card Enrolled',
   args: {
     progressState: 'inProgress'
   }
@@ -52,7 +51,6 @@ export const CurriculumCardInProgress = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
-  name: 'Curriculum Card In Progress',
   args: {
     progressState: 'inProgress',
     footerTextVariant: 'inProgress'
@@ -62,7 +60,6 @@ export const CurriculumCardCompleted = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
-  name: 'Curriculum Card Completed',
   args: {
     progressState: 'completed'
   }
@@ -71,7 +68,6 @@ export const CurriculumCardBeta = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
-  name: 'Curriculum Card Beta',
   args: {
     beta: true
   }
@@ -80,7 +76,6 @@ export const CurriculumCardAlternativeSubtitle = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
-  name: 'Curriculum Card Alternative Subtitle',
   args: {
     showAltSubtitle: true,
     scope: {
@@ -129,7 +124,6 @@ export const CareerPathVariant = {
       })
     })]
   }),
-  name: 'Career Path Variant',
   args: {
     text: 'Career Path',
     title: 'Front-End Engineer',
@@ -156,7 +150,6 @@ export const HorizontalCurriculumCard = {
       })
     })
   }),
-  name: 'Horizontal Curriculum Card',
   args: {
     text: 'Career Path',
     title: 'Front-End Engineer',

package/dist/stories/Molecules/EmptySection.stories.js

@@ -163,6 +163,5 @@ export const Playground = {
     children: /*#__PURE__*/_jsx(FillButton, {
       children: "Do Something"
     })
-  }),
-  name: 'Playground'
+  })
 };

package/dist/stories/Molecules/EnhancedBanner.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { EnhancedBanner } from '../../Banner/EnhancedBanner';
 const meta = {
   title: 'Molecules/Enhanced Banner',

package/dist/stories/Molecules/HubCard.stories.js

@@ -20,7 +20,6 @@ export const BackgroundRight = {
   render: args => /*#__PURE__*/_jsx(HubCard, {
     ...args
   }),
-  name: 'Background Right',
   args: {
     backgroundImage: 'https://static-assets.codecademy.com/assets/components/cards/explore-category-card/subject/data-science.svg',
     backgroundPosition: 'right'

package/dist/stories/Molecules/NotificationList.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { NotificationList } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 const notifications = [{
@@ -93,7 +93,6 @@ export const Empty = {
   render: args => /*#__PURE__*/_jsx(NotificationList, {
     ...args
   }),
-  name: 'Empty',
   args: {
     notifications: []
   }

package/dist/stories/Molecules/Testimonial.stories.js

@@ -28,8 +28,7 @@ export const Default = {
 export const LightMode = {
   render: args => /*#__PURE__*/_jsx(Testimonial, {
     ...args
-  }),
-  name: 'Light Mode'
+  })
 };
 export const DarkMode = {
   render: args => /*#__PURE__*/_jsx(Background, {
@@ -43,21 +42,18 @@ export const DarkMode = {
         ...args
       })
     })
-  }),
-  name: 'Dark Mode'
+  })
 };
 export const SmallLight = {
   render: args => /*#__PURE__*/_jsx(Testimonial, {
     orientation: "vertical",
     ...args
-  }),
-  name: 'Small Light'
+  })
 };
 export const MediumDark = {
   render: args => /*#__PURE__*/_jsx(Testimonial, {
     ...args,
     orientation: "horizontal",
     hidePhoto: true
-  }),
-  name: 'Medium Dark'
+  })
 };

package/dist/stories/Organisms/GlobalFooter.stories.js

@@ -17,8 +17,7 @@ export const HidePricing = {
   render: args => /*#__PURE__*/_jsx(GlobalFooter, {
     hidePricing: true,
     ...args
-  }),
-  name: 'Hide Pricing'
+  })
 };
 export const ClickableMadeIn = {
   render: args => /*#__PURE__*/_jsx(GlobalFooter, {

package/dist/stories/Organisms/GlobalHeader/About.stories.js

@@ -131,6 +131,5 @@ export const Loading = {
       onSearchAsYouType: () => {}
     },
     type: "loading"
-  }),
-  name: 'Loading'
+  })
 };

package/dist/stories/Organisms/GlobalHeader/Bootcamp.stories.js

@@ -27,6 +27,5 @@ export const Bootcamp = {
     },
     type: "bootcamp",
     bootcampSlug: "bootcamp-slug"
-  }),
-  name: 'Bootcamp'
+  })
 };

package/dist/stories/Organisms/GlobalHeader/Enterprise.stories.js

@@ -31,8 +31,7 @@ export const Enterprise = {
       displayName: 'Kallie',
       isAccountManager: true
     }
-  }),
-  name: 'Enterprise'
+  })
 };
 export const BusinessAccountManagerPro = {
   render: () => /*#__PURE__*/_jsx(GlobalHeader, {

package/dist/stories/Organisms/GlobalHeader/Simple.stories.js

@@ -26,6 +26,5 @@ export const Simple = {
       onSearchAsYouType: () => {}
     },
     type: "simple"
-  }),
-  name: 'Simple'
+  })
 };

package/dist/stories/Organisms/GlobalPage.stories.js

@@ -78,7 +78,6 @@ export const Banner = {
       })
     })
   }),
-  name: 'Banner',
   args: {
     ...defaultArgs,
     banner: {
@@ -104,7 +103,6 @@ export const Modal = {
       })
     })
   }),
-  name: 'Modal',
   args: {
     ...defaultArgs,
     modal: {

package/dist/stories/Organisms/LayoutMenu.stories.js

@@ -55,8 +55,7 @@ export const WithSelectedItem = {
   render: args => /*#__PURE__*/_jsx(LayoutMenu, {
     ...args,
     selectedItem: "python"
-  }),
-  name: 'With Selected Item'
+  })
 };
 export const WithAdditionalLinks = {
   render: args => /*#__PURE__*/_jsxs(LayoutMenu, {
@@ -74,8 +73,7 @@ export const WithAdditionalLinks = {
         children: "Where do I begin?"
       })
     })]
-  }),
-  name: 'With Additional Links'
+  })
 };
 export const WithAdditionalLinksOnTopAndBottom = {
   render: args => /*#__PURE__*/_jsx(LayoutMenu, {
@@ -237,6 +235,5 @@ export const WithSetMenuHeight = {
         children: "Where do I begin?"
       })
     })]
-  }),
-  name: 'With Set Menu Height'
+  })
 };

package/dist/stories/Organisms/LayoutMenuVariant.stories.js

@@ -62,8 +62,7 @@ export const WithAdditionalLinks = {
         children: "Where do I begin?"
       })
     })
-  }),
-  name: 'With Additional Links'
+  })
 };
 export const WithAdditionalLinksOnTopAndBottom = {
   render: args => /*#__PURE__*/_jsx(LayoutMenuVariant.LayoutMenu, {
@@ -219,6 +218,5 @@ export const WithSetMenuHeight = {
         children: "Where do I begin?"
       })
     })
-  }),
-  name: 'With Set Menu Height'
+  })
 };

package/dist/stories/Organisms/PageFeatures.stories.js

@@ -48,14 +48,12 @@ export default meta;
 export const FeaturedInfo = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
-  }),
-  name: 'Featured Info'
+  })
 };
 export const FeaturedImages = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
-  name: 'Featured Images',
   args: {
     featuresMedia: 'image'
   }
@@ -64,7 +62,6 @@ export const FeaturedIcons = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
-  name: 'Featured Icons',
   args: {
     featuresMedia: 'icon'
   }
@@ -73,7 +70,6 @@ export const FeaturedStats = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
-  name: 'Featured Stats',
   args: {
     featuresMedia: 'stat',
     features: [{
@@ -95,7 +91,6 @@ export const FeaturesGrid = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
-  name: 'Features Grid',
   args: {
     maxCols: 3,
     featuresMedia: 'icon'
@@ -105,7 +100,6 @@ export const WithoutDescription = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
-  name: 'Without Description',
   args: {
     featuresMedia: 'icon',
     desc: undefined,
@@ -129,7 +123,6 @@ export const RegularButton = {
       buttonType: 'fill'
     }
   }),
-  name: 'Regular Button',
   args: {
     featuresMedia: 'image'
   }
@@ -142,7 +135,6 @@ export const DarkMode = {
       ...args
     })
   }),
-  name: 'Dark Mode',
   args: {
     featuresMedia: 'icon'
   }

package/dist/stories/Organisms/PageHero.stories.js

@@ -46,15 +46,13 @@ export const Video = {
       autoplay: true
     },
     title: "What's it like to be a Software Engineer"
-  }),
-  name: 'Video'
+  })
 };
 export const ShortText = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     textLength: "short"
-  }),
-  name: 'Short Text'
+  })
 };
 export const RegularButton = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
@@ -63,22 +61,19 @@ export const RegularButton = {
       ...ctaArgs,
       buttonType: 'fill'
     }
-  }),
-  name: 'Regular Button'
+  })
 };
 export const WithoutButton = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     cta: undefined
-  }),
-  name: 'Without Button'
+  })
 };
 export const WithoutDescription = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     desc: undefined
-  }),
-  name: 'Without Description'
+  })
 };
 export const Eyebrow = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
@@ -87,8 +82,7 @@ export const Eyebrow = {
       text: 'Hello there'
     },
     textLength: "short"
-  }),
-  name: 'Eyebrow'
+  })
 };
 export const AccentEyebrow = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
@@ -98,23 +92,20 @@ export const AccentEyebrow = {
       accent: true
     },
     textLength: "short"
-  }),
-  name: 'Accent Eyebrow'
+  })
 };
 export const ShowImageOnMobile = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     showImageOnMobile: true,
     textLength: "short"
-  }),
-  name: 'Show Image On Mobile'
+  })
 };
 export const WithoutMedia = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     media: undefined
-  }),
-  name: 'Without Media'
+  })
 };
 export const DarkMode = {
   render: args => /*#__PURE__*/_jsx(Background, {
@@ -126,8 +117,7 @@ export const DarkMode = {
         text: 'Hello there'
       }
     })
-  }),
-  name: 'Dark Mode'
+  })
 };
 export const PausableImage = {
   render: args => /*#__PURE__*/_jsx(PageHero, {