@codecademy/brand 5.2.0-alpha.f811da96e.0 → 5.3.0-alpha.50a688319.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/AppHeaderWorkshopCard/index.d.ts

@@ -0,0 +1,6 @@
+import type { UpcomingWorkshopNavItem } from '../../../../GlobalHeader/types';
+type AppHeaderWorkshopCardProps = {
+    workshop: UpcomingWorkshopNavItem;
+};
+export declare const AppHeaderWorkshopCard: React.FC<AppHeaderWorkshopCardProps>;
+export {};

package/dist/AppHeader/AppHeaderElements/AppHeaderLiveCoursesDropdown/AppHeaderWorkshopCard/index.js

@@ -0,0 +1,135 @@
+import _styled from "@emotion/styled/base";
+import { Anchor, Box, Card, FlexBox, Text } from '@codecademy/gamut';
+import { CalendarIcon, OptimizationClockIcon } from '@codecademy/gamut-icons';
+import { GridDense } from '@codecademy/gamut-patterns';
+import { useGlobalHeaderItemClick } from '../../../../GlobalHeader/context';
+import { Divider } from '../../../../InstructorCard';
+import { useAppHeaderDropdownContext } from '../../AppHeaderDropdownProvider';
+import { useAppHeaderSectionContext } from '../../AppHeaderSection/AppHeaderSectionContext';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "e1aahqt50",
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGl2ZUNvdXJzZXNEcm9wZG93bi9BcHBIZWFkZXJXb3Jrc2hvcENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVcrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckxpdmVDb3Vyc2VzRHJvcGRvd24vQXBwSGVhZGVyV29ya3Nob3BDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2FsZW5kYXJJY29uLCBPcHRpbWl6YXRpb25DbG9ja0ljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBHcmlkRGVuc2UgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1wYXR0ZXJucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB0eXBlIHsgVXBjb21pbmdXb3Jrc2hvcE5hdkl0ZW0gfSBmcm9tICcuLi8uLi8uLi8uLi9HbG9iYWxIZWFkZXIvdHlwZXMnO1xuaW1wb3J0IHsgRGl2aWRlciB9IGZyb20gJy4uLy4uLy4uLy4uL0luc3RydWN0b3JDYXJkJztcbmltcG9ydCB7IHVzZUFwcEhlYWRlckRyb3Bkb3duQ29udGV4dCB9IGZyb20gJy4uLy4uL0FwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXInO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyU2VjdGlvbkNvbnRleHQgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXJTZWN0aW9uL0FwcEhlYWRlclNlY3Rpb25Db250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLnByaW1hcnl9O1xuICAgIGJvcmRlci1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gIH1cbmA7XG5cbnR5cGUgSW5mb1Jvd1Byb3BzID0ge1xuICBpY29uOiBSZWFjdC5SZWFjdE5vZGU7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG59O1xuXG5jb25zdCBJbmZvUm93OiBSZWFjdC5GQzxJbmZvUm93UHJvcHM+ID0gKHsgaWNvbiwgY2hpbGRyZW4gfSkgPT4gKFxuICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZ2FwPXs4fT5cbiAgICB7aWNvbn1cbiAgICA8VGV4dCBmb250U2l6ZT17MTR9IGxpbmVIZWlnaHQ9XCJiYXNlXCIgY29sb3I9XCJ0ZXh0XCI+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9UZXh0PlxuICA8L0ZsZXhCb3g+XG4pO1xuXG50eXBlIEFwcEhlYWRlcldvcmtzaG9wQ2FyZFByb3BzID0ge1xuICB3b3Jrc2hvcDogVXBjb21pbmdXb3Jrc2hvcE5hdkl0ZW07XG59O1xuXG5leHBvcnQgY29uc3QgQXBwSGVhZGVyV29ya3Nob3BDYXJkOiBSZWFjdC5GQzxBcHBIZWFkZXJXb3Jrc2hvcENhcmRQcm9wcz4gPSAoe1xuICB3b3Jrc2hvcCxcbn0pID0+IHtcbiAgY29uc3QgeyBnbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSA9IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljaygpO1xuICBjb25zdCB7IGhhbmRsZUNsb3NlIH0gPSB1c2VBcHBIZWFkZXJEcm9wZG93bkNvbnRleHQoKTtcbiAgY29uc3QgeyB0YWJJbmRleCB9ID0gdXNlQXBwSGVhZGVyU2VjdGlvbkNvbnRleHQoKTtcblxuICBjb25zdCBsaW5rSXRlbSA9IHtcbiAgICB0eXBlOiAnbGluaycgYXMgY29uc3QsXG4gICAgaWQ6IHdvcmtzaG9wLmlkLFxuICAgIGhyZWY6IHdvcmtzaG9wLmhyZWYsXG4gICAgdGV4dDogd29ya3Nob3AudGl0bGUsXG4gICAgdHJhY2tpbmdUYXJnZXQ6IHdvcmtzaG9wLnRyYWNraW5nVGFyZ2V0LFxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPEFuY2hvclxuICAgICAgICBocmVmPXt3b3Jrc2hvcC5ocmVmfVxuICAgICAgICB2YXJpYW50PVwiaW50ZXJmYWNlXCJcbiAgICAgICAgZGlzcGxheT1cImJsb2NrXCJcbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQ8SFRNTEFuY2hvckVsZW1lbnQsIE1vdXNlRXZlbnQ+KSA9PiB7XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCBsaW5rSXRlbSk7XG4gICAgICAgICAgaGFuZGxlQ2xvc2UoKTtcbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJsZ1wiXG4gICAgICAgICAgYm9yZGVyPXsxfVxuICAgICAgICAgIGJvcmRlckNvbG9yPVwiYm9yZGVyLXRlcnRpYXJ5XCJcbiAgICAgICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICAgICAgYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIlxuICAgICAgICAgIGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIlxuICAgICAgICAgIHB4PXsxNn1cbiAgICAgICAgICBweT17MjR9XG4gICAgICAgICAgbWluSGVpZ2h0PXsyMTl9XG4gICAgICAgICAgaGVpZ2h0PVwiMTAwJVwiXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgdmFyaWFudD1cInAtbGFyZ2VcIlxuICAgICAgICAgICAgZm9udFdlaWdodD17NzAwfVxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgICAgICAgdHJ1bmNhdGU9XCJlbGxpcHNpc1wiXG4gICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsyfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHt3b3Jrc2hvcC50aXRsZX1cbiAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgPEJveCB3aWR0aD1cIjEwMCVcIj5cbiAgICAgICAgICAgIDxHcmlkRGVuc2UgaGVpZ2h0PXs0fSAvPlxuICAgICAgICAgIDwvQm94PlxuICAgICAgICAgIDxGbGV4Qm94IGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIiBnYXA9ezR9IHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICAgICAgPFRleHQgZm9udFNpemU9ezE0fSBmb250V2VpZ2h0PVwiYm9sZFwiIGxpbmVIZWlnaHQ9XCJiYXNlXCI+XG4gICAgICAgICAgICAgIHt3b3Jrc2hvcC5pbnN0cnVjdG9yTmFtZX1cbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgIGZvbnRTaXplPXsxNH1cbiAgICAgICAgICAgICAgbGluZUhlaWdodD1cImJhc2VcIlxuICAgICAgICAgICAgICBjb2xvcj1cInRleHQtc2Vjb25kYXJ5XCJcbiAgICAgICAgICAgICAgdHJ1bmNhdGU9XCJlbGxpcHNpc1wiXG4gICAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezF9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHt3b3Jrc2hvcC5pbnN0cnVjdG9yVGl0bGV9XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICAgIDxGbGV4Qm94XG4gICAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICAgIGFsaWduU2VsZj1cInN0cmV0Y2hcIlxuICAgICAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgICAgIG10PXs0fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHt3b3Jrc2hvcC5uZXh0Q29ob3J0U3RhcnREYXRlID8gKFxuICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgIDxEaXZpZGVyIC8+XG4gICAgICAgICAgICAgICAgPEluZm9Sb3cgaWNvbj17PENhbGVuZGFySWNvbiBzaXplPXsxNn0gYXJpYS1oaWRkZW4gLz59PlxuICAgICAgICAgICAgICAgICAgTmV4dCBjb2hvcnQ6IG9ueycgJ31cbiAgICAgICAgICAgICAgICAgIDxUZXh0IGFzPVwic3BhblwiIGZvbnRXZWlnaHQ9XCJib2xkXCI+XG4gICAgICAgICAgICAgICAgICAgIHt3b3Jrc2hvcC5uZXh0Q29ob3J0U3RhcnREYXRlfVxuICAgICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICAgIDwvSW5mb1Jvdz5cbiAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIHt3b3Jrc2hvcC5kdXJhdGlvbkxhYmVsID8gKFxuICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgIDxEaXZpZGVyIC8+XG4gICAgICAgICAgICAgICAgPEluZm9Sb3cgaWNvbj17PE9wdGltaXphdGlvbkNsb2NrSWNvbiBzaXplPXsxNn0gYXJpYS1oaWRkZW4gLz59PlxuICAgICAgICAgICAgICAgICAgPFRleHQgYXM9XCJzcGFuXCIgZm9udFdlaWdodD1cImJvbGRcIj5cbiAgICAgICAgICAgICAgICAgICAge3dvcmtzaG9wLmR1cmF0aW9uTGFiZWx9XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+eycgJ31cbiAgICAgICAgICAgICAgICAgIGxvbmdcbiAgICAgICAgICAgICAgICA8L0luZm9Sb3c+XG4gICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgKSA6IG51bGx9XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8L1N0eWxlZENhcmQ+XG4gICAgICA8L0FuY2hvcj5cbiAgICA8L2xpPlxuICApO1xufTtcbiJdfQ== */"));
+const InfoRow = ({
+  icon,
+  children
+}) => /*#__PURE__*/_jsxs(FlexBox, {
+  alignItems: "center",
+  gap: 8,
+  children: [icon, /*#__PURE__*/_jsx(Text, {
+    fontSize: 14,
+    lineHeight: "base",
+    color: "text",
+    children: children
+  })]
+});
+export const AppHeaderWorkshopCard = ({
+  workshop
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const {
+    handleClose
+  } = useAppHeaderDropdownContext();
+  const {
+    tabIndex
+  } = useAppHeaderSectionContext();
+  const linkItem = {
+    type: 'link',
+    id: workshop.id,
+    href: workshop.href,
+    text: workshop.title,
+    trackingTarget: workshop.trackingTarget
+  };
+  return /*#__PURE__*/_jsx("li", {
+    children: /*#__PURE__*/_jsx(Anchor, {
+      href: workshop.href,
+      variant: "interface",
+      display: "block",
+      tabIndex: tabIndex,
+      onClick: event => {
+        globalHeaderItemClick(event, linkItem);
+        handleClose();
+      },
+      children: /*#__PURE__*/_jsxs(StyledCard, {
+        borderRadius: "lg",
+        border: 1,
+        borderColor: "border-tertiary",
+        display: "flex",
+        alignItems: "flex-start",
+        flexDirection: "column",
+        px: 16,
+        py: 24,
+        minHeight: 219,
+        height: "100%",
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "p-large",
+          fontWeight: 700,
+          as: "h3",
+          width: "100%",
+          truncate: "ellipsis",
+          truncateLines: 2,
+          children: workshop.title
+        }), /*#__PURE__*/_jsx(Box, {
+          width: "100%",
+          children: /*#__PURE__*/_jsx(GridDense, {
+            height: 4
+          })
+        }), /*#__PURE__*/_jsxs(FlexBox, {
+          flexDirection: "column",
+          gap: 4,
+          width: "100%",
+          children: [/*#__PURE__*/_jsx(Text, {
+            fontSize: 14,
+            fontWeight: "bold",
+            lineHeight: "base",
+            children: workshop.instructorName
+          }), /*#__PURE__*/_jsx(Text, {
+            fontSize: 14,
+            lineHeight: "base",
+            color: "text-secondary",
+            truncate: "ellipsis",
+            truncateLines: 1,
+            children: workshop.instructorTitle
+          })]
+        }), /*#__PURE__*/_jsxs(FlexBox, {
+          flexDirection: "column",
+          alignSelf: "stretch",
+          width: "100%",
+          mt: 4,
+          children: [workshop.nextCohortStartDate ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(InfoRow, {
+              icon: /*#__PURE__*/_jsx(CalendarIcon, {
+                size: 16,
+                "aria-hidden": true
+              }),
+              children: ["Next cohort: on", ' ', /*#__PURE__*/_jsx(Text, {
+                as: "span",
+                fontWeight: "bold",
+                children: workshop.nextCohortStartDate
+              })]
+            })]
+          }) : null, workshop.durationLabel ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(InfoRow, {
+              icon: /*#__PURE__*/_jsx(OptimizationClockIcon, {
+                size: 16,
+                "aria-hidden": true
+              }),
+              children: [/*#__PURE__*/_jsx(Text, {
+                as: "span",
+                fontWeight: "bold",
+                children: workshop.durationLabel
+              }), ' ', "long"]
+            })]
+          }) : null]
+        })]
+      })
+    })
+  });
+};

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

