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

package/dist/AppHeader/Search/QuizAndHelpCenterLinks.d.ts

@@ -0,0 +1,7 @@
+export declare const BoldSupportIcon: import("@emotion/styled").StyledComponent<(import("@codecademy/gamut-icons").GamutIconProps & import("react").RefAttributes<SVGSVGElement>) & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const QuizAndHelpCenterLinks: React.FC<{
+    onTrackingClick: (target: string) => void;
+    handleCloseDropdown: () => void;
+}>;

package/dist/AppHeader/Search/QuizAndHelpCenterLinks.js

@@ -0,0 +1,79 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Anchor, FlexBox, Text, TextButton } from '@codecademy/gamut';
+import { MiniArrowRightIcon, SupportIcon } from '@codecademy/gamut-icons';
+import { theme } from '@codecademy/gamut-styles';
+import { useHeaderDisplayContext } from '../../GlobalHeader/context';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const BoldSupportIcon = /*#__PURE__*/_styled(SupportIcon, {
+  target: "em954zc0",
+  label: "BoldSupportIcon"
+})(process.env.NODE_ENV === "production" ? {
+  name: "jcs9cn",
+  styles: "path{stroke-width:2.5;}circle{stroke-width:2.5;}"
+} : {
+  name: "jcs9cn",
+  styles: "path{stroke-width:2.5;}circle{stroke-width:2.5;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvU2VhcmNoL1F1aXpBbmRIZWxwQ2VudGVyTGlua3MudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9rRCIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQXBwSGVhZGVyL1NlYXJjaC9RdWl6QW5kSGVscENlbnRlckxpbmtzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgRmxleEJveCwgVGV4dCwgVGV4dEJ1dHRvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IE1pbmlBcnJvd1JpZ2h0SWNvbiwgU3VwcG9ydEljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IHVzZUhlYWRlckRpc3BsYXlDb250ZXh0IH0gZnJvbSAnLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuXG5leHBvcnQgY29uc3QgQm9sZFN1cHBvcnRJY29uID0gc3R5bGVkKFN1cHBvcnRJY29uKWBcbiAgcGF0aCB7XG4gICAgc3Ryb2tlLXdpZHRoOiAyLjU7XG4gIH1cbiAgY2lyY2xlIHtcbiAgICBzdHJva2Utd2lkdGg6IDIuNTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFF1aXpBbmRIZWxwQ2VudGVyTGlua3M6IFJlYWN0LkZDPHtcbiAgb25UcmFja2luZ0NsaWNrOiAodGFyZ2V0OiBzdHJpbmcpID0+IHZvaWQ7XG4gIGhhbmRsZUNsb3NlRHJvcGRvd246ICgpID0+IHZvaWQ7XG59PiA9ICh7IG9uVHJhY2tpbmdDbGljaywgaGFuZGxlQ2xvc2VEcm9wZG93biB9KSA9PiB7XG4gIGNvbnN0IHsgc2hvd09uYm9hcmRpbmdRdWl6LCBzaG93U29ydGluZ1F1aXogfSA9IHVzZUhlYWRlckRpc3BsYXlDb250ZXh0KCk7XG5cbiAgY29uc3QgaXNNb2JpbGUgPSB0aGVtZS5icmVha3BvaW50cy54cyB8fCB0aGVtZS5icmVha3BvaW50cy5zbTtcblxuICBjb25zdCBxdWl6TGluayA9IHNob3dPbmJvYXJkaW5nUXVpelxuICAgID8gJy93ZWxjb21lL2ZpbmQtYS1jb3Vyc2UnXG4gICAgOiAnL2V4cGxvcmUvc29ydGluZy1xdWl6JztcblxuICBjb25zdCBzaG93UXVpeiA9IHNob3dPbmJvYXJkaW5nUXVpeiB8fCBzaG93U29ydGluZ1F1aXo7XG5cbiAgcmV0dXJuIChcbiAgICA8RmxleEJveFxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCJcbiAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgYm9yZGVyVG9wPXsxfVxuICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgcHk9ezh9XG4gICAgPlxuICAgICAgPEZsZXhCb3ggZmxleERpcmVjdGlvbj17eyBfOiAnY29sdW1uJywgbWQ6ICdyb3cnIH19PlxuICAgICAgICB7c2hvd1F1aXogJiYgKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8VGV4dCBmb250U2l6ZT17MTZ9IG1yPXsxMCBhcyAwfT5cbiAgICAgICAgICAgICAgTm90IHN1cmUgd2hlcmUgdG8gYmVnaW4/XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICA8QW5jaG9yXG4gICAgICAgICAgICAgIGhyZWY9e3F1aXpMaW5rfVxuICAgICAgICAgICAgICB2YXJpYW50PVwic3RhbmRhcmRcIlxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgb25UcmFja2luZ0NsaWNrKFxuICAgICAgICAgICAgICAgICAgc2hvd09uYm9hcmRpbmdRdWl6ID8gJ3NvcnRpbmdfcXVpeicgOiAnb25ib2FyZGluZ19xdWl6J1xuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgICAgaGFuZGxlQ2xvc2VEcm9wZG93bigpO1xuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZ2FwPXsxMCBhcyAwfSBvdmVyZmxvdz1cInZpc2libGVcIj5cbiAgICAgICAgICAgICAgICA8VGV4dCBmb250U2l6ZT17eyBfOiAxNCwgbWQ6IDE2IH19PlRha2Ugb3VyIHF1aXo8L1RleHQ+XG4gICAgICAgICAgICAgICAgPE1pbmlBcnJvd1JpZ2h0SWNvbiBzaXplPXsxMn0gLz5cbiAgICAgICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICAgICAgPC9BbmNob3I+XG4gICAgICAgICAgPC8+XG4gICAgICAgICl9XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgICA8VGV4dEJ1dHRvblxuICAgICAgICBocmVmPVwiL2hlbHBcIlxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBvblRyYWNraW5nQ2xpY2soJ2hlbHBfY2VudGVyJyl9XG4gICAgICAgIHNpemU9e2lzTW9iaWxlID8gJ3NtYWxsJyA6ICdub3JtYWwnfVxuICAgICAgPlxuICAgICAgICA8Qm9sZFN1cHBvcnRJY29uIG1yPXs4fSBzaXplPXsxMn0gLz5cbiAgICAgICAgSGVscCBDZW50ZXJcbiAgICAgIDwvVGV4dEJ1dHRvbj5cbiAgICA8L0ZsZXhCb3g+XG4gICk7XG59O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const QuizAndHelpCenterLinks = ({
+  onTrackingClick,
+  handleCloseDropdown
+}) => {
+  const {
+    showOnboardingQuiz,
+    showSortingQuiz
+  } = useHeaderDisplayContext();
+  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;
+  const quizLink = showOnboardingQuiz ? '/welcome/find-a-course' : '/explore/sorting-quiz';
+  const showQuiz = showOnboardingQuiz || showSortingQuiz;
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderTop: 1,
+    borderColor: "border-tertiary",
+    py: 8,
+    children: [/*#__PURE__*/_jsx(FlexBox, {
+      flexDirection: {
+        _: 'column',
+        md: 'row'
+      },
+      children: showQuiz && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          fontSize: 16,
+          mr: 10,
+          children: "Not sure where to begin?"
+        }), /*#__PURE__*/_jsx(Anchor, {
+          href: quizLink,
+          variant: "standard",
+          onClick: () => {
+            onTrackingClick(showOnboardingQuiz ? 'sorting_quiz' : 'onboarding_quiz');
+            handleCloseDropdown();
+          },
+          children: /*#__PURE__*/_jsxs(FlexBox, {
+            alignItems: "center",
+            gap: 10,
+            overflow: "visible",
+            children: [/*#__PURE__*/_jsx(Text, {
+              fontSize: {
+                _: 14,
+                md: 16
+              },
+              children: "Take our quiz"
+            }), /*#__PURE__*/_jsx(MiniArrowRightIcon, {
+              size: 12
+            })]
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(TextButton, {
+      href: "/help",
+      onClick: () => onTrackingClick('help_center'),
+      size: isMobile ? 'small' : 'normal',
+      children: [/*#__PURE__*/_jsx(BoldSupportIcon, {
+        mr: 8,
+        size: 12
+      }), "Help Center"]
+    })]
+  });
+};

package/dist/AppHeader/Search/SearchButton.d.ts

@@ -0,0 +1,2 @@
+import { SearchButtonProps } from './types';
+export declare const SearchButton: ({ isSearchVisible, searchButtonRef, setIsSearchVisible, toggleSearch, onSearchAsYouType, }: SearchButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/AppHeader/Search/SearchButton.js

@@ -0,0 +1,74 @@
+import { IconButton } from '@codecademy/gamut';
+import { SearchIcon } from '@codecademy/gamut-icons';
+import { useEffect } from 'react';
+import { useAppHeaderContext } from '../AppHeaderElements/AppHeaderProvider';
+import { useSearchTrackingContext } from './SearchTrackingProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+let autocompleteCacheWarmed = false;
+function warmAutocompleteCache() {
+  if (typeof window !== 'undefined' && !autocompleteCacheWarmed) {
+    autocompleteCacheWarmed = true;
+    const {
+      search
+    } = window.location;
+    const apiUrl = `/api/portal/search/autocomplete-preload${search}`;
+    const headers = {
+      'Warm-Only': 'true'
+    };
+    fetch(apiUrl, {
+      headers
+    });
+  }
+}
+export const SearchButton = ({
+  isSearchVisible,
+  searchButtonRef,
+  setIsSearchVisible,
+  toggleSearch,
+  onSearchAsYouType
+}) => {
+  const {
+    lastOpenedDropdown,
+    setLastOpenedDropdown
+  } = useAppHeaderContext();
+  const {
+    onSearchAsYouTypeParams
+  } = useSearchTrackingContext();
+  const expandedToggleSearch = () => {
+    // if the search pane is visible (about to be closed) and there are search params with a query,
+    // trigger the search event before toggling
+    if (isSearchVisible && onSearchAsYouType && onSearchAsYouTypeParams && onSearchAsYouTypeParams.query) {
+      const {
+        query,
+        searchId,
+        resultsCount,
+        queryLoadTime
+      } = onSearchAsYouTypeParams;
+      onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);
+    }
+    toggleSearch();
+    if (!isSearchVisible && setLastOpenedDropdown) {
+      setLastOpenedDropdown('search');
+    }
+  };
+  useEffect(() => {
+    if (lastOpenedDropdown !== 'search' && isSearchVisible) {
+      setIsSearchVisible(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastOpenedDropdown]);
+  return /*#__PURE__*/_jsx(IconButton, {
+    "aria-expanded": isSearchVisible,
+    "data-testid": "header-search",
+    icon: SearchIcon,
+    onClick: expandedToggleSearch,
+    onMouseOver: warmAutocompleteCache,
+    ref: searchButtonRef,
+    tip: "Search",
+    tipProps: {
+      alignment: 'bottom-center',
+      placement: 'floating'
+    },
+    variant: "interface"
+  });
+};

package/dist/AppHeader/Search/SearchPane.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { SearchPaneProps } from './types';
+export declare const SemiboldSearchIcon: import("@emotion/styled").StyledComponent<(import("@codecademy/gamut-icons").GamutIconProps & React.RefAttributes<SVGSVGElement>) & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const SearchPane: React.FC<SearchPaneProps>;