@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.
- package/dist/AppHeader/AppHeaderElements/AppHeaderLiveCoursesDropdown/NavPanels.d.ts +0 -1
- package/dist/AppHeader/AppHeaderElements/AppHeaderLiveCoursesDropdown/NavPanels.js +0 -37
- package/dist/AppHeader/AppHeaderElements/AppHeaderLiveCoursesDropdown/consts.js +2 -11
- package/dist/GlobalHeader/types.d.ts +0 -11
- package/dist/Logos/ProLabel/ProLabelCutout/index.js +3 -3
- package/dist/Logos/ProLabel/ProLabelCutoutTransparent/index.js +2 -2
- package/dist/Logos/ProLabel/index.d.ts +3 -3
- package/dist/Logos/ProLabel/index.js +5 -4
- package/dist/ProLogoAlt/index.d.ts +3 -3
- package/dist/ProLogoAlt/index.js +5 -4
- package/package.json +1 -1
- package/dist/AppHeader/AppHeaderElements/AppHeaderLiveCoursesDropdown/AppHeaderWorkshopCard/index.d.ts +0 -6
- package/dist/AppHeader/AppHeaderElements/AppHeaderLiveCoursesDropdown/AppHeaderWorkshopCard/index.js +0 -134
|
@@ -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 {
|
|
2
|
-
import { BootcampsPanel, CoachingPanel
|
|
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 {
|
|
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 {
|
|
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 {
|
|
1
|
+
import { Colors } from '@codecademy/gamut-styles';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
type BaseProps = {
|
|
4
4
|
ariaLabel?: string;
|
|
5
|
-
backgroundColor?:
|
|
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?:
|
|
12
|
+
cutoutColor?: Colors;
|
|
13
13
|
});
|
|
14
14
|
export declare const ProLabel: React.FC<ProLabelProps>;
|
|
15
15
|
export {};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import {
|
|
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:
|
|
15
|
-
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:
|
|
25
|
+
backgroundColor: themeColor(backgroundColor),
|
|
25
26
|
...forwardedProps
|
|
26
27
|
});
|
|
27
28
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
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?:
|
|
6
|
-
textColor?:
|
|
5
|
+
backgroundColor?: Colors;
|
|
6
|
+
textColor?: Colors;
|
|
7
7
|
width?: number;
|
|
8
8
|
};
|
|
9
9
|
export declare const ProLogoAlt: React.FC<ProLogoAltProps>;
|
package/dist/ProLogoAlt/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
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:
|
|
17
|
+
fill: themeColor(backgroundColor),
|
|
17
18
|
fillRule: "evenodd",
|
|
18
19
|
children: [/*#__PURE__*/_jsx("path", {
|
|
19
20
|
d: "m0 0h74v40h-74zm78 34h17v6h-17z",
|
|
20
|
-
fill:
|
|
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:
|
|
24
|
+
fill: themeColor(textColor)
|
|
24
25
|
})]
|
|
25
26
|
})
|
|
26
27
|
});
|
package/package.json
CHANGED
package/dist/AppHeader/AppHeaderElements/AppHeaderLiveCoursesDropdown/AppHeaderWorkshopCard/index.js
DELETED
|
@@ -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
|
-
};
|