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

package/dist/CurriculumCard/Subtitle/index.cjs

@@ -0,0 +1,40 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../Difficulty/index.cjs');
+const require_helpers = require('./helpers.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_capitalize = require("lodash/capitalize");
+lodash_capitalize = require_rolldown_runtime.__toESM(lodash_capitalize);
+
+//#region src/CurriculumCard/Subtitle/index.tsx
+const Subtitle = ({ difficulty, scope, showAltSubtitle = false, difficultyVariant }) => {
+	const scopeToMap = Object.keys(scope).filter((val) => scope[val] > 0);
+	const separatingChar = showAltSubtitle ? "|" : ",";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!showAltSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+		fontSize: 14,
+		alignItems: "center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Difficulty, {
+			variant: difficultyVariant,
+			difficulty
+		}), scopeToMap.length ? separatingChar : null]
+	}), scopeToMap.map((scopeType, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Text, {
+		ml: showAltSubtitle && index === 0 ? 0 : 4,
+		variant: "p-small",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: scope[scopeType] }),
+			" ",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				textColor: "gray-900",
+				children: (0, lodash_capitalize.default)(require_helpers.pluralizeWithS(scopeType, scope[scopeType]))
+			}),
+			" ",
+			index < scopeToMap.length - 1 && separatingChar,
+			" "
+		]
+	}, `${scopeType}-count`))] });
+};
+
+//#endregion
+exports.Subtitle = Subtitle;

package/dist/CurriculumCard/Subtitle/index.d.cts

@@ -0,0 +1,10 @@
+import { ContentDifficultyProps, DifficultyVariant } from "../Difficulty/types.cjs";
+
+//#region src/CurriculumCard/Subtitle/index.d.ts
+type SubtitleProps = Pick<ContentDifficultyProps, 'difficulty'> & {
+  scope: Record<string, number>;
+  showAltSubtitle?: boolean;
+  difficultyVariant?: DifficultyVariant;
+};
+//#endregion
+export { SubtitleProps };

package/dist/CurriculumCard/Subtitle/index.d.ts

