@codecademy/brand 5.3.0-alpha.b6c189f90.0 → 5.3.0-alpha.f563099c4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,5 @@ type PanelProps = {
3
3
  tabIndex?: number;
4
4
  };
5
5
  export declare const BootcampsPanel: React.FC<PanelProps>;
6
- export declare const WorkshopsPanel: React.FC<PanelProps>;
7
6
  export declare const CoachingPanel: React.FC<PanelProps>;
8
7
  export {};
@@ -4,7 +4,6 @@ import { useGlobalHeaderDynamicDataContext, useGlobalHeaderItemClick } from '../
4
4
  import { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';
5
5
  import { PanelLayout } from '../AppHeaderSection/PanelLayout';
6
6
  import { SkillTile } from '../AppHeaderSkillTile';
7
- import { AppHeaderWorkshopCard } from './AppHeaderWorkshopCard';
8
7
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
9
8
  const makeCta = (id, href, text, trackingTarget) => ({
10
9
  id,
@@ -72,42 +71,6 @@ export const BootcampsPanel = () => {
72
71
  })
73
72
  });
74
73
  };
75
- export const WorkshopsPanel = () => {
76
- const {
77
- globalHeaderDynamicData
78
- } = useGlobalHeaderDynamicDataContext();
79
- const upcomingWorkshops = globalHeaderDynamicData?.liveCoursesDropdown?.upcomingWorkshops ?? [];
80
- const description = /*#__PURE__*/_jsx(Box, {
81
- mb: 8,
82
- 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."
83
- });
84
- return /*#__PURE__*/_jsx(PanelLayout, {
85
- heading: "Workshops",
86
- description: description,
87
- linkItem: makeCta('workshops', '/bootcamps#upcoming-workshops', 'Explore Workshops', 'topnav_live_courses_workshops'),
88
- children: upcomingWorkshops.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
89
- children: [/*#__PURE__*/_jsx(Text, {
90
- variant: "p-large",
91
- fontWeight: 700,
92
- as: "h3",
93
- children: "Upcoming workshops"
94
- }), /*#__PURE__*/_jsx(GridBox, {
95
- gridTemplateColumns: {
96
- _: '1fr',
97
- xs: '1fr 1fr'
98
- },
99
- gap: 24,
100
- pl: 0,
101
- as: "ul",
102
- listStyle: "none",
103
- mb: 24,
104
- children: upcomingWorkshops.map(workshop => /*#__PURE__*/_jsx(AppHeaderWorkshopCard, {
105
- workshop: workshop
106
- }, workshop.id))
107
- })]
108
- })
109
- });
110
- };
111
74
  export const CoachingPanel = () => {
112
75
  return /*#__PURE__*/_jsx(PanelLayout, {
113
76
  heading: "Coaching",
@@ -1,5 +1,5 @@
1
- import { BadgeIcon, CertificateIcon, ObjectiveIcon } from '@codecademy/gamut-icons';
2
- import { BootcampsPanel, CoachingPanel, WorkshopsPanel } from './NavPanels';
1
+ import { CertificateIcon, ObjectiveIcon } from '@codecademy/gamut-icons';
2
+ import { BootcampsPanel, CoachingPanel } from './NavPanels';
3
3
  export const LIVE_COURSES_NAV_SECTIONS = [{
4
4
  item: {
5
5
  icon: CertificateIcon,
@@ -9,15 +9,6 @@ export const LIVE_COURSES_NAV_SECTIONS = [{
9
9
  trackingTarget: 'topnav_live_courses_tab_bootcamps'
10
10
  },
11
11
  panel: BootcampsPanel
12
- }, {
13
- item: {
14
- icon: BadgeIcon,
15
- text: 'Workshops',
16
- id: 'workshops',
17
- type: 'live-courses-dropdown',
18
- trackingTarget: 'topnav_live_courses_tab_workshops'
19
- },
20
- panel: WorkshopsPanel
21
12
  }, {
22
13
  item: {
23
14
  icon: ObjectiveIcon,
@@ -104,19 +104,8 @@ export type UpcomingLiveCoursesNavItem = {
104
104
  text: string;
105
105
  trackingTarget: string;
106
106
  };
107
- export type UpcomingWorkshopNavItem = {
108
- id: string;
109
- href: string;
110
- trackingTarget: string;
111
- title: string;
112
- instructorName: string;
113
- instructorTitle: string;
114
- nextCohortStartDate?: string;
115
- durationLabel?: string;
116
- };
117
107
  export type LiveCoursesDropdownData = {
118
108
  upcomingBootcamps: UpcomingLiveCoursesNavItem[];
119
- upcomingWorkshops: UpcomingWorkshopNavItem[];
120
109
  };
121
110
  export type GlobalHeaderDynamicData = {
122
111
  catalogDropdown: {
@@ -1,10 +1,10 @@
1
- import { colors } from '@codecademy/gamut-styles';
1
+ import { theme } from '@codecademy/gamut-styles';
2
2
  import * as React from 'react';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
4
  export const ProLabelCutout = ({
5
5
  ariaLabel = 'Pro',
6
- backgroundColor = colors.navy,
7
- cutoutColor = colors.white,
6
+ backgroundColor = theme.colors.navy,
7
+ cutoutColor = theme.colors.white,
8
8
  width = 30
9
9
  }) => /*#__PURE__*/_jsxs("svg", {
10
10
  width: width,
@@ -1,9 +1,9 @@
1
- import { colors } from '@codecademy/gamut-styles';
1
+ import { theme } from '@codecademy/gamut-styles';
2
2
  import * as React from 'react';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
4
  export const ProLabelCutoutTransparent = ({
5
5
  ariaLabel = 'Pro',
6
- backgroundColor = colors.navy,
6
+ backgroundColor = theme.colors.navy,
7
7
  width = 30
8
8
  }) => /*#__PURE__*/_jsxs("svg", {
9
9
  width: width,
@@ -1,15 +1,15 @@
1
- import { colors } from '@codecademy/gamut-styles';
1
+ import { Colors } from '@codecademy/gamut-styles';
2
2
  import * as React from 'react';
3
3
  type BaseProps = {
4
4
  ariaLabel?: string;
5
- backgroundColor?: keyof typeof colors;
5
+ backgroundColor?: Colors;
6
6
  width?: number;
7
7
  };
8
8
  export type ProLabelProps = (BaseProps & {
9
9
  variant: 'transparent';
10
10
  }) | (BaseProps & {
11
11
  variant: 'cutout';
12
- cutoutColor?: keyof typeof colors;
12
+ cutoutColor?: Colors;
13
13
  });
14
14
  export declare const ProLabel: React.FC<ProLabelProps>;
15
15
  export {};
@@ -1,8 +1,9 @@
1
- import { colors } from '@codecademy/gamut-styles';
1
+ import { theme } from '@codecademy/gamut-styles';
2
2
  import * as React from 'react';
3
3
  import { ProLabelCutout } from './ProLabelCutout';
4
4
  import { ProLabelCutoutTransparent } from './ProLabelCutoutTransparent';
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
+ const themeColor = color => theme.colors[color];
6
7
  export const ProLabel = props => {
7
8
  if (props.variant === 'cutout') {
8
9
  const {
@@ -11,8 +12,8 @@ export const ProLabel = props => {
11
12
  ...forwardedProps
12
13
  } = props;
13
14
  return /*#__PURE__*/_jsx(ProLabelCutout, {
14
- backgroundColor: colors[backgroundColor],
15
- cutoutColor: colors[cutoutColor],
15
+ backgroundColor: themeColor(backgroundColor),
16
+ cutoutColor: themeColor(cutoutColor),
16
17
  ...forwardedProps
17
18
  });
18
19
  }
@@ -21,7 +22,7 @@ export const ProLabel = props => {
21
22
  ...forwardedProps
22
23
  } = props;
23
24
  return /*#__PURE__*/_jsx(ProLabelCutoutTransparent, {
24
- backgroundColor: colors[backgroundColor],
25
+ backgroundColor: themeColor(backgroundColor),
25
26
  ...forwardedProps
26
27
  });
27
28
  };
@@ -1,9 +1,9 @@
1
- import { colors } from '@codecademy/gamut-styles';
1
+ import { Colors } from '@codecademy/gamut-styles';
2
2
  import * as React from 'react';
3
3
  export type ProLogoAltProps = {
4
4
  ariaLabel?: string;
5
- backgroundColor?: keyof typeof colors;
6
- textColor?: keyof typeof colors;
5
+ backgroundColor?: Colors;
6
+ textColor?: Colors;
7
7
  width?: number;
8
8
  };
9
9
  export declare const ProLogoAlt: React.FC<ProLogoAltProps>;
@@ -1,6 +1,7 @@
1
- import { colors } from '@codecademy/gamut-styles';
1
+ import { theme } from '@codecademy/gamut-styles';
2
2
  import * as React from 'react';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
+ const themeColor = color => theme.colors[color];
4
5
  export const ProLogoAlt = ({
5
6
  ariaLabel = 'Codecademy Pro Logo',
6
7
  backgroundColor = 'yellow',
@@ -13,14 +14,14 @@ export const ProLogoAlt = ({
13
14
  xmlns: "http://www.w3.org/2000/svg",
14
15
  "aria-label": ariaLabel,
15
16
  children: /*#__PURE__*/_jsxs("g", {
16
- fill: colors[backgroundColor],
17
+ fill: themeColor(backgroundColor),
17
18
  fillRule: "evenodd",
18
19
  children: [/*#__PURE__*/_jsx("path", {
19
20
  d: "m0 0h74v40h-74zm78 34h17v6h-17z",
20
- fill: colors[backgroundColor]
21
+ fill: themeColor(backgroundColor)
21
22
  }), /*#__PURE__*/_jsx("path", {
22
23
  d: "m13.971 23.67v6.82h-3.971v-20.145h6.82c4.749 0 7.253 2.965 7.253 6.62 0 3.625-2.504 6.705-7.253 6.705zm2.245-9.871h-2.245v6.446h2.245c2.187 0 3.77-1.036 3.77-3.28 0-2.245-1.583-3.166-3.77-3.166zm21.518 16.691-4.46-7.741h-2.821v7.741h-4v-20.145h7.568c4.404 0 6.994 2.62 6.994 6.13 0 1.9-.777 4.317-3.828 5.526l5.151 8.49h-4.604zm-.72-13.986c0-1.784-1.295-2.705-3.51-2.705h-3.051v5.468h3.05c2.216 0 3.511-1.036 3.511-2.763zm16.453-6.504c5.843 0 10.533 4.346 10.533 10.418s-4.69 10.417-10.533 10.417c-5.842 0-10.533-4.345-10.533-10.417s4.691-10.418 10.533-10.418zm0 17.152c3.799 0 6.36-2.878 6.36-6.734 0-3.857-2.561-6.734-6.36-6.734s-6.36 2.877-6.36 6.734c0 3.856 2.561 6.734 6.36 6.734z",
23
- fill: colors[textColor]
24
+ fill: themeColor(textColor)
24
25
  })]
25
26
  })
26
27
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codecademy/brand",
3
- "version": "5.3.0-alpha.b6c189f90.0",
3
+ "version": "5.3.0-alpha.f563099c4.0",
4
4
  "description": "Brand component library for Codecademy",
5
5
  "license": "MIT",
6
6
  "repository": "git@github.com:codecademy-engineering/mono.git",
@@ -1,6 +0,0 @@
1
- import type { UpcomingWorkshopNavItem } from '../../../../GlobalHeader/types';
2
- type AppHeaderWorkshopCardProps = {
3
- workshop: UpcomingWorkshopNavItem;
4
- };
5
- export declare const AppHeaderWorkshopCard: React.FC<AppHeaderWorkshopCardProps>;
6
- export {};
@@ -1,134 +0,0 @@
1
- import _styled from "@emotion/styled/base";
2
- import { Anchor, Box, Card, FlexBox, Text } from '@codecademy/gamut';
3
- import { CalendarIcon, OptimizationClockIcon } from '@codecademy/gamut-icons';
4
- import { GridDense } from '@codecademy/gamut-patterns';
5
- import { useGlobalHeaderItemClick } from '../../../../GlobalHeader/context';
6
- import { Divider } from '../../../../InstructorCard';
7
- import { useAppHeaderDropdownContext } from '../../AppHeaderDropdownProvider';
8
- import { useAppHeaderSectionContext } from '../../AppHeaderSection/AppHeaderSectionContext';
9
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
10
- const StyledCard = /*#__PURE__*/_styled(Card, {
11
- target: "e1aahqt50",
12
- label: "StyledCard"
13
- })("&:hover{border-color:", ({
14
- theme
15
- }) => theme.colors.black, ";cursor:pointer;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGl2ZUNvdXJzZXNEcm9wZG93bi9BcHBIZWFkZXJXb3Jrc2hvcENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVcrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckxpdmVDb3Vyc2VzRHJvcGRvd24vQXBwSGVhZGVyV29ya3Nob3BDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2FsZW5kYXJJY29uLCBPcHRpbWl6YXRpb25DbG9ja0ljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBHcmlkRGVuc2UgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1wYXR0ZXJucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB0eXBlIHsgVXBjb21pbmdXb3Jrc2hvcE5hdkl0ZW0gfSBmcm9tICcuLi8uLi8uLi8uLi9HbG9iYWxIZWFkZXIvdHlwZXMnO1xuaW1wb3J0IHsgRGl2aWRlciB9IGZyb20gJy4uLy4uLy4uLy4uL0luc3RydWN0b3JDYXJkJztcbmltcG9ydCB7IHVzZUFwcEhlYWRlckRyb3Bkb3duQ29udGV4dCB9IGZyb20gJy4uLy4uL0FwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXInO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyU2VjdGlvbkNvbnRleHQgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXJTZWN0aW9uL0FwcEhlYWRlclNlY3Rpb25Db250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG50eXBlIEluZm9Sb3dQcm9wcyA9IHtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xufTtcblxuY29uc3QgSW5mb1JvdzogUmVhY3QuRkM8SW5mb1Jvd1Byb3BzPiA9ICh7IGljb24sIGNoaWxkcmVuIH0pID0+IChcbiAgPEZsZXhCb3ggYWxpZ25JdGVtcz1cImNlbnRlclwiIGdhcD17OH0+XG4gICAge2ljb259XG4gICAgPFRleHQgZm9udFNpemU9ezE0fSBsaW5lSGVpZ2h0PVwiYmFzZVwiIGNvbG9yPVwidGV4dFwiPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGV4dD5cbiAgPC9GbGV4Qm94PlxuKTtcblxudHlwZSBBcHBIZWFkZXJXb3Jrc2hvcENhcmRQcm9wcyA9IHtcbiAgd29ya3Nob3A6IFVwY29taW5nV29ya3Nob3BOYXZJdGVtO1xufTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlcldvcmtzaG9wQ2FyZDogUmVhY3QuRkM8QXBwSGVhZGVyV29ya3Nob3BDYXJkUHJvcHM+ID0gKHtcbiAgd29ya3Nob3AsXG59KSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcbiAgY29uc3QgeyBoYW5kbGVDbG9zZSB9ID0gdXNlQXBwSGVhZGVyRHJvcGRvd25Db250ZXh0KCk7XG4gIGNvbnN0IHsgdGFiSW5kZXggfSA9IHVzZUFwcEhlYWRlclNlY3Rpb25Db250ZXh0KCk7XG5cbiAgY29uc3QgbGlua0l0ZW0gPSB7XG4gICAgdHlwZTogJ2xpbmsnIGFzIGNvbnN0LFxuICAgIGlkOiB3b3Jrc2hvcC5pZCxcbiAgICBocmVmOiB3b3Jrc2hvcC5ocmVmLFxuICAgIHRleHQ6IHdvcmtzaG9wLnRpdGxlLFxuICAgIHRyYWNraW5nVGFyZ2V0OiB3b3Jrc2hvcC50cmFja2luZ1RhcmdldCxcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17d29ya3Nob3AuaHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIHRhYkluZGV4PXt0YWJJbmRleH1cbiAgICAgICAgb25DbGljaz17KGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxBbmNob3JFbGVtZW50LCBNb3VzZUV2ZW50PikgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgbGlua0l0ZW0pO1xuICAgICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICAgIH19XG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRDYXJkXG4gICAgICAgICAgYm9yZGVyUmFkaXVzPVwibGdcIlxuICAgICAgICAgIGJvcmRlcj17MX1cbiAgICAgICAgICBib3JkZXJDb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiXG4gICAgICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgICAgIGFsaWduSXRlbXM9XCJmbGV4LXN0YXJ0XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBweD17MTZ9XG4gICAgICAgICAgcHk9ezI0fVxuICAgICAgICAgIGlzSW50ZXJhY3RpdmVcbiAgICAgICAgICBtaW5IZWlnaHQ9ezIxOX1cbiAgICAgICAgICBoZWlnaHQ9XCIxMDAlXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICBhcz1cImgzXCJcbiAgICAgICAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3dvcmtzaG9wLnRpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94IHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICAgICAgPEdyaWREZW5zZSBoZWlnaHQ9ezR9IC8+XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgPEZsZXhCb3ggZmxleERpcmVjdGlvbj1cImNvbHVtblwiIGdhcD17NH0gd2lkdGg9XCIxMDAlXCI+XG4gICAgICAgICAgICA8VGV4dCBmb250U2l6ZT17MTR9IGZvbnRXZWlnaHQ9XCJib2xkXCIgbGluZUhlaWdodD1cImJhc2VcIj5cbiAgICAgICAgICAgICAge3dvcmtzaG9wLmluc3RydWN0b3JOYW1lfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICBsaW5lSGVpZ2h0PVwiYmFzZVwiXG4gICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgICAgdHJ1bmNhdGVMaW5lcz17MX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3dvcmtzaG9wLmluc3RydWN0b3JUaXRsZX1cbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICAgIGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIlxuICAgICAgICAgICAgYWxpZ25TZWxmPVwic3RyZXRjaFwiXG4gICAgICAgICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgICAgICAgbXQ9ezR9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3dvcmtzaG9wLm5leHRDb2hvcnRTdGFydERhdGUgPyAoXG4gICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgPERpdmlkZXIgLz5cbiAgICAgICAgICAgICAgICA8SW5mb1JvdyBpY29uPXs8Q2FsZW5kYXJJY29uIHNpemU9ezE2fSBhcmlhLWhpZGRlbiAvPn0+XG4gICAgICAgICAgICAgICAgICBOZXh0IGNvaG9ydDogb257JyAnfVxuICAgICAgICAgICAgICAgICAgPFRleHQgYXM9XCJzcGFuXCIgZm9udFdlaWdodD1cImJvbGRcIj5cbiAgICAgICAgICAgICAgICAgICAge3dvcmtzaG9wLm5leHRDb2hvcnRTdGFydERhdGV9XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9JbmZvUm93PlxuICAgICAgICAgICAgICA8Lz5cbiAgICAgICAgICAgICkgOiBudWxsfVxuICAgICAgICAgICAge3dvcmtzaG9wLmR1cmF0aW9uTGFiZWwgPyAoXG4gICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgPERpdmlkZXIgLz5cbiAgICAgICAgICAgICAgICA8SW5mb1JvdyBpY29uPXs8T3B0aW1pemF0aW9uQ2xvY2tJY29uIHNpemU9ezE2fSBhcmlhLWhpZGRlbiAvPn0+XG4gICAgICAgICAgICAgICAgICA8VGV4dCBhcz1cInNwYW5cIiBmb250V2VpZ2h0PVwiYm9sZFwiPlxuICAgICAgICAgICAgICAgICAgICB7d29ya3Nob3AuZHVyYXRpb25MYWJlbH1cbiAgICAgICAgICAgICAgICAgIDwvVGV4dD57JyAnfVxuICAgICAgICAgICAgICAgICAgbG9uZ1xuICAgICAgICAgICAgICAgIDwvSW5mb1Jvdz5cbiAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDwvU3R5bGVkQ2FyZD5cbiAgICAgIDwvQW5jaG9yPlxuICAgIDwvbGk+XG4gICk7XG59O1xuIl19 */"));
16
- const InfoRow = ({
17
- icon,
18
- children
19
- }) => /*#__PURE__*/_jsxs(FlexBox, {
20
- alignItems: "center",
21
- gap: 8,
22
- children: [icon, /*#__PURE__*/_jsx(Text, {
23
- fontSize: 14,
24
- lineHeight: "base",
25
- color: "text",
26
- children: children
27
- })]
28
- });
29
- export const AppHeaderWorkshopCard = ({
30
- workshop
31
- }) => {
32
- const {
33
- globalHeaderItemClick
34
- } = useGlobalHeaderItemClick();
35
- const {
36
- handleClose
37
- } = useAppHeaderDropdownContext();
38
- const {
39
- tabIndex
40
- } = useAppHeaderSectionContext();
41
- const linkItem = {
42
- type: 'link',
43
- id: workshop.id,
44
- href: workshop.href,
45
- text: workshop.title,
46
- trackingTarget: workshop.trackingTarget
47
- };
48
- return /*#__PURE__*/_jsx("li", {
49
- children: /*#__PURE__*/_jsx(Anchor, {
50
- href: workshop.href,
51
- variant: "interface",
52
- display: "block",
53
- tabIndex: tabIndex,
54
- onClick: event => {
55
- globalHeaderItemClick(event, linkItem);
56
- handleClose();
57
- },
58
- children: /*#__PURE__*/_jsxs(StyledCard, {
59
- borderRadius: "lg",
60
- border: 1,
61
- borderColor: "border-tertiary",
62
- display: "flex",
63
- alignItems: "flex-start",
64
- flexDirection: "column",
65
- px: 16,
66
- py: 24,
67
- isInteractive: true,
68
- minHeight: 219,
69
- height: "100%",
70
- children: [/*#__PURE__*/_jsx(Text, {
71
- variant: "p-large",
72
- fontWeight: 700,
73
- as: "h3",
74
- width: "100%",
75
- truncate: "ellipsis",
76
- truncateLines: 2,
77
- children: workshop.title
78
- }), /*#__PURE__*/_jsx(Box, {
79
- width: "100%",
80
- children: /*#__PURE__*/_jsx(GridDense, {
81
- height: 4
82
- })
83
- }), /*#__PURE__*/_jsxs(FlexBox, {
84
- flexDirection: "column",
85
- gap: 4,
86
- width: "100%",
87
- children: [/*#__PURE__*/_jsx(Text, {
88
- fontSize: 14,
89
- fontWeight: "bold",
90
- lineHeight: "base",
91
- children: workshop.instructorName
92
- }), /*#__PURE__*/_jsx(Text, {
93
- fontSize: 14,
94
- lineHeight: "base",
95
- color: "text-secondary",
96
- truncate: "ellipsis",
97
- truncateLines: 1,
98
- children: workshop.instructorTitle
99
- })]
100
- }), /*#__PURE__*/_jsxs(FlexBox, {
101
- flexDirection: "column",
102
- alignSelf: "stretch",
103
- width: "100%",
104
- mt: 4,
105
- children: [workshop.nextCohortStartDate ? /*#__PURE__*/_jsxs(_Fragment, {
106
- children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(InfoRow, {
107
- icon: /*#__PURE__*/_jsx(CalendarIcon, {
108
- size: 16,
109
- "aria-hidden": true
110
- }),
111
- children: ["Next cohort: on", ' ', /*#__PURE__*/_jsx(Text, {
112
- as: "span",
113
- fontWeight: "bold",
114
- children: workshop.nextCohortStartDate
115
- })]
116
- })]
117
- }) : null, workshop.durationLabel ? /*#__PURE__*/_jsxs(_Fragment, {
118
- children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(InfoRow, {
119
- icon: /*#__PURE__*/_jsx(OptimizationClockIcon, {
120
- size: 16,
121
- "aria-hidden": true
122
- }),
123
- children: [/*#__PURE__*/_jsx(Text, {
124
- as: "span",
125
- fontWeight: "bold",
126
- children: workshop.durationLabel
127
- }), ' ', "long"]
128
- })]
129
- }) : null]
130
- })]
131
- })
132
- })
133
- });
134
- };