Merged in feat/sw-2873-move-backtotopbutton-to-design-system (pull request #2593)

feat(SW-2873): Move BackToTopButton to design-system

* Remove dependency on i18n in BackToTopButton

* Move BackToTopButton to design-system


Approved-by: Hrishikesh Vaipurkar

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

@@ -2,12 +2,14 @@
 import { useSearchParams } from "next/navigation"
 import { useSession } from "next-auth/react"
 import { useEffect, useMemo, useRef } from "react"
+import { useIntl } from "react-intl"
+
+import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 
 import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
-import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 import { isValidClientSession } from "@/utils/clientSession"
 
@@ -29,6 +31,7 @@ export default function HotelCardListing({
   type = HotelCardListingTypeEnum.PageListing,
   isAlternative,
 }: HotelCardListingProps) {
+  const intl = useIntl()
   const { data: session } = useSession()
   const isUserLoggedIn = isValidClientSession(session)
   const searchParams = useSearchParams()
@@ -140,7 +143,13 @@ export default function HotelCardListing({
           ))
         : null}
       {showBackToTop && (
-        <BackToTopButton position="right" onClick={scrollToTop} />
+        <BackToTopButton
+          position="right"
+          onClick={scrollToTop}
+          label={intl.formatMessage({
+            defaultMessage: "Back to top",
+          })}
+        />
       )}
     </section>
   )

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

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
@@ -17,7 +18,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
-import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
@@ -203,7 +203,13 @@ export default function SelectHotelContent({
           />
         )}
         {showBackToTop && (
-          <BackToTopButton position="left" onClick={scrollToTop} />
+          <BackToTopButton
+            position="left"
+            onClick={scrollToTop}
+            label={intl.formatMessage({
+              defaultMessage: "Back to top",
+            })}
+          />
         )}
       </div>
       <InteractiveMap