@codecademy/brand 3.1.0-alpha.bcd9df13f1.0 → 3.1.0-alpha.bd3791eaf9.0

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

@@ -0,0 +1,273 @@
+import { ArticleIcon, BulbIcon, DiamondIcon, FileIcon, NotebookIcon, ProjectsIcon, RulerTriangleIcon, 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: '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."
+}, {
+  linkItem: {
+    id: 'cheatsheets',
+    href: '/resources/cheatsheets/all',
+    trackingTarget: 'topnav_resources_cheatsheets',
+    text: 'Cheatsheets',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
+  description: 'Sagittis magna mattis risus et tortor. Id morbi ornare mi convallis non. Lorem dis vulputate morbi porttitor tincidunt. Ullamcorper risus eu vestibulum malesuada ullamcorper.'
+}, {
+  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: '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.'
+}];
+export const practiceToolsLinks = [{
+  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.'
+}, {
+  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: '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.'
+}];
+export const inspirationLinks = [{
+  linkItem: {
+    id: 'learning-tips',
+    href: '/resources/blog/category/learning-tips',
+    trackingTarget: 'topnav_resources_learning_tips',
+    text: 'Learning Tips',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
+  description: 'Learning to code — or thinking about it? Here’s how to get started, plus tips and tricks for staying motivated.'
+}, {
+  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(NotebookIcon, {}),
+  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.'
+}, {
+  linkItem: {
+    id: 'career-advice',
+    href: '/resources/blog/category/career',
+    trackingTarget: 'topnav_resources_career_advice',
+    text: 'Career Advice',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
+  description: 'Explore different tech jobs and learn how to advance in your career and maintain work-life balance.'
+}, {
+  linkItem: {
+    id: 'get-inspired',
+    href: '/resources/blog/category/get-inspired',
+    trackingTarget: 'topnav_resources_get_inspired',
+    text: 'Get Inspired',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
+  description: 'Learn how coding can change your life (and the world) for the better.'
+}];

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 { AppHeaderSectionVariant } from '../AppHeaderSectionVariant';
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlQ29udGV4dCwgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBHbG9iYWxOYXZSZWRlc2lnbkNvbnRleHQgfSBmcm9tICcuLi8uLi8uLi9HbG9iYWxIZWFkZXInO1xuaW1wb3J0IHsgZ2V0SGVhZGVyUmVzb3VyY2VzTGlzdCB9IGZyb20gJy4uLy4uLy4uL2xpYi9yZXNvdXJjZXNMaXN0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbi9BcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyUmVzb3VyY2VzU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclJlc291cmNlc1NlY3Rpb24nO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQgfSBmcm9tICcuLi9BcHBIZWFkZXJTZWN0aW9uVmFyaWFudCc7XG5pbXBvcnQgeyBSRVNPVVJDRVNfTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJiB7XG4gIGl0ZW06IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgaXNBbm9uOiBib29sZWFuO1xufTtcblxuY29uc3QgU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duID0gc3R5bGVkKEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bik8e1xuICBpc0Fub246IGJvb2xlYW47XG4gIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbjogYm9vbGVhbjtcbn0+YFxuICBsZWZ0OiAkeyh7IGlzQW5vbiwgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduIH0pID0+XG4gICAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduID8gJy01OHB4JyA6IGlzQW5vbiA/ICctOXJlbScgOiAnLTE0cmVtJ307XG5cbiAgQG1lZGlhIChtaW4td2lkdGg6IDEyNjFweCkge1xuICAgIGxlZnQ6ICR7KHsgaXNBbm9uLCBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gfSkgPT5cbiAgICAgIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/ICctMTUycHgnIDogaXNBbm9uID8gJy05cmVtJyA6ICctMTRyZW0nfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duOiBSZWFjdC5GQzxcbiAgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzXG4+ID0gKHsgYWN0aW9uLCBpdGVtLCBpc0Fub24gfSkgPT4ge1xuICBjb25zdCB7IHRleHQgfSA9IGl0ZW07XG4gIGNvbnN0IGNvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBkcm9wZG93blJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB7IGxhc3RPcGVuZWREcm9wZG93biwgc2V0TGFzdE9wZW5lZERyb3Bkb3duIH0gPSB1c2VBcHBIZWFkZXJDb250ZXh0KCk7XG5cbiAgLy8gQWRkIHNjcm9sbGJhciBmb3Igc2hvcnQgc2NyZWVucyBhZnRlciB0cmFuc2l0aW9uIChvdGhlcndpc2Ugc2Nyb2xsYmFyIGFwcGVhcnMgYW5kIGRpc3NhcGVhcnMgZm9yIGFkZXF1YXRlIGhlaWdodHMgZHVyaW5nIHRyYW5zaXRpb24pXG4gIGNvbnN0IFthbmltYXRpb25Db21wbGV0ZVN0eWxlcywgc2V0QW5pbWF0aW9uQ29tcGxldGVTdHlsZXNdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGhlYWRlclJlc291cmNlc0xpc3QgPSBnZXRIZWFkZXJSZXNvdXJjZXNMaXN0KCk7XG5cbiAgY29uc3QgYW5pbWF0aW9uRmluaXNoZWQgPSAoKSA9PiB7XG4gICAgc2V0QW5pbWF0aW9uQ29tcGxldGVTdHlsZXMoaXNPcGVuKTtcbiAgICBpZiAoaXNPcGVuICYmIGRyb3Bkb3duUmVmLmN1cnJlbnQpIHtcbiAgICAgIGRyb3Bkb3duUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gMDtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuICAgIGlmICghaXNPcGVuKSB7XG4gICAgICBhY3Rpb24oZXZlbnQsIGl0ZW0pO1xuICAgICAgaWYgKHNldExhc3RPcGVuZWREcm9wZG93bikge1xuICAgICAgICBzZXRMYXN0T3BlbmVkRHJvcGRvd24odGV4dCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmPy5jdXJyZW50Py5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICBjb25zdCBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPSB1c2VDb250ZXh0KEdsb2JhbE5hdlJlZGVzaWduQ29udGV4dCk7XG5cbiAgcmV0dXJuIChcbiAgICA8QXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlciBoYW5kbGVDbG9zZT17aGFuZGxlQ2xvc2V9PlxuICAgICAgPEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uXG4gICAgICAgIGJ1dHRvblJlZj17YnV0dG9uUmVmfVxuICAgICAgICBoYW5kbGVPbkNsaWNrPXtoYW5kbGVPbkNsaWNrfVxuICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgdGl0bGU9e3RleHR9XG4gICAgICAvPlxuICAgICAgPFN0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93blxuICAgICAgICBpc0Fub249e2lzQW5vbn1cbiAgICAgICAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduPXtkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ259XG4gICAgICAgIHRhYkluZGV4PXstMX0gLy8gcHJldmVudCBmcm9tIGludGVyZmVyaW5nIHdpdGggQXBwSGVhZGVyIGZvY3VzIGxvZ2ljXG4gICAgICAgIHJlZj17ZHJvcGRvd25SZWZ9XG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgdG9wOiAnMy41cmVtJyxcbiAgICAgICAgICBtaW5XaWR0aDogJzY0cmVtJyxcbiAgICAgICAgICBsZWZ0OiBpc0Fub24gPyAnLTE0LjVyZW0nIDogJy0xOS41cmVtJyxcbiAgICAgICAgICBvdmVyZmxvd1k6ICdhdXRvJyxcbiAgICAgICAgICBtYXhIZWlnaHQ6IGFuaW1hdGlvbkNvbXBsZXRlU3R5bGVzID8gJzg1dmgnIDogMCxcbiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/ICd0cmFuc3BhcmVudCcgOiAnJyxcbiAgICAgICAgfX1cbiAgICAgICAgaW5pdGlhbD17eyBib3JkZXJXaWR0aDogMCwgaGVpZ2h0OiAwIH19XG4gICAgICAgIGFuaW1hdGU9e3tcbiAgICAgICAgICBib3JkZXJXaWR0aDogaXNPcGVuID8gKGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/IDAgOiAxKSA6IDAsXG4gICAgICAgICAgaGVpZ2h0OiBpc09wZW4gPyAnZml0LWNvbnRlbnQnIDogMCxcbiAgICAgICAgfX1cbiAgICAgICAgdHJhbnNpdGlvbj17eyBkdXJhdGlvbjogMC4xNzUgfX1cbiAgICAgICAgYXJpYS1oaWRkZW49eyFpc09wZW59XG4gICAgICAgIGRhdGEtdGVzdGlkPVwicmVzb3VyY2VzLW1lbnUtZHJvcGRvd25cIlxuICAgICAgICBvbkFuaW1hdGlvbkNvbXBsZXRlPXthbmltYXRpb25GaW5pc2hlZH1cbiAgICAgID5cbiAgICAgICAge2Rpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/IChcbiAgICAgICAgICA8Q29sb3JNb2RlIG1vZGU9XCJsaWdodFwiPlxuICAgICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25WYXJpYW50XG4gICAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgICByZWY9e2NvbnRhaW5lclJlZn1cbiAgICAgICAgICAgICAgbmF2U2VjdGlvbnM9e1JFU09VUkNFU19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvQ29sb3JNb2RlPlxuICAgICAgICApIDogKFxuICAgICAgICAgIDxBcHBIZWFkZXJSZXNvdXJjZXNTZWN0aW9uXG4gICAgICAgICAgICBhY3Rpb249e2FjdGlvbn1cbiAgICAgICAgICAgIHJlZj17Y29udGFpbmVyUmVmfVxuICAgICAgICAgICAgaWQ9e2BtZW51LWNvbnRhaW5lciR7aXRlbS50ZXh0fWB9XG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIGhhbmRsZUNsb3NlPXsoKSA9PiBzZXRJc09wZW4oZmFsc2UpfVxuICAgICAgICAgICAgcmVzb3VyY2VzPXtoZWFkZXJSZXNvdXJjZXNMaXN0fVxuICAgICAgICAgIC8+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(AppHeaderSectionVariant, {
+          isOpen: isOpen,
+          ref: containerRef,
+          navSections: RESOURCES_NAV_SECTIONS
+        })
+      }) : /*#__PURE__*/_jsx(AppHeaderResourcesSection, {
         action: action,
         ref: containerRef,
         id: `menu-container${item.text}`,

package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/AppHeaderSectionVariant.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 { AppHeaderSectionVariant } 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('AppHeaderSectionVariant', () => {
+  const renderView = setupRtl(AppHeaderSectionVariant, 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 → AppHeaderSectionVariant}/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/AppHeaderSectionVariant/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: "ewhfiay1",
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0I4RSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dDaGV2cm9uUmlnaHRJY29uLCBHYW11dEljb25Qcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG50eXBlIE5hdlNlY3Rpb25Qcm9wcyA9IFByb3BzV2l0aENoaWxkcmVuICYge1xuICBhY3RpdmVUYWI6IG51bWJlcjtcbiAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgc2V0QWN0aXZlVGFiOiAodGFiOiBudW1iZXIpID0+IHZvaWQ7XG4gIGljb24/OiBSZWFjdC5Db21wb25lbnRUeXBlPEdhbXV0SWNvblByb3BzPjtcbiAgdGV4dDogc3RyaW5nO1xuICBpbmRleDogbnVtYmVyO1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICB0YWJJbmRleD86IG51bWJlcjtcbn07XG5cbmNvbnN0IE5hdlBhbmVsQ29udGFpbmVyID0gc3R5bGVkKEJveCk8eyBpc0FjdGl2ZTogYm9vbGVhbjsgaXNGaXJzdDogYm9vbGVhbiB9PmBcbiAgZGlzcGxheTogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnYmxvY2snIDogJ25vbmUnKX07XG4gIGdyaWQtY29sdW1uOiAyIC8gc3BhbiAxMjtcbiAgZ3JpZC1yb3c6IDEgLyBzcGFuIDg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLmJhY2tncm91bmR9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlLCBpc0ZpcnN0IH0pID0+XG4gICAgaXNBY3RpdmUgJiYgaXNGaXJzdCA/ICcwIDhweCA4cHggOHB4JyA6ICc4cHgnfTtcbiAgcGFkZGluZzogMTZweCAzMnB4IDI0cHggMzJweDtcbmA7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248eyBpc0FjdGl2ZTogYm9vbGVhbjsgaW5kZXg6IG51bWJlciB9PmBcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAkeyh7IGluZGV4IH0pID0+IGluZGV4ICsgMX07XG4gIHBhZGRpbmc6IDE2cHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnOHB4IDAgMCA4cHgnIDogJzhweCcpfTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiAkeyh7IHRoZW1lLCBpc0FjdGl2ZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLnByaW1hcnkgOiB0aGVtZS5jb2xvcnMudGV4dH07XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHdpZHRoOiAkeyh7IGlzQWN0aXZlIH0pID0+IChpc0FjdGl2ZSA/ICcxMDAlJyA6ICdjYWxjKDEwMCUgLSA4cHgpJyl9O1xuICBoZWlnaHQ6IDYwcHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyBpc0FjdGl2ZSwgdGhlbWUgfSkgPT5cbiAgICBpc0FjdGl2ZSA/IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kIDogdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcblxuICAjYXJyb3ctY2hldnJvbi1yaWdodC1pY29uIHtcbiAgICBkaXNwbGF5OiAkeyh7IGlzQWN0aXZlIH0pID0+IChpc0FjdGl2ZSA/ICdibG9jaycgOiAnbm9uZScpfTtcbiAgfVxuXG4gICY6aG92ZXIsXG4gICY6Zm9jdXMge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUsIGlzQWN0aXZlIH0pID0+XG4gICAgICBpc0FjdGl2ZSA/IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kIDogdGhlbWUuY29sb3JzWyduYXZ5LTEwMCddfTtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gIH1cbmA7XG5cbmNvbnN0IE5hdlNlY3Rpb24gPSAoe1xuICBhY3RpdmVUYWIsXG4gIHNldEFjdGl2ZVRhYixcbiAgaWNvbjogSWNvbixcbiAgdGV4dCxcbiAgaW5kZXgsXG4gIGNoaWxkcmVuLFxuICBpdGVtLFxuICB0YWJJbmRleCxcbn06IE5hdlNlY3Rpb25Qcm9wcykgPT4ge1xuICBjb25zdCB7IGdsb2JhbEhlYWRlckl0ZW1DbGljayB9ID0gdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPFN0eWxlZEJ1dHRvblxuICAgICAgICBpc0FjdGl2ZT17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICBvbkNsaWNrPXsoZXZlbnQpID0+IHtcbiAgICAgICAgICBnbG9iYWxIZWFkZXJJdGVtQ2xpY2soZXZlbnQsIGl0ZW0pO1xuICAgICAgICAgIHNldEFjdGl2ZVRhYihpbmRleCk7XG4gICAgICAgIH19XG4gICAgICAgIGRhdGEtdGVzdGlkPXtgbmF2LXNlY3Rpb24tJHtpdGVtLmlkfWB9XG4gICAgICAgIGFyaWEtZXhwYW5kZWQ9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9XG4gICAgICAgIHRhYkluZGV4PXt0YWJJbmRleH1cbiAgICAgID5cbiAgICAgICAgPEZsZXhCb3ggZ2FwPXs4fSBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAge0ljb24gJiYgPEljb24gLz59XG4gICAgICAgICAge3RleHR9XG4gICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgPEFycm93Q2hldnJvblJpZ2h0SWNvbiBpZD1cImFycm93LWNoZXZyb24tcmlnaHQtaWNvblwiIC8+XG4gICAgICA8L1N0eWxlZEJ1dHRvbj5cblxuICAgICAgPE5hdlBhbmVsQ29udGFpbmVyIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fSBpc0ZpcnN0PXtpbmRleCA9PT0gMH0+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvTmF2UGFuZWxDb250YWluZXI+XG4gICAgPC8+XG4gICk7XG59O1xuZXhwb3J0IGRlZmF1bHQgTmF2U2VjdGlvbjtcbiJdfQ== */"));
+const StyledButton = /*#__PURE__*/_styled("button", {
+  target: "ewhfiay0",
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0N3RSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dDaGV2cm9uUmlnaHRJY29uLCBHYW11dEljb25Qcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG50eXBlIE5hdlNlY3Rpb25Qcm9wcyA9IFByb3BzV2l0aENoaWxkcmVuICYge1xuICBhY3RpdmVUYWI6IG51bWJlcjtcbiAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgc2V0QWN0aXZlVGFiOiAodGFiOiBudW1iZXIpID0+IHZvaWQ7XG4gIGljb24/OiBSZWFjdC5Db21wb25lbnRUeXBlPEdhbXV0SWNvblByb3BzPjtcbiAgdGV4dDogc3RyaW5nO1xuICBpbmRleDogbnVtYmVyO1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICB0YWJJbmRleD86IG51bWJlcjtcbn07XG5cbmNvbnN0IE5hdlBhbmVsQ29udGFpbmVyID0gc3R5bGVkKEJveCk8eyBpc0FjdGl2ZTogYm9vbGVhbjsgaXNGaXJzdDogYm9vbGVhbiB9PmBcbiAgZGlzcGxheTogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnYmxvY2snIDogJ25vbmUnKX07XG4gIGdyaWQtY29sdW1uOiAyIC8gc3BhbiAxMjtcbiAgZ3JpZC1yb3c6IDEgLyBzcGFuIDg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLmJhY2tncm91bmR9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlLCBpc0ZpcnN0IH0pID0+XG4gICAgaXNBY3RpdmUgJiYgaXNGaXJzdCA/ICcwIDhweCA4cHggOHB4JyA6ICc4cHgnfTtcbiAgcGFkZGluZzogMTZweCAzMnB4IDI0cHggMzJweDtcbmA7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248eyBpc0FjdGl2ZTogYm9vbGVhbjsgaW5kZXg6IG51bWJlciB9PmBcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAkeyh7IGluZGV4IH0pID0+IGluZGV4ICsgMX07XG4gIHBhZGRpbmc6IDE2cHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnOHB4IDAgMCA4cHgnIDogJzhweCcpfTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiAkeyh7IHRoZW1lLCBpc0FjdGl2ZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLnByaW1hcnkgOiB0aGVtZS5jb2xvcnMudGV4dH07XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHdpZHRoOiAkeyh7IGlzQWN0aXZlIH0pID0+IChpc0FjdGl2ZSA/ICcxMDAlJyA6ICdjYWxjKDEwMCUgLSA4cHgpJyl9O1xuICBoZWlnaHQ6IDYwcHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyBpc0FjdGl2ZSwgdGhlbWUgfSkgPT5cbiAgICBpc0FjdGl2ZSA/IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kIDogdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcblxuICAjYXJyb3ctY2hldnJvbi1yaWdodC1pY29uIHtcbiAgICBkaXNwbGF5OiAkeyh7IGlzQWN0aXZlIH0pID0+IChpc0FjdGl2ZSA/ICdibG9jaycgOiAnbm9uZScpfTtcbiAgfVxuXG4gICY6aG92ZXIsXG4gICY6Zm9jdXMge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUsIGlzQWN0aXZlIH0pID0+XG4gICAgICBpc0FjdGl2ZSA/IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kIDogdGhlbWUuY29sb3JzWyduYXZ5LTEwMCddfTtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gIH1cbmA7XG5cbmNvbnN0IE5hdlNlY3Rpb24gPSAoe1xuICBhY3RpdmVUYWIsXG4gIHNldEFjdGl2ZVRhYixcbiAgaWNvbjogSWNvbixcbiAgdGV4dCxcbiAgaW5kZXgsXG4gIGNoaWxkcmVuLFxuICBpdGVtLFxuICB0YWJJbmRleCxcbn06IE5hdlNlY3Rpb25Qcm9wcykgPT4ge1xuICBjb25zdCB7IGdsb2JhbEhlYWRlckl0ZW1DbGljayB9ID0gdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPFN0eWxlZEJ1dHRvblxuICAgICAgICBpc0FjdGl2ZT17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICBvbkNsaWNrPXsoZXZlbnQpID0+IHtcbiAgICAgICAgICBnbG9iYWxIZWFkZXJJdGVtQ2xpY2soZXZlbnQsIGl0ZW0pO1xuICAgICAgICAgIHNldEFjdGl2ZVRhYihpbmRleCk7XG4gICAgICAgIH19XG4gICAgICAgIGRhdGEtdGVzdGlkPXtgbmF2LXNlY3Rpb24tJHtpdGVtLmlkfWB9XG4gICAgICAgIGFyaWEtZXhwYW5kZWQ9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9XG4gICAgICAgIHRhYkluZGV4PXt0YWJJbmRleH1cbiAgICAgID5cbiAgICAgICAgPEZsZXhCb3ggZ2FwPXs4fSBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAge0ljb24gJiYgPEljb24gLz59XG4gICAgICAgICAge3RleHR9XG4gICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgPEFycm93Q2hldnJvblJpZ2h0SWNvbiBpZD1cImFycm93LWNoZXZyb24tcmlnaHQtaWNvblwiIC8+XG4gICAgICA8L1N0eWxlZEJ1dHRvbj5cblxuICAgICAgPE5hdlBhbmVsQ29udGFpbmVyIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fSBpc0ZpcnN0PXtpbmRleCA9PT0gMH0+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvTmF2UGFuZWxDb250YWluZXI+XG4gICAgPC8+XG4gICk7XG59O1xuZXhwb3J0IGRlZmF1bHQgTmF2U2VjdGlvbjtcbiJdfQ== */"));
+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/AppHeaderSectionVariant/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/AppHeaderSectionVariant/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/AppHeaderSectionVariant/index.d.ts

@@ -0,0 +1,17 @@
+import React, { RefObject } from 'react';
+import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
+export type AppHeaderSectionVariantProps = {
+    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 AppHeaderSectionVariant: React.ForwardRefExoticComponent<Omit<AppHeaderSectionVariantProps, "ref"> & React.RefAttributes<HTMLDivElement>>;