@@ -3,5 +3,6 @@ type PanelProps = {
     tabIndex?: number;
 };
 export declare const BootcampsPanel: React.FC<PanelProps>;
+export declare const WorkshopsPanel: React.FC<PanelProps>;
 export declare const CoachingPanel: React.FC<PanelProps>;
 export {};

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 { AppHeaderWorkshopCard } from './AppHeaderWorkshopCard';
+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,7 +43,69 @@ 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 WorkshopsPanel = () => {
+  const {
+    globalHeaderDynamicData
+  } = useGlobalHeaderDynamicDataContext();
+  const upcomingWorkshops = globalHeaderDynamicData?.liveCoursesDropdown?.upcomingWorkshops ?? [];
+  const description = /*#__PURE__*/_jsx(Box, {
+    mb: 8,
+    children: "Join live, interactive workshops designed to build practical skills in a short time. Led by experts, each session includes hands-on learning, real-time guidance, and community interaction to help you apply what you learn instantly."
+  });
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Workshops",
+    description: description,
+    linkItem: makeCta('workshops', '/bootcamps#upcoming-workshops', 'Explore Workshops', 'topnav_live_courses_workshops'),
+    children: upcomingWorkshops.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "p-large",
+        fontWeight: 700,
+        as: "h3",
+        children: "Upcoming workshops"
+      }), /*#__PURE__*/_jsx(GridBox, {
+        gridTemplateColumns: {
+          _: '1fr',
+          xs: '1fr 1fr'
+        },
+        gap: 24,
+        pl: 0,
+        as: "ul",
+        listStyle: "none",
+        mb: 24,
+        children: upcomingWorkshops.map(workshop => /*#__PURE__*/_jsx(AppHeaderWorkshopCard, {
+          workshop: workshop
+        }, workshop.id))
+      })]
+    })
   });
 };
 export const CoachingPanel = () => {

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

@@ -1,5 +1,5 @@
-import { CertificateIcon, ObjectiveIcon } from '@codecademy/gamut-icons';
-import { BootcampsPanel, CoachingPanel } from './NavPanels';
+import { BadgeIcon, CertificateIcon, ObjectiveIcon } from '@codecademy/gamut-icons';
+import { BootcampsPanel, CoachingPanel, WorkshopsPanel } from './NavPanels';
 export const LIVE_COURSES_NAV_SECTIONS = [{
   item: {
     icon: CertificateIcon,
@@ -9,6 +9,15 @@ export const LIVE_COURSES_NAV_SECTIONS = [{
     trackingTarget: 'topnav_live_courses_tab_bootcamps'
   },
   panel: BootcampsPanel
+}, {
+  item: {
+    icon: BadgeIcon,
+    text: 'Workshops',
+    id: 'workshops',
+    type: 'live-courses-dropdown',
+    trackingTarget: 'topnav_live_courses_tab_workshops'
+  },
+  panel: WorkshopsPanel
 }, {
   item: {
     icon: ObjectiveIcon,

package/dist/GlobalHeader/types.d.ts

@@ -98,6 +98,26 @@ export type PromotedPath = {
     difficulty: CourseDifficulty | null;
     durationHours: number | null;
 };
+export type UpcomingLiveCoursesNavItem = {
+    id: string;
+    href: string;
+    text: string;
+    trackingTarget: string;
+};
+export type UpcomingWorkshopNavItem = {
+    id: string;
+    href: string;
+    trackingTarget: string;
+    title: string;
+    instructorName: string;
+    instructorTitle: string;
+    nextCohortStartDate?: string;
+    durationLabel?: string;
+};
+export type LiveCoursesDropdownData = {
+    upcomingBootcamps: UpcomingLiveCoursesNavItem[];
+    upcomingWorkshops: UpcomingWorkshopNavItem[];
+};
 export type GlobalHeaderDynamicData = {
     catalogDropdown: {
         banner: {
@@ -116,5 +136,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/package.json

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