@@ -1,8 +1,11 @@
-import * as React from 'react';
-import { ContentDifficultyProps, DifficultyVariant } from '../Difficulty/types';
-export type SubtitleProps = Pick<ContentDifficultyProps, 'difficulty'> & {
-    scope: Record<string, number>;
-    showAltSubtitle?: boolean;
-    difficultyVariant?: DifficultyVariant;
+import { ContentDifficultyProps, DifficultyVariant } from "../Difficulty/types.js";
+import "react";
+
+//#region src/CurriculumCard/Subtitle/index.d.ts
+type SubtitleProps = Pick<ContentDifficultyProps, 'difficulty'> & {
+  scope: Record<string, number>;
+  showAltSubtitle?: boolean;
+  difficultyVariant?: DifficultyVariant;
 };
-export declare const Subtitle: React.FC<SubtitleProps>;
+//#endregion
+export { SubtitleProps };

package/dist/CurriculumCard/Subtitle/index.js

@@ -1,34 +1,37 @@
-import { FlexBox, Text } from '@codecademy/gamut';
-import capitalize from 'lodash/capitalize';
-import * as React from 'react';
-import { Difficulty } from '../Difficulty';
-import { pluralizeWithS } from './helpers';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const Subtitle = ({
-  difficulty,
-  scope,
-  showAltSubtitle = false,
-  difficultyVariant
-}) => {
-  const scopeToMap = Object.keys(scope).filter(val => scope[val] > 0);
-  const separatingChar = showAltSubtitle ? '|' : ',';
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!showAltSubtitle && /*#__PURE__*/_jsxs(FlexBox, {
-      fontSize: 14,
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsx(Difficulty, {
-        variant: difficultyVariant,
-        difficulty: difficulty
-      }), scopeToMap.length ? separatingChar : null]
-    }), scopeToMap.map((scopeType, index) => /*#__PURE__*/_jsxs(Text, {
-      ml: showAltSubtitle && index === 0 ? 0 : 4,
-      variant: "p-small",
-      children: [/*#__PURE__*/_jsx("b", {
-        children: scope[scopeType]
-      }), ' ', /*#__PURE__*/_jsx(Text, {
-        textColor: "gray-900",
-        children: capitalize(pluralizeWithS(scopeType, scope[scopeType]))
-      }), ' ', index < scopeToMap.length - 1 && separatingChar, ' ']
-    }, `${scopeType}-count`))]
-  });
-};
+import { Difficulty } from "../Difficulty/index.js";
+import { pluralizeWithS } from "./helpers.js";
+import { FlexBox, Text } from "@codecademy/gamut";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import capitalize from "lodash/capitalize";
+
+//#region src/CurriculumCard/Subtitle/index.tsx
+const Subtitle = ({ difficulty, scope, showAltSubtitle = false, difficultyVariant }) => {
+	const scopeToMap = Object.keys(scope).filter((val) => scope[val] > 0);
+	const separatingChar = showAltSubtitle ? "|" : ",";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [!showAltSubtitle && /* @__PURE__ */ jsxs(FlexBox, {
+		fontSize: 14,
+		alignItems: "center",
+		children: [/* @__PURE__ */ jsx(Difficulty, {
+			variant: difficultyVariant,
+			difficulty
+		}), scopeToMap.length ? separatingChar : null]
+	}), scopeToMap.map((scopeType, index) => /* @__PURE__ */ jsxs(Text, {
+		ml: showAltSubtitle && index === 0 ? 0 : 4,
+		variant: "p-small",
+		children: [
+			/* @__PURE__ */ jsx("b", { children: scope[scopeType] }),
+			" ",
+			/* @__PURE__ */ jsx(Text, {
+				textColor: "gray-900",
+				children: capitalize(pluralizeWithS(scopeType, scope[scopeType]))
+			}),
+			" ",
+			index < scopeToMap.length - 1 && separatingChar,
+			" "
+		]
+	}, `${scopeType}-count`))] });
+};
+
+//#endregion
+export { Subtitle };

package/dist/CurriculumCard/index.cjs

