Fix: Determine Card boxShadow based on colorMode

packages/gamut-labs/dist/AppBar/AppBarSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type AppBarSectionProps = {
+    /**
+     * Position of the the section within the AppBar.
+     */
+    position?: 'left' | 'center' | 'right';
+    className?: string;
+};
+export declare const AppBarSection: React.FC<AppBarSectionProps>;

packages/gamut-labs/dist/AppBar/AppBarSection.js

@@ -0,0 +1,17 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import cx from 'classnames';
+import React from 'react'; // eslint-disable-next-line gamut/no-css-standalone
+
+import styles from './styles/index.module.scss';
+export var AppBarSection = function AppBarSection(_ref) {
+  var _cx;
+
+  var position = _ref.position,
+      className = _ref.className,
+      children = _ref.children;
+  var classes = cx(styles.section, (_cx = {}, _defineProperty(_cx, styles.sectionRight, position === 'right'), _defineProperty(_cx, styles.sectionLeft, position === 'left'), _defineProperty(_cx, styles.sectionCenter, position === 'center'), _cx), className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes
+  }, children);
+};

packages/gamut-labs/dist/AppBar/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type AppBarProps = {
+    className?: string;
+    /**
+     * Whether the container should be larger than the default content size.
+     */
+    wide?: boolean;
+};
+export declare const AppBar: React.FC<AppBarProps>;

packages/gamut-labs/dist/AppBar/index.js

@@ -0,0 +1,18 @@
+import { ContentContainer } from '@codecademy/gamut';
+import cx from 'classnames';
+import React from 'react'; // eslint-disable-next-line gamut/no-css-standalone
+
+import styles from './styles/index.module.scss';
+export var AppBar = function AppBar(_ref) {
+  var wide = _ref.wide,
+      children = _ref.children,
+      className = _ref.className;
+  var classes = cx(styles.wrapper, className);
+  return /*#__PURE__*/React.createElement(ContentContainer, {
+    className: classes,
+    display: "flex",
+    alignItems: "center",
+    height: "100%",
+    size: wide ? 'wide' : 'medium'
+  }, children);
+};

packages/gamut-labs/dist/AppBar/styles/index.module.scss

@@ -0,0 +1,38 @@
+@import "~@codecademy/gamut-styles/utils";
+
+$appbar-gutter: rem(8px);
+$appbar-tab-width: rem(48px);
+$appbar-z: 14;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  z-index: $appbar-z;
+}
+
+.section {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  z-index: 1;
+}
+
+.sectionRight {
+  justify-content: flex-end;
+}
+
+.sectionLeft {
+  flex: 1;
+}
+
+.sectionRight,
+.sectionLeft {
+  flex: 1;
+}
+
+.sectionCenter {
+  flex: 2;
+  justify-content: center;
+  text-align: center;
+}

packages/gamut-labs/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AppHeaderCatalogDropdownItem, AppHeaderClickHandler } from '../types';
+export declare type AppHeaderCatalogDropdownProps = {
+    action: AppHeaderClickHandler;
+    item: AppHeaderCatalogDropdownItem;
+    isAnon: boolean;
+};
+export declare const KEY_CODES: {
+    readonly UP: "ArrowUp";
+    readonly DOWN: "ArrowDown";
+    readonly LEFT: "ArrowLeft";
+    readonly RIGHT: "ArrowRight";
+    readonly END: "End";
+    readonly ENTER: "Enter";
+    readonly ESC: "Escape";
+    readonly HOME: "Home";
+    readonly SPACE: " ";
+    readonly TAB: "Tab";
+};
+export declare const AppHeaderCatalogDropdown: React.FC<AppHeaderCatalogDropdownProps>;

packages/gamut-labs/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.js

