fix: make promo overlays clickable (#854)

sajari · Aug 31, 2022 · 0b2924b · 0b2924b
1 parent d0f5ba1
commit 0b2924b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/.changeset/short-jeans-rule.md b/.changeset/short-jeans-rule.md
@@ -0,0 +1,5 @@
+---
+'@sajari/react-search-ui': patch
+---
+
+Make promo overlays clickable
diff --git a/packages/search-ui/src/Results/components/BannerItem/index.tsx b/packages/search-ui/src/Results/components/BannerItem/index.tsx
@@ -29,22 +29,29 @@ const BannerItem = ({ banner, numberOfCols = 1 }: BannerItemProps) => {
       <Box data-testid="banner-image-container" css={styles.imageContainer}>
         <Link href={targetUrl} css={styles.link} onClick={onClick}>
           <img src={imageUrl} css={styles.image} alt="" loading="lazy" />
+          {(title || description) && (
+            <Box css={styles.textContainer}>
+              {title && (
+                <Heading
+                  as="h2"
+                  className={customClassNames.banners?.heading}
+                  css={[{ color: textColor }, styles.heading]}
+                >
+                  {title}
+                </Heading>
+              )}
+              {description && (
+                <Text
+                  className={customClassNames.banners?.description}
+                  css={[{ color: textColor }, styles.description]}
+                >
+                  {description}
+                </Text>
+              )}
+            </Box>
+          )}
         </Link>
       </Box>
-      {title || description ? (
-        <Box css={styles.textContainer}>
-          {title ? (
-            <Heading as="h2" className={customClassNames.banners?.heading} css={[{ color: textColor }, styles.heading]}>
-              {title}
-            </Heading>
-          ) : null}
-          {description ? (
-            <Text className={customClassNames.banners?.description} css={[{ color: textColor }, styles.description]}>
-              {description}
-            </Text>
-          ) : null}
-        </Box>
-      ) : null}
     </Box>
   );
 };