feat: add a textDecoration variant to links

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -46,6 +46,7 @@ export default async function IntroSection({
           className={styles.introLink}
           target="_blank"
           variant="icon"
+          textDecoration="underline"
           color="peach80"
           href={tripAdvisor.webUrl}
         >
@@ -59,6 +60,7 @@ export default async function IntroSection({
           className={styles.introLink}
           target="_blank"
           color="peach80"
+          textDecoration="underline"
           variant="icon"
           href="#"
         >

components/ContentType/HotelPage/IntroSection/introSection.module.css

@@ -19,7 +19,6 @@
 }
 
 .introLink {
-  text-decoration: underline !important;
   text-decoration-color: var(--Scandic-Peach-80);
   width: fit-content;
 }

components/TempDesignSystem/Link/index.tsx

@@ -11,6 +11,7 @@ export default function Link({
   color,
   href,
   partialMatch = false,
+  textDecoration,
   size,
   prefetch,
   variant,
@@ -24,6 +25,7 @@ export default function Link({
   const classNames = linkVariants({
     active: isActive,
     className,
+    textDecoration,
     color,
     size,
     variant,

components/TempDesignSystem/Link/link.module.css

@@ -1,7 +1,14 @@
 .link {
+}
+
+.noDecoration {
   text-decoration: none;
 }
 
+.underline {
+  text-decoration: underline;
+}
+
 .default {
   font-family: var(--typography-Body-Regular-fontFamily);
 }

components/TempDesignSystem/Link/variants.ts

@@ -19,6 +19,10 @@ export const linkVariants = cva(styles.link, {
       small: styles.small,
       regular: styles.regular,
     },
+    textDecoration: {
+      none: styles.noDecoration,
+      underline: styles.underline,
+    },
     variant: {
       breadcrumb: styles.breadcrumb,
       default: styles.default,
@@ -32,6 +36,7 @@ export const linkVariants = cva(styles.link, {
   defaultVariants: {
     color: "black",
     variant: "default",
+    textDecoration: "none",
   },
   compoundVariants: [
     {