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

package/dist/LandingPage/PageFeaturesEnhanced.js

@@ -1,159 +1,150 @@
-import { Box, Column, FlexBox, LayoutGrid } from '@codecademy/gamut';
-import { Background, ColorMode } from '@codecademy/gamut-styles';
-import * as React from 'react';
-import { CTA } from './CTA';
-import { Description } from './Description';
-import { FeaturedDescription, FeaturedIcon, FeaturedImage, FeaturedStat, FeaturedTitle } from './Feature';
-import { Title } from './Title';
-import { TitleWithEyebrow } from './TitleWithEyebrow';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CTA } from "./CTA.js";
+import { Description } from "./Description.js";
+import { Title } from "./Title.js";
+import { TitleWithEyebrow } from "./TitleWithEyebrow.js";
+import { FeaturedDescription, FeaturedIcon, FeaturedImage, FeaturedStat, FeaturedTitle } from "./Feature.js";
+import { Box, Column, FlexBox, LayoutGrid } from "@codecademy/gamut";
+import { Background, ColorMode } from "@codecademy/gamut-styles";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LandingPage/PageFeaturesEnhanced.tsx
 const rowRenderEach = (items, itemRenderer) => {
-  return /*#__PURE__*/_jsx(FlexBox, {
-    flexDirection: {
-      _: 'column',
-      sm: 'row'
-    },
-    as: "ul",
-    pl: 0,
-    mb: 0,
-    gap: {
-      sm: 32
-    },
-    children: items.map(item => /*#__PURE__*/_jsx(FlexBox, {
-      as: "li",
-      flex: 1,
-      children: itemRenderer(item)
-    }, item.title))
-  });
+	return /* @__PURE__ */ jsx(FlexBox, {
+		flexDirection: {
+			_: "column",
+			sm: "row"
+		},
+		as: "ul",
+		pl: 0,
+		mb: 0,
+		gap: { sm: 32 },
+		children: items.map((item) => /* @__PURE__ */ jsx(FlexBox, {
+			as: "li",
+			flex: 1,
+			children: itemRenderer(item)
+		}, item.title))
+	});
 };
 const gridRenderEach = (maxCols, items, itemRenderer) => {
-  const size = {
-    _: 12,
-    xs: 12 / (maxCols / 2),
-    lg: 12 / maxCols
-  };
-  return /*#__PURE__*/_jsx(LayoutGrid, {
-    gap: 32,
-    as: "ul",
-    pl: 0,
-    mb: 0,
-    children: items.map(item => /*#__PURE__*/_jsx(Column, {
-      size: size,
-      as: "li",
-      children: itemRenderer(item)
-    }, item.title))
-  });
+	const size = {
+		_: 12,
+		xs: 12 / (maxCols / 2),
+		lg: 12 / maxCols
+	};
+	return /* @__PURE__ */ jsx(LayoutGrid, {
+		gap: 32,
+		as: "ul",
+		pl: 0,
+		mb: 0,
+		children: items.map((item) => /* @__PURE__ */ jsx(Column, {
+			size,
+			as: "li",
+			children: itemRenderer(item)
+		}, item.title))
+	});
 };
 const renderEach = (maxCols, items, itemRenderer) => {
-  if (maxCols === undefined) {
-    return rowRenderEach(items, itemRenderer);
-  }
-  if (maxCols > 0 && maxCols <= 4) {
-    return gridRenderEach(maxCols, items, itemRenderer);
-  }
-  return null;
+	if (maxCols === void 0) return rowRenderEach(items, itemRenderer);
+	if (maxCols > 0 && maxCols <= 4) return gridRenderEach(maxCols, items, itemRenderer);
+	return null;
 };
