@codecademy/brand 3.30.0-alpha.2ad52d9890.0 → 3.30.0

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

@@ -1,36 +1,77 @@
 import { Box } from '@codecademy/gamut';
-import { useEffect, useState } from 'react';
-import * as React from 'react';
-import { useGlobalHeaderDynamicDataContext } from '../../../GlobalHeader/context';
+import { motion } from 'framer-motion';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { useGlobalHeaderDynamicDataContext, useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
 import { AppHeaderSectionContext } from './AppHeaderSectionContext';
-import { StyledGridBox, StyledSection } from './elements';
+import { NavTabContainer, StyledSection } from './elements';
 import { MobileBackButton } from './MobileBackButton';
 import { MobileNavMenu } from './MobileNavMenu';
-import NavSection from './NavSection';
+import { NavTab, NavTabList, NavTabPanel } from './NavTabs';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const AppHeaderSection = /*#__PURE__*/React.forwardRef(({
+export const AppHeaderSection = /*#__PURE__*/forwardRef(({
   isOpen = true,
-  keyDownEvents,
-  navSections,
   MarketingBanner,
   isMobile = false,
   handleClose,
-  type
+  type,
+  defaultSelectedKey,
+  navSections
 }, ref) => {
-  const [activeTab, setActiveTab] = useState(0);
+  const firstTabId = navSections?.[0]?.item?.id;
+  const [activeTab, setActiveTab] = useState(defaultSelectedKey || firstTabId);
   const [activePanel, setActivePanel] = useState(null);
+  const tabListRef = useRef(null);
   const {
     globalHeaderDynamicData
   } = useGlobalHeaderDynamicDataContext();
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
   const banner = globalHeaderDynamicData?.catalogDropdown?.banner;
   const showMarketingBanner = banner?.text && banner?.href && MarketingBanner;
   const tabIndex = isOpen ? 0 : -1;
   const activePanelSelected = activePanel !== null;
+  const onSelect = useCallback((key, event, item) => {
+    setActiveTab(key);
+    if (item && event) {
+      globalHeaderItemClick(event, item);
+    }
+  }, [setActiveTab, globalHeaderItemClick]);
+  const onKeyDown = useCallback(event => {
+    if (!tabListRef.current) return;
+
+    // get list of tabs available
+    const tabs = Array.from(tabListRef.current?.querySelectorAll('button[role="tab"]') || []);
+    // get the index of the active tab
+    const activeElement = tabs.indexOf(document.activeElement);
+    if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+      // prevent scrollbar from moving when arrow keys are pressed on tabs
+      event.preventDefault();
+      const prevTab = tabs[activeElement - 1];
+      if (prevTab) {
+        prevTab.focus();
+      } else {
+        // focus the last tab
+        tabs[tabs.length - 1].focus();
+      }
+    }
+    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+      // prevent scrollbar from moving when arrow keys are pressed on tabs
+      event.preventDefault();
+      const nextTab = tabs[activeElement + 1];
+      if (nextTab) {
+        nextTab.focus();
+      } else {
+        // focus the first tab
+        tabs[0].focus();
+      }
+    }
+  }, []);
   useEffect(() => {
-    if (isOpen) {
-      setActiveTab(0);
+    if (!isOpen) {
+      setActiveTab(firstTabId);
     }
-  }, [isOpen]);
+  }, [isOpen, firstTabId]);
   return /*#__PURE__*/_jsx(AppHeaderSectionContext.Provider, {
     value: {
       activePanel,
@@ -38,6 +79,7 @@ export const AppHeaderSection = /*#__PURE__*/React.forwardRef(({
       tabIndex
     },
     children: /*#__PURE__*/_jsxs(StyledSection, {
+      ref: ref,
       activePanelSelected: activePanelSelected,
       children: [showMarketingBanner && /*#__PURE__*/_jsx(Box, {
         display: {
@@ -45,31 +87,50 @@ export const AppHeaderSection = /*#__PURE__*/React.forwardRef(({
           xs: 'block'
         },
         children: /*#__PURE__*/_jsx(MarketingBanner, {
-          tabIndex: tabIndex,
           text: banner?.text,
-          href: banner?.href
+          href: banner?.href,
+          tabIndex: tabIndex
         })
-      }), /*#__PURE__*/_jsxs(StyledGridBox, {
-        ref: ref,
-        onKeyDown: keyDownEvents,
+      }), /*#__PURE__*/_jsxs(NavTabContainer, {
+        p: 8,
+        rowGap: 8,
         children: [isMobile && /*#__PURE__*/_jsx(MobileBackButton, {
           handleClose: handleClose,
           type: type
+        }), /*#__PURE__*/_jsx(NavTabList, {
+          type: type,
+          ref: tabListRef,
+          children: navSections.map(({
+            item
+          }, index) => /*#__PURE__*/_jsx(NavTab, {
+            item: item,
+            onSelect: onSelect,
+            isActive: activeTab === item.id,
+            onKeyDown: onKeyDown,
+            index: index
+          }, item.id))
         }), navSections.map((section, index) => {
           const {
-            item,
+            item: {
+              id
+            },
             panel: Panel
           } = section;
-          return /*#__PURE__*/_jsx(NavSection, {
-            isActiveTab: activeTab === index,
-            setActiveTab: setActiveTab,
-            icon: item.icon,
-            text: item.text,
+          return /*#__PURE__*/_jsx(NavTabPanel, {
             index: index,
-            item: item,
-            tabIndex: tabIndex,
-            children: /*#__PURE__*/_jsx(Panel, {})
-          }, item.id);
+            isActiveTab: activeTab === id,
+            id: id,
+            children: /*#__PURE__*/_jsx(motion.div, {
+              animate: {
+                opacity: activeTab === id ? 1 : 0
+              },
+              transition: {
+                duration: 0.4,
+                ease: 'easeInOut'
+              },
+              children: /*#__PURE__*/_jsx(Panel, {})
+            })
+          }, id);
         })]
       }), /*#__PURE__*/_jsx(MobileNavMenu, {
         handleClose: handleClose,

package/dist/lib/catalogList/index.d.ts

@@ -1,6 +1,6 @@
 import { AppHeaderLinkItem, AppHeaderResourcesDataItem } from '../../AppHeader/shared';
 export declare const careerPaths: AppHeaderLinkItem[];
 export declare const liveLearningHubItems: AppHeaderResourcesDataItem;
-export declare const liveLearningNavPanelItem: AppHeaderResourcesDataItem;
+export declare const liveLearningNavPanelItems: AppHeaderResourcesDataItem;
 export declare const topLanguages: AppHeaderLinkItem[];
 export declare const getTopSubjects: () => AppHeaderLinkItem[];

package/dist/lib/catalogList/index.js

@@ -61,7 +61,7 @@ export const liveLearningHubItems = {
 };
 
 /* Items for the variant global header. Tracking targets are kept the same for experiment */
-export const liveLearningNavPanelItem = {
+export const liveLearningNavPanelItems = {
   title: 'Live Learning',
   description: 'Build skills faster through live, instructor-led sessions. Get real-time feedback, stay motivated, and deepen your understanding with expert guidance.',
   data: [{
@@ -73,6 +73,15 @@ export const liveLearningNavPanelItem = {
     type: 'link',
     newTab: true,
     badge: renderNewBadge()
+  }, {
+    id: 'gk',
+    href: '/live-learning#GKLiveLearning',
+    text: 'Codecademy x Global Knowledge',
+    description: 'Global Knowledge is part of the Skillsoft family (like us). These 1–2 day live courses fast-track your technical and professional growth through interactive lessons led by subject matter experts.',
+    trackingTarget: 'topnav_catalog_live_learning_gk_codecademy',
+    type: 'link',
+    newTab: true,
+    badge: renderNewBadge()
   }]
 };
 export const topLanguages = [{

package/package.json

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

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

@@ -1,193 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext } from '../../../GlobalHeader/context';
-import { CATALOG_NAV_SECTIONS } from '../AppHeaderCatalogDropdown/consts';
-import { MarketingBanner } from '../AppHeaderCatalogDropdown/MarketingBanner';
-import { AppHeaderSection } from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-const mockOnClick = jest.fn();
-const mockKeyDownEvents = jest.fn();
-const mockItem = {
-  text: 'catalog',
-  id: 'the-catalog',
-  type: 'catalog-dropdown',
-  trackingTarget: 'catalog-dropdown'
-};
-const defaultProps = {
-  item: mockItem,
-  isOpen: true,
-  keyDownEvents: mockKeyDownEvents
-};
-const mockContextValue = {
-  globalHeaderItemClick: mockOnClick
-};
-const mockDataContextValue = {
-  globalHeaderDynamicData: {
-    catalogDropdown: {
-      banner: {
-        href: 'https://example.com',
-        text: 'Test banner text'
-      },
-      skillPaths: {
-        totalSkillPathCount: 0,
-        promotedSkillPaths: []
-      },
-      careerPaths: {
-        totalCareerPathCount: 0,
-        promotedCareerPaths: []
-      },
-      certificationPaths: {
-        totalCertificationPathCount: 0
-      }
-    }
-  }
-};
-describe('AppHeaderSection', () => {
-  const createWrapper = (dataContextValue = mockDataContextValue) => ({
-    children
-  }) => /*#__PURE__*/_jsx(GlobalHeaderDynamicDataContext.Provider, {
-    value: dataContextValue,
-    children: /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
-      value: mockContextValue,
-      children: children
-    })
-  });
-  const renderView = setupRtl(AppHeaderSection, defaultProps).options({
-    wrapper: createWrapper()
-  });
-  it('renders the component ', () => {
-    const {
-      view
-    } = renderView({
-      navSections: CATALOG_NAV_SECTIONS,
-      handleClose: jest.fn(),
-      type: 'catalog-dropdown'
-    });
-    expect(view.getByRole('heading', {
-      name: 'Course topics'
-    })).toBeInTheDocument();
-  });
-  describe('marketing banner', () => {
-    const createRenderView = bannerData => setupRtl(AppHeaderSection, defaultProps).options({
-      wrapper: createWrapper({
-        globalHeaderDynamicData: {
-          catalogDropdown: {
-            banner: bannerData,
-            skillPaths: {
-              totalSkillPathCount: 0,
-              promotedSkillPaths: []
-            },
-            careerPaths: {
-              totalCareerPathCount: 0,
-              promotedCareerPaths: []
-            },
-            certificationPaths: {
-              totalCertificationPathCount: 0
-            }
-          }
-        }
-      })
-    });
-    it('renders the marketing banner when the banner text and href are present', () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown',
-        MarketingBanner
-      });
-      expect(view.getByText('Test banner text')).toBeInTheDocument();
-    });
-    it('does not render the marketing banner when the banner href is empty', () => {
-      const {
-        view
-      } = createRenderView({
-        href: '',
-        text: 'Test banner text'
-      })({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown',
-        MarketingBanner
-      });
-      expect(view.queryByText('Test banner text')).not.toBeInTheDocument();
-      expect(view.queryByTestId('marketing-banner')).not.toBeInTheDocument();
-    });
-    it('does not render the marketing banner when the banner text is empty', () => {
-      const {
-        view
-      } = createRenderView({
-        href: 'https://example.com',
-        text: ''
-      })({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown',
-        MarketingBanner
-      });
-      expect(view.queryByTestId('marketing-banner')).not.toBeInTheDocument();
-    });
-    it('does not render the marketing banner when the banner text is empty', () => {
-      const {
-        view
-      } = createRenderView({
-        href: 'https://example.com',
-        text: ''
-      })({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown',
-        MarketingBanner
-      });
-      expect(view.queryByText('Test banner text')).not.toBeInTheDocument();
-    });
-  });
-  describe('tab navigation', () => {
-    it('starts with the first tab active by default', () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown'
-      });
-      const courseTopicsButton = view.getByTestId('nav-section-course-topics');
-      expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'true');
-    });
-    it('switches active tab when clicking on different sections', async () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown'
-      });
-      const careerPathsButton = view.getByTestId('nav-section-career-paths');
-      await userEvent.click(careerPathsButton);
-      expect(careerPathsButton).toHaveAttribute('aria-expanded', 'true');
-      const courseTopicsButton = view.getByTestId('nav-section-course-topics');
-      expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'false');
-    });
-    it('calls tracking with correct parameters when clicking nav section', async () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown'
-      });
-      const careerPathsButton = view.getByTestId('nav-section-career-paths');
-      await userEvent.click(careerPathsButton);
-      expect(mockOnClick).toHaveBeenCalledTimes(1);
-      expect(mockOnClick).toHaveBeenCalledWith(expect.anything(),
-      // event object
-      expect.objectContaining({
-        id: 'career-paths',
-        type: 'catalog-dropdown'
-      }) // tracking parameters
-      );
-    });
-  });
-});

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

@@ -1,21 +0,0 @@
-import { GamutIconProps } from '@codecademy/gamut-icons';
-import React, { PropsWithChildren } from 'react';
-import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
-type NavSectionProps = PropsWithChildren & {
-    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
-    isActiveTab: boolean;
-    setActiveTab: (tab: number) => void;
-    icon?: React.ComponentType<GamutIconProps>;
-    text: string;
-    index: number;
-    tabIndex?: number;
-};
-export declare const NavigationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    isActive: boolean;
-    index: number;
-}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-declare const NavSection: ({ isActiveTab, setActiveTab, icon: Icon, text, index, children, item, tabIndex, }: NavSectionProps) => import("react/jsx-runtime").JSX.Element;
-export default NavSection;