@codecademy/brand 3.0.0-alpha.da574fc3ea.0 → 3.1.0-alpha.0155f9e803.0

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

@@ -0,0 +1,52 @@
+import _styled from "@emotion/styled/base";
+import { Box, Card, FlexBox, Text } from '@codecademy/gamut';
+import { GridDense } from '@codecademy/gamut-patterns';
+import { theme } from '@codecademy/gamut-styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "e1lwunvl0",
+  label: "StyledCard"
+})("&:hover{color:", ({
+  theme
+}) => theme.colors.primary, ";border-color:", ({
+  theme
+}) => theme.colors.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRmVhdHVyZUNhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU8rQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckZlYXR1cmVDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgQ2FyZCwgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEdyaWREZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQXBwSGVhZGVyQ2FyZEl0ZW0gfSBmcm9tICcuLi9BcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bi9jb25zdHMnO1xuXG5jb25zdCBTdHlsZWRDYXJkID0gc3R5bGVkKENhcmQpYFxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckZlYXR1cmVDYXJkID0gKHsgaXRlbSB9OiB7IGl0ZW06IEFwcEhlYWRlckNhcmRJdGVtIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ2FyZFxuICAgICAgaXNJbnRlcmFjdGl2ZVxuICAgICAgcHg9ezh9XG4gICAgICBweT17MjR9XG4gICAgICBib3JkZXJSYWRpdXM9XCJsZ1wiXG4gICAgICBib3JkZXI9ezF9XG4gICAgICBib3JkZXJDb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiXG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBhbGlnbkl0ZW1zPVwiZmxleC1zdGFydFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGhlaWdodD1cIjEwMCVcIlxuICAgID5cbiAgICAgIDxGbGV4Qm94IGFsaWduSXRlbXM9XCJjZW50ZXJcIiBnYXA9ezh9PlxuICAgICAgICA8Qm94XG4gICAgICAgICAgYmFja2dyb3VuZD17dGhlbWUuY29sb3JzWyduYXZ5LTIwMCddfVxuICAgICAgICAgIGJvcmRlclJhZGl1cz1cIm1kXCJcbiAgICAgICAgICBwPXs0fVxuICAgICAgICAgIGhlaWdodD17MjZ9XG4gICAgICAgID5cbiAgICAgICAgICB7aXRlbS5pY29ufVxuICAgICAgICA8L0JveD5cbiAgICAgICAgPFRleHQgdmFyaWFudD1cInRpdGxlLXhzXCI+e2l0ZW0ubGlua0l0ZW0udGV4dH08L1RleHQ+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgICA8Qm94IHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICA8R3JpZERlbnNlIGhlaWdodD17NH0gLz5cbiAgICAgIDwvQm94PlxuICAgICAgPFRleHQgdmFyaWFudD1cInAtYmFzZVwiIGZvbnRTaXplPXsxNH0+XG4gICAgICAgIHtpdGVtLmRlc2NyaXB0aW9ufVxuICAgICAgPC9UZXh0PlxuICAgIDwvU3R5bGVkQ2FyZD5cbiAgKTtcbn07XG4iXX0= */"));
+export const AppHeaderFeatureCard = ({
+  item
+}) => {
+  return /*#__PURE__*/_jsxs(StyledCard, {
+    isInteractive: true,
+    px: 8,
+    py: 24,
+    borderRadius: "lg",
+    border: 1,
+    borderColor: "border-tertiary",
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    height: "100%",
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      gap: 8,
+      children: [/*#__PURE__*/_jsx(Box, {
+        background: theme.colors['navy-200'],
+        borderRadius: "md",
+        p: 4,
+        height: 26,
+        children: item.icon
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "title-xs",
+        children: item.linkItem.text
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "100%",
+      children: /*#__PURE__*/_jsx(GridDense, {
+        height: 4
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "p-base",
+      fontSize: 14,
+      children: item.description
+    })]
+  });
+};

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.d.ts

@@ -0,0 +1,11 @@
+import { AppHeaderCardItem } from './consts';
+type NavPanelProps = {
+    tabIndex?: number;
+    links: AppHeaderCardItem[];
+};
+export declare const DocsPanel: ({ tabIndex }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LearningToolsPanel: ({ tabIndex }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PracticeToolsPanel: ({ tabIndex }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InspirationPanel: ({ tabIndex }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FeatureCardPanel: ({ tabIndex, links }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,140 @@
+import { Anchor, Box, FlexBox, GridBox } from '@codecademy/gamut';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
+import { AppHeaderFeatureCard } from '../AppHeaderFeatureCard';
+import { PanelLayout } from '../AppHeaderSection/PanelLayout';
+import { docsLinks, inspirationLinks, learningToolsLinks, practiceToolsLinks } from './consts';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const DocsPanel = ({
+  tabIndex = 0
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const {
+    handleClose
+  } = useAppHeaderDropdownContext();
+  const description = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      mb: 8,
+      children: "Docs is a community-driven resource for all things programming. Even if you don't have a Codecademy account, you can quickly find definitions and explanations for most coding languages, frameworks, and technical concepts."
+    }), "Interested in helping build it?", ' ', /*#__PURE__*/_jsx(Anchor, {
+      tabIndex: tabIndex,
+      href: "/docs/contribute",
+      children: "Contribute to Docs"
+    })]
+  });
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Docs",
+    description: description,
+    linkItem: {
+      type: 'link',
+      href: '/docs',
+      text: 'Explore all Docs',
+      trackingTarget: 'topnav_resources_docs',
+      id: 'docs'
+    },
+    tabIndex: tabIndex,
+    children: /*#__PURE__*/_jsx(GridBox, {
+      gridTemplateColumns: {
+        _: '1fr',
+        lg: '1fr 1fr 1fr'
+      },
+      gap: 8,
+      pl: 0,
+      as: "ul",
+      listStyle: "none",
+      children: docsLinks.map(item => /*#__PURE__*/_jsx(Anchor, {
+        variant: "interface",
+        href: item.href,
+        onClick: event => {
+          globalHeaderItemClick(event, item);
+          handleClose();
+        },
+        tabIndex: tabIndex,
+        as: "li",
+        children: /*#__PURE__*/_jsxs(FlexBox, {
+          height: 48,
+          px: 16,
+          py: 8,
+          borderRadius: "md",
+          border: 1,
+          borderColor: "border-tertiary",
+          alignItems: "center",
+          children: [item.text, item.badge]
+        }, `${item.id}`)
+      }, `${item.id}`))
+    })
+  });
+};
+export const LearningToolsPanel = ({
+  tabIndex = 0
+}) => {
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Learning tools",
+    description: "Explore free resources that help you understand key concepts and stay on track. From articles and cheatsheets to videos and projects, these tools support you throughout your learning journey.",
+    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
+      links: learningToolsLinks,
+      tabIndex: tabIndex
+    })
+  });
+};
+export const PracticeToolsPanel = ({
+  tabIndex = 0
+}) => {
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Practice tools",
+    description: "Build confidence and reinforce what you've learned through hands-on practice. Tackle real coding challenges, simulate job interviews, and test your skills in interactive workspaces.",
+    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
+      links: practiceToolsLinks,
+      tabIndex: tabIndex
+    })
+  });
+};
+export const InspirationPanel = ({
+  tabIndex = 0
+}) => {
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Inspiration",
+    description: "Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners.",
+    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
+      links: inspirationLinks,
+      tabIndex: tabIndex
+    })
+  });
+};
+export const FeatureCardPanel = ({
+  tabIndex = 0,
+  links
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const {
+    handleClose
+  } = useAppHeaderDropdownContext();
+  return /*#__PURE__*/_jsx(GridBox, {
+    gridTemplateColumns: {
+      _: '1fr',
+      lg: '1fr 1fr'
+    },
+    gridTemplateRows: {
+      _: '1fr',
+      lg: '1fr 1fr'
+    },
+    gap: 16,
+    children: links.map(item => /*#__PURE__*/_jsx(Anchor, {
+      variant: "interface",
+      href: item.linkItem.href,
+      onClick: event => {
+        globalHeaderItemClick(event, item.linkItem);
+        handleClose();
+      },
+      tabIndex: tabIndex,
+      height: "100%",
+      children: /*#__PURE__*/_jsx(AppHeaderFeatureCard, {
+        item: item
+      })
+    }, `${item.linkItem.id}`))
+  });
+};

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AppHeaderLinkItem, AppHeaderResourcesDropdownItem } from '../../shared';
+export type NavSectionConfig = {
+    item: AppHeaderResourcesDropdownItem;
+    panel: React.ComponentType<{
+        tabIndex?: number;
+    }>;
+};
+export declare const RESOURCES_NAV_SECTIONS: NavSectionConfig[];
+export declare const docsLinks: AppHeaderLinkItem[];
+export type AppHeaderCardItem = {
+    linkItem: AppHeaderLinkItem;
+    icon: React.ReactNode;
+    description: string;
+};
+export declare const learningToolsLinks: AppHeaderCardItem[];
+export declare const practiceToolsLinks: AppHeaderCardItem[];
+export declare const inspirationLinks: AppHeaderCardItem[];

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
+      );
+    });
+  });
+});