Merge pull request #515 from ably/web-3920-search-data-id

[WEB-4042] Add searchDataId Meganav prop
ably · Oct 21, 2024 · 8ea138b · 8ea138b
2 parents 1c5b35d + f1adb67
commit 8ea138b
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.7.3",
+  "version": "14.7.4",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/src/core/Meganav.tsx b/src/core/Meganav.tsx
@@ -83,6 +83,7 @@ type SignInProps = {
   theme: MeganavTheme;
   loginLink: string;
   absUrl: AbsUrl;
+  searchDataId?: string;
 };
 
 type MeganavProps = {
@@ -106,14 +107,22 @@ type MeganavProps = {
   urlBase?: string;
   addSearchApiKey: string;
   statusUrl: string;
+  searchDataId?: string;
 };
 
-const SignIn = ({ sessionState, theme, loginLink, absUrl }: SignInProps) => {
+const SignIn = ({
+  sessionState,
+  theme,
+  loginLink,
+  absUrl,
+  searchDataId,
+}: SignInProps) => {
   return sessionState.signedIn ? (
     <MeganavItemsSignedIn
       absUrl={absUrl}
       sessionState={sessionState}
       theme={theme}
+      searchDataId={searchDataId}
     />
   ) : (
     <ul className="hidden md:flex items-center">
@@ -136,7 +145,7 @@ const SignIn = ({ sessionState, theme, loginLink, absUrl }: SignInProps) => {
         </a>
       </li>
       <li className="ui-meganav-item">
-        <MeganavSearch absUrl={absUrl} />
+        <MeganavSearch absUrl={absUrl} dataId={searchDataId} />
       </li>
       <li className="ui-meganav-item">
         <a
@@ -168,6 +177,7 @@ const Meganav = ({
   urlBase,
   addSearchApiKey,
   statusUrl,
+  searchDataId,
 }: MeganavProps) => {
   const [sessionState, setSessionState] = useState<MeganavSessionState>();
 
@@ -216,6 +226,7 @@ const Meganav = ({
             theme={theme}
             loginLink={loginLink}
             absUrl={absUrl}
+            searchDataId={searchDataId}
           />
         ) : (
           <SignInPlaceholder />
@@ -229,6 +240,7 @@ const Meganav = ({
           loginLink={loginLink}
           absUrl={absUrl}
           statusUrl={statusUrl}
+          searchDataId={searchDataId}
         />
       </div>
     </nav>

diff --git a/src/core/Meganav/Meganav.stories.tsx b/src/core/Meganav/Meganav.stories.tsx
@@ -137,3 +137,33 @@ const PageSignedIn = () => {
 export const SignedIn = {
   render: () => <PageSignedIn />,
 };
+
+const SignedInWithDataSearchId = () => {
+  useEffect(() => {
+    loadIcons();
+    const store = getRemoteDataStore();
+    fetchSessionData(store, "/api/me");
+    fetchBlogPosts(store, "/api/blog");
+  }, []);
+
+  return (
+    <Meganav
+      paths={{
+        logo: "#",
+        ablyStack: "#",
+        iconSprites: "#",
+        blogThumb1: "#",
+        blogThumb2: "#",
+        blogThumb3: "#",
+      }}
+      statusUrl={statusUrl}
+      themeName="white"
+      addSearchApiKey="#"
+      searchDataId="inkeep-search"
+    />
+  );
+};
+
+export const DataSearchId = {
+  render: () => <SignedInWithDataSearchId />,
+};
diff --git a/src/core/MeganavItemsMobile.tsx b/src/core/MeganavItemsMobile.tsx
@@ -24,6 +24,7 @@ type MeganavItemsMobileProps = {
   loginLink: string;
   absUrl: AbsUrl;
   statusUrl: string;
+  searchDataId?: string;
 };
 
 const MeganavItemsMobile = ({
@@ -34,6 +35,7 @@ const MeganavItemsMobile = ({
   loginLink,
   absUrl,
   statusUrl,
+  searchDataId,
 }: MeganavItemsMobileProps) => {
   const classNames = `ui-meganav-link ${theme.textColor}`;
 
@@ -100,7 +102,7 @@ const MeganavItemsMobile = ({
                   style={{ maxWidth: "none" }}
                   placeholder="Search"
                   autoComplete="off"
-                  data-id="meganav-mobile-search-input"
+                  data-id={searchDataId ?? "meganav-mobile-search-input"}
                 />
 
                 <MeganavSearchAutocomplete />

diff --git a/src/core/MeganavItemsSignedIn.tsx b/src/core/MeganavItemsSignedIn.tsx
@@ -6,6 +6,7 @@ type MeganavItemsSignedIn = {
   sessionState: MeganavSessionState;
   theme: MeganavTheme;
   absUrl: AbsUrl;
+  searchDataId?: string;
 };
 
 const truncate = (string: string, length: number) => {
@@ -17,6 +18,7 @@ const truncate = (string: string, length: number) => {
 const MeganavItemsSignedIn = ({
   sessionState,
   absUrl,
+  searchDataId,
 }: MeganavItemsSignedIn) => {
   const accountName = truncate(sessionState.accountName, 20);
 
@@ -29,7 +31,7 @@ const MeganavItemsSignedIn = ({
       </li>
 
       <li>
-        <MeganavSearch absUrl={absUrl} />
+        <MeganavSearch absUrl={absUrl} dataId={searchDataId} />
       </li>
 
       {sessionState.account && (

diff --git a/src/core/MeganavSearch.tsx b/src/core/MeganavSearch.tsx
@@ -4,11 +4,17 @@ import Icon from "./Icon";
 import MeganavSearchPanel from "./MeganavSearchPanel";
 import { AbsUrl } from "./Meganav";
 
-const MeganavSearch = ({ absUrl }: { absUrl: AbsUrl }) => (
+const MeganavSearch = ({
+  absUrl,
+  dataId = "meganav-control",
+}: {
+  absUrl: AbsUrl;
+  dataId?: string;
+}) => (
   <>
     <button
       type="button"
-      data-id="meganav-control"
+      data-id={dataId}
       data-control="search"
       className="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
       aria-expanded="false"

diff --git a/src/core/MeganavSearchSuggestions/component.js b/src/core/MeganavSearchSuggestions/component.js
@@ -108,17 +108,17 @@ const MeganavSearchSuggestions = () => {
     distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
   };
 
-  suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
-  suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
+  suggestionsToggle?.addEventListener("focus", focusSuggestionsHandler);
+  suggestionsToggle?.addEventListener("blur", blurSuggestionsHandler);
   suggestions.addEventListener("touchstart", touchstartHandler);
   suggestions.addEventListener("touchmove", touchmoveHandler);
   suggestions.addEventListener("touchend", touchendHandler);
   suggestions.addEventListener("wheel", wheelHandler);
 
   return {
     teardown: () => {
-      suggestionsToggle.removeEventListener("focus", focusSuggestionsHandler);
-      suggestionsToggle.removeEventListener("blur", blurSuggestionsHandler);
+      suggestionsToggle?.removeEventListener("focus", focusSuggestionsHandler);
+      suggestionsToggle?.removeEventListener("blur", blurSuggestionsHandler);
       suggestions.removeEventListener("touchstart", touchstartHandler);
       suggestions.removeEventListener("touchmove", touchmoveHandler);
       suggestions.removeEventListener("touchend", touchendHandler);