fix: restore icon variant for link since inline-flex makes its children inline but not the box itself
This commit is contained in:
@@ -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}",
|
||||
|
||||
@@ -46,6 +46,7 @@ export default async function TripAdvisorLink({
|
||||
|
||||
return (
|
||||
<Link
|
||||
variant="icon"
|
||||
textDecoration="underline"
|
||||
color="Text/Interactive/Secondary"
|
||||
href={tripAdvisorHref}
|
||||
|
||||
@@ -77,6 +77,7 @@ export default async function RestaurantBarItem({
|
||||
href={url}
|
||||
target="_blank"
|
||||
textDecoration="underline"
|
||||
variant="icon"
|
||||
color="Text/Interactive/Secondary"
|
||||
>
|
||||
{name}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -60,6 +60,7 @@ export default function MegaMenu({
|
||||
{seeAllLink?.link ? (
|
||||
<Link
|
||||
href={seeAllLink.link.url}
|
||||
variant="icon"
|
||||
weight="bold"
|
||||
onClick={handleNavigate}
|
||||
>
|
||||
|
||||
@@ -100,6 +100,7 @@ export default function ReceiptRoom({
|
||||
href=""
|
||||
size="small"
|
||||
textDecoration="underline"
|
||||
variant="icon"
|
||||
>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Reservation policy",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user