@@ -0,0 +1,251 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { careerPaths, topLanguages, topSubjects } from '../../../lib/catalogList';
+import { DropdownAnchor, DropdownIcon, StyledDropdown, StyledText } from '../../shared';
+import { AppHeaderCatalogSection } from '../AppHeaderCatalogSection';
+export var KEY_CODES = {
+  UP: 'ArrowUp',
+  DOWN: 'ArrowDown',
+  LEFT: 'ArrowLeft',
+  RIGHT: 'ArrowRight',
+  END: 'End',
+  ENTER: 'Enter',
+  ESC: 'Escape',
+  HOME: 'Home',
+  SPACE: ' ',
+  TAB: 'Tab'
+};
+export var AppHeaderCatalogDropdown = function AppHeaderCatalogDropdown(_ref) {
+  var action = _ref.action,
+      item = _ref.item,
+      isAnon = _ref.isAnon;
+  var text = item.text,
+      dataTestId = item.dataTestId;
+  var containerRef = useRef(null);
+  var buttonRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      focusIndex = _useState4[0],
+      setFocusIndex = _useState4[1];
+
+  var focusFirstItem = function focusFirstItem() {
+    return setFocusIndex(0);
+  };
+
+  var focusLastItem = function focusLastItem() {
+    return setFocusIndex(itemsCount);
+  };
+
+  var itemsCount = useMemo(function () {
+    var languageAndSubjectCount = topLanguages.length + topSubjects.length + 4; // extra two for hard coded headers
+
+    return item.hideCareerPaths ? languageAndSubjectCount : languageAndSubjectCount + careerPaths.length;
+  }, [item]);
+
+  var focusNextItem = function focusNextItem() {
+    if (focusIndex === itemsCount) {
+      focusFirstItem();
+    } else {
+      setFocusIndex(focusIndex + 1);
+    }
+  };
+
+  var focusPreviousItem = function focusPreviousItem() {
+    if (focusIndex === 0) {
+      focusLastItem();
+    } else {
+      setFocusIndex(focusIndex - 1);
+    }
+  };
+
+  var getNode = function getNode(index) {
+    var _containerRef$current;
+
+    return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelectorAll('[data-focusablecatalog=true]')[index];
+  };
+
+  var buttonHandleKeyEvents = function buttonHandleKeyEvents(event) {
+    switch (event.key) {
+      case KEY_CODES.ENTER:
+      case KEY_CODES.SPACE:
+        event.preventDefault();
+        setIsOpen(true);
+        break;
+
+      case KEY_CODES.DOWN:
+        event.preventDefault();
+        setIsOpen(true);
+        focusFirstItem();
+        break;
+
+      case KEY_CODES.UP:
+        event.preventDefault();
+        setIsOpen(true);
+        focusLastItem();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var menuHandleKeyEvents = function menuHandleKeyEvents(event) {
+    switch (event.key) {
+      case KEY_CODES.HOME:
+        event.preventDefault();
+        event.stopPropagation();
+        focusFirstItem();
+        break;
+
+      case KEY_CODES.END:
+        event.preventDefault();
+        event.stopPropagation();
+        focusLastItem();
+        break;
+
+      case KEY_CODES.UP:
+        event.preventDefault();
+        focusPreviousItem();
+        break;
+
+      case KEY_CODES.DOWN:
+        event.preventDefault();
+        focusNextItem();
+        break;
+
+      case KEY_CODES.TAB:
+      case KEY_CODES.LEFT:
+      case KEY_CODES.RIGHT:
+        setIsOpen(false);
+        break;
+
+      case KEY_CODES.ESC:
+        event.stopPropagation();
+        handleClose();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var focusButton = function focusButton() {
+    var _buttonRef$current;
+
+    buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+  };
+
+  var toggleIsOpen = function toggleIsOpen() {
+    return setIsOpen(function (prev) {
+      return !prev;
+    });
+  };
+
+  var handleOnClick = function handleOnClick(event) {
+    toggleIsOpen();
+
+    if (!isOpen) {
+      action(event, item);
+    }
+  };
+
+  var handleClose = useCallback(function () {
+    setIsOpen(false);
+    focusButton();
+  }, []);
+  useEffect(function () {
+    var firstNode = getNode(0);
+    var nextNode = getNode(focusIndex);
+
+    if (firstNode && nextNode) {
+      if (isOpen) {
+        if (focusIndex >= 0 && focusIndex <= itemsCount) {
+          nextNode.focus();
+        }
+      }
+    }
+  }, [focusIndex, isOpen, itemsCount]);
+  useEffect(function () {
+    function handleClickOutside(event) {
+      var container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      var button = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current;
+
+      if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) {
+        handleClose();
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('blur', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('blur', handleClickOutside);
+    };
+  }, [containerRef, handleClose, isOpen]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownAnchor, {
+    ref: buttonRef,
+    onClick: handleOnClick,
+    onKeyDown: buttonHandleKeyEvents,
+    title: text,
+    variant: "interface",
+    tabIndex: "-1",
+    "aria-expanded": isOpen,
+    "aria-haspopup": true,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement(StyledText, {
+    fontWeight: isOpen ? 'bold' : 'normal',
+    textAlign: "center",
+    title: text
+  }, text), /*#__PURE__*/React.createElement(DropdownIcon, {
+    "aria-label": "dropdown",
+    open: isOpen,
+    size: 12
+  })), /*#__PURE__*/React.createElement(StyledDropdown, {
+    style: {
+      top: '3.5rem',
+      minWidth: '64rem',
+      left: isAnon ? '-9rem' : '-14rem'
+    },
+    initial: {
+      borderWidth: 0,
+      height: 0
+    },
+    animate: {
+      borderWidth: isOpen ? 1 : 0,
+      height: isOpen ? 'fit-content' : 0
+    },
+    transition: {
+      duration: 0.175
+    },
+    "aria-hidden": !isOpen,
+    "data-testid": "catalog-menu-dropdown"
+  }, /*#__PURE__*/React.createElement(AppHeaderCatalogSection, {
+    action: action,
+    item: item,
+    role: "menu",
+    ref: containerRef,
+    keyDownEvents: menuHandleKeyEvents,
+    id: "menu-container".concat(item.text),
+    isOpen: isOpen,
+    handleClose: function handleClose() {
+      return setIsOpen(false);
+    }
+  })));
+};

packages/gamut-labs/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSection/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AppHeaderCatalogDropdownItem, AppHeaderClickHandler } from '../types';
+export declare type AppHeaderCatalogSectionProps = {
+    action: AppHeaderClickHandler;
+    item: AppHeaderCatalogDropdownItem;
+    ref?: React.RefObject<HTMLUListElement>;
+    role?: string;
+    id?: string;
+    keyDownEvents?: (event: React.KeyboardEvent) => void;
+    isOpen?: boolean;
+    handleClose?: () => void;
+};
+export declare const AppHeaderCatalogSection: React.ForwardRefExoticComponent<Pick<AppHeaderCatalogSectionProps, "id" | "role" | "action" | "isOpen" | "item" | "keyDownEvents" | "handleClose"> & React.RefAttributes<HTMLDivElement>>;