@codecademy/brand 3.2.1-alpha.10ea26adc4.0 → 3.3.0-alpha.991be2ca62.0

package/dist/AppHeader/Search/SearchTrackingProvider/index.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+interface OnSearchAsYouTypeParamsType {
+    query: string;
+    searchId: string;
+    resultsCount: number;
+    queryLoadTime: number;
+}
+interface SearchTrackingContextType {
+    onSearchAsYouTypeParams: OnSearchAsYouTypeParamsType | null;
+    setOnSearchAsYouTypeParams: (params: OnSearchAsYouTypeParamsType | null) => void;
+}
+export declare const SearchTrackingContext: React.Context<SearchTrackingContextType>;
+export declare const SearchTrackingProvider: React.FC<{
+    children: ReactNode;
+}>;
+export declare const useSearchTrackingContext: () => SearchTrackingContextType;
+export {};

package/dist/AppHeader/Search/SearchTrackingProvider/index.js

@@ -0,0 +1,25 @@
+import noop from 'lodash/noop';
+import React, { createContext, useContext, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SearchTrackingContext = /*#__PURE__*/createContext({
+  onSearchAsYouTypeParams: null,
+  setOnSearchAsYouTypeParams: noop
+});
+export const SearchTrackingProvider = ({
+  children
+}) => {
+  const [onSearchAsYouTypeParams, setOnSearchAsYouTypeParams] = useState({
+    query: '',
+    searchId: '',
+    resultsCount: 0,
+    queryLoadTime: 0
+  });
+  return /*#__PURE__*/_jsx(SearchTrackingContext.Provider, {
+    value: {
+      onSearchAsYouTypeParams,
+      setOnSearchAsYouTypeParams
+    },
+    children: children
+  });
+};
+export const useSearchTrackingContext = () => useContext(SearchTrackingContext);

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

@@ -17,6 +17,7 @@ export interface AppHeaderSearch extends OnSearch, onTrackingClick {
 export interface SearchButtonProps extends ToggleSearch {
     isSearchVisible: boolean;
     setIsSearchVisible: Dispatch<SetStateAction<boolean>>;
+    onSearchAsYouType?: OnSearch['onSearchAsYouType'];
 }
 export interface SearchPaneProps extends OnSearch, ToggleSearch, onTrackingClick {
 }

package/dist/AppHeader/Search/useHeaderSearch.js

@@ -24,7 +24,8 @@ export const useHeaderSearch = ({
       isSearchVisible: isSearchVisible,
       setIsSearchVisible: setIsSearchVisible,
       toggleSearch: toggleSearch,
-      searchButtonRef: searchButtonRef
+      searchButtonRef: searchButtonRef,
+      onSearchAsYouType: onSearchAsYouType
     })
   }, /*#__PURE__*/_jsx(AnimatedHeaderZone, {
     visible: isSearchVisible,

package/dist/AppHeader/index.js

@@ -5,6 +5,7 @@ import { NotificationsDropdown } from '../Notifications/NotificationsDropdown';
 import { useHeaderNotifications } from '../Notifications/useHeaderNotifications';
 import { AppHeaderListItem } from './AppHeaderElements/AppHeaderListItem';
 import { AppHeaderProvider } from './AppHeaderElements/AppHeaderProvider';
+import { SearchTrackingProvider } from './Search/SearchTrackingProvider';
 import { useHeaderSearch } from './Search/useHeaderSearch';
 import { appHeaderMobileBreakpoint, appHeaderSpacing, StyledAppBar, StyledNavBar } from './shared';
 import { mapAppHeaderItemToElement } from './shared/utils';
@@ -63,15 +64,17 @@ export const AppHeader = ({
       _: 'none',
       [appHeaderMobileBreakpoint]: 'block'
     },
-    children: /*#__PURE__*/_jsxs(AppHeaderProvider, {
-      children: [/*#__PURE__*/_jsx(StyledAppBar, {
-        "aria-label": "Main",
-        as: "nav",
-        children: /*#__PURE__*/_jsxs(StyledNavBar, {
-          ref: menuContainerRef,
-          children: [mapItemsToElement(items.left, 'left'), mapItemsToElement(right, 'right')]
-        })
-      }), notificationsView, searchPane]
+    children: /*#__PURE__*/_jsx(AppHeaderProvider, {
+      children: /*#__PURE__*/_jsxs(SearchTrackingProvider, {
+        children: [/*#__PURE__*/_jsx(StyledAppBar, {
+          "aria-label": "Main",
+          as: "nav",
+          children: /*#__PURE__*/_jsxs(StyledNavBar, {
+            ref: menuContainerRef,
+            children: [mapItemsToElement(items.left, 'left'), mapItemsToElement(right, 'right')]
+          })
+        }), notificationsView, searchPane]
+      })
     })
   });
 };

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/MobileSearchBar.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export type MobileSearchBarProps = {
+    onSearch: (query: string, fromPrevSearch?: string) => void;
+};
+export declare const MobileSearchBar: React.FC<MobileSearchBarProps>;

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/MobileSearchBar.js

@@ -0,0 +1,77 @@
+import _styled from "@emotion/styled/base";
+import { Box } from '@codecademy/gamut';
+import { SearchIcon } from '@codecademy/gamut-icons';
+import { css } from '@codecademy/gamut-styles';
+import * as React from 'react';
+import { useState } from 'react';
+import { searchPlaceholder } from '../../AppHeader/Search/consts';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SearchForm = Box.withComponent('form', {
+  target: "e110cn5n2",
+  label: "SearchForm"
+});
+const StyledInput = /*#__PURE__*/_styled("input", {
+  target: "e110cn5n1",
+  label: "StyledInput"
+})(css({
+  background: `none`,
+  borderWidth: `1px`,
+  borderColor: `gray-800`,
+  color: `text`,
+  fontSize: 16,
+  outline: `none`,
+  padding: `0.75rem`,
+  paddingRight: `2.5rem`,
+  width: `100%`,
+  '&::placeholder': {
+    color: 'text-disabled'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUvTW9iaWxlU2VhcmNoQmFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXb0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0FwcEhlYWRlck1vYmlsZS9BcHBIZWFkZXJNYWluTWVudU1vYmlsZS9Nb2JpbGVTZWFyY2hCYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgU2VhcmNoSWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgc2VhcmNoUGxhY2Vob2xkZXIgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvU2VhcmNoL2NvbnN0cyc7XG5cbmNvbnN0IFNlYXJjaEZvcm0gPSBCb3gud2l0aENvbXBvbmVudCgnZm9ybScpO1xuXG5jb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZC5pbnB1dChcbiAgY3NzKHtcbiAgICBiYWNrZ3JvdW5kOiBgbm9uZWAsXG4gICAgYm9yZGVyV2lkdGg6IGAxcHhgLFxuICAgIGJvcmRlckNvbG9yOiBgZ3JheS04MDBgLFxuICAgIGNvbG9yOiBgdGV4dGAsXG4gICAgZm9udFNpemU6IDE2LFxuICAgIG91dGxpbmU6IGBub25lYCxcbiAgICBwYWRkaW5nOiBgMC43NXJlbWAsXG4gICAgcGFkZGluZ1JpZ2h0OiBgMi41cmVtYCxcbiAgICB3aWR0aDogYDEwMCVgLFxuXG4gICAgJyY6OnBsYWNlaG9sZGVyJzoge1xuICAgICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICB9LFxuICB9KVxuKTtcblxuY29uc3QgU2VhcmNoQnV0dG9uID0gc3R5bGVkLmJ1dHRvbihcbiAgY3NzKHtcbiAgICBwb3NpdGlvbjogYGFic29sdXRlYCxcbiAgICB0b3A6IGA1MCVgLFxuICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZSgwLCAtNTAlKWAsXG4gICAgcmlnaHQ6IGAwLjc1cmVtYCxcbiAgICBjb2xvcjogYHRleHRgLFxuICAgIGN1cnNvcjogYHBvaW50ZXJgLFxuICAgIG91dGxpbmU6IDAsXG4gICAgYm9yZGVyOiBgbm9uZWAsXG4gICAgYmFja2dyb3VuZENvbG9yOiBgdHJhbnNwYXJlbnRgLFxuICAgIHA6IDAsXG4gICAgbGluZUhlaWdodDogMCxcbiAgfSlcbik7XG5cbmV4cG9ydCB0eXBlIE1vYmlsZVNlYXJjaEJhclByb3BzID0ge1xuICBvblNlYXJjaDogKHF1ZXJ5OiBzdHJpbmcsIGZyb21QcmV2U2VhcmNoPzogc3RyaW5nKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IGNvbnN0IE1vYmlsZVNlYXJjaEJhcjogUmVhY3QuRkM8TW9iaWxlU2VhcmNoQmFyUHJvcHM+ID0gKHtcbiAgb25TZWFyY2gsXG59KSA9PiB7XG4gIGNvbnN0IFtzZWFyY2hWYWx1ZSwgc2V0U2VhcmNoVmFsdWVdID0gdXNlU3RhdGUoJycpO1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZTogUmVhY3QuQ2hhbmdlRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+ID0gKGV2ZW50KSA9PiB7XG4gICAgc2V0U2VhcmNoVmFsdWUoZXZlbnQudGFyZ2V0LnZhbHVlKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVTdWJtaXQ6IFJlYWN0LkZvcm1FdmVudEhhbmRsZXIgPSAoZXZlbnQpID0+IHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIG9uU2VhcmNoKHNlYXJjaFZhbHVlKTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxTZWFyY2hGb3JtXG4gICAgICBhY3Rpb249XCIvc2VhcmNoXCJcbiAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgIGlkPVwic2VhcmNoLWZvcm1cIlxuICAgICAgb25TdWJtaXQ9e2hhbmRsZVN1Ym1pdH1cbiAgICAgIHBvc2l0aW9uPVwicmVsYXRpdmVcIlxuICAgICAgcHk9ezE2fVxuICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICA+XG4gICAgICA8U3R5bGVkSW5wdXRcbiAgICAgICAgbmFtZT1cInF1ZXJ5XCJcbiAgICAgICAgdHlwZT1cInNlYXJjaFwiXG4gICAgICAgIHBsYWNlaG9sZGVyPXtzZWFyY2hQbGFjZWhvbGRlcn1cbiAgICAgICAgYXJpYS1sYWJlbD1cInNlYXJjaFwiXG4gICAgICAgIHZhbHVlPXtzZWFyY2hWYWx1ZX1cbiAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX1cbiAgICAgIC8+XG4gICAgICA8U2VhcmNoQnV0dG9uIGFyaWEtbGFiZWw9XCJFbnRlciBzZWFyY2hcIj5cbiAgICAgICAgPFNlYXJjaEljb24gLz5cbiAgICAgIDwvU2VhcmNoQnV0dG9uPlxuICAgIDwvU2VhcmNoRm9ybT5cbiAgKTtcbn07XG4iXX0= */");
+const SearchButton = /*#__PURE__*/_styled("button", {
+  target: "e110cn5n0",
+  label: "SearchButton"
+})(css({
+  position: `absolute`,
+  top: `50%`,
+  transform: `translate(0, -50%)`,
+  right: `0.75rem`,
+  color: `text`,
+  cursor: `pointer`,
+  outline: 0,
+  border: `none`,
+  backgroundColor: `transparent`,
+  p: 0,
+  lineHeight: 0
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUvTW9iaWxlU2VhcmNoQmFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QnFCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUvTW9iaWxlU2VhcmNoQmFyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IFNlYXJjaEljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHNlYXJjaFBsYWNlaG9sZGVyIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL1NlYXJjaC9jb25zdHMnO1xuXG5jb25zdCBTZWFyY2hGb3JtID0gQm94LndpdGhDb21wb25lbnQoJ2Zvcm0nKTtcblxuY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQuaW5wdXQoXG4gIGNzcyh7XG4gICAgYmFja2dyb3VuZDogYG5vbmVgLFxuICAgIGJvcmRlcldpZHRoOiBgMXB4YCxcbiAgICBib3JkZXJDb2xvcjogYGdyYXktODAwYCxcbiAgICBjb2xvcjogYHRleHRgLFxuICAgIGZvbnRTaXplOiAxNixcbiAgICBvdXRsaW5lOiBgbm9uZWAsXG4gICAgcGFkZGluZzogYDAuNzVyZW1gLFxuICAgIHBhZGRpbmdSaWdodDogYDIuNXJlbWAsXG4gICAgd2lkdGg6IGAxMDAlYCxcblxuICAgICcmOjpwbGFjZWhvbGRlcic6IHtcbiAgICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgfSxcbiAgfSlcbik7XG5cbmNvbnN0IFNlYXJjaEJ1dHRvbiA9IHN0eWxlZC5idXR0b24oXG4gIGNzcyh7XG4gICAgcG9zaXRpb246IGBhYnNvbHV0ZWAsXG4gICAgdG9wOiBgNTAlYCxcbiAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGUoMCwgLTUwJSlgLFxuICAgIHJpZ2h0OiBgMC43NXJlbWAsXG4gICAgY29sb3I6IGB0ZXh0YCxcbiAgICBjdXJzb3I6IGBwb2ludGVyYCxcbiAgICBvdXRsaW5lOiAwLFxuICAgIGJvcmRlcjogYG5vbmVgLFxuICAgIGJhY2tncm91bmRDb2xvcjogYHRyYW5zcGFyZW50YCxcbiAgICBwOiAwLFxuICAgIGxpbmVIZWlnaHQ6IDAsXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBNb2JpbGVTZWFyY2hCYXJQcm9wcyA9IHtcbiAgb25TZWFyY2g6IChxdWVyeTogc3RyaW5nLCBmcm9tUHJldlNlYXJjaD86IHN0cmluZykgPT4gdm9pZDtcbn07XG5cbmV4cG9ydCBjb25zdCBNb2JpbGVTZWFyY2hCYXI6IFJlYWN0LkZDPE1vYmlsZVNlYXJjaEJhclByb3BzPiA9ICh7XG4gIG9uU2VhcmNoLFxufSkgPT4ge1xuICBjb25zdCBbc2VhcmNoVmFsdWUsIHNldFNlYXJjaFZhbHVlXSA9IHVzZVN0YXRlKCcnKTtcblxuICBjb25zdCBoYW5kbGVDaGFuZ2U6IFJlYWN0LkNoYW5nZUV2ZW50SGFuZGxlcjxIVE1MSW5wdXRFbGVtZW50PiA9IChldmVudCkgPT4ge1xuICAgIHNldFNlYXJjaFZhbHVlKGV2ZW50LnRhcmdldC52YWx1ZSk7XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlU3VibWl0OiBSZWFjdC5Gb3JtRXZlbnRIYW5kbGVyID0gKGV2ZW50KSA9PiB7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICBvblNlYXJjaChzZWFyY2hWYWx1ZSk7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8U2VhcmNoRm9ybVxuICAgICAgYWN0aW9uPVwiL3NlYXJjaFwiXG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBpZD1cInNlYXJjaC1mb3JtXCJcbiAgICAgIG9uU3VibWl0PXtoYW5kbGVTdWJtaXR9XG4gICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgIHB5PXsxNn1cbiAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgPlxuICAgICAgPFN0eWxlZElucHV0XG4gICAgICAgIG5hbWU9XCJxdWVyeVwiXG4gICAgICAgIHR5cGU9XCJzZWFyY2hcIlxuICAgICAgICBwbGFjZWhvbGRlcj17c2VhcmNoUGxhY2Vob2xkZXJ9XG4gICAgICAgIGFyaWEtbGFiZWw9XCJzZWFyY2hcIlxuICAgICAgICB2YWx1ZT17c2VhcmNoVmFsdWV9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAvPlxuICAgICAgPFNlYXJjaEJ1dHRvbiBhcmlhLWxhYmVsPVwiRW50ZXIgc2VhcmNoXCI+XG4gICAgICAgIDxTZWFyY2hJY29uIC8+XG4gICAgICA8L1NlYXJjaEJ1dHRvbj5cbiAgICA8L1NlYXJjaEZvcm0+XG4gICk7XG59O1xuIl19 */");
+export const MobileSearchBar = ({
+  onSearch
+}) => {
+  const [searchValue, setSearchValue] = useState('');
+  const handleChange = event => {
+    setSearchValue(event.target.value);
+  };
+  const handleSubmit = event => {
+    event.preventDefault();
+    onSearch(searchValue);
+  };
+  return /*#__PURE__*/_jsxs(SearchForm, {
+    action: "/search",
+    display: "flex",
+    id: "search-form",
+    onSubmit: handleSubmit,
+    position: "relative",
+    py: 16,
+    width: "100%",
+    children: [/*#__PURE__*/_jsx(StyledInput, {
+      name: "query",
+      type: "search",
+      placeholder: searchPlaceholder,
+      "aria-label": "search",
+      value: searchValue,
+      onChange: handleChange
+    }), /*#__PURE__*/_jsx(SearchButton, {
+      "aria-label": "Enter search",
+      children: /*#__PURE__*/_jsx(SearchIcon, {})
+    })]
+  });
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "3.2.1-alpha.10ea26adc4.0",
+  "version": "3.3.0-alpha.991be2ca62.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",