@codecademy/brand 3.29.0-alpha.9e88d7b76a.0 → 3.29.0-alpha.bffa18431a.0

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

@@ -1,144 +0,0 @@
-import { Box, FlexBox } from '@codecademy/gamut';
-import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
-import React, { useContext, useEffect, useRef } from 'react';
-import { useHighlightLiveLearningContext } from '../../../GlobalHeader/context';
-import { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { NavIconButton, NavIconButtonContainer, NavigationButton, OverflowText, PopularBadge, PopularBadgeDot, 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
-  });
-};
-
-// 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
-  });
-});
-
-// 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);
-  const displayHighlightLiveLearning = useHighlightLiveLearningContext();
-  useEffect(() => {
-    if (index === 0 && buttonRef.current) {
-      setFirstItemRef?.(buttonRef.current);
-    }
-  }, [index, setFirstItemRef]);
-  const highlightLiveLearning = item.id === 'live-learning' && displayHighlightLiveLearning;
-  const showPopularBadge = highlightLiveLearning && !isActive;
-  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
-        })]
-      }), isActive && /*#__PURE__*/_jsx(Box, {
-        display: {
-          _: 'none',
-          sm: 'block'
-        },
-        mt: 4,
-        children: /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
-          "data-testid": "chevron-right-icon"
-        })
-      }), showPopularBadge && /*#__PURE__*/_jsx(Box, {
-        display: {
-          _: 'none',
-          sm: 'block'
-        },
-        children: /*#__PURE__*/_jsx(PopularBadge, {
-          variant: "custom",
-          size: "sm",
-          bg: "hyper-400",
-          children: "Popular"
-        })
-      })]
-    }), item.icon && /*#__PURE__*/_jsxs(NavIconButtonContainer, {
-      display: {
-        _: 'none',
-        xs: 'grid',
-        sm: 'none'
-      },
-      ...sharedButtonProps,
-      children: [/*#__PURE__*/_jsx(NavIconButton, {
-        icon: item.icon,
-        tip: highlightLiveLearning ? 'Live learning (popular)' : item.text,
-        tipProps: {
-          alignment: 'right-center',
-          narrow: false,
-          placement: 'floating'
-        },
-        "aria-label": highlightLiveLearning ? 'Live learning (popular)' : item.text
-      }), showPopularBadge && /*#__PURE__*/_jsx(PopularBadgeDot, {
-        position: "absolute",
-        left: "42px",
-        "aria-hidden": true
-      })]
-    })]
-  });
-};
-export { NavTabPanel, NavTabList, NavTab };