Merged in fix/restore-icon-variant-link (pull request #2340)

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

Approved-by: Arvid Norlin

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/index.tsx

@@ -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}",

apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx

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

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

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

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx

@@ -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",

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

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

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx

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

apps/scandic-web/components/JsonToHtml/renderOptions.tsx

@@ -420,6 +420,7 @@ export const renderOptions: RenderOptions = {
               href={node.attrs.href}
               textDecoration="underline"
               target="_blank"
+              variant="icon"
               {...props}
             >
               {next(

apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx

@@ -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({

apps/scandic-web/components/TempDesignSystem/Link/link.module.css

@@ -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);

apps/scandic-web/components/TempDesignSystem/Link/variants.ts

@@ -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,