From 749cacdac874fbd4e7499f1da03f1302629303c9 Mon Sep 17 00:00:00 2001
From: Fernando Lucchesi <fernando@lucalto.com>
Date: Thu, 5 Oct 2023 06:57:54 -0300
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20Fix=20promo=20tile=20links?=
 =?UTF-8?q?=20#1919?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../topicPages/PromoTileButton.tsx            | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/web/pageComponents/topicPages/PromoTileButton.tsx b/web/pageComponents/topicPages/PromoTileButton.tsx
index 965901d8f..2563f30f2 100644
--- a/web/pageComponents/topicPages/PromoTileButton.tsx
+++ b/web/pageComponents/topicPages/PromoTileButton.tsx
@@ -1,6 +1,6 @@
 import { LinkData } from '../../types/types'
 import { ButtonLink } from '../shared/ButtonLink'
-import { Card } from '@components'
+import { Card, Link } from '@components'
 import { CSSProperties } from 'react'
 import styled from 'styled-components'
 
@@ -10,11 +10,14 @@ type Props = {
   template?: 'default' | 'icon'
 }
 
-const StyledButtonLink = styled(ButtonLink)`
-  text-decoration: none;
+const StyledLink = styled(Link)`
   gap: var(--space-medium);
   border-bottom: none;
 `
+
+const StyledButtonLink = styled(ButtonLink)`
+  text-decoration: none;
+`
 const Wrapper = styled.div`
   padding: 0 var(--space-medium);
 `
@@ -22,17 +25,19 @@ const Wrapper = styled.div`
 const IconButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: boolean }) => {
   return (
     <Wrapper>
-      <StyledButtonLink legacyBehavior action={action} aria-label={action.ariaLabel}>
-        <Card.Title
-          style={
-            {
-              '--card-title-fontSize': hasImage ? 'var(--typeScale-2)' : 'var(--typeScale-4)',
-              '--card-title-fontWeight': hasImage ? '450' : '400',
-            } as CSSProperties
-          }
-        >
-          {action.label}
-        </Card.Title>
+      <StyledButtonLink action={action}>
+        <StyledLink variant="contentLink" underline={false} aria-label={action.ariaLabel}>
+          <Card.Title
+            style={
+              {
+                '--card-title-fontSize': hasImage ? 'var(--typeScale-2)' : 'var(--typeScale-4)',
+                '--card-title-fontWeight': hasImage ? '450' : '400',
+              } as CSSProperties
+            }
+          >
+            {action.label}
+          </Card.Title>
+        </StyledLink>
       </StyledButtonLink>
     </Wrapper>
   )

From dd3f8ad55d474cf8fc15c6a67d379f5083f56340 Mon Sep 17 00:00:00 2001
From: Fernando Lucchesi <fernando@lucalto.com>
Date: Thu, 5 Oct 2023 07:34:21 -0300
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20Fix=20bug=20with=20internal?=
 =?UTF-8?q?=20urls=20#1919?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/pageComponents/shared/ButtonLink.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/pageComponents/shared/ButtonLink.tsx b/web/pageComponents/shared/ButtonLink.tsx
index 7f4a88367..d714ae51b 100644
--- a/web/pageComponents/shared/ButtonLink.tsx
+++ b/web/pageComponents/shared/ButtonLink.tsx
@@ -3,10 +3,11 @@ import NextLink, { LinkProps } from 'next/link'
 import { getUrlFromAction } from '../../common/helpers/getUrlFromAction'
 import { getLocaleFromName } from '../../lib/localization'
 import type { LinkData } from '../../types/types'
+import { cloneElement } from 'react'
 
 type Props = {
   action: LinkData
-  children?: React.ReactNode
+  children?: React.ReactElement
 } & (ButtonLinkProps | LinkProps)
 
 export const ButtonLink = ({ action, children, ...rest }: Props) => {
@@ -21,9 +22,10 @@ export const ButtonLink = ({ action, children, ...rest }: Props) => {
   // If the URL is a static AEM page it should behave as an internal link in the web
   if (type === 'internalUrl') {
     const locale = getLocaleFromName(action.link?.lang)
+    const child = children ? cloneElement(children, { href: url, locale: locale, ariaLabel: ariaLabel }) : undefined
     return (
       <>
-        {children || (
+        {child || (
           <Link locale={locale} href={url} aria-label={ariaLabel} {...(rest as ButtonLinkProps)}>
             {label}
           </Link>