From 3dcf5a176b441356afce0aea5263419f205ce806 Mon Sep 17 00:00:00 2001
From: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com>
Date: Wed, 2 Nov 2022 18:05:50 +0200
Subject: [PATCH] [Next.js][React] Link component does not add anchor to the
 internal links (#1226)

* feat: add pass anchor field from sitecore to hash prop on nextlink

* chore: reference value in assertion

* chore: add anchor to LinkFieldValue interface

* Add anchor for sitecore-jss-react

* refactoring

Co-authored-by: Chris Manganaro <christopher.manganaro@hbf.com.au>
---
 packages/sitecore-jss-nextjs/src/components/Link.test.tsx | 5 ++++-
 packages/sitecore-jss-nextjs/src/components/Link.tsx      | 8 ++++++--
 packages/sitecore-jss-react/src/components/Link.test.tsx  | 5 ++++-
 packages/sitecore-jss-react/src/components/Link.tsx       | 6 +++++-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx
index 42017b3524..1383af08c1 100644
--- a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx
+++ b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx
@@ -42,6 +42,7 @@ describe('<Link />', () => {
         title: 'My Link',
         target: '_blank',
         querystring: 'foo=bar',
+        anchor: 'foo',
       },
     };
 
@@ -53,7 +54,9 @@ describe('<Link />', () => {
 
     const link = c.find('a');
 
-    expect(link.html()).to.contain(`href="${field.value.href}?${field.value.querystring}"`);
+    expect(link.html()).to.contain(
+      `href="${field.value.href}?${field.value.querystring}#${field.value.anchor}"`
+    );
     expect(link.html()).to.contain(`class="${field.value.class}"`);
     expect(link.html()).to.contain(`title="${field.value.title}"`);
     expect(link.html()).to.contain(`target="${field.value.target}"`);
diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx
index 536ff34857..4c79c31e6a 100644
--- a/packages/sitecore-jss-nextjs/src/components/Link.tsx
+++ b/packages/sitecore-jss-nextjs/src/components/Link.tsx
@@ -31,7 +31,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     const value = ((field as LinkFieldValue).href
       ? field
       : (field as LinkField).value) as LinkFieldValue;
-    const { href, querystring } = value;
+    const { href, querystring, anchor } = value;
     const isEditing = editable && (field as LinkFieldValue).editable;
 
     if (href && !isEditing) {
@@ -40,7 +40,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       // determine if a link is a route or not.
       if (internalLinkMatcher.test(href)) {
         return (
-          <NextLink href={{ pathname: href, query: querystring }} key="link" locale={false}>
+          <NextLink
+            href={{ pathname: href, query: querystring, hash: anchor }}
+            key="link"
+            locale={false}
+          >
             <a
               title={value.title}
               target={value.target}
diff --git a/packages/sitecore-jss-react/src/components/Link.test.tsx b/packages/sitecore-jss-react/src/components/Link.test.tsx
index cbe6a00e08..1468c7f22e 100644
--- a/packages/sitecore-jss-react/src/components/Link.test.tsx
+++ b/packages/sitecore-jss-react/src/components/Link.test.tsx
@@ -64,6 +64,7 @@ describe('<Link />', () => {
     const field = {
       value: {
         href: '/lorem',
+        anchor: 'foo',
         text: 'ipsum',
         class: 'my-link',
         title: 'My Link',
@@ -72,7 +73,9 @@ describe('<Link />', () => {
       },
     };
     const rendered = mount(<Link field={field} />).find('a');
-    expect(rendered.html()).to.contain(`href="${field.value.href}?${field.value.querystring}"`);
+    expect(rendered.html()).to.contain(
+      `href="${field.value.href}?${field.value.querystring}#${field.value.anchor}"`
+    );
     expect(rendered.html()).to.contain(`class="${field.value.class}"`);
     expect(rendered.html()).to.contain(`title="${field.value.title}"`);
     expect(rendered.html()).to.contain(`target="${field.value.target}"`);
diff --git a/packages/sitecore-jss-react/src/components/Link.tsx b/packages/sitecore-jss-react/src/components/Link.tsx
index 5d7fb24543..a0927b1cbe 100644
--- a/packages/sitecore-jss-react/src/components/Link.tsx
+++ b/packages/sitecore-jss-react/src/components/Link.tsx
@@ -10,6 +10,7 @@ export interface LinkFieldValue {
   title?: string;
   target?: string;
   text?: string;
+  anchor?: string;
   querystring?: string;
 }
 
@@ -94,8 +95,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       return null;
     }
 
+    const anchor = link.anchor ? `#${link.anchor}` : '';
+    const querystring = link.querystring ? `?${link.querystring}` : '';
+
     const anchorAttrs: { [attr: string]: unknown } = {
-      href: link.querystring ? `${link.href}?${link.querystring}` : link.href,
+      href: `${link.href}${querystring}${anchor}`,
       className: link.class,
       title: link.title,
       target: link.target,