Merge pull request #958 from DTS-STN/header-link-error

fix: add legacyBehavior prop on Link to support next/link
DTS-STN · Aug 7, 2023 · c1557c3 · c1557c3
2 parents 6361d79 + 173adf8
commit c1557c3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -12,7 +12,7 @@ export function Button(props) {
       id={props.id}
       disabled={props.disabled}
       {...props.attributes}
-      data-testId={props?.id}
+      data-testid={props?.id}
       alt={props.iconAltText}
     >
       {props.icon && !props.iconEnd ? (

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -27,6 +27,7 @@ export function Header(props) {
     useParentContainer,
     customLink,
     dataGcAnalyticsCustomClickInstitutionVariable,
+    legacyBehavior,
   } = props;
 
   const containerClass = useParentContainer ? "" : "ds-container";
@@ -63,6 +64,7 @@ export function Header(props) {
                 path={linkPath}
                 locale={locale}
                 customLink={customLink}
+                legacyBehavior={legacyBehavior}
                 dataGcAnalyticsCustomClickInstitutionVariable={
                   dataGcAnalyticsCustomClickInstitutionVariable
                 }
@@ -85,6 +87,7 @@ export function Header(props) {
                   path={linkPath}
                   customLink={customLink}
                   locale={locale}
+                  legacyBehavior={legacyBehavior}
                   dataGcAnalyticsCustomClickInstitutionVariable={
                     dataGcAnalyticsCustomClickInstitutionVariable
                   }
@@ -99,6 +102,7 @@ export function Header(props) {
                 path={linkPath}
                 customLink={customLink}
                 locale={locale}
+                legacyBehavior={legacyBehavior}
                 dataGcAnalyticsCustomClickInstitutionVariable={
                   dataGcAnalyticsCustomClickInstitutionVariable
                 }
@@ -112,6 +116,7 @@ export function Header(props) {
             isAuthenticated={isAuthenticated}
             menuList={menuProps.menuList}
             onSignOut={menuProps.onSignOut}
+            legacyBehavior={menuProps.legacyBehavior}
             dataGcAnalyticsCustomClickInstitutionVariable={
               dataGcAnalyticsCustomClickInstitutionVariable
             }
@@ -223,6 +228,7 @@ Header.propTypes = {
     ),
     hasNoMenu: PropTypes.bool,
     useParentContainer: PropTypes.bool,
+    legacyBehavior: PropTypes.bool,
   }),
 
   /**

diff --git a/src/components/Language/Language.js b/src/components/Language/Language.js
@@ -17,6 +17,7 @@ export function Language(props) {
         locale={props.locale}
         component={props.customLink}
         lang={lang === "en" ? "fr" : "en"}
+        legacyBehavior={props.legacyBehavior}
         dataGcAnalyticsCustomClick={`${
           props.dataGcAnalyticsCustomClickInstitutionVariable
         }:${lang === "en" ? "Français" : "English"}`}

diff --git a/src/components/Link/Link.js b/src/components/Link/Link.js
@@ -49,6 +49,7 @@ export function Link(props) {
       lang={props.lang}
       target={props.target}
       aria-label={props.ariaLabel || props.text}
+      legacyBehavior={props.legacyBehavior}
       role="link"
     >
       <a
@@ -154,4 +155,9 @@ Link.propTypes = {
    * Allow user to use configurable component, default is html anchor tag
    */
   component: PropTypes.elementType,
+
+  /**
+   * Support Next 13 legacyBehavior on next/link
+   */
+  legacyBehavior: PropTypes.bool,
 };
diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js
@@ -59,9 +59,9 @@ export function Menu(props) {
             <button
               id="dropdownNavbarLink"
               onClick={() => setShowDropdown((e) => !e)}
-              data-gc-analytics-customclick={`${
-                props.dataGcAnalyticsCustomClickInstitutionVariable
-              }:${showDropdown ? "Menu Contract" : "Expand Menu"}`}
+              data-gc-analytics-customclick={`${dataGcAnalyticsCustomClickInstitutionVariable}:${
+                showDropdown ? "Menu Contract" : "Expand Menu"
+              }`}
               aria-haspopup="true"
               data-testid="menuButton"
               aria-expanded={showDropdown}
@@ -117,7 +117,10 @@ export function Menu(props) {
                       onClick={() => setShowDropdown(false)}
                       key={element.key}
                     >
-                      <Component href={element.path}>
+                      <Component
+                        href={element.path}
+                        legacyBehavior={props.legacyBehavior}
+                      >
                         <a
                           className={`${
                             index === 0 ? "ds-border-none" : "ds-border-t-2"
@@ -232,6 +235,11 @@ Menu.propTypes = {
    */
   demoBuffer: PropTypes.bool,
 
+  /**
+   * Support Next 13 legacyBehavior on next/link
+   */
+  legacyBehavior: PropTypes.bool,
+
   /**
    * List of menu items to display in dropdown with links
    */