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

package/dist/BackToTopAnchor/index.js

@@ -1,38 +1,32 @@
-import { Anchor, FlexBox } from '@codecademy/gamut';
-import { ArrowUpIcon } from '@codecademy/gamut-icons';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BackToTopAnchor = ({
-  targetId,
-  showIcon = true,
-  size = 'base',
-  onClick,
-  variant
-}) => {
-  return /*#__PURE__*/_jsx(Anchor, {
-    onClick: () => {
-      // move focus to page title without scrolling page
-      document.getElementById(targetId)?.focus({
-        preventScroll: true
-      });
+import { Anchor, FlexBox } from "@codecademy/gamut";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon } from "@codecademy/gamut-icons";
 
-      // scroll to top (or jump to top if user prefers reduced motion)
-      window.scrollTo({
-        top: 0,
-        behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? undefined : 'smooth'
-      });
-      onClick?.();
-    },
-    variant: variant || 'interface',
-    fontSize: size === 'small' ? 14 : 18,
-    alignSelf: "end",
-    mt: 64,
-    children: /*#__PURE__*/_jsxs(FlexBox, {
-      alignItems: "center",
-      justifyContent: "center",
-      children: [showIcon && /*#__PURE__*/_jsx(ArrowUpIcon, {
-        size: 24,
-        mr: 8
-      }), " Back to top"]
-    })
-  });
-};
+//#region src/BackToTopAnchor/index.tsx
+const BackToTopAnchor = ({ targetId, showIcon = true, size = "base", onClick, variant }) => {
+	return /* @__PURE__ */ jsx(Anchor, {
+		onClick: () => {
+			document.getElementById(targetId)?.focus({ preventScroll: true });
+			window.scrollTo({
+				top: 0,
+				behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? void 0 : "smooth"
+			});
+			onClick?.();
+		},
+		variant: variant || "interface",
+		fontSize: size === "small" ? 14 : 18,
+		alignSelf: "end",
+		mt: 64,
+		children: /* @__PURE__ */ jsxs(FlexBox, {
+			alignItems: "center",
+			justifyContent: "center",
+			children: [showIcon && /* @__PURE__ */ jsx(ArrowUpIcon, {
+				size: 24,
+				mr: 8
+			}), " Back to top"]
+		})
+	});
+};
+
+//#endregion
+export { BackToTopAnchor };

package/dist/Banner/CountdownTimer.cjs

@@ -0,0 +1,111 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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");
+
+//#region src/Banner/CountdownTimer.tsx
+const MS_SECOND = 1e3;
+const MS_MINUTE = 60 * MS_SECOND;
+const MS_HOUR = 60 * MS_MINUTE;
+const MS_DAY = 24 * MS_HOUR;
+const getTimeRemaining = (target) => {
+	const diff = Math.max(0, target - Date.now());
+	return {
+		days: Math.floor(diff / MS_DAY),
+		hours: Math.floor(diff % MS_DAY / MS_HOUR),
+		minutes: Math.floor(diff % MS_HOUR / MS_MINUTE),
+		seconds: Math.floor(diff % MS_MINUTE / MS_SECOND)
+	};
+};
+const TimeUnit = react.default.memo(({ value, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+	alignItems: "center",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+		fontFamily: "accent",
+		fontWeight: 700,
+		variant: "title-md",
+		fontSize: {
+			_: 20,
+			md: 26
+		},
+		as: "span",
+		color: "inherit",
+		children: value.toString().padStart(2, "0")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+		fontFamily: "accent",
+		fontWeight: 700,
+		variant: "title-md",
+		fontSize: {
+			_: 20,
+			md: 26
+		},
+		as: "span",
+		color: "inherit",
+		children: label
+	})]
+}));
+const Separator = react.default.memo(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+	fontFamily: "accent",
+	variant: "title-md",
+	fontSize: 16,
+	color: "inherit",
+	fontWeight: "bold",
+	children: ":"
+}));
+const CountdownTimer = ({ targetDate, onExpire }) => {
+	const targetTimestamp = (0, react.useMemo)(() => new Date(targetDate).getTime(), [targetDate]);
+	const [timeRemaining, setTimeRemaining] = (0, react.useState)(() => getTimeRemaining(targetTimestamp));
+	(0, react.useEffect)(() => {
+		setTimeRemaining(getTimeRemaining(targetTimestamp));
+		if (targetTimestamp <= Date.now()) {
+			onExpire?.();
+			return;
+		}
+		const id = window.setInterval(() => {
+			setTimeRemaining(getTimeRemaining(targetTimestamp));
+			if (targetTimestamp <= Date.now()) {
+				onExpire?.();
+				window.clearInterval(id);
+			}
+		}, MS_SECOND);
+		return () => window.clearInterval(id);
+	}, [targetTimestamp, onExpire]);
+	if (targetTimestamp <= Date.now()) return null;
+	const { days, hours, minutes, seconds } = timeRemaining;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+		display: "inline-flex",
+		alignItems: "center",
+		py: 8,
+		px: 16,
+		bg: "yellow-0",
+		borderRadius: 6,
+		color: "navy",
+		"data-testid": "branded-countdown-timer",
+		boxShadow: "minimal",
+		gap: 2,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeUnit, {
+				value: days,
+				label: "d"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeUnit, {
+				value: hours,
+				label: "h"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeUnit, {
+				value: minutes,
+				label: "m"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeUnit, {
+				value: seconds,
+				label: "s"
+			})
+		]
+	});
+};
+
+//#endregion
+exports.CountdownTimer = CountdownTimer;

