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} + + ) }