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

package/dist/LearningOutcomeFlyout/index.cjs

@@ -0,0 +1,316 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_LearningOutcomeAssessmentScores_index = require('../LearningOutcomeAssessmentScores/index.cjs');
+const require_LearningOutcomeLevelBadge = require('../LearningOutcomeBadges/LearningOutcomeLevelBadge.cjs');
+const require_LearningOutcomeLowAssessmentBadge = require('../LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.cjs');
+const require_LearningOutcomeTile_index = require('../LearningOutcomeTile/index.cjs');
+const require_LearningOutcomeCardList = require('./LearningOutcomeCardList.cjs');
+const require_types = require('./types.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/LearningOutcomeFlyout/index.tsx
+const ChildLearningOutcomeRow = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)((0, _codecademy_gamut_styles.css)({
+	background: "white",
+	borderColor: "border-tertiary",
+	borderTopWidth: 0,
+	borderLeftWidth: 1,
+	borderRightWidth: 1,
+	borderBottomWidth: 1,
+	borderStyle: "solid",
+	padding: "24px 16px",
+	alignItems: "flex-start",
+	justifyContent: "flex-start",
+	gap: 16,
+	"&:first-of-type": {
+		borderTopLeftRadius: "4px",
+		borderTopRightRadius: "4px"
+	},
+	"&:last-of-type": {
+		borderBottomLeftRadius: "4px",
+		borderBottomRightRadius: "4px"
+	}
+}));
+const StyledAnchor = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)((0, _codecademy_gamut_styles.css)({
+	color: "text",
+	textDecoration: "none",
+	"&:hover, &:focus": {
+		color: "text",
+		textDecoration: "underline"
+	}
+}));
+const SkillTag = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)((0, _codecademy_gamut_styles.css)({
+	fontSize: 14,
+	borderRadius: "md",
+	border: 1,
+	borderColor: "border-primary",
+	"&:hover, &:focus": {
+		color: "text",
+		bg: "background-hover"
+	}
+}));
+const sortSkillsByClassification = (skills) => {
+	if (!skills?.length) return [];
+	return skills.slice()?.sort((a, b) => {
+		if (a?.classification === require_types.SkillClassification.Language) return -1;
+		if (b?.classification === require_types.SkillClassification.Subject) return 1;
+		return 0;
+	});
+};
+const getLearningOutcomePath = (id) => {
+	return id ? `/learning-outcomes/${id}` : "/";
+};
+const getSkillsAreaPath = (skillSlug) => {
+	return skillSlug ? `/skill-areas/${skillSlug}` : "/";
+};
+const miscTrackingData = (level, id, latestScore, outcome) => {
+	return { misc: JSON.stringify({
+		last_assessed_score: latestScore,
+		LO_level: level,
+		title: outcome,
+		unique_id: id
+	}) };
+};
+const LearningOutcomeFlyout = ({ expanded, learningOutcomeHref, learningOutcomeOnClick, childLearningOutcomeOnClick, parentLearningOutcomeOnClick, learningOutcome: { highestScore, highestScoreAchievedAt, latestScore, latestScoreAchievedAt, level, outcome, parentLOs, percentComplete, skills, childLearningOutcomes }, skillTagOnClick, onClose, assessmentHref, assessmentEligible, bestMatchResponse, bestMatchOnClick, showBestMatchCTA }) => {
+	const percentCompletePercentage = percentComplete != null ? percentComplete : 0;
+	const levelLabel = require_LearningOutcomeLevelBadge.learningOutcomeLabels[level];
+	const hasLowLatestAssessment = Boolean(latestScore != null && latestScore < 70);
+	const { data: bestMatchData, loading: bestMatchLoading, error: bestMatchError } = bestMatchResponse;
+	const showSkills = !!skills?.length;
+	const sortedSkills = sortSkillsByClassification(skills);
+	const isLevelTwoLearningOutcome = level === require_LearningOutcomeLevelBadge.LearningOutcomeLevels.Two;
+	const showParentLOs = level === require_LearningOutcomeLevelBadge.LearningOutcomeLevels.Two && !!parentLOs && parentLOs.length > 0;
+	const bestMatchCTA = bestMatchLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Shimmer, {
+		width: "50%",
+		"data-testid": "best-match-shimmer"
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FillButton, {
+		href: bestMatchData?.urlPath ?? "",
+		disabled: !bestMatchData?.urlPath || bestMatchError,
+		"data-testid": "best-match-button",
+		width: "50%",
+		onClick: () => bestMatchOnClick?.(),
+		children: "Learn"
+	});
+	const renderProgress = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+		alignItems: "center",
+		children: [Boolean(percentCompletePercentage === 100) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			width: 16,
+			height: 16,
+			borderRadius: "md",
+			bg: "primary",
+			mr: 8,
+			alignItems: "center",
+			justifyContent: "center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.SmallCheckIcon, {
+				size: 11,
+				color: "white"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+			color: "text",
+			variant: "p-large",
+			children: `${percentCompletePercentage}% progress`
+		})]
+	});
+	const renderSkills = () => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			as: "ul",
+			children: "Skills go here"
+		});
+	};
+	const renderSubskills = () => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			as: "ul",
+			flexDirection: "column",
+			p: 0,
+			borderTop: 1,
+			borderColor: "border-tertiary",
+			borderRadius: "md",
+			children: childLearningOutcomes?.map((childLo) => {
+				const { id, outcome: outcome$1, progress, percentComplete: percentComplete$1 } = childLo;
+				const showNeedsReviewIndicator = progress?.latestScore !== null && progress?.latestScore !== void 0 ? progress.latestScore < 70 : false;
+				const trackingData = miscTrackingData(require_LearningOutcomeLevelBadge.LearningOutcomeLevels.One, id, progress?.latestScore, outcome$1);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChildLearningOutcomeRow, {
+					row: true,
+					as: "li",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+						minWidth: 32,
+						width: 32,
+						justifyContent: "center",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LearningOutcomeTile_index.LearningOutcomeTile, {
+							learningOutcomeDetails: {
+								id,
+								level: require_LearningOutcomeLevelBadge.LearningOutcomeLevels.One,
+								outcome: outcome$1,
+								percentComplete: percentComplete$1
+							},
+							size: "small",
+							popover: false
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+						column: true,
+						gap: 8,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
+							variant: "interface",
+							href: getLearningOutcomePath(id),
+							target: "_blank",
+							whiteSpace: "normal",
+							onClick: () => childLearningOutcomeOnClick?.(trackingData),
+							children: outcome$1
+						}), showNeedsReviewIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LearningOutcomeLowAssessmentBadge.LearningOutcomeLowAssessmentBadge, {}) })]
+					})]
+				}, id);
+			})
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Flyout, {
+		"aria-label": `${levelLabel} details`,
+		closeLabel: `Close ${levelLabel} details`,
+		expanded,
+		onClose,
+		openFrom: "right",
+		title: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+			variant: "title-sm",
+			children: `${levelLabel} details`
+		}),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+			gap: 32,
+			mt: 32,
+			mx: 24,
+			column: true,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					gap: 24,
+					column: true,
+					children: [
+						showBestMatchCTA && (!bestMatchData?.urlPath || bestMatchError) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Alert, {
+							placement: "inline",
+							type: "subtle",
+							"data-testid": "best-match-alert",
+							children: `We were unable to load the associated ${levelLabel.toLocaleLowerCase()}. Please refresh the
+            page and try again.`
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+							justifyContent: "space-between",
+							alignItems: "center",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LearningOutcomeLevelBadge.LearningOutcomeLevelBadge, {
+								level,
+								size: "base"
+							}), hasLowLatestAssessment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LearningOutcomeLowAssessmentBadge.LearningOutcomeLowAssessmentBadge, {})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+							gap: 16,
+							column: true,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAnchor, {
+								href: learningOutcomeHref,
+								onClick: () => learningOutcomeOnClick?.(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+									as: "h2",
+									variant: "title-md",
+									children: outcome
+								})
+							}), showSkills && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+								alignItems: "center",
+								gap: 12,
+								flexWrap: "wrap",
+								children: sortedSkills.map((skill) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillTag, {
+									"data-testid": "skill-tag",
+									px: 8,
+									py: 4,
+									variant: "interface",
+									href: getSkillsAreaPath(skill.slug),
+									onClick: () => skillTagOnClick?.(skill.slug),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+										center: true,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: skill.title })
+									})
+								}, skill.id))
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+							borderY: 1,
+							borderColor: "background-hover",
+							py: 16,
+							children: renderProgress()
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					gap: 16,
+					column: true,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						variant: "title-xs",
+						as: "h3",
+						children: "Evaluation results"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LearningOutcomeAssessmentScores_index.LearningOutcomeAssessmentScores, {
+						highestScore,
+						highestScoreAchievedAt,
+						latestScore,
+						latestScoreAchievedAt
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					gap: 16,
+					column: true,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						variant: "title-xs",
+						as: "h3",
+						children: isLevelTwoLearningOutcome ? `Subskills` : `Skills`
+					}), isLevelTwoLearningOutcome ? renderSubskills() : renderSkills()]
+				}),
+				showParentLOs && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					gap: 16,
+					mb: 16,
+					column: true,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						variant: "title-xs",
+						as: "h3",
+						children: "Builds toward..."
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LearningOutcomeCardList.LearningOutcomeCardList, {
+						learningOutcomes: parentLOs,
+						onClick: parentLearningOutcomeOnClick
+					})]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+			borderTop: 1,
+			bg: "white",
+			bottom: "-3px",
+			boxShadow: "0px -4px 16px 0px #00000014",
+			borderColor: "border-tertiary",
+			py: 12,
+			px: 16,
+			position: "sticky",
+			justifyContent: "center",
+			gap: 12,
+			children: [showBestMatchCTA ? bestMatchCTA : null, assessmentEligible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.StrokeButton, {
+				href: assessmentHref,
+				width: showBestMatchCTA ? {
+					_: 209,
+					xs: "50%"
+				} : "100%",
+				children: "Evaluate"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.ToolTip, {
+				id: "disabled-evaluate",
+				"data-testid": "disabled-evaluate",
+				info: `Not available for this ${levelLabel.toLowerCase()}`,
+				placement: "inline",
+				inheritDims: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.StrokeButton, {
+					"aria-describedby": "disabled-evaluate",
+					"aria-disabled": true,
+					width: showBestMatchCTA ? 209 : "100%",
+					children: "Evaluate"
+				})
+			})]
+		})]
+	});
+};
+
+//#endregion
+exports.LearningOutcomeFlyout = LearningOutcomeFlyout;
+exports.getLearningOutcomePath = getLearningOutcomePath;
+exports.miscTrackingData = miscTrackingData;
+exports.sortSkillsByClassification = sortSkillsByClassification;