package/dist/Banner/CountdownTimer.d.cts

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/Banner/CountdownTimer.d.ts
+interface CountdownTimerProps {
+  targetDate: string;
+  onExpire?: () => void;
+}
+declare const CountdownTimer: React.FC<CountdownTimerProps>;
+//#endregion
+export { CountdownTimer };

package/dist/Banner/CountdownTimer.d.ts

@@ -1,7 +1,10 @@
-import React from 'react';
+import React from "react";
+
+//#region src/Banner/CountdownTimer.d.ts
 interface CountdownTimerProps {
-    targetDate: string;
-    onExpire?: () => void;
+  targetDate: string;
+  onExpire?: () => void;
 }
-export declare const CountdownTimer: React.FC<CountdownTimerProps>;
-export {};
+declare const CountdownTimer: React.FC<CountdownTimerProps>;
+//#endregion
+export { CountdownTimer };

package/dist/Banner/CountdownTimer.js

@@ -1,110 +1,109 @@
-import { Box, FlexBox, Text } from '@codecademy/gamut';
-import React, { useEffect, useMemo, useState } from 'react';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MS_SECOND = 1000;
+import { Box, FlexBox, Text } from "@codecademy/gamut";
+import React, { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Banner/CountdownTimer.tsx
+const MS_SECOND = 1e3;
 const MS_MINUTE = 60 * MS_SECOND;
 const MS_HOUR = 60 * MS_MINUTE;
 const MS_DAY = 24 * MS_HOUR;
-const getTimeRemaining = target => {
-  const diff = Math.max(0, target - Date.now());
-  return {
-    days: Math.floor(diff / MS_DAY),
-    hours: Math.floor(diff % MS_DAY / MS_HOUR),
-    minutes: Math.floor(diff % MS_HOUR / MS_MINUTE),
-    seconds: Math.floor(diff % MS_MINUTE / MS_SECOND)
-  };
+const getTimeRemaining = (target) => {
+	const diff = Math.max(0, target - Date.now());
+	return {
+		days: Math.floor(diff / MS_DAY),
+		hours: Math.floor(diff % MS_DAY / MS_HOUR),
+		minutes: Math.floor(diff % MS_HOUR / MS_MINUTE),
+		seconds: Math.floor(diff % MS_MINUTE / MS_SECOND)
+	};
 };
-const TimeUnit = /*#__PURE__*/React.memo(({
-  value,
-  label
-}) => /*#__PURE__*/_jsxs(FlexBox, {
-  alignItems: "center",
-  children: [/*#__PURE__*/_jsx(Text, {
-    fontFamily: "accent",
-    fontWeight: 700,
-    variant: "title-md",
-    fontSize: {
-      _: 20,
-      md: 26
-    },
-    as: "span",
-    color: "inherit",
-    children: value.toString().padStart(2, '0')
-  }), /*#__PURE__*/_jsx(Text, {
-    fontFamily: "accent",
-    fontWeight: 700,
-    variant: "title-md",
-    fontSize: {
-      _: 20,
-      md: 26
-    },
-    as: "span",
-    color: "inherit",
-    children: label
-  })]
+const TimeUnit = React.memo(({ value, label }) => /* @__PURE__ */ jsxs(FlexBox, {
+	alignItems: "center",
+	children: [/* @__PURE__ */ jsx(Text, {
+		fontFamily: "accent",
+		fontWeight: 700,
+		variant: "title-md",
+		fontSize: {
+			_: 20,
+			md: 26
+		},
+		as: "span",
+		color: "inherit",
+		children: value.toString().padStart(2, "0")
+	}), /* @__PURE__ */ jsx(Text, {
+		fontFamily: "accent",
+		fontWeight: 700,
+		variant: "title-md",
+		fontSize: {
+			_: 20,
+			md: 26
+		},
+		as: "span",
+		color: "inherit",
+		children: label
+	})]
 }));
-const Separator = /*#__PURE__*/React.memo(() => /*#__PURE__*/_jsx(Text, {
-  fontFamily: "accent",
-  variant: "title-md",
-  fontSize: 16,
-  color: "inherit",
-  fontWeight: "bold",
-  children: ":"
+const Separator = React.memo(() => /* @__PURE__ */ jsx(Text, {
+	fontFamily: "accent",
+	variant: "title-md",
+	fontSize: 16,
+	color: "inherit",
+	fontWeight: "bold",
+	children: ":"
 }));
-export const CountdownTimer = ({
-  targetDate,
-  onExpire
-}) => {
-  const targetTimestamp = useMemo(() => new Date(targetDate).getTime(), [targetDate]);
-  const [timeRemaining, setTimeRemaining] = useState(() => getTimeRemaining(targetTimestamp));
-  useEffect(() => {
-    setTimeRemaining(getTimeRemaining(targetTimestamp));
-    if (targetTimestamp <= Date.now()) {
-      onExpire?.();
-      return;
-    }
-    const id = window.setInterval(() => {
-      const next = getTimeRemaining(targetTimestamp);
-      setTimeRemaining(next);
-      if (targetTimestamp <= Date.now()) {
-        onExpire?.();
-        window.clearInterval(id);
-      }
-    }, MS_SECOND);
-    return () => window.clearInterval(id);
-  }, [targetTimestamp, onExpire]);
-  if (targetTimestamp <= Date.now()) {
-    return null;
-  }
-  const {
-    days,
-    hours,
-    minutes,
-    seconds
-  } = timeRemaining;
-  return /*#__PURE__*/_jsxs(Box, {
-    display: "inline-flex",
-    alignItems: "center",
-    py: 8,
-    px: 16,
-    bg: "yellow-0",
-    borderRadius: 6,
-    color: "navy",
-    "data-testid": "branded-countdown-timer",
-    boxShadow: "minimal",
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(TimeUnit, {
-      value: days,
-      label: "d"
-    }), /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsx(TimeUnit, {
-      value: hours,
-      label: "h"
-    }), /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsx(TimeUnit, {
-      value: minutes,
-      label: "m"
-    }), /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsx(TimeUnit, {
-      value: seconds,
-      label: "s"
-    })]
-  });
-};
+const CountdownTimer = ({ targetDate, onExpire }) => {
+	const targetTimestamp = useMemo(() => new Date(targetDate).getTime(), [targetDate]);
+	const [timeRemaining, setTimeRemaining] = useState(() => getTimeRemaining(targetTimestamp));
+	useEffect(() => {
+		setTimeRemaining(getTimeRemaining(targetTimestamp));
+		if (targetTimestamp <= Date.now()) {
+			onExpire?.();
+			return;
+		}
+		const id = window.setInterval(() => {
+			setTimeRemaining(getTimeRemaining(targetTimestamp));
+			if (targetTimestamp <= Date.now()) {
+				onExpire?.();
+				window.clearInterval(id);
+			}
+		}, MS_SECOND);
+		return () => window.clearInterval(id);
+	}, [targetTimestamp, onExpire]);
+	if (targetTimestamp <= Date.now()) return null;
+	const { days, hours, minutes, seconds } = timeRemaining;
+	return /* @__PURE__ */ jsxs(Box, {
+		display: "inline-flex",
+		alignItems: "center",
+		py: 8,
+		px: 16,
+		bg: "yellow-0",
+		borderRadius: 6,
+		color: "navy",
+		"data-testid": "branded-countdown-timer",
+		boxShadow: "minimal",
+		gap: 2,
+		children: [
+			/* @__PURE__ */ jsx(TimeUnit, {
+				value: days,
+				label: "d"
+			}),
+			/* @__PURE__ */ jsx(Separator, {}),
+			/* @__PURE__ */ jsx(TimeUnit, {
+				value: hours,
+				label: "h"
+			}),
+			/* @__PURE__ */ jsx(Separator, {}),
+			/* @__PURE__ */ jsx(TimeUnit, {
+				value: minutes,
+				label: "m"
+			}),
+			/* @__PURE__ */ jsx(Separator, {}),
+			/* @__PURE__ */ jsx(TimeUnit, {
+				value: seconds,
+				label: "s"
+			})
+		]
+	});
+};
+
+//#endregion
+export { CountdownTimer };

package/dist/Banner/EnhancedBanner.cjs

@@ -0,0 +1,142 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_CountdownTimer = require('./CountdownTimer.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");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+let _emotion_react = require("@emotion/react");
+
+//#region src/Banner/EnhancedBanner.tsx
+const bannerVariants = {
+	navy: "navy",
+	yellow: "yellow",
+	subtle: "background-hover"
+};
+const bannerStyles = {
+	width: "100%",
+	p: 4,
+	display: "grid",
+	gridTemplateColumns: "2rem minmax(0, 1fr) 2rem",
+	gridTemplateAreas: "'empty content close'",
+	columnGap: 8,
+	alignItems: "center",
+	textAlign: "center"
+};
+const BannerBg = (0, _emotion_styled.default)(_codecademy_gamut_styles.Background)((0, _codecademy_gamut_styles.css)(bannerStyles));
+const BannerBox = (0, _emotion_styled.default)(_codecademy_gamut.Box)((0, _codecademy_gamut_styles.css)(bannerStyles));
+const StyledMarkdown = (0, _emotion_styled.default)(_codecademy_gamut.Markdown)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+const StyledTitle = (0, _emotion_styled.default)(StyledMarkdown)`
+  p {
+    font-size: 22px;
+    font-weight: 700;
+  }
+`;
+const StyledSubheader = (0, _emotion_styled.default)(StyledMarkdown)`
+  p {
+    font-size: 16px;
+  }
+`;
+const EnhancedBanner = ({ variant = "navy", onClose, onCtaClick, ctaAriaLabel, header, subheader, cta, countdownTo, onCountdownExpire, ...rest }) => {
+	const validCta = (0, react.useMemo)(() => cta && cta.title && cta.href ? cta : void 0, [cta]);
+	const { mode } = (0, _emotion_react.useTheme)();
+	const isDarkMode = mode === "dark";
+	if (!header) return null;
+	const renderEnhanced = () => {
+		const textBlock = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+			textAlign: {
+				_: "center",
+				md: "left"
+			},
+			width: "100%",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTitle, { text: header }), subheader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSubheader, { text: subheader })]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+			flexDirection: {
+				_: "column",
+				md: "row"
+			},
+			alignItems: "center",
+			justifyContent: "center",
+			width: "100%",
+			p: 8,
+			gap: {
+				_: 16,
+				md: 40
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					gap: 16,
+					alignItems: "center",
+					children: [countdownTo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CountdownTimer.CountdownTimer, {
+						targetDate: countdownTo,
+						onExpire: onCountdownExpire
+					}), validCta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+						display: {
+							_: "flex",
+							md: "none"
+						},
+						ml: 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FillButton, {
+							variant: "primary",
+							href: validCta.href,
+							onClick: onCtaClick,
+							children: validCta.title
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+					maxWidth: {
+						_: "100%",
+						md: "50%"
+					},
+					children: textBlock
+				}),
+				validCta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+					display: {
+						_: "none",
+						md: "flex"
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FillButton, {
+						variant: isDarkMode ? "secondary" : "primary",
+						href: validCta.href,
+						onClick: onCtaClick,
+						children: validCta.title
+					})
+				})
+			]
+		});
+	};
+	const backgroundVariant = isDarkMode ? "yellow" : variant;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(backgroundVariant === "subtle" ? BannerBox : BannerBg, {
+		...rest,
+		bg: bannerVariants[backgroundVariant ?? "navy"],
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			gridArea: "content",
+			fontSize: "inherit",
+			children: renderEnhanced()
+		}), onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			gridArea: "close",
+			alignSelf: "center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
+				variant: "secondary",
+				size: "small",
+				icon: _codecademy_gamut_icons.MiniDeleteIcon,
+				onClick: onClose,
+				tip: "Close banner",
+				tipProps: { alignment: "left-center" }
+			})
+		})]
+	});
+};
+
+//#endregion
+exports.EnhancedBanner = EnhancedBanner;