@@ -0,0 +1,122 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_index = require('./Footer/index.cjs');
+const require_index$1 = require('./Image/index.cjs');
+const require_index$2 = require('./Subtitle/index.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 = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/CurriculumCard/index.tsx
+const cardHeight = 180;
+const cardStyles = {
+	inProgress: "yellow",
+	completed: "navy"
+};
+const LineDecoration = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  border-top: 1px solid
+    ${({ inProgress }) => inProgress ? _codecademy_gamut_styles.theme.colors.navy : _codecademy_gamut_styles.theme.colors["navy-200"]};
+`;
+/**
+*
+* @deprecated  This component is deprecated
+*
+* Please use the CareerPathCard, SkillPathCard, or CourseCard instead
+*/
+const CurriculumCard = ({ beta, difficulty, description, headingLevel = "h3", image, isFullSize = false, isStaticSize = false, progressState, scope, tag, tagColor, text, title, showCareerPathVariant, showAltSubtitle = false, footerTextVariant = "enrolled", showDescription, difficultyVariant, horizontalOrientation, minHeight, minWidth, showProLogo: pro }) => {
+	const boxVariant = progressState && cardStyles[progressState];
+	const isCareerPathVariant = text.toLowerCase() === "career path" && showCareerPathVariant;
+	const minimumHeight = (0, react.useMemo)(() => {
+		if (minHeight) return minHeight;
+		return isStaticSize ? (0, _codecademy_gamut_styles.pxRem)(285) : isFullSize ? (0, _codecademy_gamut_styles.pxRem)(cardHeight * 2 + 32) : (0, _codecademy_gamut_styles.pxRem)(cardHeight);
+	}, [
+		isFullSize,
+		isStaticSize,
+		minHeight
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Card, {
+		display: "flex",
+		flexDirection: {
+			_: "column",
+			xs: horizontalOrientation ? "row" : "column"
+		},
+		minHeight: minimumHeight,
+		minWidth,
+		variant: boxVariant ?? "white",
+		isInteractive: true,
+		position: "relative",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+				maxWidth: horizontalOrientation ? 418 : "none",
+				pr: {
+					_: 0,
+					xs: horizontalOrientation ? 40 : 0
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						display: "flex",
+						fontSize: 14,
+						mb: 12,
+						fontFamily: "accent",
+						children: text === "Course" && !pro ? "Free Course" : text
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						as: headingLevel,
+						mb: 4,
+						fontSize: 20,
+						children: title
+					}),
+					!progressState && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+						flexWrap: "wrap",
+						alignItems: "center",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Subtitle, {
+							scope,
+							difficulty,
+							showAltSubtitle,
+							difficultyVariant
+						})
+					}),
+					isCareerPathVariant && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LineDecoration, {
+						inProgress: progressState === "inProgress",
+						my: 8
+					}),
+					(isCareerPathVariant || showDescription) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						pt: 8,
+						pb: 16,
+						fontSize: 14,
+						children: description
+					})
+				]
+			}),
+			isFullSize && image && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+				my: "auto",
+				ml: "auto",
+				mr: horizontalOrientation ? 0 : "auto",
+				pt: 16,
+				pb: isCareerPathVariant ? 32 : 0,
+				pr: {
+					_: 0,
+					xs: horizontalOrientation ? 24 : 0
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.Image, {
+					isSmall: isCareerPathVariant,
+					image,
+					progressState
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Footer, {
+				beta,
+				progressState,
+				tag,
+				tagColor,
+				footerTextVariant
+			})
+		]
+	});
+};
+
+//#endregion
+exports.CurriculumCard = CurriculumCard;

package/dist/CurriculumCard/index.d.cts

@@ -0,0 +1,63 @@
+import { TagColor } from "./BottomTag/index.cjs";
+import { SubtitleProps } from "./Subtitle/index.cjs";
+import { Card, HeadingTags } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/CurriculumCard/index.d.ts
+type ProgressState = 'inProgress' | 'completed';
+type FooterTextVariantType = 'enrolled' | 'inProgress';
+type CardProps = React$1.ComponentProps<typeof Card>;
+type CurriculumCardProps = SubtitleProps & {
+  beta?: boolean;
+  /**
+   * Displays the curriculum type above the title
+   */
+  text: string;
+  title: string;
+  headingLevel?: HeadingTags;
+  image?: string;
+  isFullSize?: boolean;
+  isStaticSize?: boolean;
+  progressState?: ProgressState;
+  showProLogo?: boolean;
+  tag?: string;
+  tagColor?: TagColor;
+  showAltSubtitle?: boolean;
+  /**
+   * Changes In Progress card footer text from "Enrolled..." to "In Progress..."
+   */
+  footerTextVariant?: FooterTextVariantType;
+  /**
+   * optional text to be displayed below card subtitle
+   */
+  description?: string;
+  /**
+   * allows description to be shown in card body.
+   */
+  showDescription?: boolean;
+  /**
+   * career path cards are displayed with a variant style / decorative element
+   */
+  showCareerPathVariant?: boolean;
+  /**
+   * displays inner content with a horizontal orientation
+   */
+  horizontalOrientation?: boolean;
+  /**
+   * custom minimum height for curriculum card in pixels
+   */
+  minHeight?: CardProps['minHeight'];
+  /**
+   * custom minimum width for curriculum card in pixels
+   */
+  minWidth?: CardProps['minWidth'];
+};
+/**
+ *
+ * @deprecated  This component is deprecated
+ *
+ * Please use the CareerPathCard, SkillPathCard, or CourseCard instead
+ */
+declare const CurriculumCard: React$1.FC<CurriculumCardProps>;
+//#endregion
+export { CardProps, CurriculumCard, CurriculumCardProps, FooterTextVariantType, ProgressState };

package/dist/CurriculumCard/index.d.ts

@@ -1,54 +1,56 @@
-import { Card, HeadingTags } from '@codecademy/gamut';
-import * as React from 'react';
-import { TagColor } from './BottomTag/index';
-import { SubtitleProps } from './Subtitle';
-export type ProgressState = 'inProgress' | 'completed';
-export type FooterTextVariantType = 'enrolled' | 'inProgress';
-export type CardProps = React.ComponentProps<typeof Card>;
-export type CurriculumCardProps = SubtitleProps & {
-    beta?: boolean;
-    /**
-     * Displays the curriculum type above the title
-     */
-    text: string;
-    title: string;
-    headingLevel?: HeadingTags;
-    image?: string;
-    isFullSize?: boolean;
-    isStaticSize?: boolean;
-    progressState?: ProgressState;
-    showProLogo?: boolean;
-    tag?: string;
-    tagColor?: TagColor;
-    showAltSubtitle?: boolean;
-    /**
-     * Changes In Progress card footer text from "Enrolled..." to "In Progress..."
-     */
-    footerTextVariant?: FooterTextVariantType;
-    /**
-     * optional text to be displayed below card subtitle
-     */
-    description?: string;
-    /**
-     * allows description to be shown in card body.
-     */
-    showDescription?: boolean;
-    /**
-     * career path cards are displayed with a variant style / decorative element
-     */
-    showCareerPathVariant?: boolean;
-    /**
-     * displays inner content with a horizontal orientation
-     */
-    horizontalOrientation?: boolean;
-    /**
-     * custom minimum height for curriculum card in pixels
-     */
-    minHeight?: CardProps['minHeight'];
-    /**
-     * custom minimum width for curriculum card in pixels
-     */
-    minWidth?: CardProps['minWidth'];
+import { TagColor } from "./BottomTag/index.js";
+import { SubtitleProps } from "./Subtitle/index.js";
+import { Card, HeadingTags } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/CurriculumCard/index.d.ts
+type ProgressState = 'inProgress' | 'completed';
+type FooterTextVariantType = 'enrolled' | 'inProgress';
+type CardProps = React$1.ComponentProps<typeof Card>;
+type CurriculumCardProps = SubtitleProps & {
+  beta?: boolean;
+  /**
+   * Displays the curriculum type above the title
+   */
+  text: string;
+  title: string;
+  headingLevel?: HeadingTags;
+  image?: string;
+  isFullSize?: boolean;
+  isStaticSize?: boolean;
+  progressState?: ProgressState;
+  showProLogo?: boolean;
+  tag?: string;
+  tagColor?: TagColor;
+  showAltSubtitle?: boolean;
+  /**
+   * Changes In Progress card footer text from "Enrolled..." to "In Progress..."
+   */
+  footerTextVariant?: FooterTextVariantType;
+  /**
+   * optional text to be displayed below card subtitle
+   */
+  description?: string;
+  /**
+   * allows description to be shown in card body.
+   */
+  showDescription?: boolean;
+  /**
+   * career path cards are displayed with a variant style / decorative element
+   */
+  showCareerPathVariant?: boolean;
+  /**
+   * displays inner content with a horizontal orientation
+   */
+  horizontalOrientation?: boolean;
+  /**
+   * custom minimum height for curriculum card in pixels
+   */
+  minHeight?: CardProps['minHeight'];
+  /**
+   * custom minimum width for curriculum card in pixels
+   */
+  minWidth?: CardProps['minWidth'];
 };
 /**
  *
@@ -56,4 +58,6 @@ export type CurriculumCardProps = SubtitleProps & {
  *
  * Please use the CareerPathCard, SkillPathCard, or CourseCard instead
  */
-export declare const CurriculumCard: React.FC<CurriculumCardProps>;
+declare const CurriculumCard: React$1.FC<CurriculumCardProps>;
+//#endregion
+export { CardProps, CurriculumCard, CurriculumCardProps, FooterTextVariantType, ProgressState };