-export const PageFeaturesEnhanced = ({
-  eyebrow,
-  title,
-  desc,
-  cta,
-  maxCols,
-  features,
-  featuresMedia,
-  testId,
-  onAnchorClick
-}) => {
-  return /*#__PURE__*/_jsxs("div", {
-    "data-testid": testId,
-    children: [title && /*#__PURE__*/_jsx(FlexBox, {
-      justifyContent: "center",
-      textAlign: "center",
-      mb: 8,
-      children: eyebrow ? /*#__PURE__*/_jsx(TitleWithEyebrow, {
-        title: title,
-        eyebrow: eyebrow,
-        isPageHeading: false,
-        titleStyle: {
-          fontWeight: 700,
-          fontSize: {
-            _: 44,
-            sm: 44
-          }
-        },
-        eyebrowStyle: {
-          fontWeight: 'lighter',
-          fontSize: {
-            _: 16,
-            sm: 16
-          }
-        }
-      }) : /*#__PURE__*/_jsx(Title, {
-        isPageHeading: false,
-        children: title
-      })
-    }), desc && /*#__PURE__*/_jsx(FlexBox, {
-      justifyContent: "center",
-      textAlign: "center",
-      children: /*#__PURE__*/_jsx(Description, {
-        text: desc,
-        onAnchorClick: onAnchorClick
-      })
-    }), cta && /*#__PURE__*/_jsx(Box, {
-      mt: 32,
-      children: /*#__PURE__*/_jsx(CTA, {
-        href: cta.href,
-        onClick: cta.onClick,
-        buttonType: cta.buttonType,
-        children: cta.text
-      })
-    }), /*#__PURE__*/_jsx(ColorMode, {
-      mode: "dark",
-      children: /*#__PURE__*/_jsx(Box, {
-        mt: 16,
-        children: renderEach(maxCols, features, ({
-          testId,
-          imgSrc,
-          imgAlt,
-          statText,
-          title: featTitle,
-          desc
-        }) => /*#__PURE__*/_jsxs(Background, {
-          bg: "white-300",
-          borderRadius: "lg",
-          py: 24,
-          px: 16,
-          color: "white",
-          "data-testid": testId,
-          children: [featuresMedia === 'image' && imgSrc && /*#__PURE__*/_jsx(FeaturedImage, {
-            src: imgSrc,
-            alt: imgAlt ?? ''
-          }), featuresMedia === 'icon' && imgSrc && /*#__PURE__*/_jsx(FeaturedIcon, {
-            src: imgSrc,
-            alt: imgAlt ?? '',
-            props: {
-              mb: 16,
-              width: '48px',
-              height: '48px'
-            }
-          }), featuresMedia === 'stat' && /*#__PURE__*/_jsx(FeaturedStat, {
-            children: statText
-          }), featTitle && /*#__PURE__*/_jsx(FeaturedTitle, {
-            as: desc ? title ? 'h3' : 'h2' : 'div',
-            props: {
-              fontSize: {
-                _: 20,
-                lg: 20
-              },
-              mb: 16
-            },
-            children: featTitle
-          }), desc && /*#__PURE__*/_jsx(FeaturedDescription, {
-            desc: desc,
-            onAnchorClick: onAnchorClick
-          })]
-        }))
-      })
-    })]
-  });
-};
+const PageFeaturesEnhanced = ({ eyebrow, title, desc, cta, maxCols, features, featuresMedia, testId, onAnchorClick }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		children: [
+			title && /* @__PURE__ */ jsx(FlexBox, {
+				justifyContent: "center",
+				textAlign: "center",
+				mb: 8,
+				children: eyebrow ? /* @__PURE__ */ jsx(TitleWithEyebrow, {
+					title,
+					eyebrow,
+					isPageHeading: false,
+					titleStyle: {
+						fontWeight: 700,
+						fontSize: {
+							_: 44,
+							sm: 44
+						}
+					},
+					eyebrowStyle: {
+						fontWeight: "lighter",
+						fontSize: {
+							_: 16,
+							sm: 16
+						}
+					}
+				}) : /* @__PURE__ */ jsx(Title, {
+					isPageHeading: false,
+					children: title
+				})
+			}),
+			desc && /* @__PURE__ */ jsx(FlexBox, {
+				justifyContent: "center",
+				textAlign: "center",
+				children: /* @__PURE__ */ jsx(Description, {
+					text: desc,
+					onAnchorClick
+				})
+			}),
+			cta && /* @__PURE__ */ jsx(Box, {
+				mt: 32,
+				children: /* @__PURE__ */ jsx(CTA, {
+					href: cta.href,
+					onClick: cta.onClick,
+					buttonType: cta.buttonType,
+					children: cta.text
+				})
+			}),
+			/* @__PURE__ */ jsx(ColorMode, {
+				mode: "dark",
+				children: /* @__PURE__ */ jsx(Box, {
+					mt: 16,
+					children: renderEach(maxCols, features, ({ testId: testId$1, imgSrc, imgAlt, statText, title: featTitle, desc: desc$1 }) => /* @__PURE__ */ jsxs(Background, {
+						bg: "white-300",
+						borderRadius: "lg",
+						py: 24,
+						px: 16,
+						color: "white",
+						"data-testid": testId$1,
+						children: [
+							featuresMedia === "image" && imgSrc && /* @__PURE__ */ jsx(FeaturedImage, {
+								src: imgSrc,
+								alt: imgAlt ?? ""
+							}),
+							featuresMedia === "icon" && imgSrc && /* @__PURE__ */ jsx(FeaturedIcon, {
+								src: imgSrc,
+								alt: imgAlt ?? "",
+								props: {
+									mb: 16,
+									width: "48px",
+									height: "48px"
+								}
+							}),
+							featuresMedia === "stat" && /* @__PURE__ */ jsx(FeaturedStat, { children: statText }),
+							featTitle && /* @__PURE__ */ jsx(FeaturedTitle, {
+								as: desc$1 ? title ? "h3" : "h2" : "div",
+								props: {
+									fontSize: {
+										_: 20,
+										lg: 20
+									},
+									mb: 16
+								},
+								children: featTitle
+							}),
+							desc$1 && /* @__PURE__ */ jsx(FeaturedDescription, {
+								desc: desc$1,
+								onAnchorClick
+							})
+						]
+					}))
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+export { PageFeaturesEnhanced };

package/dist/LandingPage/PageFeaturesWithReferences.cjs

@@ -0,0 +1,128 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_FeatureList_index = require('../FeatureList/index.cjs');
+const require_CTA = require('./CTA.cjs');
+const require_Description = require('./Description.cjs');
+const require_Title = require('./Title.cjs');
+const require_TitleWithEyebrow = require('./TitleWithEyebrow.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 _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
+
+//#region src/LandingPage/PageFeaturesWithReferences.tsx
+const PageFeaturesWithReferences = ({ eyebrow, title, desc, cta, testId, rightCoverImage, showImageOnMobile, rightCoverPattern, onAnchorClick, featureList }) => {
+	const hasRightCoverImage = rightCoverImage && rightCoverImage?.url;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.LayoutGrid, {
+		"data-testid": testId,
+		p: 0,
+		m: 0,
+		gap: {
+			_: 8,
+			sm: 48
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Column, {
+			size: {
+				_: 12,
+				sm: 12,
+				md: hasRightCoverImage ? 7 : 12,
+				lg: hasRightCoverImage ? 6 : 12
+			},
+			p: {
+				_: 4,
+				sm: 8,
+				md: 24
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+				flexDirection: "column",
+				p: 0,
+				m: 0,
+				gap: 0,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+					title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, { children: eyebrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TitleWithEyebrow.TitleWithEyebrow, {
+						title,
+						eyebrow,
+						isPageHeading: false,
+						titleStyle: {
+							fontWeight: 700,
+							fontSize: {
+								_: 44,
+								sm: 44
+							}
+						},
+						eyebrowStyle: {
+							fontWeight: "lighter",
+							fontSize: {
+								_: 16,
+								sm: 16
+							}
+						}
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Title.Title, {
+						isPageHeading: false,
+						children: title
+					}) }),
+					desc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Description.Description, {
+						text: desc,
+						onAnchorClick
+					}) }),
+					cta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+						mt: 32,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CTA.CTA, {
+							href: cta.href,
+							onClick: cta.onClick,
+							buttonType: cta.buttonType,
+							children: cta.text
+						})
+					})
+				] }), featureList && featureList?.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FeatureList_index.FeatureList, { featureList })]
+			})
+		}), hasRightCoverImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Column, {
+			display: {
+				_: !showImageOnMobile ? "none" : "initial",
+				sm: "initial"
+			},
+			size: {
+				_: 12,
+				md: 4,
+				lg: 6
+			},
+			height: "100%",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+				position: "relative",
+				width: "100%",
+				height: {
+					_: "400px",
+					md: "100%"
+				},
+				children: [rightCoverPattern && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+					position: "absolute",
+					width: 125,
+					height: "calc(100% + 8rem)",
+					zIndex: 1,
+					left: "calc(50% - 4rem)",
+					top: "-4rem",
+					display: {
+						_: "none",
+						xs: "none",
+						sm: "block"
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.DotDense, {})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					style: {
+						width: "100%",
+						height: "100%",
+						objectFit: "contain",
+						justifySelf: "center",
+						position: "absolute",
+						zIndex: 2
+					},
+					src: rightCoverImage.url,
+					alt: title || "N/A"
+				})]
+			})
+		})]
+	});
+};
+
+//#endregion
+exports.PageFeaturesWithReferences = PageFeaturesWithReferences;

