@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

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

@@ -1,226 +1,270 @@
-import { ArtificialIntelligenceIcon, BookLibraryIcon, BriefcaseIcon, CIcon, CloudComputingIcon, CPlusIcon, CSharpIcon, CybersecurityIcon, DataEngineeringIcon, DataScienceIcon, GrowthIcon, HtmlCssIcon, JavaIcon, JavascriptIcon, OnlineClassStudentIcon, PhpIcon, ProfessionalCertificateIcon, ProgrammingBrowserIcon, PythonIcon, SqlIcon, StudyBookIcon, WebDesignIcon, WebDevelopmentIcon } from '@codecademy/gamut-icons';
-import { CareerPathsPanel, CertificationPathsPanel, CourseTopicsPanel, LiveLearningPanel, SkillPathsPanel } from './NavPanels';
-export const getCertificationProviderLogoUrl = fileName => `https://static-assets.codecademy.com/assets/certification-provider-logos/catalog-dropdown/v2/${fileName}`;
-export const CATALOG_NAV_SECTIONS = [{
-  item: {
-    icon: StudyBookIcon,
-    text: 'Course topics',
-    id: 'course-topics',
-    type: 'catalog-dropdown',
-    trackingTarget: 'topnav_catalog_tab_course_topics'
-  },
-  panel: CourseTopicsPanel
-}, {
-  item: {
-    icon: OnlineClassStudentIcon,
-    text: 'Live learning',
-    id: 'live-learning',
-    type: 'catalog-dropdown',
-    trackingTarget: 'topnav_catalog_tab_live_learning'
-  },
-  panel: LiveLearningPanel
-}, {
-  item: {
-    icon: BookLibraryIcon,
-    text: 'Skill paths',
-    id: 'skill-paths',
-    type: 'catalog-dropdown',
-    trackingTarget: 'topnav_catalog_tab_skill_paths'
-  },
-  panel: SkillPathsPanel
-}, {
-  item: {
-    icon: BriefcaseIcon,
-    text: 'Career paths',
-    id: 'career-paths',
-    type: 'catalog-dropdown',
-    trackingTarget: 'topnav_catalog_tab_career_paths'
-  },
-  panel: CareerPathsPanel
-}, {
-  item: {
-    icon: ProfessionalCertificateIcon,
-    text: 'Certification paths',
-    id: 'certification-paths',
-    type: 'catalog-dropdown',
-    trackingTarget: 'topnav_catalog_tab_certification_paths'
-  },
-  panel: CertificationPathsPanel
-}];
-export const CERTIFICATION_PROVIDERS = [{
-  name: 'Microsoft',
-  logoUrl: getCertificationProviderLogoUrl('microsoft.svg'),
-  hubType: 'subhub'
-}, {
-  name: 'CompTIA',
-  logoUrl: getCertificationProviderLogoUrl('comptia.svg'),
-  hubType: 'subhub'
-}, {
-  name: 'ISC2',
-  logoUrl: getCertificationProviderLogoUrl('isc2.svg'),
-  hubType: 'subhub'
-}, {
-  name: 'AWS',
-  logoUrl: getCertificationProviderLogoUrl('aws.svg'),
-  hubType: 'subhub'
-}, {
-  name: 'Google',
-  logoUrl: getCertificationProviderLogoUrl('google.svg'),
-  hubType: 'certification-prep'
-}, {
-  name: 'Cisco',
-  logoUrl: getCertificationProviderLogoUrl('cisco.svg'),
-  hubType: 'certification-prep'
-}, {
-  name: 'IIBA',
-  logoUrl: getCertificationProviderLogoUrl('iiba.svg'),
-  hubType: 'certification-prep'
-}, {
-  name: 'ISTQB',
-  logoUrl: getCertificationProviderLogoUrl('istqb.svg'),
-  hubType: 'certification-prep'
-}, {
-  name: 'ISACA',
-  logoUrl: getCertificationProviderLogoUrl('isaca.svg'),
-  hubType: 'certification-prep'
-}, {
-  name: 'Kubernetes',
-  logoUrl: getCertificationProviderLogoUrl('kubernetes.svg'),
-  hubType: 'certification-prep'
-}, {
-  name: 'Oracle',
-  logoUrl: getCertificationProviderLogoUrl('oracle.svg'),
-  hubType: 'certification-prep'
-}, {
-  name: 'Project Management Institute',
-  logoUrl: getCertificationProviderLogoUrl('pmi.svg'),
-  hubType: 'certification-prep'
-}];
-export const popularLanguages = [{
-  id: 'python',
-  href: '/catalog/language/python',
-  trackingTarget: 'topnav_catalog_skill_python',
-  text: 'Python',
-  type: 'link',
-  icon: PythonIcon
-}, {
-  id: 'javascript',
-  href: '/catalog/language/javascript',
-  trackingTarget: 'topnav_catalog_skill_javascript',
-  text: 'JavaScript',
-  type: 'link',
-  icon: JavascriptIcon
-}, {
-  id: 'html-css',
-  href: '/catalog/language/html-css',
-  trackingTarget: 'topnav_catalog_skill_html-css',
-  text: 'HTML & CSS',
-  type: 'link',
-  icon: HtmlCssIcon
-}, {
-  id: 'c-sharp',
-  href: '/catalog/language/c-sharp',
-  trackingTarget: 'topnav_catalog_skill_c-sharp',
-  text: 'C#',
-  type: 'link',
-  icon: CSharpIcon
-}, {
-  id: 'c-plus-plus',
-  href: '/catalog/language/c-plus-plus',
-  trackingTarget: 'topnav_catalog_skill_c-plus-plus',
-  text: 'C++',
-  type: 'link',
-  icon: CPlusIcon
-}, {
-  id: 'c',
-  href: '/catalog/language/c',
-  trackingTarget: 'topnav_catalog_skill_c',
-  text: 'C',
-  type: 'link',
-  icon: CIcon
-}, {
-  id: 'php',
-  href: '/catalog/language/php',
-  trackingTarget: 'topnav_catalog_skill_php',
-  text: 'PHP',
-  type: 'link',
-  icon: PhpIcon
-}, {
-  id: 'java',
-  href: '/catalog/language/java',
-  trackingTarget: 'topnav_catalog_skill_java',
-  text: 'Java',
-  type: 'link',
-  icon: JavaIcon
-}, {
-  id: 'sql',
-  href: '/catalog/language/sql',
-  trackingTarget: 'topnav_catalog_skill_sql',
-  text: 'SQL',
-  type: 'link',
-  icon: SqlIcon
-}];
-export const popularSubjects = [{
-  id: 'artificial-intelligence',
-  href: '/catalog/subject/artificial-intelligence',
-  trackingTarget: 'topnav_catalog_skill_ai',
-  text: 'AI',
-  type: 'link',
-  icon: ArtificialIntelligenceIcon
-}, {
-  id: 'it',
-  href: '/catalog/subject/information-technology',
-  trackingTarget: 'topnav_catalog_skill_it',
-  text: 'IT',
-  type: 'link',
-  icon: DataEngineeringIcon
-}, {
-  id: 'cybersecurity',
-  href: '/catalog/subject/cybersecurity',
-  trackingTarget: 'topnav_catalog_skill_cybersecurity',
-  text: 'Cybersecurity',
-  type: 'link',
-  icon: CybersecurityIcon
-}, {
-  id: 'cloud-computing',
-  href: '/catalog/subject/cloud-computing',
-  trackingTarget: 'topnav_catalog_skill_cloud-computing',
-  text: 'Cloud computing',
-  type: 'link',
-  icon: CloudComputingIcon
-}, {
-  id: 'web-development',
-  href: '/catalog/subject/web-development',
-  trackingTarget: 'topnav_catalog_skill_web_development',
-  text: 'Web development',
-  type: 'link',
-  icon: WebDevelopmentIcon
-}, {
-  id: 'data-science',
-  href: '/catalog/subject/data-science',
-  trackingTarget: 'topnav_catalog_skill_data-science',
-  text: 'Data science',
-  type: 'link',
-  icon: DataScienceIcon
-}, {
-  id: 'web-design',
-  href: '/catalog/subject/web-design',
-  trackingTarget: 'topnav_catalog_skill_web-design',
-  text: 'Web design',
-  type: 'link',
-  icon: WebDesignIcon
-}, {
-  id: 'professional-skills',
-  href: '/catalog/subject/professional-skills',
-  trackingTarget: 'topnav_catalog_skill_professional-skills',
-  text: 'Professional skills',
-  type: 'link',
-  icon: GrowthIcon
-}, {
-  id: 'code-foundations',
-  href: '/catalog/subject/code-foundations',
-  trackingTarget: 'topnav_catalog_skill_code-foundations',
-  text: 'Code foundations',
-  type: 'link',
-  icon: ProgrammingBrowserIcon
-}];
+import { CareerPathsPanel, CertificationPathsPanel, CourseTopicsPanel, LiveLearningPanel, SkillPathsPanel } from "./NavPanels.js";
+import { ArtificialIntelligenceIcon, BookLibraryIcon, BriefcaseIcon, CIcon, CPlusIcon, CSharpIcon, CloudComputingIcon, CybersecurityIcon, DataEngineeringIcon, DataScienceIcon, GrowthIcon, HtmlCssIcon, JavaIcon, JavascriptIcon, OnlineClassStudentIcon, PhpIcon, ProfessionalCertificateIcon, ProgrammingBrowserIcon, PythonIcon, SqlIcon, StudyBookIcon, WebDesignIcon, WebDevelopmentIcon } from "@codecademy/gamut-icons";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/consts.tsx
+const getCertificationProviderLogoUrl = (fileName) => `https://static-assets.codecademy.com/assets/certification-provider-logos/catalog-dropdown/v2/${fileName}`;
+const CATALOG_NAV_SECTIONS = [
+	{
+		item: {
+			icon: StudyBookIcon,
+			text: "Course topics",
+			id: "course-topics",
+			type: "catalog-dropdown",
+			trackingTarget: "topnav_catalog_tab_course_topics"
+		},
+		panel: CourseTopicsPanel
+	},
+	{
+		item: {
+			icon: OnlineClassStudentIcon,
+			text: "Live learning",
+			id: "live-learning",
+			type: "catalog-dropdown",
+			trackingTarget: "topnav_catalog_tab_live_learning"
+		},
+		panel: LiveLearningPanel
+	},
+	{
+		item: {
+			icon: BookLibraryIcon,
+			text: "Skill paths",
+			id: "skill-paths",
+			type: "catalog-dropdown",
+			trackingTarget: "topnav_catalog_tab_skill_paths"
+		},
+		panel: SkillPathsPanel
+	},
+	{
+		item: {
+			icon: BriefcaseIcon,
+			text: "Career paths",
+			id: "career-paths",
+			type: "catalog-dropdown",
+			trackingTarget: "topnav_catalog_tab_career_paths"
+		},
+		panel: CareerPathsPanel
+	},
+	{
+		item: {
+			icon: ProfessionalCertificateIcon,
+			text: "Certification paths",
+			id: "certification-paths",
+			type: "catalog-dropdown",
+			trackingTarget: "topnav_catalog_tab_certification_paths"
+		},
+		panel: CertificationPathsPanel
+	}
+];
+const CERTIFICATION_PROVIDERS = [
+	{
+		name: "Microsoft",
+		logoUrl: getCertificationProviderLogoUrl("microsoft.svg"),
+		hubType: "subhub"
+	},
+	{
+		name: "CompTIA",
+		logoUrl: getCertificationProviderLogoUrl("comptia.svg"),
+		hubType: "subhub"
+	},
+	{
+		name: "ISC2",
+		logoUrl: getCertificationProviderLogoUrl("isc2.svg"),
+		hubType: "subhub"
+	},
+	{
+		name: "AWS",
+		logoUrl: getCertificationProviderLogoUrl("aws.svg"),
+		hubType: "subhub"
+	},
+	{
+		name: "Google",
+		logoUrl: getCertificationProviderLogoUrl("google.svg"),
+		hubType: "certification-prep"
+	},
+	{
+		name: "Cisco",
+		logoUrl: getCertificationProviderLogoUrl("cisco.svg"),
+		hubType: "certification-prep"
+	},
+	{
+		name: "IIBA",
+		logoUrl: getCertificationProviderLogoUrl("iiba.svg"),
+		hubType: "certification-prep"
+	},
+	{
+		name: "ISTQB",
+		logoUrl: getCertificationProviderLogoUrl("istqb.svg"),
+		hubType: "certification-prep"
+	},
+	{
+		name: "ISACA",
+		logoUrl: getCertificationProviderLogoUrl("isaca.svg"),
+		hubType: "certification-prep"
+	},
+	{
+		name: "Kubernetes",
+		logoUrl: getCertificationProviderLogoUrl("kubernetes.svg"),
+		hubType: "certification-prep"
+	},
+	{
+		name: "Oracle",
+		logoUrl: getCertificationProviderLogoUrl("oracle.svg"),
+		hubType: "certification-prep"
+	},
+	{
+		name: "Project Management Institute",
+		logoUrl: getCertificationProviderLogoUrl("pmi.svg"),
+		hubType: "certification-prep"
+	}
+];
+const popularLanguages = [
+	{
+		id: "python",
+		href: "/catalog/language/python",
+		trackingTarget: "topnav_catalog_skill_python",
+		text: "Python",
+		type: "link",
+		icon: PythonIcon
+	},
+	{
+		id: "javascript",
+		href: "/catalog/language/javascript",
+		trackingTarget: "topnav_catalog_skill_javascript",
+		text: "JavaScript",
+		type: "link",
+		icon: JavascriptIcon
+	},
+	{
+		id: "html-css",
+		href: "/catalog/language/html-css",
+		trackingTarget: "topnav_catalog_skill_html-css",
+		text: "HTML & CSS",
+		type: "link",
+		icon: HtmlCssIcon
+	},
+	{
+		id: "c-sharp",
+		href: "/catalog/language/c-sharp",
+		trackingTarget: "topnav_catalog_skill_c-sharp",
+		text: "C#",
+		type: "link",
+		icon: CSharpIcon
+	},
+	{
+		id: "c-plus-plus",
+		href: "/catalog/language/c-plus-plus",
+		trackingTarget: "topnav_catalog_skill_c-plus-plus",
+		text: "C++",
+		type: "link",
+		icon: CPlusIcon
+	},
+	{
+		id: "c",
+		href: "/catalog/language/c",
+		trackingTarget: "topnav_catalog_skill_c",
+		text: "C",
+		type: "link",
+		icon: CIcon
+	},
+	{
+		id: "php",
+		href: "/catalog/language/php",
+		trackingTarget: "topnav_catalog_skill_php",
+		text: "PHP",
+		type: "link",
+		icon: PhpIcon
+	},
+	{
+		id: "java",
+		href: "/catalog/language/java",
+		trackingTarget: "topnav_catalog_skill_java",
+		text: "Java",
+		type: "link",
+		icon: JavaIcon
+	},
+	{
+		id: "sql",
+		href: "/catalog/language/sql",
+		trackingTarget: "topnav_catalog_skill_sql",
+		text: "SQL",
+		type: "link",
+		icon: SqlIcon
+	}
+];
+const popularSubjects = [
+	{
+		id: "artificial-intelligence",
+		href: "/catalog/subject/artificial-intelligence",
+		trackingTarget: "topnav_catalog_skill_ai",
+		text: "AI",
+		type: "link",
+		icon: ArtificialIntelligenceIcon
+	},
+	{
+		id: "it",
+		href: "/catalog/subject/information-technology",
+		trackingTarget: "topnav_catalog_skill_it",
+		text: "IT",
+		type: "link",
+		icon: DataEngineeringIcon
+	},
+	{
+		id: "cybersecurity",
+		href: "/catalog/subject/cybersecurity",
+		trackingTarget: "topnav_catalog_skill_cybersecurity",
+		text: "Cybersecurity",
+		type: "link",
+		icon: CybersecurityIcon
+	},
+	{
+		id: "cloud-computing",
+		href: "/catalog/subject/cloud-computing",
+		trackingTarget: "topnav_catalog_skill_cloud-computing",
+		text: "Cloud computing",
+		type: "link",
+		icon: CloudComputingIcon
+	},
+	{
+		id: "web-development",
+		href: "/catalog/subject/web-development",
+		trackingTarget: "topnav_catalog_skill_web_development",
+		text: "Web development",
+		type: "link",
+		icon: WebDevelopmentIcon
+	},
+	{
+		id: "data-science",
+		href: "/catalog/subject/data-science",
+		trackingTarget: "topnav_catalog_skill_data-science",
+		text: "Data science",
+		type: "link",
+		icon: DataScienceIcon
+	},
+	{
+		id: "web-design",
+		href: "/catalog/subject/web-design",
+		trackingTarget: "topnav_catalog_skill_web-design",
+		text: "Web design",
+		type: "link",
+		icon: WebDesignIcon
+	},
+	{
+		id: "professional-skills",
+		href: "/catalog/subject/professional-skills",
+		trackingTarget: "topnav_catalog_skill_professional-skills",
+		text: "Professional skills",
+		type: "link",
+		icon: GrowthIcon
+	},
+	{
+		id: "code-foundations",
+		href: "/catalog/subject/code-foundations",
+		trackingTarget: "topnav_catalog_skill_code-foundations",
+		text: "Code foundations",
+		type: "link",
+		icon: ProgrammingBrowserIcon
+	}
+];
+
+//#endregion
+export { CATALOG_NAV_SECTIONS, CERTIFICATION_PROVIDERS, popularLanguages, popularSubjects };

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.cjs

