@codecademy/brand 3.1.0 → 3.2.0-alpha.1b2d50df28.0

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.js

@@ -0,0 +1,273 @@
+import { ArticleIcon, BriefcaseIcon, BulbIcon, CommentsIcon, DiamondIcon, FileIcon, InfoCircleIcon, NotebookIcon, ProjectsIcon, RulerTriangleIcon, SearchIcon, VideoPlayerMovieIcon } from '@codecademy/gamut-icons';
+import React from 'react';
+import { DocsPanel, InspirationPanel, LearningToolsPanel, PracticeToolsPanel } from './NavPanels';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RESOURCES_NAV_SECTIONS = [{
+  item: {
+    icon: FileIcon,
+    text: 'Docs',
+    id: 'docs',
+    type: 'resources-dropdown',
+    trackingTarget: 'topnav_resources_docs'
+  },
+  panel: DocsPanel
+}, {
+  item: {
+    icon: RulerTriangleIcon,
+    text: 'Learning tools',
+    id: 'learning-tools',
+    type: 'resources-dropdown',
+    trackingTarget: 'topnav_resources_learning_tools'
+  },
+  panel: LearningToolsPanel
+}, {
+  item: {
+    icon: DiamondIcon,
+    text: 'Practice tools',
+    id: 'practice-tools',
+    type: 'resources-dropdown',
+    trackingTarget: 'topnav_resources_practice_tools'
+  },
+  panel: PracticeToolsPanel
+}, {
+  item: {
+    icon: BulbIcon,
+    text: 'Inspiration',
+    id: 'inspiration',
+    type: 'resources-dropdown',
+    trackingTarget: 'topnav_resources_inspiration'
+  },
+  panel: InspirationPanel
+}];
+export const docsLinks = [{
+  id: 'c',
+  href: '/resources/docs/c',
+  trackingTarget: 'topnav_resources_docs_c',
+  text: 'C',
+  type: 'link'
+}, {
+  id: 'html',
+  href: '/resources/docs/html',
+  trackingTarget: 'topnav_resources_docs_html',
+  text: 'HTML',
+  type: 'link'
+}, {
+  id: 'python',
+  href: '/resources/docs/python',
+  trackingTarget: 'topnav_resources_docs_python',
+  text: 'Python',
+  type: 'link'
+}, {
+  id: 'cpp',
+  href: '/resources/docs/cpp',
+  trackingTarget: 'topnav_resources_docs_cpp',
+  text: 'C++',
+  type: 'link'
+}, {
+  id: 'java',
+  href: '/resources/docs/java',
+  trackingTarget: 'topnav_resources_docs_java',
+  text: 'Java',
+  type: 'link'
+}, {
+  id: 'react',
+  href: '/resources/docs/react',
+  trackingTarget: 'topnav_resources_docs_react',
+  text: 'React',
+  type: 'link'
+}, {
+  id: 'css',
+  href: '/resources/docs/css',
+  trackingTarget: 'topnav_resources_docs_css',
+  text: 'CSS',
+  type: 'link'
+}, {
+  id: 'javascript',
+  href: '/resources/docs/javascript',
+  trackingTarget: 'topnav_resources_docs_javascript',
+  text: 'JavaScript',
+  type: 'link'
+}, {
+  id: 'sql',
+  href: '/resources/docs/sql',
+  trackingTarget: 'topnav_resources_docs_sql',
+  text: 'SQL',
+  type: 'link'
+}, {
+  id: 'git',
+  href: '/resources/docs/git',
+  trackingTarget: 'topnav_resources_docs_git',
+  text: 'Git',
+  type: 'link'
+}, {
+  id: 'php',
+  href: '/resources/docs/php',
+  trackingTarget: 'topnav_resources_docs_php',
+  text: 'PHP',
+  type: 'link'
+}, {
+  id: 'uiux',
+  href: '/resources/docs/uiux',
+  trackingTarget: 'topnav_resources_docs_uiux',
+  text: 'UI/UX',
+  type: 'link'
+}, {
+  id: 'markdown',
+  href: '/resources/docs/markdown',
+  trackingTarget: 'topnav_resources_docs_markdown',
+  text: 'Markdown',
+  type: 'link'
+}, {
+  id: 'data-science',
+  href: '/resources/docs/data-science',
+  trackingTarget: 'topnav_resources_docs_data_science',
+  text: 'Data science',
+  type: 'link'
+}, {
+  id: 'ai',
+  href: '/resources/docs/ai',
+  trackingTarget: 'topnav_resources_docs_ai',
+  text: 'AI',
+  type: 'link'
+}, {
+  id: 'data-visualization',
+  href: '/resources/docs/data-visualization',
+  trackingTarget: 'topnav_resources_docs_data_visualization',
+  text: 'Data visualization',
+  type: 'link'
+}, {
+  id: 'typescript',
+  href: '/resources/docs/typescript',
+  trackingTarget: 'topnav_resources_docs_typescript',
+  text: 'TypeScript',
+  type: 'link'
+}, {
+  id: 'ruby',
+  href: '/resources/docs/ruby',
+  trackingTarget: 'topnav_resources_docs_ruby',
+  text: 'Ruby',
+  type: 'link'
+}];
+export const learningToolsLinks = [{
+  linkItem: {
+    id: 'articles',
+    href: '/articles',
+    trackingTarget: 'topnav_resources_articles',
+    text: 'Articles',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
+  description: "Articles are more in-depth explanations about concepts covered in Codecademy courses. Here you'll learn more about workflows that developers use every day, and take your coding skills to the next level."
+}, {
+  linkItem: {
+    id: 'cheatsheets',
+    href: '/resources/cheatsheets/all',
+    trackingTarget: 'topnav_resources_cheatsheets',
+    text: 'Cheatsheets',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
+  description: 'Quick-reference guides that summarize key concepts taught in our courses and paths across various programming languages, tools, and technologies.'
+}, {
+  linkItem: {
+    id: 'videos',
+    href: '/resources/videos',
+    trackingTarget: 'topnav_resources_videos',
+    text: 'Videos',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
+  description: 'Watch our best programming videos for beginner, intermediate, and advanced learners about languages, frameworks, and more.'
+}, {
+  linkItem: {
+    id: 'projects',
+    href: '/projects',
+    trackingTarget: 'topnav_resources_projects',
+    text: 'Projects',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
+  description: "Projects let you apply what you're learning. Practice new skills, connect concepts, or put it all together to create something of your own."
+}];
+export const practiceToolsLinks = [{
+  linkItem: {
+    id: 'code-challenges',
+    href: '/code-challenges',
+    trackingTarget: 'topnav_resources_code_challenges',
+    text: 'Code Challenges',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
+  description: "Test your knowledge with code challenges based on real-world technical interviews from companies like Google, Amazon, and Meta. Practice for your job search — or for fun. Don't worry if you get stuck. We'll recommend the right courses to help you."
+}, {
+  linkItem: {
+    id: 'workspaces',
+    href: '/pages/workspaces',
+    trackingTarget: 'topnav_resources_workspaces',
+    text: 'Workspaces',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
+  description: 'Practice building projects in 13 popular languages and libraries, tinker with code, and share your work—all without leaving your browser.'
+}, {
+  linkItem: {
+    id: 'job-readiness',
+    href: '/job-readiness',
+    trackingTarget: 'topnav_resources_job_readiness',
+    text: 'Job-Readiness Checker',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
+  description: "Add a LinkedIn or ZipRecruiter job posting to analyze how your skills fit the job. You'll need to add more information for jobs found on other websites."
+}, {
+  linkItem: {
+    id: 'interview-simulator',
+    href: '/interview-simulator',
+    trackingTarget: 'topnav_resources_interview_simulator',
+    text: 'Interview Simulator',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
+  description: 'Discover your potential through interviewing. Identify your strengths, get actionable feedback, and boost your confidence with customized practice — at any stage in your tech career.'
+}];
+export const inspirationLinks = [{
+  linkItem: {
+    id: 'learner-stories',
+    href: '/resources/blog/category/get-inspired',
+    trackingTarget: 'topnav_resources_learner_stories',
+    text: 'Learner stories',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(CommentsIcon, {}),
+  description: 'Learn how coding can change your life (and the world) for the better.'
+}, {
+  linkItem: {
+    id: 'learning-tips',
+    href: '/resources/blog/category/learning-tips',
+    trackingTarget: 'topnav_resources_learning_tips',
+    text: 'Learning Tips',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(InfoCircleIcon, {}),
+  description: "Learning to code — or thinking about it? Here's how to get started, plus tips and tricks for staying motivated."
+}, {
+  linkItem: {
+    id: 'career-advice',
+    href: '/resources/blog/category/career',
+    trackingTarget: 'topnav_resources_career_advice',
+    text: 'Career Advice',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(BriefcaseIcon, {}),
+  description: 'Explore different tech jobs and learn how to advance in your career and maintain work-life balance.'
+}, {
+  linkItem: {
+    id: 'finding-a-job',
+    href: '/resources/blog/category/finding-a-job',
+    trackingTarget: 'topnav_resources_finding_a_job',
+    text: 'Finding a Job',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(SearchIcon, {}),
+  description: 'Want to break into the tech industry? Learn how to write a standout resume, build a professional portfolio, prepare for technical interviews, and negotiate job offers.'
+}];

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

@@ -1,12 +1,27 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import _styled from "@emotion/styled/base";
+import { ColorMode } from '@codecademy/gamut-styles';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
+import { GlobalNavRedesignContext } from '../../../GlobalHeader';
 import { getHeaderResourcesList } from '../../../lib/resourcesList';
 import { AnimatedMegaMenuDropdown } from '../../shared';
 import { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';
 import { AppHeaderDropdownNavButton } from '../AppHeaderNavButton/AppHeaderDropdownNavButton';
 import { useAppHeaderContext } from '../AppHeaderProvider';
 import { AppHeaderResourcesSection } from '../AppHeaderResourcesSection';
+import { AppHeaderSection } from '../AppHeaderSection';
+import { RESOURCES_NAV_SECTIONS } from './consts';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDropdown, {
+  target: "ekdg1bw0",
+  label: "StyledAnimatedMegaMenuDropdown"
+})("left:", ({
+  isAnon,
+  displayGlobalNavRedesign
+}) => displayGlobalNavRedesign ? '-58px' : isAnon ? '-9rem' : '-14rem', ";@media (min-width: 1261px){left:", ({
+  isAnon,
+  displayGlobalNavRedesign
+}) => displayGlobalNavRedesign ? '-152px' : isAnon ? '-9rem' : '-14rem', ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlQ29udGV4dCwgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBHbG9iYWxOYXZSZWRlc2lnbkNvbnRleHQgfSBmcm9tICcuLi8uLi8uLi9HbG9iYWxIZWFkZXInO1xuaW1wb3J0IHsgZ2V0SGVhZGVyUmVzb3VyY2VzTGlzdCB9IGZyb20gJy4uLy4uLy4uL2xpYi9yZXNvdXJjZXNMaXN0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbi9BcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyUmVzb3VyY2VzU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclJlc291cmNlc1NlY3Rpb24nO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24nO1xuaW1wb3J0IHsgUkVTT1VSQ0VTX05BVl9TRUNUSU9OUyB9IGZyb20gJy4vY29uc3RzJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW07XG4gIGlzQW5vbjogYm9vbGVhbjtcbn07XG5cbmNvbnN0IFN0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93biA9IHN0eWxlZChBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24pPHtcbiAgaXNBbm9uOiBib29sZWFuO1xuICBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ246IGJvb2xlYW47XG59PmBcbiAgbGVmdDogJHsoeyBpc0Fub24sIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiB9KSA9PlxuICAgIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/ICctNThweCcgOiBpc0Fub24gPyAnLTlyZW0nIDogJy0xNHJlbSd9O1xuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjYxcHgpIHtcbiAgICBsZWZ0OiAkeyh7IGlzQW5vbiwgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduIH0pID0+XG4gICAgICBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAnLTE1MnB4JyA6IGlzQW5vbiA/ICctOXJlbScgOiAnLTE0cmVtJ307XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bjogUmVhY3QuRkM8XG4gIEFwcEhlYWRlclJlc291cmNlRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSwgaXNBbm9uIH0pID0+IHtcbiAgY29uc3QgeyB0ZXh0IH0gPSBpdGVtO1xuICBjb25zdCBjb250YWluZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQgfCBudWxsPihudWxsKTtcbiAgY29uc3QgYnV0dG9uUmVmID0gdXNlUmVmPEhUTUxCdXR0b25FbGVtZW50PihudWxsKTtcbiAgY29uc3QgZHJvcGRvd25SZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQgfCBudWxsPihudWxsKTtcbiAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgeyBsYXN0T3BlbmVkRHJvcGRvd24sIHNldExhc3RPcGVuZWREcm9wZG93biB9ID0gdXNlQXBwSGVhZGVyQ29udGV4dCgpO1xuXG4gIC8vIEFkZCBzY3JvbGxiYXIgZm9yIHNob3J0IHNjcmVlbnMgYWZ0ZXIgdHJhbnNpdGlvbiAob3RoZXJ3aXNlIHNjcm9sbGJhciBhcHBlYXJzIGFuZCBkaXNzYXBlYXJzIGZvciBhZGVxdWF0ZSBoZWlnaHRzIGR1cmluZyB0cmFuc2l0aW9uKVxuICBjb25zdCBbYW5pbWF0aW9uQ29tcGxldGVTdHlsZXMsIHNldEFuaW1hdGlvbkNvbXBsZXRlU3R5bGVzXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBoZWFkZXJSZXNvdXJjZXNMaXN0ID0gZ2V0SGVhZGVyUmVzb3VyY2VzTGlzdCgpO1xuXG4gIGNvbnN0IGFuaW1hdGlvbkZpbmlzaGVkID0gKCkgPT4ge1xuICAgIHNldEFuaW1hdGlvbkNvbXBsZXRlU3R5bGVzKGlzT3Blbik7XG4gICAgaWYgKGlzT3BlbiAmJiBkcm9wZG93blJlZi5jdXJyZW50KSB7XG4gICAgICBkcm9wZG93blJlZi5jdXJyZW50LnNjcm9sbFRvcCA9IDA7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHRvZ2dsZUlzT3BlbiA9ICgpID0+IHNldElzT3BlbigocHJldikgPT4gIXByZXYpO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICB0b2dnbGVJc09wZW4oKTtcbiAgICBpZiAoIWlzT3Blbikge1xuICAgICAgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICAgIGlmIChzZXRMYXN0T3BlbmVkRHJvcGRvd24pIHtcbiAgICAgICAgc2V0TGFzdE9wZW5lZERyb3Bkb3duKHRleHQpO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVDbG9zZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgIGJ1dHRvblJlZj8uY3VycmVudD8uZm9jdXMoKTtcbiAgfSwgW10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGxhc3RPcGVuZWREcm9wZG93biAhPT0gdGV4dCAmJiBpc09wZW4pIHtcbiAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgfVxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC1ob29rcy9leGhhdXN0aXZlLWRlcHNcbiAgfSwgW2xhc3RPcGVuZWREcm9wZG93bl0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZnVuY3Rpb24gaGFuZGxlQ2xpY2tPdXRzaWRlKGV2ZW50OiBNb3VzZUV2ZW50IHwgRXZlbnQpIHtcbiAgICAgIGNvbnN0IGNvbnRhaW5lciA9IGNvbnRhaW5lclJlZj8uY3VycmVudDtcbiAgICAgIGNvbnN0IGJ1dHRvbiA9IGJ1dHRvblJlZj8uY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIGNvbnRhaW5lciAmJlxuICAgICAgICAhY29udGFpbmVyLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSAmJlxuICAgICAgICBidXR0b24gJiZcbiAgICAgICAgIWJ1dHRvbi5jb250YWlucyhldmVudC50YXJnZXQgYXMgTm9kZSlcbiAgICAgICkge1xuICAgICAgICBoYW5kbGVDbG9zZSgpO1xuICAgICAgfVxuICAgIH1cblxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignYmx1cicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICB9O1xuICB9LCBbY29udGFpbmVyUmVmLCBoYW5kbGVDbG9zZSwgaXNPcGVuXSk7XG5cbiAgY29uc3QgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduID0gdXNlQ29udGV4dChHbG9iYWxOYXZSZWRlc2lnbkNvbnRleHQpO1xuXG4gIHJldHVybiAoXG4gICAgPEFwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXIgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlfT5cbiAgICAgIDxBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvblxuICAgICAgICBidXR0b25SZWY9e2J1dHRvblJlZn1cbiAgICAgICAgaGFuZGxlT25DbGljaz17aGFuZGxlT25DbGlja31cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIHRpdGxlPXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNBbm9uPXtpc0Fub259XG4gICAgICAgIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbj17ZGlzcGxheUdsb2JhbE5hdlJlZGVzaWdufVxuICAgICAgICB0YWJJbmRleD17LTF9IC8vIHByZXZlbnQgZnJvbSBpbnRlcmZlcmluZyB3aXRoIEFwcEhlYWRlciBmb2N1cyBsb2dpY1xuICAgICAgICByZWY9e2Ryb3Bkb3duUmVmfVxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIHRvcDogJzMuNXJlbScsXG4gICAgICAgICAgbWluV2lkdGg6ICc2NHJlbScsXG4gICAgICAgICAgbGVmdDogaXNBbm9uID8gJy0xNC41cmVtJyA6ICctMTkuNXJlbScsXG4gICAgICAgICAgb3ZlcmZsb3dZOiAnYXV0bycsXG4gICAgICAgICAgbWF4SGVpZ2h0OiBhbmltYXRpb25Db21wbGV0ZVN0eWxlcyA/ICc4NXZoJyA6IDAsXG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAndHJhbnNwYXJlbnQnIDogJycsXG4gICAgICAgIH19XG4gICAgICAgIGluaXRpYWw9e3sgYm9yZGVyV2lkdGg6IDAsIGhlaWdodDogMCB9fVxuICAgICAgICBhbmltYXRlPXt7XG4gICAgICAgICAgYm9yZGVyV2lkdGg6IGlzT3BlbiA/IChkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAwIDogMSkgOiAwLFxuICAgICAgICAgIGhlaWdodDogaXNPcGVuID8gJ2ZpdC1jb250ZW50JyA6IDAsXG4gICAgICAgIH19XG4gICAgICAgIHRyYW5zaXRpb249e3sgZHVyYXRpb246IDAuMTc1IH19XG4gICAgICAgIGFyaWEtaGlkZGVuPXshaXNPcGVufVxuICAgICAgICBkYXRhLXRlc3RpZD1cInJlc291cmNlcy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICA+XG4gICAgICAgIHtkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAoXG4gICAgICAgICAgPENvbG9yTW9kZSBtb2RlPVwibGlnaHRcIj5cbiAgICAgICAgICAgIDxBcHBIZWFkZXJTZWN0aW9uXG4gICAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgICByZWY9e2NvbnRhaW5lclJlZn1cbiAgICAgICAgICAgICAgbmF2U2VjdGlvbnM9e1JFU09VUkNFU19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvQ29sb3JNb2RlPlxuICAgICAgICApIDogKFxuICAgICAgICAgIDxBcHBIZWFkZXJSZXNvdXJjZXNTZWN0aW9uXG4gICAgICAgICAgICBhY3Rpb249e2FjdGlvbn1cbiAgICAgICAgICAgIHJlZj17Y29udGFpbmVyUmVmfVxuICAgICAgICAgICAgaWQ9e2BtZW51LWNvbnRhaW5lciR7aXRlbS50ZXh0fWB9XG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIGhhbmRsZUNsb3NlPXsoKSA9PiBzZXRJc09wZW4oZmFsc2UpfVxuICAgICAgICAgICAgcmVzb3VyY2VzPXtoZWFkZXJSZXNvdXJjZXNMaXN0fVxuICAgICAgICAgIC8+XG4gICAgICAgICl9XG4gICAgICA8L1N0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bj5cbiAgICA8L0FwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */"));
 export const AppHeaderResourcesDropdown = ({
   action,
   item,
@@ -68,6 +83,7 @@ export const AppHeaderResourcesDropdown = ({
       document.removeEventListener('blur', handleClickOutside);
     };
   }, [containerRef, handleClose, isOpen]);
+  const displayGlobalNavRedesign = useContext(GlobalNavRedesignContext);
   return /*#__PURE__*/_jsxs(AppHeaderDropdownProvider, {
     handleClose: handleClose,
     children: [/*#__PURE__*/_jsx(AppHeaderDropdownNavButton, {
@@ -75,7 +91,9 @@ export const AppHeaderResourcesDropdown = ({
       handleOnClick: handleOnClick,
       isOpen: isOpen,
       title: text
-    }), /*#__PURE__*/_jsx(AnimatedMegaMenuDropdown, {
+    }), /*#__PURE__*/_jsx(StyledAnimatedMegaMenuDropdown, {
+      isAnon: isAnon,
+      displayGlobalNavRedesign: displayGlobalNavRedesign,
       tabIndex: -1 // prevent from interfering with AppHeader focus logic
       ,
       ref: dropdownRef,
@@ -84,14 +102,15 @@ export const AppHeaderResourcesDropdown = ({
         minWidth: '64rem',
         left: isAnon ? '-14.5rem' : '-19.5rem',
         overflowY: 'auto',
-        maxHeight: animationCompleteStyles ? '85vh' : 0
+        maxHeight: animationCompleteStyles ? '85vh' : 0,
+        backgroundColor: displayGlobalNavRedesign ? 'transparent' : ''
       },
       initial: {
         borderWidth: 0,
         height: 0
       },
       animate: {
-        borderWidth: isOpen ? 1 : 0,
+        borderWidth: isOpen ? displayGlobalNavRedesign ? 0 : 1 : 0,
         height: isOpen ? 'fit-content' : 0
       },
       transition: {
@@ -100,7 +119,14 @@ export const AppHeaderResourcesDropdown = ({
       "aria-hidden": !isOpen,
       "data-testid": "resources-menu-dropdown",
       onAnimationComplete: animationFinished,
-      children: /*#__PURE__*/_jsx(AppHeaderResourcesSection, {
+      children: displayGlobalNavRedesign ? /*#__PURE__*/_jsx(ColorMode, {
+        mode: "light",
+        children: /*#__PURE__*/_jsx(AppHeaderSection, {
+          isOpen: isOpen,
+          ref: containerRef,
+          navSections: RESOURCES_NAV_SECTIONS
+        })
+      }) : /*#__PURE__*/_jsx(AppHeaderResourcesSection, {
         action: action,
         ref: containerRef,
         id: `menu-container${item.text}`,

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

@@ -0,0 +1,83 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { GlobalHeaderItemClickContext } from '../../../GlobalHeader/context';
+import { CATALOG_NAV_SECTIONS } from '../AppHeaderCatalogDropdown/consts';
+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
+};
+describe('AppHeaderSection', () => {
+  const renderView = setupRtl(AppHeaderSection, defaultProps).options({
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
+      value: mockContextValue,
+      children: children
+    })
+  });
+  it('renders the component ', () => {
+    const {
+      view
+    } = renderView({
+      navSections: CATALOG_NAV_SECTIONS
+    });
+    expect(view.getByRole('heading', {
+      name: 'Course topics'
+    })).toBeInTheDocument();
+  });
+  describe('tab navigation', () => {
+    it('starts with the first tab active by default', () => {
+      const {
+        view
+      } = renderView({
+        navSections: CATALOG_NAV_SECTIONS
+      });
+      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
+      });
+      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
+      });
+      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/{AppHeaderCatalogSectionVariant → AppHeaderSection}/NavSection.d.ts

@@ -1,9 +1,9 @@
 import { GamutIconProps } from '@codecademy/gamut-icons';
 import React, { PropsWithChildren } from 'react';
-import { AppHeaderCatalogDropdownItem } from '../../shared';
+import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
 type NavSectionProps = PropsWithChildren & {
     activeTab: number;
-    item: AppHeaderCatalogDropdownItem;
+    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
     setActiveTab: (tab: number) => void;
     icon?: React.ComponentType<GamutIconProps>;
     text: string;

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

@@ -0,0 +1,79 @@
+import _styled from "@emotion/styled/base";
+import { Box, FlexBox } from '@codecademy/gamut';
+import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
+import React from 'react';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const NavPanelContainer = /*#__PURE__*/_styled(Box, {
+  target: "ed97qwe1",
+  label: "NavPanelContainer"
+})("display:", ({
+  isActive
+}) => isActive ? 'block' : 'none', ";grid-column:2/span 12;grid-row:1/span 8;background-color:", ({
+  theme
+}) => theme.colors.background, ";border-radius:", ({
+  isActive,
+  isFirst
+}) => isActive && isFirst ? '0 8px 8px 8px' : '8px', ";padding:16px 32px 24px 32px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9OYXZTZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQjhFIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9OYXZTZWN0aW9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEFycm93Q2hldnJvblJpZ2h0SWNvbiwgR2FtdXRJY29uUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgUHJvcHNXaXRoQ2hpbGRyZW4gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0sXG4gIEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbSxcbn0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxudHlwZSBOYXZTZWN0aW9uUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbiAmIHtcbiAgYWN0aXZlVGFiOiBudW1iZXI7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0gfCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW07XG4gIHNldEFjdGl2ZVRhYjogKHRhYjogbnVtYmVyKSA9PiB2b2lkO1xuICBpY29uPzogUmVhY3QuQ29tcG9uZW50VHlwZTxHYW11dEljb25Qcm9wcz47XG4gIHRleHQ6IHN0cmluZztcbiAgaW5kZXg6IG51bWJlcjtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGFiSW5kZXg/OiBudW1iZXI7XG59O1xuXG5jb25zdCBOYXZQYW5lbENvbnRhaW5lciA9IHN0eWxlZChCb3gpPHsgaXNBY3RpdmU6IGJvb2xlYW47IGlzRmlyc3Q6IGJvb2xlYW4gfT5gXG4gIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICBncmlkLWNvbHVtbjogMiAvIHNwYW4gMTI7XG4gIGdyaWQtcm93OiAxIC8gc3BhbiA4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSwgaXNGaXJzdCB9KSA9PlxuICAgIGlzQWN0aXZlICYmIGlzRmlyc3QgPyAnMCA4cHggOHB4IDhweCcgOiAnOHB4J307XG4gIHBhZGRpbmc6IDE2cHggMzJweCAyNHB4IDMycHg7XG5gO1xuXG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQuYnV0dG9uPHsgaXNBY3RpdmU6IGJvb2xlYW47IGluZGV4OiBudW1iZXIgfT5gXG4gIGdyaWQtY29sdW1uOiAxO1xuICBncmlkLXJvdzogJHsoeyBpbmRleCB9KSA9PiBpbmRleCArIDF9O1xuICBwYWRkaW5nOiAxNnB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJzhweCAwIDAgOHB4JyA6ICc4cHgnKX07XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgZm9udC1zaXplOiAxOHB4O1xuICBmb250LXdlaWdodDogNDAwO1xuICBjb2xvcjogJHsoeyB0aGVtZSwgaXNBY3RpdmUgfSkgPT5cbiAgICBpc0FjdGl2ZSA/IHRoZW1lLmNvbG9ycy5wcmltYXJ5IDogdGhlbWUuY29sb3JzLnRleHR9O1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB3aWR0aDogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnMTAwJScgOiAnY2FsYygxMDAlIC0gOHB4KScpfTtcbiAgaGVpZ2h0OiA2MHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgaXNBY3RpdmUsIHRoZW1lIH0pID0+XG4gICAgaXNBY3RpdmUgPyB0aGVtZS5jb2xvcnMuYmFja2dyb3VuZCA6IHRoZW1lLmNvbG9yc1snZ3JheS0xMDAnXX07XG5cbiAgI2Fycm93LWNoZXZyb24tcmlnaHQtaWNvbiB7XG4gICAgZGlzcGxheTogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnYmxvY2snIDogJ25vbmUnKX07XG4gIH1cblxuICAmOmhvdmVyLFxuICAmOmZvY3VzIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lLCBpc0FjdGl2ZSB9KSA9PlxuICAgICAgaXNBY3RpdmUgPyB0aGVtZS5jb2xvcnMuYmFja2dyb3VuZCA6IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXX07XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLnByaW1hcnl9O1xuICB9XG5gO1xuXG5jb25zdCBOYXZTZWN0aW9uID0gKHtcbiAgYWN0aXZlVGFiLFxuICBzZXRBY3RpdmVUYWIsXG4gIGljb246IEljb24sXG4gIHRleHQsXG4gIGluZGV4LFxuICBjaGlsZHJlbixcbiAgaXRlbSxcbiAgdGFiSW5kZXgsXG59OiBOYXZTZWN0aW9uUHJvcHMpID0+IHtcbiAgY29uc3QgeyBnbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSA9IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljaygpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxTdHlsZWRCdXR0b25cbiAgICAgICAgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9XG4gICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgb25DbGljaz17KGV2ZW50KSA9PiB7XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCBpdGVtKTtcbiAgICAgICAgICBzZXRBY3RpdmVUYWIoaW5kZXgpO1xuICAgICAgICB9fVxuICAgICAgICBkYXRhLXRlc3RpZD17YG5hdi1zZWN0aW9uLSR7aXRlbS5pZH1gfVxuICAgICAgICBhcmlhLWV4cGFuZGVkPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICB0YWJJbmRleD17dGFiSW5kZXh9XG4gICAgICA+XG4gICAgICAgIDxGbGV4Qm94IGdhcD17OH0gYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgIHtJY29uICYmIDxJY29uIC8+fVxuICAgICAgICAgIHt0ZXh0fVxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDxBcnJvd0NoZXZyb25SaWdodEljb24gaWQ9XCJhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb25cIiAvPlxuICAgICAgPC9TdHlsZWRCdXR0b24+XG5cbiAgICAgIDxOYXZQYW5lbENvbnRhaW5lciBpc0FjdGl2ZT17YWN0aXZlVGFiID09PSBpbmRleH0gaXNGaXJzdD17aW5kZXggPT09IDB9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L05hdlBhbmVsQ29udGFpbmVyPlxuICAgIDwvPlxuICApO1xufTtcbmV4cG9ydCBkZWZhdWx0IE5hdlNlY3Rpb247XG4iXX0= */"));
+const StyledButton = /*#__PURE__*/_styled("button", {
+  target: "ed97qwe0",
+  label: "StyledButton"
+})("grid-column:1;grid-row:", ({
+  index
+}) => index + 1, ";padding:16px;border:none;border-radius:", ({
+  isActive
+}) => isActive ? '8px 0 0 8px' : '8px', ";background:none;cursor:pointer;font-size:18px;font-weight:400;color:", ({
+  theme,
+  isActive
+}) => isActive ? theme.colors.primary : theme.colors.text, ";text-align:left;width:", ({
+  isActive
+}) => isActive ? '100%' : 'calc(100% - 8px)', ";height:60px;display:flex;justify-content:space-between;align-items:center;background-color:", ({
+  isActive,
+  theme
+}) => isActive ? theme.colors.background : theme.colors['gray-100'], ";#arrow-chevron-right-icon{display:", ({
+  isActive
+}) => isActive ? 'block' : 'none', ";}&:hover,&:focus{background-color:", ({
+  theme,
+  isActive
+}) => isActive ? theme.colors.background : theme.colors['navy-100'], ";color:", ({
+  theme
+}) => theme.colors.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9OYXZTZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ3dFIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9OYXZTZWN0aW9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEFycm93Q2hldnJvblJpZ2h0SWNvbiwgR2FtdXRJY29uUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgUHJvcHNXaXRoQ2hpbGRyZW4gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0sXG4gIEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbSxcbn0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxudHlwZSBOYXZTZWN0aW9uUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbiAmIHtcbiAgYWN0aXZlVGFiOiBudW1iZXI7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0gfCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW07XG4gIHNldEFjdGl2ZVRhYjogKHRhYjogbnVtYmVyKSA9PiB2b2lkO1xuICBpY29uPzogUmVhY3QuQ29tcG9uZW50VHlwZTxHYW11dEljb25Qcm9wcz47XG4gIHRleHQ6IHN0cmluZztcbiAgaW5kZXg6IG51bWJlcjtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGFiSW5kZXg/OiBudW1iZXI7XG59O1xuXG5jb25zdCBOYXZQYW5lbENvbnRhaW5lciA9IHN0eWxlZChCb3gpPHsgaXNBY3RpdmU6IGJvb2xlYW47IGlzRmlyc3Q6IGJvb2xlYW4gfT5gXG4gIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICBncmlkLWNvbHVtbjogMiAvIHNwYW4gMTI7XG4gIGdyaWQtcm93OiAxIC8gc3BhbiA4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSwgaXNGaXJzdCB9KSA9PlxuICAgIGlzQWN0aXZlICYmIGlzRmlyc3QgPyAnMCA4cHggOHB4IDhweCcgOiAnOHB4J307XG4gIHBhZGRpbmc6IDE2cHggMzJweCAyNHB4IDMycHg7XG5gO1xuXG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQuYnV0dG9uPHsgaXNBY3RpdmU6IGJvb2xlYW47IGluZGV4OiBudW1iZXIgfT5gXG4gIGdyaWQtY29sdW1uOiAxO1xuICBncmlkLXJvdzogJHsoeyBpbmRleCB9KSA9PiBpbmRleCArIDF9O1xuICBwYWRkaW5nOiAxNnB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJzhweCAwIDAgOHB4JyA6ICc4cHgnKX07XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgZm9udC1zaXplOiAxOHB4O1xuICBmb250LXdlaWdodDogNDAwO1xuICBjb2xvcjogJHsoeyB0aGVtZSwgaXNBY3RpdmUgfSkgPT5cbiAgICBpc0FjdGl2ZSA/IHRoZW1lLmNvbG9ycy5wcmltYXJ5IDogdGhlbWUuY29sb3JzLnRleHR9O1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB3aWR0aDogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnMTAwJScgOiAnY2FsYygxMDAlIC0gOHB4KScpfTtcbiAgaGVpZ2h0OiA2MHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgaXNBY3RpdmUsIHRoZW1lIH0pID0+XG4gICAgaXNBY3RpdmUgPyB0aGVtZS5jb2xvcnMuYmFja2dyb3VuZCA6IHRoZW1lLmNvbG9yc1snZ3JheS0xMDAnXX07XG5cbiAgI2Fycm93LWNoZXZyb24tcmlnaHQtaWNvbiB7XG4gICAgZGlzcGxheTogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnYmxvY2snIDogJ25vbmUnKX07XG4gIH1cblxuICAmOmhvdmVyLFxuICAmOmZvY3VzIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lLCBpc0FjdGl2ZSB9KSA9PlxuICAgICAgaXNBY3RpdmUgPyB0aGVtZS5jb2xvcnMuYmFja2dyb3VuZCA6IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXX07XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLnByaW1hcnl9O1xuICB9XG5gO1xuXG5jb25zdCBOYXZTZWN0aW9uID0gKHtcbiAgYWN0aXZlVGFiLFxuICBzZXRBY3RpdmVUYWIsXG4gIGljb246IEljb24sXG4gIHRleHQsXG4gIGluZGV4LFxuICBjaGlsZHJlbixcbiAgaXRlbSxcbiAgdGFiSW5kZXgsXG59OiBOYXZTZWN0aW9uUHJvcHMpID0+IHtcbiAgY29uc3QgeyBnbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSA9IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljaygpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxTdHlsZWRCdXR0b25cbiAgICAgICAgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9XG4gICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgb25DbGljaz17KGV2ZW50KSA9PiB7XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCBpdGVtKTtcbiAgICAgICAgICBzZXRBY3RpdmVUYWIoaW5kZXgpO1xuICAgICAgICB9fVxuICAgICAgICBkYXRhLXRlc3RpZD17YG5hdi1zZWN0aW9uLSR7aXRlbS5pZH1gfVxuICAgICAgICBhcmlhLWV4cGFuZGVkPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICB0YWJJbmRleD17dGFiSW5kZXh9XG4gICAgICA+XG4gICAgICAgIDxGbGV4Qm94IGdhcD17OH0gYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgIHtJY29uICYmIDxJY29uIC8+fVxuICAgICAgICAgIHt0ZXh0fVxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDxBcnJvd0NoZXZyb25SaWdodEljb24gaWQ9XCJhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb25cIiAvPlxuICAgICAgPC9TdHlsZWRCdXR0b24+XG5cbiAgICAgIDxOYXZQYW5lbENvbnRhaW5lciBpc0FjdGl2ZT17YWN0aXZlVGFiID09PSBpbmRleH0gaXNGaXJzdD17aW5kZXggPT09IDB9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L05hdlBhbmVsQ29udGFpbmVyPlxuICAgIDwvPlxuICApO1xufTtcbmV4cG9ydCBkZWZhdWx0IE5hdlNlY3Rpb247XG4iXX0= */"));
+const NavSection = ({
+  activeTab,
+  setActiveTab,
+  icon: Icon,
+  text,
+  index,
+  children,
+  item,
+  tabIndex
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(StyledButton, {
+      isActive: activeTab === index,
+      index: index,
+      onClick: event => {
+        globalHeaderItemClick(event, item);
+        setActiveTab(index);
+      },
+      "data-testid": `nav-section-${item.id}`,
+      "aria-expanded": activeTab === index,
+      tabIndex: tabIndex,
+      children: [/*#__PURE__*/_jsxs(FlexBox, {
+        gap: 8,
+        alignItems: "center",
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), text]
+      }), /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
+        id: "arrow-chevron-right-icon"
+      })]
+    }), /*#__PURE__*/_jsx(NavPanelContainer, {
+      isActive: activeTab === index,
+      isFirst: index === 0,
+      children: children
+    })]
+  });
+};
+export default NavSection;

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

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { AppHeaderLinkItem } from '../../..';
+type PanelLayoutProps = PropsWithChildren & {
+    heading: string;
+    description: ReactNode;
+    linkItem?: AppHeaderLinkItem;
+    tabIndex?: number;
+};
+export declare const PanelLayout: ({ heading, description, linkItem, children, tabIndex, }: PanelLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+import { Anchor, Box, FlexBox, Text } from '@codecademy/gamut';
+import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PanelLayout = ({
+  heading,
+  description,
+  linkItem,
+  children,
+  tabIndex = 0
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const {
+    handleClose
+  } = useAppHeaderDropdownContext();
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    flexDirection: "column",
+    gap: 24,
+    pr: {
+      _: 32,
+      md: 16,
+      lg: 0
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: "h2",
+        variant: "title-sm",
+        children: heading
+      }), /*#__PURE__*/_jsx(Text, {
+        mt: 8,
+        children: description
+      })]
+    }), children, linkItem && /*#__PURE__*/_jsx(FlexBox, {
+      justifyContent: "center",
+      children: /*#__PURE__*/_jsx(Anchor, {
+        href: linkItem.href,
+        onClick: event => {
+          globalHeaderItemClick(event, linkItem);
+          handleClose();
+        },
+        tabIndex: tabIndex,
+        variant: "standard",
+        children: /*#__PURE__*/_jsxs(FlexBox, {
+          alignItems: "center",
+          gap: 8,
+          children: [linkItem.text, " ", /*#__PURE__*/_jsx(MiniArrowRightIcon, {})]
+        })
+      })
+    })]
+  });
+};

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

@@ -0,0 +1,17 @@
+import React, { RefObject } from 'react';
+import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
+export type AppHeaderSectionProps = {
+    isOpen?: boolean;
+    keyDownEvents?: (event: React.KeyboardEvent) => void;
+    ref?: RefObject<HTMLDivElement>;
+    navSections: {
+        item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
+        panel: React.ComponentType<{
+            tabIndex?: number;
+        }>;
+    }[];
+    MarketingBanner?: ({ tabIndex }: {
+        tabIndex: number;
+    }) => JSX.Element;
+};
+export declare const AppHeaderSection: React.ForwardRefExoticComponent<Omit<AppHeaderSectionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;