package/dist/LandingPage/PageFeaturesWithReferences.d.cts

@@ -0,0 +1,23 @@
+import { FeatureListItem } from "../FeatureList/index.cjs";
+import { LandingPageBaseProps } from "./types.cjs";
+import { Eyebrow } from "./PageSingleFeature.cjs";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageFeaturesWithReferences.d.ts
+interface PageFeaturesWithReferencesProps extends LandingPageBaseProps, WithChildrenProp {
+  /**
+   * Object containing eyebrow text shown above title and optional accent boolean
+   */
+  eyebrow?: Eyebrow;
+  maxCols?: 1 | 2 | 3 | 4;
+  featureList?: FeatureListItem[];
+  rightCoverImage?: {
+    url: string;
+  };
+  rightCoverPattern?: 'DotLoose' | 'DotDense';
+  showImageOnMobile?: boolean;
+}
+declare const PageFeaturesWithReferences: React$1.FC<PageFeaturesWithReferencesProps>;
+//#endregion
+export { PageFeaturesWithReferences, PageFeaturesWithReferencesProps };

package/dist/LandingPage/PageFeaturesWithReferences.d.ts

@@ -1,19 +1,23 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-import { FeatureListItem } from '../FeatureList';
-import { Eyebrow } from './PageSingleFeature';
-import { LandingPageBaseProps } from './types';
-export interface PageFeaturesWithReferencesProps extends LandingPageBaseProps, WithChildrenProp {
-    /**
-     * Object containing eyebrow text shown above title and optional accent boolean
-     */
-    eyebrow?: Eyebrow;
-    maxCols?: 1 | 2 | 3 | 4;
-    featureList?: FeatureListItem[];
-    rightCoverImage?: {
-        url: string;
-    };
-    rightCoverPattern?: 'DotLoose' | 'DotDense';
-    showImageOnMobile?: boolean;
+import { FeatureListItem } from "../FeatureList/index.js";
+import { LandingPageBaseProps } from "./types.js";
+import { Eyebrow } from "./PageSingleFeature.js";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageFeaturesWithReferences.d.ts
+interface PageFeaturesWithReferencesProps extends LandingPageBaseProps, WithChildrenProp {
+  /**
+   * Object containing eyebrow text shown above title and optional accent boolean
+   */
+  eyebrow?: Eyebrow;
+  maxCols?: 1 | 2 | 3 | 4;
+  featureList?: FeatureListItem[];
+  rightCoverImage?: {
+    url: string;
+  };
+  rightCoverPattern?: 'DotLoose' | 'DotDense';
+  showImageOnMobile?: boolean;
 }
-export declare const PageFeaturesWithReferences: React.FC<PageFeaturesWithReferencesProps>;
+declare const PageFeaturesWithReferences: React$1.FC<PageFeaturesWithReferencesProps>;
+//#endregion
+export { PageFeaturesWithReferences, PageFeaturesWithReferencesProps };