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

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.js

@@ -1,128 +1,101 @@
-import { Box, FlexBox } from '@codecademy/gamut';
-import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
-import React, { useContext, useEffect, useRef } from 'react';
-import { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { NavIconButton, NavIconButtonContainer, NavigationButton, OverflowText, StyledNavTabPanel } from './elements';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Tab content, only one should be visible at a time
-const NavTabPanel = ({
-  children,
-  isActiveTab,
-  index,
-  id
-}) => {
-  return /*#__PURE__*/_jsx(StyledNavTabPanel, {
-    isFirst: index === 0,
-    role: "tabpanel",
-    id: `${id}-panel`,
-    "aria-labelledby": `${id}-tab`,
-    display: isActiveTab ? 'block' : 'none',
-    gridColumn: "2 / span 12",
-    gridRow: "1 / span 8",
-    bg: "background",
-    px: 32,
-    pt: 16,
-    pb: 24,
-    children: children
-  });
-};
+import { NavIconButton, NavIconButtonContainer, NavigationButton, OverflowText, StyledNavTabPanel } from "./elements.js";
+import { AppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.js";
+import { Box, FlexBox } from "@codecademy/gamut";
+import React, { useContext, useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowChevronRightIcon } from "@codecademy/gamut-icons";
 
-// Holds all of the tab buttons
-const NavTabList = /*#__PURE__*/React.forwardRef(({
-  children,
-  type
-}, ref) => {
-  return /*#__PURE__*/_jsx(FlexBox, {
-    role: "tablist",
-    "aria-label": `${type.replace('-dropdown', '')} navigation`,
-    "aria-orientation": "vertical",
-    flexDirection: "column",
-    gap: 8,
-    ref: ref,
-    children: children
-  });
+//#region src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx
+const NavTabPanel = ({ children, isActiveTab, index, id }) => {
+	return /* @__PURE__ */ jsx(StyledNavTabPanel, {
+		isFirst: index === 0,
+		role: "tabpanel",
+		id: `${id}-panel`,
+		"aria-labelledby": `${id}-tab`,
+		display: isActiveTab ? "block" : "none",
+		gridColumn: "2 / span 12",
+		gridRow: "1 / span 8",
+		bg: "background",
+		px: 32,
+		pt: 16,
+		pb: 24,
+		children
+	});
+};
+const NavTabList = React.forwardRef(({ children, type }, ref) => {
+	return /* @__PURE__ */ jsx(FlexBox, {
+		role: "tablist",
+		"aria-label": `${type.replace("-dropdown", "")} navigation`,
+		"aria-orientation": "vertical",
+		flexDirection: "column",
+		gap: 8,
+		ref,
+		children
+	});
 });
-
-// Tab button, lets you switch between tabs
-// at larger breakpoints we use a normal button, at smaller
-// breakpoints we use an IconButton.
-const NavTab = ({
-  item,
-  onSelect,
-  isActive,
-  onKeyDown,
-  index
-}) => {
-  const sharedButtonProps = {
-    role: 'tab',
-    'aria-selected': isActive,
-    'aria-controls': `${item.id}-panel`,
-    onClick: event => onSelect(item.id, event, item),
-    onKeyDown,
-    tabIndex: isActive ? 0 : -1,
-    isActive,
-    id: `${item.id}-tab`
-  };
-  const buttonRef = useRef(null);
-  const {
-    setFirstItemRef
-  } = useContext(AppHeaderDropdownContext);
-  useEffect(() => {
-    if (index === 0 && buttonRef.current) {
-      setFirstItemRef?.(buttonRef.current);
-    }
-  }, [index, setFirstItemRef]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(NavigationButton, {
-      ref: buttonRef,
-      ...sharedButtonProps,
-      children: [/*#__PURE__*/_jsxs(FlexBox, {
-        gap: 8,
-        alignItems: "center",
-        children: [item.icon && /*#__PURE__*/_jsx(Box, {
-          height: 24,
-          width: 24,
-          children: /*#__PURE__*/_jsx(item.icon, {
-            size: 24
-          })
-        }), /*#__PURE__*/_jsx(OverflowText, {
-          maxWidth: {
-            _: '110px',
-            md: 'none'
-          },
-          children: item.text
-        })]
-      }), /*#__PURE__*/_jsx(FlexBox, {
-        alignItems: "center",
-        children: isActive && /*#__PURE__*/_jsx(Box, {
-          display: {
-            _: 'none',
-            sm: 'block'
-          },
-          mt: 4,
-          children: /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
-            "data-testid": "chevron-right-icon"
-          })
-        })
-      })]
-    }), item.icon && /*#__PURE__*/_jsx(NavIconButtonContainer, {
-      display: {
-        _: 'none',
-        xs: 'grid',
-        sm: 'none'
-      },
-      ...sharedButtonProps,
-      children: /*#__PURE__*/_jsx(NavIconButton, {
-        icon: item.icon,
-        tip: item.text,
-        tipProps: {
-          alignment: 'right-center',
-          narrow: false,
-          placement: 'floating'
-        },
-        "aria-label": item.text
-      })
-    })]
-  });
+const NavTab = ({ item, onSelect, isActive, onKeyDown, index }) => {
+	const sharedButtonProps = {
+		role: "tab",
+		"aria-selected": isActive,
+		"aria-controls": `${item.id}-panel`,
+		onClick: (event) => onSelect(item.id, event, item),
+		onKeyDown,
+		tabIndex: isActive ? 0 : -1,
+		isActive,
+		id: `${item.id}-tab`
+	};
+	const buttonRef = useRef(null);
+	const { setFirstItemRef } = useContext(AppHeaderDropdownContext);
+	useEffect(() => {
+		if (index === 0 && buttonRef.current) setFirstItemRef?.(buttonRef.current);
+	}, [index, setFirstItemRef]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(NavigationButton, {
+		ref: buttonRef,
+		...sharedButtonProps,
+		children: [/* @__PURE__ */ jsxs(FlexBox, {
+			gap: 8,
+			alignItems: "center",
+			children: [item.icon && /* @__PURE__ */ jsx(Box, {
+				height: 24,
+				width: 24,
+				children: /* @__PURE__ */ jsx(item.icon, { size: 24 })
+			}), /* @__PURE__ */ jsx(OverflowText, {
+				maxWidth: {
+					_: "110px",
+					md: "none"
+				},
+				children: item.text
+			})]
+		}), /* @__PURE__ */ jsx(FlexBox, {
+			alignItems: "center",
+			children: isActive && /* @__PURE__ */ jsx(Box, {
+				display: {
+					_: "none",
+					sm: "block"
+				},
+				mt: 4,
+				children: /* @__PURE__ */ jsx(ArrowChevronRightIcon, { "data-testid": "chevron-right-icon" })
+			})
+		})]
+	}), item.icon && /* @__PURE__ */ jsx(NavIconButtonContainer, {
+		display: {
+			_: "none",
+			xs: "grid",
+			sm: "none"
+		},
+		...sharedButtonProps,
+		children: /* @__PURE__ */ jsx(NavIconButton, {
+			icon: item.icon,
+			tip: item.text,
+			tipProps: {
+				alignment: "right-center",
+				narrow: false,
+				placement: "floating"
+			},
+			"aria-label": item.text
+		})
+	})] });
 };
