fix: restore icon variant for link since inline-flex makes its children inline but not the box itself

This commit is contained in:
Christian Andolf
2025-06-11 17:06:53 +02:00
parent 2dd07eb6b8
commit 9ee0ec2d46
10 changed files with 22 additions and 15 deletions

View File

@@ -44,7 +44,7 @@ export default async function Destination({
)}
</ul>
{countryUrl && (
<Link href={countryUrl} weight="bold">
<Link href={countryUrl} variant="icon" weight="bold">
{intl.formatMessage(
{
defaultMessage: "View all hotels in {country}",

View File

@@ -46,6 +46,7 @@ export default async function TripAdvisorLink({
return (
<Link
variant="icon"
textDecoration="underline"
color="Text/Interactive/Secondary"
href={tripAdvisorHref}

View File

@@ -77,6 +77,7 @@ export default async function RestaurantBarItem({
href={url}
target="_blank"
textDecoration="underline"
variant="icon"
color="Text/Interactive/Secondary"
>
{name}

View File

@@ -72,6 +72,7 @@ export default async function RestaurantSidebar({
href={url}
color="Text/Interactive/Secondary"
textDecoration="underline"
variant="icon"
>
{name}
<MaterialIcon
@@ -93,7 +94,7 @@ export default async function RestaurantSidebar({
})}
</h3>
</Typography>
<Typography variant="Body/Paragraph/mdRegular" className={styles.text}>
<Typography variant="Body/Paragraph/mdRegular">
<div>
<p>{hotelAddress.streetAddress}</p>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
@@ -115,10 +116,7 @@ export default async function RestaurantSidebar({
<>
<Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
{hotelAddress.country === Country.Finland ? (
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.text}
>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
defaultMessage: "Price 0,16 €/min + local call charges",

View File

@@ -60,6 +60,7 @@ export default function MegaMenu({
{seeAllLink?.link ? (
<Link
href={seeAllLink.link.url}
variant="icon"
weight="bold"
onClick={handleNavigate}
>

View File

@@ -100,6 +100,7 @@ export default function ReceiptRoom({
href=""
size="small"
textDecoration="underline"
variant="icon"
>
{intl.formatMessage({
defaultMessage: "Reservation policy",

View File

@@ -87,7 +87,7 @@ export const renderOptions: RenderOptions = {
return (
<Link
key={node.uid}
className={cx(styles.link, className)}
className={className}
{...props}
href={node.attrs.url}
target={node.attrs.target ?? "_blank"}
@@ -348,7 +348,7 @@ export const renderOptions: RenderOptions = {
}
return (
<span className={cx(styles.span, propsClassName)} {...props}>
<span className={propsClassName} {...props}>
{next(node.children, embeds, fullRenderOptions)}
</span>
)
@@ -416,10 +416,11 @@ export const renderOptions: RenderOptions = {
return (
<Link
key={node.uid}
className={cx(styles.link, className)}
className={className}
href={node.attrs.href}
textDecoration="underline"
target="_blank"
variant="icon"
{...props}
>
{next(
@@ -466,7 +467,7 @@ export const renderOptions: RenderOptions = {
return (
<Link
key={node.uid}
className={cx(styles.link, className)}
className={className}
{...props}
href={entry.node.url}
textDecoration="underline"
@@ -818,7 +819,7 @@ export const renderOptions: RenderOptions = {
}
return (
<Typography key={id} variant="Body/Paragraph/mdRegular">
<span className={cx(styles.span, propsClassName)} {...props}>
<span className={propsClassName} {...props}>
{children}
</span>
</Typography>

View File

@@ -78,7 +78,7 @@ export default async function MembershipCardSlot() {
</span>
</div>
))}
<Link href="#">
<Link href="#" variant="icon">
<MaterialIcon icon="add_circle" color="CurrentColor" />
<Body color="burgundy" textTransform="underlined">
{intl.formatMessage({

View File

@@ -1,8 +1,5 @@
.link {
text-decoration: none;
align-items: center;
display: inline-flex;
gap: var(--Space-x05);
}
.underline {
@@ -47,6 +44,12 @@
}
}
.icon {
align-items: center;
display: inline-flex;
gap: var(--Space-x05);
}
.breadcrumb {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);

View File

@@ -28,6 +28,7 @@ export const linkVariants = cva(styles.link, {
bold: styles.bold,
},
variant: {
icon: styles.icon,
breadcrumb: styles.breadcrumb,
myPageMobileDropdown: styles.myPageMobileDropdown,
navigation: styles.navigation,