🐛 Fix issues with promo tiles links #1919

web/pageComponents/shared/ButtonLink.tsx

@@ -1,16 +1,14 @@
 import { ButtonLink as Link, ButtonLinkProps } from '@components'
-import NextLink, { LinkProps } from 'next/link'
+import { 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.ReactElement
 } & (ButtonLinkProps | LinkProps)
 
-export const ButtonLink = ({ action, children, ...rest }: Props) => {
+export const ButtonLink = ({ action, ...rest }: Props) => {
   const { label, ariaLabel, extension, type } = action
 
   const url = getUrlFromAction(action)
@@ -22,23 +20,15 @@ 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 (
-      <>
-        {child || (
-          <Link locale={locale} href={url} aria-label={ariaLabel} {...(rest as ButtonLinkProps)}>
-            {label}
-          </Link>
-        )}
-      </>
+      <Link locale={locale} href={url} aria-label={ariaLabel} {...(rest as ButtonLinkProps)}>
+        {label}
+      </Link>
     )
   }
 
-  return children ? (
-    <NextLink href={url} {...(rest as Omit<LinkProps, 'href'>)}>
-      {children}
-    </NextLink>
-  ) : (
+  return (
     <Link href={url} aria-label={ariaLabel} {...(rest as ButtonLinkProps)}>
       {label} {extension && `(${extension.toUpperCase()})`}
     </Link>

web/pageComponents/topicPages/PromoTileButton.tsx

@@ -1,6 +1,8 @@
 import { LinkData } from '../../types/types'
 import { ButtonLink } from '../shared/ButtonLink'
 import { Card, Link } from '@components'
+import { getUrlFromAction } from '../../common/helpers'
+import { getLocaleFromName } from '../../lib/localization'
 import { CSSProperties } from 'react'
 import styled from 'styled-components'
 
@@ -12,33 +14,35 @@ type Props = {
 
 const StyledLink = styled(Link)`
   gap: var(--space-medium);
-  border-bottom: none;
+  border-bottom: none !important;
 `
 
-const StyledButtonLink = styled(ButtonLink)`
-  text-decoration: none;
-`
 const Wrapper = styled.div`
   padding: 0 var(--space-medium);
 `
 
 const IconButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: boolean }) => {
+  const url = getUrlFromAction(action)
+  if (!url) {
+    console.warn(`Missing URL on 'IconButtonLink' link with type: '${action.type}' and label: '${action.label}'`)
+    return null
+  }
+  const locale = getLocaleFromName(action.link?.lang)
+
   return (
     <Wrapper>
-      <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>
+      <StyledLink underline={false} variant="contentLink" locale={locale} href={url} 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>
     </Wrapper>
   )
 }