diff --git a/web/pageComponents/shared/ButtonLink.tsx b/web/pageComponents/shared/ButtonLink.tsx
index d714ae51b..1d8273f0a 100644
--- a/web/pageComponents/shared/ButtonLink.tsx
+++ b/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 || (
-
- {label}
-
- )}
- >
+
+ {label}
+
)
}
- return children ? (
- )}>
- {children}
-
- ) : (
+ return (
{label} {extension && `(${extension.toUpperCase()})`}
diff --git a/web/pageComponents/topicPages/PromoTileButton.tsx b/web/pageComponents/topicPages/PromoTileButton.tsx
index 2563f30f2..999401385 100644
--- a/web/pageComponents/topicPages/PromoTileButton.tsx
+++ b/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 (
-
-
-
- {action.label}
-
-
-
+
+
+ {action.label}
+
+
)
}