fix(SW-2101): do not apply underline to Material icons inside Link and Button

apps/scandic-web/components/TempDesignSystem/Link/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import NextLink from "next/link"
 import { usePathname, useSearchParams } from "next/navigation"
-import { useCallback, useMemo } from "react"
+import { Children, type ReactNode, useCallback, useMemo } from "react"
 
 import { useCheckIfExternalLink } from "@/hooks/useCheckIfExternalLink"
 import { trackClick } from "@/utils/tracking"
@@ -10,7 +10,21 @@ import { linkVariants } from "./variants"
 
 import type { LinkProps } from "./link"
 
+// We wrap all text nodes to avoid having consumers manually wrap text nodes in spans.
+// This is so that we can better support underline on links as Material Symbols
+// are implemented as a font and therefore gets underline. Icons inside links
+// should not get an underline.
+function wrapTextNodes(children: ReactNode): ReactNode {
+  return Children.map(children, (child) => {
+    if (typeof child === "string") {
+      return <span>{child}</span>
+    }
+    return child
+  })
+}
+
 export default function Link({
+  children,
   active,
   className,
   color,
@@ -96,6 +110,9 @@ export default function Link({
     className: classNames,
   }
 
+  const wrappedChildren =
+    typeof children === "function" ? children : wrapTextNodes(children)
+
   return isExternal ? (
     <a
       {...linkProps}
@@ -105,7 +122,9 @@ export default function Link({
           onClick(e)
         }
       }}
-    />
+    >
+      {wrappedChildren}
+    </a>
   ) : (
     <NextLink
       scroll={scroll}
@@ -121,6 +140,8 @@ export default function Link({
       id={trackingId}
       {...props}
       {...linkProps}
-    />
+    >
+      {wrappedChildren}
+    </NextLink>
   )
 }

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

@@ -43,7 +43,10 @@
   font-weight: var(--typography-Body-Underline-fontWeight);
   letter-spacing: var(--typography-Body-Underline-letterSpacing);
   line-height: var(--typography-Body-Underline-lineHeight);
-  text-decoration: underline;
+
+  & span:not(:global(.material-symbols)) {
+    text-decoration: underline;
+  }
 }
 
 .myPageMobileDropdown {