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

package/dist/Carousel/elements.js

@@ -1,14 +1,10 @@
-import _styled from "@emotion/styled/base";
-import { IconButton } from '@codecademy/gamut';
-import { css, states } from '@codecademy/gamut-styles';
-const arrowButtonStates = states({
-  disabled: {
-    borderColor: 'background-disabled'
-  }
-});
-export const ArrowButton = /*#__PURE__*/_styled(IconButton, {
-  target: "e1b3xblu0",
-  label: "ArrowButton"
-})(css({
-  borderColor: 'currentColor'
-}), arrowButtonStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9DYXJvdXNlbC9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUTJCIiwiZmlsZSI6Ii4uLy4uL3NyYy9DYXJvdXNlbC9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJY29uQnV0dG9uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgY3NzLCBzdGF0ZXMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuY29uc3QgYXJyb3dCdXR0b25TdGF0ZXMgPSBzdGF0ZXMoe1xuICBkaXNhYmxlZDogeyBib3JkZXJDb2xvcjogJ2JhY2tncm91bmQtZGlzYWJsZWQnIH0sXG59KTtcbmV4cG9ydCBjb25zdCBBcnJvd0J1dHRvbiA9IHN0eWxlZChJY29uQnV0dG9uKTxcbiAgU3R5bGVQcm9wczx0eXBlb2YgYXJyb3dCdXR0b25TdGF0ZXM+XG4+KGNzcyh7IGJvcmRlckNvbG9yOiAnY3VycmVudENvbG9yJyB9KSwgYXJyb3dCdXR0b25TdGF0ZXMpO1xuIl19 */");
+import { IconButton } from "@codecademy/gamut";
+import { css, states } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+
+//#region src/Carousel/elements.tsx
+const arrowButtonStates = states({ disabled: { borderColor: "background-disabled" } });
+const ArrowButton = styled(IconButton)(css({ borderColor: "currentColor" }), arrowButtonStates);
+
+//#endregion
+export { ArrowButton };

package/dist/Carousel/index.cjs

@@ -0,0 +1,194 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_elements = require('./elements.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");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+let _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
+require("@splidejs/splide/dist/css/splide.min.css");
+let _emotion_is_prop_valid = require("@emotion/is-prop-valid");
+_emotion_is_prop_valid = require_rolldown_runtime.__toESM(_emotion_is_prop_valid);
+let _splidejs_react_splide = require("@splidejs/react-splide");
+
+//#region src/Carousel/index.tsx
+const CarouselWrapper = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  transform: translateX(-1rem);
+  width: calc(100% + 2rem);
+`;
+const SplideTrack = (0, _emotion_styled.default)(_splidejs_react_splide.SplideTrack, { shouldForwardProp: _emotion_is_prop_valid.default })`
+  padding-top: ${(props) => props.patternedBackground ? "1rem" : "0"};
+  padding-bottom: ${(props) => props.patternedBackground ? "2rem" : "0"};
+`;
+const SplideSlide = (0, _emotion_styled.default)(_splidejs_react_splide.SplideSlide, { shouldForwardProp: _emotion_is_prop_valid.default })`
+  display: flex;
+  flex-shrink: ${(props) => props.noShrink ? "initial" : 0};
+`;
+const defaultOptions = {
+	gap: "2rem",
+	perPage: 3,
+	pagination: false,
+	keyboard: false,
+	slideFocus: false,
+	arrows: false,
+	perMove: 2,
+	padding: "1rem",
+	breakpoints: { [parseInt(_codecademy_gamut_styles.breakpoints.md, 10)]: {
+		perPage: 2,
+		perMove: 1
+	} }
+};
+const StyledBox = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)`
+  list-style-type: none;
+`;
+const PatternedContainer = ({ as, children, bottomPadding, leftPadding, overflowAuto }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+		position: "relative",
+		py: 24,
+		px: 8,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			borderRadius: "lg",
+			overflow: "hidden",
+			position: "absolute",
+			top: 0,
+			bottom: 0,
+			left: 0,
+			width: "100%",
+			zIndex: 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.CheckerDense, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBox, {
+			as,
+			columnGap: 64,
+			position: "relative",
+			overflowX: overflowAuto ? "auto" : "hidden",
+			pt: 16,
+			pb: bottomPadding ? 24 : 0,
+			pl: { xl: leftPadding ? 16 : 0 },
+			m: 0,
+			zIndex: 1,
+			children
+		})]
+	});
+};
+const Carousel = ({ items, leftPadding = false, onArrowClick, options: optionsProp = {}, patternedBackground = false, showArrowDisplay, arrowPosition = "top", title, variant = "catalog_home" }) => {
+	const ref = (0, react.useRef)(null);
+	const [index, setIndex] = (0, react.useState)(0);
+	const [lastIndex, setLastIndex] = (0, react.useState)();
+	(0, react.useEffect)(() => {
+		if (ref.current?.splide?.options.perPage) setLastIndex(items.length - ref.current.splide.options.perPage);
+		else setLastIndex(items.length);
+	}, [items, ref.current?.splide?.options.perPage]);
+	const options = (0, react.useMemo)(() => {
+		return {
+			...defaultOptions,
+			...optionsProp
+		};
+	}, [optionsProp]);
+	const arrowDisplay = (0, react.useMemo)(() => {
+		switch (items.length) {
+			case 1:
+			case 2: return "none";
+			default: return "flex";
+		}
+	}, [items]);
+	const onClickForward = () => {
+		onArrowClick?.({ target: "forward_arrow" });
+		ref.current?.go(">");
+	};
+	const onClickBack = () => {
+		onArrowClick?.({ target: "backward_arrow" });
+		ref.current?.go("<");
+	};
+	const determineLastIndex = (perPage) => {
+		setLastIndex(items.length - perPage);
+	};
+	const isCatalogHubVariant = variant === "catalog_hub";
+	const CarouselContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_splidejs_react_splide.Splide, {
+		onMove: ({ index: index$1 }) => setIndex(index$1),
+		onUpdated: (splide) => {
+			if (splide.options.perPage) determineLastIndex(splide.options.perPage);
+		},
+		onMounted: (splide) => {
+			if (splide.options.perPage) determineLastIndex(splide.options.perPage);
+			if (splide.options.autoplay) splide.Components.Autoplay.play();
+		},
+		hasTrack: false,
+		ref,
+		options: { ...options },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SplideTrack, {
+			patternedBackground,
+			children: items.map((item, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SplideSlide, {
+				noShrink: items.length === 1 && options.perPage !== 1,
+				children: item
+			}, index$1))
+		})
+	});
+	const shouldDisplayArrow = (showArrowDisplay$1) => {
+		if (showArrowDisplay$1) {
+			if (typeof showArrowDisplay$1 === "function") return showArrowDisplay$1(items.length) ? "flex" : "none";
+			const displayProps = {
+				_: "",
+				xs: "",
+				sm: "",
+				md: "",
+				lg: "",
+				xl: ""
+			};
+			Object.keys(displayProps).forEach((screensize) => {
+				displayProps[screensize] = isCatalogHubVariant || showArrowDisplay$1?.[screensize] ? "flex" : arrowDisplay;
+			});
+			return displayProps;
+		}
+		return isCatalogHubVariant ? "flex" : arrowDisplay;
+	};
+	const arrows = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+		display: shouldDisplayArrow(showArrowDisplay),
+		pr: 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.ArrowButton, {
+			disabled: index === 0,
+			icon: _codecademy_gamut_icons.MiniChevronLeftIcon,
+			mr: 8,
+			onClick: onClickBack,
+			px: 4,
+			tip: "Scroll backward",
+			tipProps: { placement: "floating" }
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.ArrowButton, {
+			disabled: index === lastIndex,
+			icon: _codecademy_gamut_icons.MiniChevronRightIcon,
+			onClick: onClickForward,
+			px: 4,
+			tip: "Scroll forward",
+			tipProps: { placement: "floating" }
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+			justifyContent: {
+				_: title ? "space-between" : isCatalogHubVariant ? "start" : "end",
+				md: title ? "space-between" : "end"
+			},
+			pb: 8,
+			alignItems: "baseline",
+			children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+				pb: patternedBackground ? 8 : 0,
+				children: title
+			}) : null, arrowPosition === "top" ? arrows : null]
+		}),
+		patternedBackground ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PatternedContainer, {
+			leftPadding,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselWrapper, { children: CarouselContent })
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselWrapper, { children: CarouselContent }),
+		arrowPosition === "bottom" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			justifyContent: "flex-end",
+			pt: 8,
+			children: arrows
+		}) : null
+	] });
+};
+
+//#endregion
+exports.Carousel = Carousel;
+exports.PatternedContainer = PatternedContainer;

package/dist/Carousel/index.d.cts

@@ -0,0 +1,27 @@
+import React from "react";
+import { breakpoints } from "@codecademy/gamut-styles";
+import { UserClickData } from "@codecademy/tracking";
+import { Options } from "@splidejs/react-splide";
+
+//#region src/Carousel/index.d.ts
+type Breakpoint = keyof typeof breakpoints;
+type CarouselProps = {
+  items: JSX.Element[];
+  onArrowClick?: (props: UserClickData) => void;
+  options?: Options;
+  patternedBackground?: boolean;
+  leftPadding?: boolean;
+  showArrowDisplay?: Record<Breakpoint, boolean> | ((count: number) => boolean);
+  arrowPosition?: 'top' | 'bottom';
+  title?: JSX.Element;
+  variant?: 'catalog_home' | 'catalog_hub';
+};
+declare const PatternedContainer: React.FC<React.PropsWithChildren<{
+  as?: React.ElementType<any>;
+  bottomPadding?: boolean;
+  leftPadding?: boolean;
+  overflowAuto?: boolean;
+}>>;
+declare const Carousel: React.FC<CarouselProps>;
+//#endregion
+export { Carousel, PatternedContainer };

package/dist/Carousel/index.d.ts

@@ -1,25 +1,28 @@
-import '@splidejs/splide/dist/css/splide.min.css';
-import { breakpoints } from '@codecademy/gamut-styles';
-import { UserClickData } from '@codecademy/tracking';
-import { Options } from '@splidejs/react-splide';
-import React from 'react';
+import { breakpoints } from "@codecademy/gamut-styles";
+import React from "react";
+import "@splidejs/splide/dist/css/splide.min.css";
+import { Options } from "@splidejs/react-splide";
+import { UserClickData } from "@codecademy/tracking";
+
+//#region src/Carousel/index.d.ts
 type Breakpoint = keyof typeof breakpoints;
 type CarouselProps = {
-    items: JSX.Element[];
-    onArrowClick?: (props: UserClickData) => void;
-    options?: Options;
-    patternedBackground?: boolean;
-    leftPadding?: boolean;
-    showArrowDisplay?: Record<Breakpoint, boolean> | ((count: number) => boolean);
-    arrowPosition?: 'top' | 'bottom';
-    title?: JSX.Element;
-    variant?: 'catalog_home' | 'catalog_hub';
+  items: JSX.Element[];
+  onArrowClick?: (props: UserClickData) => void;
+  options?: Options;
+  patternedBackground?: boolean;
+  leftPadding?: boolean;
+  showArrowDisplay?: Record<Breakpoint, boolean> | ((count: number) => boolean);
+  arrowPosition?: 'top' | 'bottom';
+  title?: JSX.Element;
+  variant?: 'catalog_home' | 'catalog_hub';
 };
-export declare const PatternedContainer: React.FC<React.PropsWithChildren<{
-    as?: React.ElementType<any>;
-    bottomPadding?: boolean;
-    leftPadding?: boolean;
-    overflowAuto?: boolean;
+declare const PatternedContainer: React.FC<React.PropsWithChildren<{
+  as?: React.ElementType<any>;
+  bottomPadding?: boolean;
+  leftPadding?: boolean;
+  overflowAuto?: boolean;
 }>>;
-export declare const Carousel: React.FC<CarouselProps>;
-export {};
+declare const Carousel: React.FC<CarouselProps>;
+//#endregion
+export { Carousel, PatternedContainer };