Product suggestions are links by default (#166)

Author: mocca102

src/components/Autocomplete/SectionItem/SectionItem.tsx

@@ -27,7 +27,7 @@ export default function SectionItem(props: SectionItemProps) {
 
   if (isProduct(item)) {
     defaultChildren = (
-      <>
+      <a href={item.data?.url}>
         <img
           data-testid='cio-img'
           src={item.data?.image_url}
@@ -41,7 +41,7 @@ export default function SectionItem(props: SectionItemProps) {
             highlightSearchTerm={displaySearchTermHighlights}
           />
         </p>
-      </>
+      </a>
     );
   } else if (isInGroupSuggestion(item)) {
     defaultChildren = (

src/styles.css

@@ -91,6 +91,13 @@
   border-bottom: 3px solid transparent;
 }
 
+.cio-autocomplete .cio-item a {
+  color: inherit;
+  display: inline-flex;
+  text-decoration: inherit;
+  flex-direction: column;
+}
+
 .cio-autocomplete .cio-item[aria-selected='true'] {
   background-color: hsl(0, 0%, 90%);
   border-radius: 4px;
@@ -122,6 +129,7 @@
   width: 100%;
   max-width: 100px;
   max-height: 100px;
+  align-self: center;
 }
 
 .cio-autocomplete .cio-term-in-group {