-export { NavTabPanel, NavTabList, NavTab };
+
+//#endregion
+export { NavTab, NavTabList, NavTabPanel };

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.cjs

@@ -0,0 +1,84 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_context = require('../../../GlobalHeader/context.cjs');
+const require_index = require('../AppHeaderDropdownProvider/index.cjs');
+const require_AppHeaderSectionContext = require('./AppHeaderSectionContext.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.tsx
+const PanelLayout = ({ heading, description, linkItem, children }) => {
+	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
+	const { handleClose } = require_index.useAppHeaderDropdownContext();
+	const { setActivePanel, tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+		flexDirection: "column",
+		gap: {
+			_: 8,
+			xs: 8
+		},
+		pr: {
+			_: 0,
+			md: 16,
+			lg: 0
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+				alignItems: "center",
+				gap: {
+					_: 8,
+					xs: 0
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
+					onClick: () => setActivePanel(null),
+					icon: _codecademy_gamut_icons.ArrowLeftIcon,
+					tip: "Back to main navigation",
+					tipProps: {
+						alignment: "right-center",
+						narrow: false,
+						placement: "floating"
+					},
+					"aria-label": "Back to main navigation",
+					display: {
+						_: "flex",
+						xs: "none"
+					}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+					as: "h2",
+					variant: "title-sm",
+					children: heading
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				mb: 16,
+				children: description
+			}),
+			children,
+			linkItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+				justifyContent: "center",
+				mt: 16,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
+					href: linkItem.href,
+					onClick: (event) => {
+						globalHeaderItemClick(event, linkItem);
+						handleClose();
+					},
+					tabIndex,
+					variant: "standard",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+						alignItems: "center",
+						gap: 8,
+						children: [
+							linkItem.text,
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.MiniArrowRightIcon, {})
+						]
+					})
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+exports.PanelLayout = PanelLayout;

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.js

