@codecademy/brand 5.2.0-alpha.f811da96e.0 → 5.3.0-alpha.3da6931a6.0

package/dist/AppBarDeprecated/styles/index.module.scss

@@ -1,5 +1,7 @@
-$appbar-gutter: 8px;
-$appbar-tab-width: 48px;
+@use "~@codecademy/gamut-styles/utils";
+
+$appbar-gutter: utils.px-rem(8px);
+$appbar-tab-width: utils.px-rem(48px);
 $appbar-z: 14;
 
 .wrapper {

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

@@ -1,9 +1,11 @@
-import { Anchor, Box } from '@codecademy/gamut';
+import { Anchor, Box, GridBox, Text } from '@codecademy/gamut';
 import React from 'react';
-import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { useGlobalHeaderDynamicDataContext, useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
 import { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';
 import { PanelLayout } from '../AppHeaderSection/PanelLayout';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkillTile } from '../AppHeaderSkillTile';
+import { coachingOfferingLinks } from './consts';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const makeCta = (id, href, text, trackingTarget) => ({
   id,
   href,
@@ -18,17 +20,22 @@ export const BootcampsPanel = () => {
   const {
     globalHeaderItemClick
   } = useGlobalHeaderItemClick();
+  const {
+    globalHeaderDynamicData
+  } = useGlobalHeaderDynamicDataContext();
   const privateBootcampFormUrl = 'https://forms.office.com/r/qqjDwRmkqA';
+  const upcomingBootcamps = globalHeaderDynamicData?.liveCoursesDropdown?.upcomingBootcamps ?? [];
   const description = /*#__PURE__*/_jsxs(Box, {
     mb: 8,
-    children: ["Join live virtual bootcamps that span multiple weeks and help you build real-world, in-demand skills. Led by experts, each bootcamp includes instructor support, community, and comes with Codecademy Pro access.", /*#__PURE__*/_jsx("br", {}), "Looking for a private bootcamp?", ' ', /*#__PURE__*/_jsx(Anchor, {
+    children: ["Join live virtual bootcamps that span multiple weeks and help you build real-world, in-demand skills. Led by experts, each bootcamp includes instructor support, community, professional mentorship\u2014and comes with Codecademy Pro access.", /*#__PURE__*/_jsx("br", {}), "Looking for a private bootcamp?", ' ', /*#__PURE__*/_jsx(Anchor, {
       tabIndex: tabIndex,
       href: privateBootcampFormUrl,
       onClick: event => globalHeaderItemClick(event, {
         type: 'link',
         href: privateBootcampFormUrl,
         text: 'Get in touch',
-        id: 'private-bootcamp-contact'
+        id: 'private-bootcamp-contact',
+        trackingTarget: 'topnav_live_courses_private_bootcamp_contact'
       }),
       children: "Get in touch"
     })]
@@ -36,16 +43,63 @@ export const BootcampsPanel = () => {
   return /*#__PURE__*/_jsx(PanelLayout, {
     heading: "Bootcamps",
     description: description,
-    linkItem: makeCta('bootcamps', '/bootcamps', 'Explore Bootcamps', 'topnav_live_courses_bootcamps')
+    linkItem: makeCta('bootcamps', '/bootcamps', 'Explore all Bootcamps', 'topnav_live_courses_bootcamps'),
+    children: upcomingBootcamps.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "p-large",
+        fontWeight: 700,
+        as: "h3",
+        children: "Upcoming bootcamps"
+      }), /*#__PURE__*/_jsx(GridBox, {
+        gridTemplateColumns: {
+          _: '1fr',
+          xs: '1fr 1fr'
+        },
+        gap: 8,
+        pl: 0,
+        as: "ul",
+        listStyle: "none",
+        mb: 24,
+        children: upcomingBootcamps.map(bootcamp => /*#__PURE__*/_jsx("li", {
+          children: /*#__PURE__*/_jsx(SkillTile, {
+            item: {
+              ...bootcamp,
+              type: 'link'
+            }
+          })
+        }, bootcamp.id))
+      })]
+    })
   });
 };
 export const CoachingPanel = () => {
-  return /*#__PURE__*/_jsx(PanelLayout, {
+  return /*#__PURE__*/_jsxs(PanelLayout, {
     heading: "Coaching",
     description: /*#__PURE__*/_jsx(Box, {
       mb: 8,
       children: "Get personalized mentorship from expert coaches to accelerate your career journey. Whether you're preparing for technical interviews, exploring career options, or seeking guidance, 1:1 coaching gives you tailored support to reach your goals."
     }),
-    linkItem: makeCta('coaching', '/coaching', 'Explore Coaching', 'topnav_live_courses_coaching')
+    linkItem: makeCta('coaching', '/coaching', 'Explore Coaching', 'topnav_live_courses_coaching'),
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "p-large",
+      fontWeight: 700,
+      as: "h3",
+      children: "Our offerings"
+    }), /*#__PURE__*/_jsx(GridBox, {
+      gridTemplateColumns: {
+        _: '1fr',
+        xs: '1fr 1fr'
+      },
+      gap: 8,
+      pl: 0,
+      as: "ul",
+      listStyle: "none",
+      mb: 24,
+      children: coachingOfferingLinks.map(offering => /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(SkillTile, {
+          item: offering
+        })
+      }, offering.id))
+    })]
   });
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AppHeaderLiveCoursesDropdownItem } from '../../shared';
+export declare const coachingOfferingLinks: import("../../shared").AppHeaderLinkItem[];
 export type NavSectionConfig = {
     item: AppHeaderLiveCoursesDropdownItem;
     panel: React.ComponentType<{

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

@@ -1,5 +1,7 @@
 import { CertificateIcon, ObjectiveIcon } from '@codecademy/gamut-icons';
+import { getCoachingOfferingNavLinks } from '../../../Coaching';
 import { BootcampsPanel, CoachingPanel } from './NavPanels';
+export const coachingOfferingLinks = getCoachingOfferingNavLinks();
 export const LIVE_COURSES_NAV_SECTIONS = [{
   item: {
     icon: CertificateIcon,

package/dist/Coaching/coachingOfferingIcons.d.ts

@@ -0,0 +1,4 @@
+import { type GamutIconProps } from '@codecademy/gamut-icons';
+import type React from 'react';
+import type { CoachingOfferingIcon } from './coachingOfferings';
+export declare const COACHING_OFFERING_ICONS: Record<CoachingOfferingIcon, React.ComponentType<GamutIconProps>>;

package/dist/Coaching/coachingOfferingIcons.js

@@ -0,0 +1,7 @@
+import { BookBookmarkIcon, HammerWrenchIcon, ProgrammingTeamChatIcon, QuizIcon } from '@codecademy/gamut-icons';
+export const COACHING_OFFERING_ICONS = {
+  career: ProgrammingTeamChatIcon,
+  technical: HammerWrenchIcon,
+  behavioral: QuizIcon,
+  tutoring: BookBookmarkIcon
+};

package/dist/Coaching/coachingOfferings.d.ts

@@ -0,0 +1,18 @@
+export declare const COACHING_OFFERINGS: readonly [{
+    readonly title: "Career guidance and mentorship";
+    readonly icon: "career";
+    readonly bullets: readonly ["Clarify your career goals with a dedicated coach.", "Portfolio and resume reviews.", "Explore growth opportunities with guidance tailored to where you are."];
+}, {
+    readonly title: "Technical mock interview";
+    readonly icon: "technical";
+    readonly bullets: readonly ["Practice coding and system design questions.", "Personalized feedback on your problem-solving approach and delivery.", "Build confidence for your next technical interview."];
+}, {
+    readonly title: "Behavioral mock interview";
+    readonly icon: "behavioral";
+    readonly bullets: readonly ["Practice with an expert coach until you are interview-ready.", "Learn to structure answers and tell your story authentically.", "Personalized feedback to sharpen your delivery."];
+}, {
+    readonly title: "Tutoring";
+    readonly icon: "tutoring";
+    readonly bullets: readonly ["1:1 guidance on new or existing technical skills with experts in your target field.", "Complex concepts broken down at your pace.", "Hands-on practice with real-time support."];
+}];
+export type CoachingOfferingIcon = (typeof COACHING_OFFERINGS)[number]['icon'];

package/dist/Coaching/coachingOfferings.js

@@ -0,0 +1,17 @@
+export const COACHING_OFFERINGS = [{
+  title: 'Career guidance and mentorship',
+  icon: 'career',
+  bullets: ['Clarify your career goals with a dedicated coach.', 'Portfolio and resume reviews.', 'Explore growth opportunities with guidance tailored to where you are.']
+}, {
+  title: 'Technical mock interview',
+  icon: 'technical',
+  bullets: ['Practice coding and system design questions.', 'Personalized feedback on your problem-solving approach and delivery.', 'Build confidence for your next technical interview.']
+}, {
+  title: 'Behavioral mock interview',
+  icon: 'behavioral',
+  bullets: ['Practice with an expert coach until you are interview-ready.', 'Learn to structure answers and tell your story authentically.', 'Personalized feedback to sharpen your delivery.']
+}, {
+  title: 'Tutoring',
+  icon: 'tutoring',
+  bullets: ['1:1 guidance on new or existing technical skills with experts in your target field.', 'Complex concepts broken down at your pace.', 'Hands-on practice with real-time support.']
+}];

package/dist/Coaching/getCoachingOfferingNavLinks.d.ts

@@ -0,0 +1,3 @@
+import type { AppHeaderLinkItem } from '../AppHeader/shared/types';
+export declare const COACHING_OFFERING_NAV_LIMIT = 4;
+export declare const getCoachingOfferingNavLinks: () => AppHeaderLinkItem[];

package/dist/Coaching/getCoachingOfferingNavLinks.js

@@ -0,0 +1,14 @@
+import { COACHING_OFFERING_ICONS } from './coachingOfferingIcons';
+import { COACHING_OFFERINGS } from './coachingOfferings';
+export const COACHING_OFFERING_NAV_LIMIT = 4;
+export const getCoachingOfferingNavLinks = () => COACHING_OFFERINGS.slice(0, COACHING_OFFERING_NAV_LIMIT).map(({
+  title,
+  icon
+}) => ({
+  id: icon,
+  href: '/coaching',
+  text: title,
+  type: 'link',
+  icon: COACHING_OFFERING_ICONS[icon],
+  trackingTarget: `topnav_live_courses_coaching_${icon}`
+}));

package/dist/Coaching/getCoachingOfferingNavLinks.test.js

@@ -0,0 +1,10 @@
+import { COACHING_OFFERINGS } from './coachingOfferings';
+import { COACHING_OFFERING_NAV_LIMIT, getCoachingOfferingNavLinks } from './getCoachingOfferingNavLinks';
+describe('getCoachingOfferingNavLinks', () => {
+  it('returns at most four nav links', () => {
+    expect(getCoachingOfferingNavLinks().length).toBeLessThanOrEqual(COACHING_OFFERING_NAV_LIMIT);
+  });
+  it('returns the first offerings up to the nav limit', () => {
+    expect(getCoachingOfferingNavLinks().length).toBe(Math.min(COACHING_OFFERINGS.length, COACHING_OFFERING_NAV_LIMIT));
+  });
+});

package/dist/Coaching/index.d.ts

@@ -0,0 +1,3 @@
+export * from './coachingOfferings';
+export * from './coachingOfferingIcons';
+export * from './getCoachingOfferingNavLinks';

package/dist/Coaching/index.js

@@ -0,0 +1,3 @@
+export * from './coachingOfferings';
+export * from './coachingOfferingIcons';
+export * from './getCoachingOfferingNavLinks';

package/dist/GlobalHeader/types.d.ts

@@ -98,6 +98,15 @@ export type PromotedPath = {
     difficulty: CourseDifficulty | null;
     durationHours: number | null;
 };
+export type UpcomingLiveCoursesNavItem = {
+    id: string;
+    href: string;
+    text: string;
+    trackingTarget: string;
+};
+export type LiveCoursesDropdownData = {
+    upcomingBootcamps: UpcomingLiveCoursesNavItem[];
+};
 export type GlobalHeaderDynamicData = {
     catalogDropdown: {
         banner: {
@@ -116,5 +125,6 @@ export type GlobalHeaderDynamicData = {
             totalCertificationPathCount: number;
         };
     };
+    liveCoursesDropdown: LiveCoursesDropdownData;
 };
 export {};

package/dist/Loading/styles.module.scss

@@ -1,3 +1,5 @@
+@use "~@codecademy/gamut-styles/utils";
+
 $c-offset: 169;
 $inner-offset: 287;
 $outer-offset: 361;
@@ -74,11 +76,11 @@ $animation-duration: 3s;
 
 .fullPage {
   width: 100%;
-  height: calc(100vh - 4rem);
+  height: viewport-height(-(utils.$height-header));
 }
 
 .loading {
-  width: 120px;
+  width: utils.px-rem(120px);
 }
 
 .underline {

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export * from './CareerPathCard';
 export * from './Carousel';
 export * from './CertificationPathCard';
 export * from './CoachingSessionCard';
+export * from './Coaching';
 export * from './CommunityEventCard';
 export * from './CommunityEventToast';
 export * from './ContentGroupBaseCard';

package/dist/index.js

@@ -22,6 +22,7 @@ export * from './CareerPathCard';
 export * from './Carousel';
 export * from './CertificationPathCard';
 export * from './CoachingSessionCard';
+export * from './Coaching';
 export * from './CommunityEventCard';
 export * from './CommunityEventToast';
 export * from './ContentGroupBaseCard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecademy/brand",
-  "version": "5.2.0-alpha.f811da96e.0",
+  "version": "5.3.0-alpha.3da6931a6.0",
   "description": "Brand component library for Codecademy",
   "license": "MIT",
   "repository": "git@github.com:codecademy-engineering/mono.git",