Add getSearchResultsUrl util (#176)

Author: mocca102

src/components/Autocomplete/SectionItem/SearchSuggestionItem.tsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import SectionItemText from './SectionItemText';
+import { SearchSuggestion } from '../../../types';
+import { CioAutocompleteContext } from '../CioAutocompleteProvider';
+
+interface SearchSuggestionItemProps {
+  item: SearchSuggestion;
+  displaySearchTermHighlights?: boolean;
+}
+export default function SearchSuggestionItem(props: SearchSuggestionItemProps) {
+  const { item, displaySearchTermHighlights } = props;
+  const { advancedParameters, query, featureToggles } = useContext(CioAutocompleteContext);
+  const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } =
+    featureToggles;
+  const {
+    displaySearchSuggestionImages = featureDisplaySearchSuggestionImages,
+    displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts,
+  } = advancedParameters || {};
+
+  return (
+    <>
+      {displaySearchSuggestionImages && item.data?.image_url && (
+        <img src={item.data?.image_url} alt={item.value} className='cio-suggestion-image' />
+      )}
+      <p className='cio-suggestion-text'>
+        <SectionItemText
+          item={item}
+          query={query}
+          highlightSearchTerm={displaySearchTermHighlights}
+        />
+      </p>
+      {displaySearchSuggestionResultCounts && item.data?.total_num_results && (
+        <p className='cio-suggestion-count'>({item.data?.total_num_results})</p>
+      )}
+    </>
+  );
+}

src/components/Autocomplete/SectionItem/SectionItem.tsx

@@ -4,6 +4,7 @@ import { Item } from '../../../types';
 import { isProduct, isInGroupSuggestion, isSearchSuggestion } from '../../../typeGuards';
 import SectionItemText from './SectionItemText';
 import { translate } from '../../../utils';
+import SearchSuggestionItem from './SearchSuggestionItem';
 
 export interface SectionItemProps {
   item: Item;
@@ -14,15 +15,9 @@ export interface SectionItemProps {
 
 export default function SectionItem(props: SectionItemProps) {
   const { item, children, displaySearchTermHighlights } = props;
-  const { getItemProps, advancedParameters, query, featureToggles } =
+  const { getItemProps, advancedParameters, query, getSearchResultsUrl } =
     useContext(CioAutocompleteContext);
-  const { featureDisplaySearchSuggestionImages, featureDisplaySearchSuggestionResultCounts } =
-    featureToggles;
-  const {
-    displaySearchSuggestionImages = featureDisplaySearchSuggestionImages,
-    displaySearchSuggestionResultCounts = featureDisplaySearchSuggestionResultCounts,
-    translations,
-  } = advancedParameters || {};
+  const { translations } = advancedParameters || {};
   let defaultChildren: ReactNode;
 
   if (isProduct(item)) {
@@ -55,23 +50,23 @@ export default function SectionItem(props: SectionItemProps) {
       </p>
     );
   } else if (isSearchSuggestion(item)) {
-    defaultChildren = (
-      <>
-        {displaySearchSuggestionImages && item.data?.image_url && (
-          <img src={item.data?.image_url} alt={item.value} className='cio-suggestion-image' />
-        )}
-        <p className='cio-suggestion-text'>
-          <SectionItemText
+    if (getSearchResultsUrl) {
+      defaultChildren = (
+        <a className='suggestion-link' href={getSearchResultsUrl(item)}>
+          <SearchSuggestionItem
             item={item}
-            query={query}
-            highlightSearchTerm={displaySearchTermHighlights}
+            displaySearchTermHighlights={displaySearchTermHighlights}
           />
-        </p>
-        {displaySearchSuggestionResultCounts && item.data?.total_num_results && (
-          <p className='cio-suggestion-count'>({item.data?.total_num_results})</p>
-        )}
-      </>
-    );
+        </a>
+      );
+    } else {
+      defaultChildren = (
+        <SearchSuggestionItem
+          item={item}
+          displaySearchTermHighlights={displaySearchTermHighlights}
+        />
+      );
+    }
   } else {
     defaultChildren = (
       <p className='cio-custom-text'>

src/hooks/useCioAutocomplete.ts

@@ -74,6 +74,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     autocompleteClassName = 'cio-autocomplete',
     advancedParameters,
     defaultInput,
+    getSearchResultsUrl,
   } = memoizedOptions;
 
   let { sections = defaultSections, zeroStateSections } = memoizedOptions;
@@ -303,6 +304,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     autocompleteClassName,
     selectedItem: items[highlightedIndex],
     advancedParameters,
+    getSearchResultsUrl,
   };
 };
 

src/styles.css

@@ -98,6 +98,14 @@
   flex-direction: column;
 }
 
+.cio-autocomplete .cio-item .suggestion-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
 .cio-autocomplete .cio-item[aria-selected='true'] {
   background-color: hsl(0, 0%, 90%);
   border-radius: 4px;

src/types.ts

@@ -36,6 +36,7 @@ export type AdvancedParameters = AdvancedParametersBase &
 
 export type CioAutocompleteProps = CioClientConfig & {
   openOnFocus?: boolean;
+  getSearchResultsUrl?: (item: SearchSuggestion) => string;
   onSubmit: OnSubmit;
   onFocus?: () => void;
   onChange?: (input: string) => void;