@@ -1,81 +1,83 @@
-import { Anchor, FlexBox, IconButton, Text } from '@codecademy/gamut';
-import { ArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';
-import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
-import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { useAppHeaderSectionContext } from './AppHeaderSectionContext';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PanelLayout = ({
-  heading,
-  description,
-  linkItem,
-  children
-}) => {
-  const {
-    globalHeaderItemClick
-  } = useGlobalHeaderItemClick();
-  const {
-    handleClose
-  } = useAppHeaderDropdownContext();
-  const {
-    setActivePanel,
-    tabIndex
-  } = useAppHeaderSectionContext();
-  return /*#__PURE__*/_jsxs(FlexBox, {
-    flexDirection: "column",
-    gap: {
-      _: 8,
-      xs: 8
-    },
-    pr: {
-      _: 0,
-      md: 16,
-      lg: 0
-    },
-    children: [/*#__PURE__*/_jsxs(FlexBox, {
-      alignItems: "center",
-      gap: {
-        _: 8,
-        xs: 0
-      },
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        onClick: () => setActivePanel(null),
-        icon: ArrowLeftIcon,
-        tip: "Back to main navigation",
-        tipProps: {
-          alignment: 'right-center',
-          narrow: false,
-          placement: 'floating'
-        },
-        "aria-label": "Back to main navigation",
-        display: {
-          _: 'flex',
-          xs: 'none'
-        }
-      }), /*#__PURE__*/_jsx(Text, {
-        as: "h2",
-        variant: "title-sm",
-        children: heading
-      })]
-    }), /*#__PURE__*/_jsx(Text, {
-      mb: 16,
-      children: description
-    }), children, linkItem && /*#__PURE__*/_jsx(FlexBox, {
-      justifyContent: "center",
-      mt: 16,
-      children: /*#__PURE__*/_jsx(Anchor, {
-        href: linkItem.href,
-        onClick: event => {
-          globalHeaderItemClick(event, linkItem);
-          handleClose();
-        },
-        tabIndex: tabIndex,
-        variant: "standard",
-        children: /*#__PURE__*/_jsxs(FlexBox, {
-          alignItems: "center",
-          gap: 8,
-          children: [linkItem.text, " ", /*#__PURE__*/_jsx(MiniArrowRightIcon, {})]
-        })
-      })
-    })]
-  });
-};
+import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.js";
+import { useAppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.js";
+import { useAppHeaderSectionContext } from "./AppHeaderSectionContext.js";
+import { Anchor, FlexBox, IconButton, Text } from "@codecademy/gamut";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, MiniArrowRightIcon } from "@codecademy/gamut-icons";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.tsx
+const PanelLayout = ({ heading, description, linkItem, children }) => {
+	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
+	const { handleClose } = useAppHeaderDropdownContext();
+	const { setActivePanel, tabIndex } = useAppHeaderSectionContext();
+	return /* @__PURE__ */ jsxs(FlexBox, {
+		flexDirection: "column",
+		gap: {
+			_: 8,
+			xs: 8
+		},
+		pr: {
+			_: 0,
+			md: 16,
+			lg: 0
+		},
+		children: [
+			/* @__PURE__ */ jsxs(FlexBox, {
+				alignItems: "center",
+				gap: {
+					_: 8,
+					xs: 0
+				},
+				children: [/* @__PURE__ */ jsx(IconButton, {
+					onClick: () => setActivePanel(null),
+					icon: ArrowLeftIcon,
+					tip: "Back to main navigation",
+					tipProps: {
+						alignment: "right-center",
+						narrow: false,
+						placement: "floating"
+					},
+					"aria-label": "Back to main navigation",
+					display: {
+						_: "flex",
+						xs: "none"
+					}
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "h2",
+					variant: "title-sm",
+					children: heading
+				})]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				mb: 16,
+				children: description
+			}),
+			children,
+			linkItem && /* @__PURE__ */ jsx(FlexBox, {
+				justifyContent: "center",
+				mt: 16,
+				children: /* @__PURE__ */ jsx(Anchor, {
+					href: linkItem.href,
+					onClick: (event) => {
+						globalHeaderItemClick(event, linkItem);
+						handleClose();
+					},
+					tabIndex,
+					variant: "standard",
+					children: /* @__PURE__ */ jsxs(FlexBox, {
+						alignItems: "center",
+						gap: 8,
+						children: [
+							linkItem.text,
+							" ",
+							/* @__PURE__ */ jsx(MiniArrowRightIcon, {})
+						]
+					})
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+export { PanelLayout };

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/elements.cjs

@@ -0,0 +1,179 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderSection/elements.tsx
+const StyledSection = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid ${({ theme }) => theme.colors["border-tertiary"]};
+  border-radius: 16px;
+  overflow: hidden;
+  background-color: ${({ activePanelSelected, theme }) => activePanelSelected ? theme.colors["gray-100"] : theme.colors.background};
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 480px) {
+    background-color: ${({ theme }) => theme.colors["gray-100"]};
+  }
+
+  // at this breakpoint the menu becomes a dropdown
+  @media (min-width: 1200px) {
+    width: calc(100dvw - 11rem);
+    max-width: calc(1440px - 11rem);
+    max-height: 85vh;
+  }
+`;
+const ScrollableContent = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-radius: 16px;
+
+  /* Custom scrollbar styling to maintain border-radius */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 0 16px 16px 0;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.colors["gray-300"]};
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ theme }) => theme.colors["gray-300"]};
+    background-clip: content-box;
+    opacity: 0.8;
+  }
+
+  /* For Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: ${({ theme }) => theme.colors["gray-300"]} transparent;
+`;
+const NavTabContainer = (0, _emotion_styled.default)(_codecademy_gamut.GridBox)`
+  grid-template-columns: 297px 32px 1fr;
+
+  @media (max-width: 767px) {
+    grid-template-columns: 64px 1fr 1fr;
+  }
+  @media (max-width: 479px) {
+    display: none;
+  }
+`;
+const GradientBackground = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 7.65%,
+    rgba(0, 0, 0, 0.15) 100%
+  );
+`;
+const SmallMenuButton = _emotion_styled.default.button`
+  grid-column: 1;
+  grid-row: ${({ index }) => index + 1};
+  padding: 16px;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.text};
+  width: 100%;
+  text-align: left;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    background-color: ${({ theme }) => theme.colors["navy-100"]};
+    color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+const OverflowText = (0, _emotion_styled.default)(_codecademy_gamut.Text)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+const StyledNavTabPanel = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  border-radius: ${({ isFirst }) => isFirst ? "0 8px 8px 8px" : "8px"};
+
+  @media (max-width: 1200px) {
+    border-radius: 8px;
+  }
+`;
+const NavigationButton = _emotion_styled.default.button`
+  grid-column: 1;
+  padding: 16px;
+  border: none;
+  border-radius: ${({ isActive }) => isActive ? "8px 0 0 8px" : "8px"};
+  background: none;
+  cursor: pointer;
+  color: ${({ theme, isActive }) => isActive ? theme.colors.primary : theme.colors.text};
+  text-align: left;
+  width: ${({ isActive }) => isActive ? "100%" : "calc(100% - 8px)"};
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${({ isActive, theme }) => isActive ? theme.colors.background : theme.colors["gray-100"]};
+  padding-right: ${({ isActive }) => isActive ? "24px" : "16px"};
+
+  &:hover,
+  &:focus {
+    background-color: ${({ theme, isActive }) => isActive ? theme.colors.background : theme.colors["navy-100"]};
+    color: ${({ theme }) => theme.colors.primary};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: ${({ theme, isActive }) => isActive ? "none" : `0 0 0 2px ${theme.colors.primary}`};
+  }
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+const NavIconButtonContainer = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  background-color: ${({ theme, isActive }) => isActive ? theme.colors.background : theme.colors["gray-100"]};
+  border-radius: ${({ isActive }) => isActive ? "8px 0 0 8px" : "8px"};
+
+  grid-column: 1;
+  padding: 8px;
+
+  &:focus {
+    border-color: ${({ theme }) => theme.colors.primary};
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 8px;
+  }
+`;
+const NavIconButton = (0, _emotion_styled.default)(_codecademy_gamut.IconButton)`
+  &:hover,
+  &:focus svg {
+    &:hover,
+    &:focus {
+      color: ${({ theme }) => theme.colors.primary};
+      background-color: ${({ theme }) => theme.colors["navy-100"]};
+    }
+  }
+`;
+
+//#endregion
+exports.GradientBackground = GradientBackground;
+exports.NavIconButton = NavIconButton;
+exports.NavIconButtonContainer = NavIconButtonContainer;
+exports.NavTabContainer = NavTabContainer;
+exports.NavigationButton = NavigationButton;
+exports.OverflowText = OverflowText;
+exports.ScrollableContent = ScrollableContent;
+exports.SmallMenuButton = SmallMenuButton;
+exports.StyledNavTabPanel = StyledNavTabPanel;
+exports.StyledSection = StyledSection;