@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

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

@@ -1,101 +1,128 @@
-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";
-
-//#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
-	});
+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
+  });
 };
-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
-	});
+
+// 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
+  });
 });
-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
-		})
-	})] });
-};
 
-//#endregion
-export { NavTab, NavTabList, NavTabPanel };
+// 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
+      })
+    })]
+  });
+};
+export { NavTabPanel, NavTabList, NavTab };

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { AppHeaderLinkItem } from '../../..';
+type PanelLayoutProps = PropsWithChildren & {
+    heading: string;
+    description: ReactNode;
+    linkItem?: AppHeaderLinkItem;
+};
+export declare const PanelLayout: ({ heading, description, linkItem, children, }: PanelLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,83 +1,81 @@
-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 };
+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, {})]
+        })
+      })
+    })]
+  });
+};