package/dist/LearningOutcomeFlyout/index.d.cts

@@ -0,0 +1,12 @@
+import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.cjs";
+import { LearningOutcomeFlyoutProps, LearningOutcomeSkill } from "./types.cjs";
+
+//#region src/LearningOutcomeFlyout/index.d.ts
+declare const sortSkillsByClassification: (skills?: LearningOutcomeSkill[] | null) => LearningOutcomeSkill[];
+declare const getLearningOutcomePath: (id?: string) => string;
+declare const miscTrackingData: (level?: LearningOutcomeLevels | null, id?: string, latestScore?: number | null, outcome?: string) => {
+  misc: string;
+};
+declare const LearningOutcomeFlyout: React.FC<LearningOutcomeFlyoutProps>;
+//#endregion
+export { LearningOutcomeFlyout, getLearningOutcomePath, miscTrackingData, sortSkillsByClassification };

package/dist/LearningOutcomeFlyout/index.d.ts

@@ -1,8 +1,13 @@
-import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
-import { LearningOutcomeFlyoutProps, LearningOutcomeSkill } from './types';
-export declare const sortSkillsByClassification: (skills?: LearningOutcomeSkill[] | null) => LearningOutcomeSkill[];
-export declare const getLearningOutcomePath: (id?: string) => string;
-export declare const miscTrackingData: (level?: LearningOutcomeLevels | null, id?: string, latestScore?: number | null, outcome?: string) => {
-    misc: string;
+import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
+import "../LearningOutcomeBadges/index.js";
+import { LearningOutcomeFlyoutProps, LearningOutcomeSkill } from "./types.js";
+
+//#region src/LearningOutcomeFlyout/index.d.ts
+declare const sortSkillsByClassification: (skills?: LearningOutcomeSkill[] | null) => LearningOutcomeSkill[];
+declare const getLearningOutcomePath: (id?: string) => string;
+declare const miscTrackingData: (level?: LearningOutcomeLevels | null, id?: string, latestScore?: number | null, outcome?: string) => {
+  misc: string;
 };
-export declare const LearningOutcomeFlyout: React.FC<LearningOutcomeFlyoutProps>;
+declare const LearningOutcomeFlyout: React.FC<LearningOutcomeFlyoutProps>;
+//#endregion
+export { LearningOutcomeFlyout, getLearningOutcomePath, miscTrackingData, sortSkillsByClassification };