@@ -0,0 +1,110 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_elements = require('../../shared/elements.cjs');
+const require_index = require('../AppHeaderProvider/index.cjs');
+const require_context = require('../../../GlobalHeader/context.cjs');
+const require_index$1 = require('../AppHeaderDropdownProvider/index.cjs');
+const require_index$2 = require('../AppHeaderNavButton/index.cjs');
+const require_index$3 = require('../AppHeaderSection/index.cjs');
+const require_consts = require('./consts.cjs');
+const require_MarketingBanner = require('./MarketingBanner.cjs');
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.tsx
+const StyledAnimatedMegaMenuDropdown = (0, _emotion_styled.default)(require_elements.AnimatedMegaMenuDropdown, { shouldForwardProp: (prop) => prop !== "narrowCatalogDropdownPosition" && prop !== "wideCatalogDropdownPosition" })`
+  top: 3.5rem;
+  left: ${({ narrowCatalogDropdownPosition }) => {
+	return narrowCatalogDropdownPosition;
+}};
+
+  @media (min-width: 1261px) {
+    left: ${({ wideCatalogDropdownPosition }) => {
+	return wideCatalogDropdownPosition;
+}};
+  }
+`;
+const AppHeaderCatalogDropdown = ({ action, item }) => {
+	const { text } = item;
+	const containerRef = (0, react.useRef)(null);
+	const buttonRef = (0, react.useRef)(null);
+	const dropdownRef = (0, react.useRef)(null);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const { lastOpenedDropdown, setLastOpenedDropdown } = require_index.useAppHeaderContext();
+	const { headerType } = require_context.useHeaderDisplayContext();
+	const { catalogDropdown } = require_context.DropdownPositions[headerType];
+	const narrowCatalogDropdownPosition = catalogDropdown.narrow;
+	const wideCatalogDropdownPosition = catalogDropdown.wide;
+	const animationFinished = () => {
+		if (isOpen && dropdownRef.current) dropdownRef.current.scrollTop = 0;
+	};
+	const focusButton = () => {
+		buttonRef?.current?.focus();
+	};
+	const handleOnClick = (event) => {
+		if (!isOpen) {
+			action(event, item);
+			if (setLastOpenedDropdown) setLastOpenedDropdown(text);
+		}
+		setIsOpen((prev) => !prev);
+	};
+	const handleClose = (0, react.useCallback)(() => {
+		setIsOpen(false);
+		focusButton();
+	}, []);
+	(0, react.useEffect)(() => {
+		if (lastOpenedDropdown !== text && isOpen) setIsOpen(false);
+	}, [lastOpenedDropdown]);
+	(0, react.useEffect)(() => {
+		function handleClickOutside(event) {
+			const container = containerRef?.current;
+			const button = buttonRef?.current;
+			if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) handleClose();
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("blur", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("blur", handleClickOutside);
+		};
+	}, [
+		containerRef,
+		handleClose,
+		isOpen
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.AppHeaderDropdownProvider, {
+		handleClose,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AppHeaderDropdownNavButton, {
+			buttonRef,
+			handleOnClick,
+			isOpen,
+			text
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAnimatedMegaMenuDropdown, {
+			isOpen,
+			narrowCatalogDropdownPosition,
+			wideCatalogDropdownPosition,
+			tabIndex: -1,
+			"data-testid": "catalog-menu-dropdown",
+			onAnimationComplete: animationFinished,
+			ref: dropdownRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_styles.ColorMode, {
+				mode: "light",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.AppHeaderSection, {
+					isOpen,
+					ref: containerRef,
+					navSections: require_consts.CATALOG_NAV_SECTIONS,
+					MarketingBanner: require_MarketingBanner.MarketingBanner,
+					handleClose: () => setIsOpen(false),
+					type: "catalog-dropdown",
+					isCoachingEnabled: item.isCoachingEnabled
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+exports.AppHeaderCatalogDropdown = AppHeaderCatalogDropdown;

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.d.cts

@@ -0,0 +1,8 @@
+import { AppHeaderAction, AppHeaderCatalogDropdownItem } from "../../shared/types.cjs";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.d.ts
+type AppHeaderCatalogDropdownProps = AppHeaderAction & {
+  item: AppHeaderCatalogDropdownItem;
+};
+//#endregion
+export { AppHeaderCatalogDropdownProps };

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

@@ -1,6 +1,10 @@
-import * as React from 'react';
-import { AppHeaderAction, AppHeaderCatalogDropdownItem } from '../../shared';
-export type AppHeaderCatalogDropdownProps = AppHeaderAction & {
-    item: AppHeaderCatalogDropdownItem;
+import { AppHeaderAction, AppHeaderCatalogDropdownItem } from "../../shared/types.js";
+import "../../shared/index.js";
+import "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.d.ts
+type AppHeaderCatalogDropdownProps = AppHeaderAction & {
+  item: AppHeaderCatalogDropdownItem;
 };
-export declare const AppHeaderCatalogDropdown: React.FC<AppHeaderCatalogDropdownProps>;
+//#endregion
+export { AppHeaderCatalogDropdownProps };