package/dist/Banner/EnhancedBanner.d.cts

@@ -0,0 +1,20 @@
+import { BannerVariant } from "./index.cjs";
+import { BackgroundProps } from "@codecademy/gamut-styles";
+
+//#region src/Banner/EnhancedBanner.d.ts
+interface EnhancedBannerProps extends Omit<BackgroundProps, 'bg' | 'containerType'> {
+  variant?: BannerVariant | null;
+  onClose?: () => void;
+  onCtaClick?: () => void;
+  ctaAriaLabel?: string;
+  header?: string | null;
+  subheader?: string | null;
+  cta?: {
+    title: string;
+    href: string;
+  } | null;
+  countdownTo?: string | null;
+  onCountdownExpire?: () => void;
+}
+//#endregion
+export { EnhancedBannerProps };

package/dist/Banner/EnhancedBanner.d.ts

@@ -1,17 +1,20 @@
-import { BackgroundProps } from '@codecademy/gamut-styles';
-import { BannerVariant } from '.';
-export interface EnhancedBannerProps extends Omit<BackgroundProps, 'bg' | 'containerType'> {
-    variant?: BannerVariant | null;
-    onClose?: () => void;
-    onCtaClick?: () => void;
-    ctaAriaLabel?: string;
-    header?: string | null;
-    subheader?: string | null;
-    cta?: {
-        title: string;
-        href: string;
-    } | null;
-    countdownTo?: string | null;
-    onCountdownExpire?: () => void;
+import { BannerVariant } from "./index.js";
+import { BackgroundProps } from "@codecademy/gamut-styles";
+
+//#region src/Banner/EnhancedBanner.d.ts
+interface EnhancedBannerProps extends Omit<BackgroundProps, 'bg' | 'containerType'> {
+  variant?: BannerVariant | null;
+  onClose?: () => void;
+  onCtaClick?: () => void;
+  ctaAriaLabel?: string;
+  header?: string | null;
+  subheader?: string | null;
+  cta?: {
+    title: string;
+    href: string;
+  } | null;
+  countdownTo?: string | null;
+  onCountdownExpire?: () => void;
 }
-export declare const EnhancedBanner: React.FC<EnhancedBannerProps>;
+//#endregion
+export { EnhancedBannerProps };