Merge pull request #54 from vtex-apps/fix/use-link-component

Use Link from render-runtime to wrap images with links associated to them

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Query strings would not be carried over when users navigated through a link wrapping an Image component.
 
 ## [0.14.0] - 2021-09-24
 

react/Image.tsx

@@ -5,6 +5,7 @@ import { useCssHandles } from 'vtex.css-handles'
 import type { CssHandlesTypes } from 'vtex.css-handles'
 import { useIntl, defineMessages } from 'react-intl'
 import { formatIOMessage } from 'vtex.native-types'
+import { Link } from 'vtex.render-runtime'
 import { usePixel } from 'vtex.pixel-manager'
 
 import type { ImageSchema } from './ImageTypes'
@@ -154,11 +155,10 @@ function Image(props: ImageProps) {
       : undefined
 
   const maybeLink = link?.url ? (
-    <a
-      href={formatIOMessage({ id: link.url, intl })}
+    <Link
+      to={formatIOMessage({ id: link.url, intl }) ?? ''}
       rel={link.attributeNofollow ? 'nofollow' : ''}
       target={shouldOpenLinkInNewTab ? '_blank' : undefined}
-      title={formatIOMessage({ id: link?.attributeTitle, intl })}
       className={handles.imageElementLink}
       onClick={() => {
         if (analyticsProperties === 'none') return
@@ -167,7 +167,7 @@ function Image(props: ImageProps) {
       }}
     >
       {imgElement}
-    </a>
+    </Link>
   ) : (
     <Fragment>{imgElement}</Fragment>
   )

react/package.json

@@ -14,12 +14,13 @@
     "typescript": "3.9.7",
     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles",
     "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.device-detector",
-    "vtex.list-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.list-context@0.1.1/public/@types/vtex.list-context",
+    "vtex.list-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.list-context@0.2.0/public/@types/vtex.list-context",
     "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.native-types",
     "vtex.on-view": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.on-view",
-    "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime",
-    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.slider-layout"
+    "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime",
+    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.slider-layout",
+    "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-image"
   },
   "version": "0.14.0"
 }

react/yarn.lock

@@ -4775,9 +4775,9 @@ [email protected]:
   version "0.2.6"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.device-detector#3219242fa5c2f14023d33c3549c2d8de93c76d1f"
 
-"vtex.list-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.list-context@0.1.1/public/@types/vtex.list-context":
-  version "0.1.1"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.list-context@0.1.1/public/@types/vtex.list-context#c8ac9fc35b3f82b782562fa96e487ffc5ff02ca6"
+"vtex.list-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.list-context@0.2.0/public/@types/vtex.list-context":
+  version "0.2.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.list-context@0.2.0/public/@types/vtex.list-context#935b748d394851ced7f3b06bbedf59f4ee3ca8a6"
 
 "vtex.native-types@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.native-types":
   version "0.7.4"
@@ -4787,17 +4787,21 @@ [email protected]:
   version "1.0.0"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.on-view#916225c5bdf7efdcaeef79928a6706b74154813a"
 
-"vtex.pixel-manager@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager":
-  version "1.6.1"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager#a9cf803f14aa60290a622155fb59e5243c4197bc"
+"vtex.pixel-manager@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager":
+  version "1.8.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager#3ccfcb1927614984a5f7a3e5650c8c8d2bd3c0f4"
+
+"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime":
+  version "8.132.2"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime#e17dc097ba2b445771310cdbe9acd75af358b756"
 
-"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.[email protected]/public/@types/vtex.render-runtime":
-  version "8.126.4"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.[email protected]/public/@types/vtex.render-runtime#40d7ad8a7b04c50e61ff84a1089dcf7045efd548"
+"vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.[email protected]/public/@types/vtex.slider-layout":
+  version "0.22.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.[email protected]/public/@types/vtex.slider-layout#d0e9ce16b9f9ea2bcc50a3cc42c5466d565141c0"
 
-"vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.16.0/public/@types/vtex.slider-layout":
-  version "0.16.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.16.0/public/@types/vtex.slider-layout#c241ae9e0913c7b0d3a4b1200afb458e4b99317f"
+"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.14.0/public/@types/vtex.store-image":
+  version "0.14.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.14.0/public/@types/vtex.store-image#84a2f41a3806dc1a1bad2276ffbea6af0e28c04a"
 
 w3c-hr-time@^1.0.1:
   version "1.0.2"