Merged in feat/sw-3230-move-link-to-design-system (pull request #2618)

feat(SW-3230): Move Link to design-system

* Move Link to design-system

* Remove comments


Approved-by: Linus Flood

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx

@@ -6,13 +6,13 @@ import { type IntlShape, useIntl } from "react-intl"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { supportEmail, supportPhone } from "@/constants/contactSupport"
 import { employeeBenefits } from "@/constants/routes/dtmc"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import background from "@/public/_static/img/Scandic_Computer_Coffee.png"
 

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.tsx

@@ -2,10 +2,9 @@
 
 import { useIntl } from "react-intl"
 
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Link from "@/components/TempDesignSystem/Link"
-
 import styles from "./SASModal.module.css"
 
 export function SASModal({ children }: { children: React.ReactNode }) {

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx

@@ -1,9 +1,9 @@
 import { ArrowLeft } from "react-feather"
 
 import { overview as profileOverview } from "@scandic-hotels/common/constants/routes/myPages"
+import Link from "@scandic-hotels/design-system/Link"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import background from "@/public/_static/img/partner/sas/sas_x_scandic_airplane_window_background.jpg"
 

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx

@@ -8,13 +8,13 @@ import { useIntl } from "react-intl"
 import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { sasPartnershipTermsAndConditions } from "@/constants/webHrefs"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./link-sas.module.css"
 

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx

@@ -3,13 +3,13 @@ import React from "react"
 import { z } from "zod"
 
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { env } from "@/env/server"
 
 import Image from "@/components/Image"
 import { Redirect } from "@/components/Redirect"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import { SASModal } from "../components/SASModal"

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx

@@ -7,11 +7,10 @@ import { type ReactNode, useState, useTransition } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import Link from "@/components/TempDesignSystem/Link"
-
 import { GenericError } from "../components/GenericError"
 import { SASModal, SASModalContactBlock } from "../components/SASModal"
 import Loading from "./loading"

apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx

@@ -4,12 +4,12 @@ import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { Transactions } from "@scandic-hotels/trpc/enums/transactions"
 
 import { webviews } from "@/constants/routes/webviews"
 
-import Link from "@/components/TempDesignSystem/Link"
 import Table from "@/components/TempDesignSystem/Table"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx

@@ -1,7 +1,7 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import Title from "@scandic-hotels/design-system/Title"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -3,10 +3,10 @@
 import { dt } from "@scandic-hotels/common/dt"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import Title from "@scandic-hotels/design-system/Title"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import styles from "./stay.module.css"

apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx

@@ -1,9 +1,9 @@
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Preamble from "@scandic-hotels/design-system/Preamble"
 import Title from "@scandic-hotels/design-system/Title"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 
 import styles from "./fullWidthCampaign.module.css"

apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx

@@ -1,8 +1,7 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Link from "@/components/TempDesignSystem/Link"
-
 import styles from "./shortcutsListItems.module.css"
 
 import type { ShortcutsListItemsProps } from "@/types/components/blocks/shortcuts"

apps/scandic-web/components/Blocks/TextCols/renderOptions.tsx

@@ -1,4 +1,4 @@
-import Link from "@/components/TempDesignSystem/Link"
+import Link from "@scandic-hotels/design-system/Link"
 
 import styles from "./textcols.module.css"
 

apps/scandic-web/components/Blocks/UspGrid/renderOptions.tsx

@@ -1,4 +1,4 @@
-import Link from "@/components/TempDesignSystem/Link"
+import Link from "@scandic-hotels/design-system/Link"
 
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"

apps/scandic-web/components/ContentCard/index.tsx

@@ -1,9 +1,9 @@
 import Body from "@scandic-hotels/design-system/Body"
+import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Image from "@/components/Image"
 import Chip from "@/components/TempDesignSystem/Chip"
-import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./contentCard.module.css"
 

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

@@ -1,7 +1,7 @@
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import styles from "./destination.module.css"

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

@@ -1,6 +1,6 @@
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
+import Link from "@scandic-hotels/design-system/Link"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import styles from "./tripAdvisorLink.module.css"

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx

@@ -1,10 +1,10 @@
 import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
 import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
 import LocalCallCharges from "@/components/LocalCallCharges"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

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

@@ -1,8 +1,8 @@
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Preamble from "@scandic-hotels/design-system/Preamble"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import styles from "./activities.module.css"

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

@@ -1,8 +1,8 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import OpeningHours from "@/components/OpeningHours"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { appendSlugToPathname } from "@/utils/appendSlugToPathname"
 

apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx

@@ -1,9 +1,9 @@
 import { ElementType } from "domelementtype"
 import parse, { type DOMNode, Element, type Text } from "html-react-parser"
 
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Link from "@/components/TempDesignSystem/Link"
 import Table from "@/components/TempDesignSystem/Table"
 
 import { NodeNames } from "./utils"

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

@@ -1,7 +1,7 @@
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import styles from "./sidebar.module.css"

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

@@ -1,7 +1,7 @@
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import styles from "./sidebar.module.css"

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

@@ -1,10 +1,10 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"
 import OpeningHours from "@/components/OpeningHours"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import styles from "./sidebar.module.css"

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

@@ -1,7 +1,7 @@
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import OpeningHours from "../../HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours"

apps/scandic-web/components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -3,9 +3,10 @@
 "use client"
 import { useCallback, useEffect, useRef, useState } from "react"
 
+import Link from "@scandic-hotels/design-system/Link"
+
 import { languages } from "@/constants/languages"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import styles from "./desktop.module.css"

apps/scandic-web/components/Current/Header/MainMenu/index.tsx

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
 import { findMyBookingCurrentWebPath } from "@scandic-hotels/common/constants/routes/findMyBooking"
 import { myPages } from "@scandic-hotels/common/constants/routes/myPages"
 import { getCurrentWebUrl } from "@scandic-hotels/common/utils/url"
+import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { logout } from "@/constants/routes/handleAuth"
@@ -16,7 +17,6 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import LoginButton from "@/components/LoginButton"
 import Avatar from "@/components/MyPages/Avatar"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { trackClick } from "@/utils/tracking"
 
@@ -81,6 +81,12 @@ export function MainMenu({
     toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
   }
 
+  const trackHamburgerMenuClick = (title: string) => {
+    if (isHamburgerMenuOpen) {
+      trackClick(`hamburger - ${title}`)
+    }
+  }
+
   return (
     <div className={styles.mainMenu}>
       <div
@@ -177,13 +183,10 @@ export function MainMenu({
               {links.map((link, i) => (
                 <li className={styles.li} key={link.href + i}>
                   <Link
+                    id={`hamburger - ${link.title}`}
                     className={styles.link}
                     href={link.href}
-                    trackingId={
+                    onClick={() => trackHamburgerMenuClick(link.title)}
-                      isHamburgerMenuOpen
-                        ? `hamburger - ${link.title}`
-                        : undefined
-                    }
                   >
                     {link.title}
                   </Link>
@@ -195,13 +198,10 @@ export function MainMenu({
               {topMenuMobileLinks.map(({ link }, i) => (
                 <li className={styles.mobileLi} key={link.href + i}>
                   <Link
+                    id={`hamburger - ${link.title}`}
                     className={styles.mobileLink}
                     href={link.href}
-                    trackingId={
+                    onClick={() => trackHamburgerMenuClick(link.title)}
-                      isHamburgerMenuOpen
-                        ? `hamburger - ${link.title}`
-                        : undefined
-                    }
                   >
                     {link.title}
                   </Link>

apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -3,6 +3,7 @@
 import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import Title from "@scandic-hotels/design-system/Title"
 
@@ -10,7 +11,6 @@ import { logout } from "@/constants/routes/handleAuth"
 import useDropdownStore from "@/stores/main-menu"
 
 import { useMyPagesNavigation } from "@/components/Header/MainMenu/MyPagesMenuContent"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import styles from "./my-pages-mobile-dropdown.module.css"

apps/scandic-web/components/Current/Header/TopMenu/index.tsx

@@ -1,11 +1,11 @@
 import { overview } from "@scandic-hotels/common/constants/routes/myPages"
+import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { logout } from "@/constants/routes/handleAuth"
 import { getName } from "@/lib/trpc/memoizedRequests"
 
 import LoginButton from "@/components/LoginButton"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

apps/scandic-web/components/Current/currentRenderOptions.tsx

@@ -1,10 +1,10 @@
+import Link from "@scandic-hotels/design-system/Link"
 import {
   RTEItemTypeEnum,
   RTETypeEnum,
 } from "@scandic-hotels/trpc/types/RTEenums"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./currentRenderOptions.module.css"
 

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

@@ -3,6 +3,7 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 import {
@@ -13,7 +14,6 @@ import {
 import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 
 import ImageContainer from "../ImageContainer"
 import Table from "../TempDesignSystem/Table"

apps/scandic-web/components/Dialog/index.tsx

@@ -7,11 +7,11 @@ import {
 } from "react-aria-components"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
-import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./dialog.module.css"
 

apps/scandic-web/components/Footer/Details/index.tsx

@@ -1,3 +1,4 @@
+import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -5,7 +6,6 @@ import { getFooter } from "@/lib/trpc/memoizedRequests"
 
 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { trackFooterClick } from "@/utils/tracking"
 
 import styles from "./mainnav.module.css"

apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx

@@ -1,10 +1,10 @@
 "use client"
 
+import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"
 

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -12,6 +12,7 @@ import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import {
@@ -28,7 +29,6 @@ import {
 
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
-import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import useLang from "@/hooks/useLang"

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -6,12 +6,12 @@ import { useIntl } from "react-intl"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { logout } from "@/constants/routes/handleAuth"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import styles from "./myPagesMenuContent.module.css"

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

@@ -3,12 +3,12 @@
 import FocusLock from "react-focus-lock"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useDropdownStore from "@/stores/main-menu"
 
 import Card from "@/components/TempDesignSystem/Card"
-import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./megaMenu.module.css"
 

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

@@ -3,10 +3,10 @@
 import { useRef } from "react"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 
 import useDropdownStore from "@/stores/main-menu"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -5,9 +5,9 @@ import { useIntl } from "react-intl"
 
 import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"

apps/scandic-web/components/HotelReservation/BookingConfirmation/HotelDetails/index.tsx

@@ -3,10 +3,9 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
-import Link from "@/components/TempDesignSystem/Link"
-
 import styles from "./hotelDetails.module.css"
 
 import type { BookingConfirmationHotelDetailsProps } from "@/types/components/hotelReservation/bookingConfirmation/hotelDetails"

apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx

@@ -1,9 +1,8 @@
 import Body from "@scandic-hotels/design-system/Body"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
 
-import Link from "@/components/TempDesignSystem/Link"
-
 import styles from "./promo.module.css"
 
 import type { PromoProps } from "@/types/components/hotelReservation/bookingConfirmation/promo"

apps/scandic-web/components/HotelReservation/Contact/index.tsx

@@ -5,9 +5,9 @@ import { useIntl } from "react-intl"
 import Body from "@scandic-hotels/design-system/Body"
 import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
 import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
+import Link from "@scandic-hotels/design-system/Link"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import styles from "./contact.module.css"

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -5,11 +5,11 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { membershipTermsAndConditions } from "@/constants/webHrefs"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -4,13 +4,13 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { membershipTermsAndConditions } from "@/constants/webHrefs"
 
 import LoginButton from "@/components/LoginButton"
-import Link from "@/components/TempDesignSystem/Link"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx

@@ -3,12 +3,12 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { customerService } from "@/constants/webHrefs"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import styles from "./timeoutSpinner.module.css"

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx

@@ -2,11 +2,11 @@ import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import styles from "../payment.module.css"

apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx

@@ -9,6 +9,7 @@ import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { logger } from "@scandic-hotels/common/logger"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -16,7 +17,6 @@ import { trpc } from "@scandic-hotels/trpc/client"
 import { customerService } from "@/constants/webHrefs"
 
 import Input from "@/components/TempDesignSystem/Form/Input"
-import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -19,6 +19,7 @@ import {
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useHotelsMapStore } from "@/stores/hotels-map"
@@ -26,7 +27,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 import BookingCodeChip from "@/components/BookingCodeChip"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
-import Link from "@/components/TempDesignSystem/Link"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 

apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx

@@ -7,12 +7,12 @@ import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReserva
 import Caption from "@scandic-hotels/design-system/Caption"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { isValidClientSession } from "@/utils/clientSession"
 

apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx

@@ -9,12 +9,12 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { isValidClientSession } from "@/utils/clientSession"
 import { trackEvent } from "@/utils/tracking/base"

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx

@@ -5,6 +5,7 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho
 import { dt } from "@scandic-hotels/common/dt"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
 
@@ -15,7 +16,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import Alert from "@/components/TempDesignSystem/Alert"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import styles from "./confirmationStep.module.css"

apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx

@@ -1,7 +1,7 @@
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./summaryCard.module.css"
 

apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx

@@ -1,8 +1,8 @@
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./promo.module.css"
 

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Cancelled/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Link from "@/components/TempDesignSystem/Link"
+import Link from "@scandic-hotels/design-system/Link"
 
 import CustomerSupport from "./CustomerSupport"
 

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx

@@ -7,6 +7,7 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho
 import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
@@ -18,7 +19,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import LoadingSpinner from "@/components/LoadingSpinner"
-import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ViewAndPrintReceipt/index.tsx

@@ -3,12 +3,12 @@ import { useIntl } from "react-intl"
 
 import { preliminaryReceipt } from "@scandic-hotels/common/constants/routes/myStay"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { CancellationRuleEnum } from "@/constants/booking"
 import { useMyStayStore } from "@/stores/my-stay"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { trackMyStayPageLink } from "@/utils/tracking"
 

apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx

@@ -7,9 +7,9 @@ import {
   selectHotelMap,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import FilterAndSortModal from "../Filters/FilterAndSortModal"

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -17,6 +17,7 @@ import { debounce } from "@scandic-hotels/common/utils/debounce"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
@@ -24,7 +25,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -1,5 +1,6 @@
 import BookingCodeFilter from "@scandic-hotels/booking-flow/BookingCodeFilter"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -10,7 +11,6 @@ import HotelSorter from "@/components/HotelReservation/SelectHotel/HotelSorter"
 import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
 import NoAvailabilityAlert from "@/components/HotelReservation/SelectHotel/NoAvailabilityAlert"
 import StaticMap from "@/components/Maps/StaticMap"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import { getFiltersFromHotels, type HotelResponse } from "./helpers"

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

@@ -2,12 +2,12 @@ import { cx } from "class-variance-authority"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ContentEnum } from "@scandic-hotels/trpc/types/content"
 import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 
 import ImageContainer from "../ImageContainer"
 import Table from "../TempDesignSystem/Table"

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -4,12 +4,12 @@ import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { languages } from "@/constants/languages"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import { replaceUrlPart } from "./utils"

apps/scandic-web/components/LoginButton/index.tsx

@@ -1,8 +1,9 @@
 "use client"
 
+import Link, { type LinkProps } from "@scandic-hotels/design-system/Link"
+
 import { login } from "@/constants/routes/handleAuth"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { useLazyPathname } from "@/hooks/useLazyPathname"
 import { trackLoginClick } from "@/utils/tracking"
@@ -10,7 +11,6 @@ import { trackLoginClick } from "@/utils/tracking"
 import type { PropsWithChildren } from "react"
 
 import type { TrackingPosition } from "@/types/components/tracking"
-import type { LinkProps } from "@/components/TempDesignSystem/Link/link"
 
 export default function LoginButton({
   position,

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

@@ -3,10 +3,9 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Link from "@/components/TempDesignSystem/Link"
-
 import styles from "./changeNameDisclaimer.module.css"
 
 export default function ChangeNameDisclaimer() {

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

@@ -1,10 +1,10 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getMembershipCards } from "@/lib/trpc/memoizedRequests"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
 import styles from "./membershipcards.module.css"

apps/scandic-web/components/MyPages/Surprises/Client.tsx

@@ -8,6 +8,7 @@ import { useIntl } from "react-intl"
 
 import { benefits } from "@scandic-hotels/common/constants/routes/myPages"
 import { logger } from "@scandic-hotels/common/logger"
+import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -17,7 +18,6 @@ import {
 } from "@/constants/routes/webviews"
 import { customerService } from "@/constants/webHrefs"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/SasTierComparison/index.tsx

@@ -4,12 +4,12 @@ import Image from "next/image"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 
 import JsonToHtml from "@/components/JsonToHtml"
-import Link from "@/components/TempDesignSystem/Link"
 
 import SectionContainer from "../Section/Container"
 

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

@@ -1,6 +1,5 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
+import Link from "@scandic-hotels/design-system/Link"
-import Link from "@/components/TempDesignSystem/Link"
 
 import { linkVariants } from "./variants"
 

apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -4,12 +4,11 @@ import {
   MaterialIcon,
   type MaterialIconSetIconProps,
 } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactConfig"
 
 import { serverClient } from "@/lib/trpc/server"
 
-import Link from "@/components/TempDesignSystem/Link"
-
 // import { getValueFromContactConfig } from "@/utils/contactConfig"
 import styles from "./contactRow.module.css"
 

apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx

@@ -1,9 +1,9 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { faq, membershipTermsAndConditions } from "@/constants/webHrefs"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx

@@ -1,11 +1,11 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
 
 import { ScandicFriends } from "@/components/Levels"
 import LoginButton from "@/components/LoginButton"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 

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

@@ -3,8 +3,8 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 
-import Link from "../Link"
 import AlertSidepeek from "./Sidepeek"
 import { IconByAlertType } from "./utils"
 import { alertVariants } from "./variants"

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

@@ -1,15 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { linkVariants } from "./variants"
-
-export interface LinkProps
-  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color">,
-    VariantProps<typeof linkVariants> {
-  href: string
-  scroll?: boolean
-  partialMatch?: boolean
-  prefetch?: boolean
-  trackingId?: string
-  trackingParams?: Record<string, string>
-  keepSearchParams?: boolean
-}

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

@@ -1,9 +1,9 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
 import Title from "@scandic-hotels/design-system/Title"
 
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 
 import { loyaltyCardVariants } from "./variants"
 

apps/scandic-web/components/Webviews/LinkToOverview/index.tsx

@@ -1,8 +1,9 @@
 import { ArrowLeft } from "react-feather"
 
+import Link from "@scandic-hotels/design-system/Link"
+
 import { overview } from "@/constants/routes/webviews"
 
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { webviewSearchParams } from "@/utils/webviews"

apps/scandic-web/hooks/useCheckIfExternalLink.ts

@@ -1,21 +0,0 @@
-import { useMemo } from "react"
-
-export const useCheckIfExternalLink = (url: string) => {
-  return useMemo(() => {
-    if (typeof window !== "undefined" && url?.length) {
-      try {
-        const hostName = window.location.hostname
-        const newURL = new URL(url)
-
-        const hostsMatch = hostName === newURL.hostname
-        const langRouteRegex = /^\/[a-zA-Z]{2}\//
-
-        return !hostsMatch || !langRouteRegex.test(newURL.pathname)
-      } catch {
-        // Don't care. Expecting internal url (#, /my-pages/overview, etc)
-        return false
-      }
-    }
-    return false
-  }, [url])
-}

packages/design-system/lib/components/Link/index.tsx

@@ -1,14 +1,13 @@
-"use client"
+'use client'
-import NextLink from "next/link"
+import NextLink from 'next/link'
-import { usePathname, useSearchParams } from "next/navigation"
+import { usePathname, useSearchParams } from 'next/navigation'
-import { useCallback, useMemo } from "react"
+import { useMemo } from 'react'
 
-import { useCheckIfExternalLink } from "@/hooks/useCheckIfExternalLink"
+import { linkVariants } from './variants'
-import { trackClick } from "@/utils/tracking"
 
-import { linkVariants } from "./variants"
+import type { LinkProps } from './link'
 
-import type { LinkProps } from "./link"
+export { LinkProps }
 
 export default function Link({
   active,
@@ -22,8 +21,6 @@ export default function Link({
   prefetch,
   variant,
   weight,
-  trackingId,
-  trackingParams,
   onClick,
   /**
    * Decides if the link should include the current search params in the URL.
@@ -53,11 +50,11 @@ export default function Link({
   })
 
   const fullUrl = useMemo(() => {
-    let newPath = href
+    const newPath = href
 
     if (keepSearchParams && searchParams.size) {
-      if (newPath.includes("?")) {
+      if (newPath.includes('?')) {
-        const newPathParts = newPath.split("?")
+        const newPathParts = newPath.split('?')
         const newSearchParams = new URLSearchParams(newPathParts[1])
         searchParams.forEach((v, k) => {
           if (!newSearchParams.has(k)) {
@@ -75,12 +72,6 @@ export default function Link({
   // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
   const isExternal = useCheckIfExternalLink(href)
 
-  const trackClickById = useCallback(() => {
-    if (trackingId) {
-      trackClick(trackingId, trackingParams)
-    }
-  }, [trackingId, trackingParams])
-
   const linkProps = {
     href: fullUrl,
     className: classNames,
@@ -100,17 +91,29 @@ export default function Link({
     <NextLink
       scroll={scroll}
       prefetch={prefetch}
-      onClick={(e) => {
+      onClick={onClick}
-        if (onClick) {
-          onClick(e)
-        }
-        if (trackingId) {
-          trackClickById()
-        }
-      }}
-      id={trackingId}
       {...props}
       {...linkProps}
     />
   )
 }
+
+const useCheckIfExternalLink = (url: string) => {
+  return useMemo(() => {
+    if (typeof window !== 'undefined' && url?.length) {
+      try {
+        const hostName = window.location.hostname
+        const newURL = new URL(url)
+
+        const hostsMatch = hostName === newURL.hostname
+        const langRouteRegex = /^\/[a-zA-Z]{2}\//
+
+        return !hostsMatch || !langRouteRegex.test(newURL.pathname)
+      } catch {
+        // Don't care. Expecting internal url (#, /my-pages/overview, etc)
+        return false
+      }
+    }
+    return false
+  }, [url])
+}

packages/design-system/lib/components/Link/link.ts

@@ -0,0 +1,13 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import type { linkVariants } from './variants'
+
+export interface LinkProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>,
+    VariantProps<typeof linkVariants> {
+  href: string
+  scroll?: boolean
+  partialMatch?: boolean
+  prefetch?: boolean
+  keepSearchParams?: boolean
+}

packages/design-system/lib/components/Link/variants.ts

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./link.module.css"
+import styles from './link.module.css'
 
 export const linkVariants = cva(styles.link, {
   variants: {
@@ -8,18 +8,18 @@ export const linkVariants = cva(styles.link, {
       true: styles.active,
     },
     color: {
-      none: "",
+      none: '',
       peach50: styles.peach50,
       white: styles.white,
       red: styles.red,
-      "Text/Interactive/Default": styles["Text-Interactive-Default"],
+      'Text/Interactive/Default': styles['Text-Interactive-Default'],
-      "Text/Interactive/Secondary": styles["Text-Interactive-Secondary"],
+      'Text/Interactive/Secondary': styles['Text-Interactive-Secondary'],
     },
     size: {
       small: styles.small,
       regular: styles.regular,
       tiny: styles.tiny,
-      none: "",
+      none: '',
     },
     textDecoration: {
       underline: styles.underline,
@@ -38,7 +38,7 @@ export const linkVariants = cva(styles.link, {
     },
   },
   defaultVariants: {
-    color: "Text/Interactive/Default",
+    color: 'Text/Interactive/Default',
-    size: "regular",
+    size: 'regular',
   },
 })

packages/design-system/package.json

@@ -27,6 +27,7 @@
     "./IconChip": "./lib/components/IconChip/index.tsx",
     "./Input": "./lib/components/Input/index.tsx",
     "./Label": "./lib/components/Label/index.tsx",
+    "./Link": "./lib/components/Link/index.tsx",
     "./OldDSButton": "./lib/components/OldDSButton/index.tsx",
     "./Select": "./lib/components/Select/index.tsx",
     "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",