From 03c9244fdf0b5ed54c9424926159ae22f85aa166 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Tue, 5 Aug 2025 08:41:31 +0000
Subject: [PATCH] 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
---
 .../DestinationPage/CityListing/index.tsx     | 10 ++++-
 .../DestinationPage/HotelListing/index.tsx    | 10 ++++-
 .../ContentType/DestinationPage/Map/index.tsx | 10 ++++-
 .../HotelCardListing/index.tsx                | 13 ++++++-
 .../SelectHotelMapContent/index.tsx           | 10 ++++-
 .../BackToTopButton/backToTopButton.ts        |  9 -----
 .../BackToTopButton/index.tsx                 | 35 -----------------
 .../backToTopButton.module.css                |  0
 .../lib/components/BackToTopButton/index.tsx  | 38 +++++++++++++++++++
 .../components}/BackToTopButton/variants.ts   |  6 +--
 packages/design-system/package.json           |  1 +
 11 files changed, 85 insertions(+), 57 deletions(-)
 delete mode 100644 apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts
 delete mode 100644 apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx
 rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/BackToTopButton/backToTopButton.module.css (100%)
 create mode 100644 packages/design-system/lib/components/BackToTopButton/index.tsx
 rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/BackToTopButton/variants.ts (65%)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx
index f4eca0f5b..f8e9da87c 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx
@@ -3,6 +3,7 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
 
@@ -10,7 +11,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
-import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import CityListingItem from "./CityListingItem"
@@ -69,7 +69,13 @@ export default function CityListing() {
             ))}
           </ul>
           {showBackToTop ? (
-            <BackToTopButton position="right" onClick={scrollToTop} />
+            <BackToTopButton
+              position="right"
+              onClick={scrollToTop}
+              label={intl.formatMessage({
+                defaultMessage: "Back to top",
+              })}
+            />
           ) : null}
         </>
       )}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx
index 96f9d7004..9d5d5a2d1 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx
@@ -5,6 +5,7 @@ import { useParams } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
+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"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -14,7 +15,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
-import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import HotelListingItem from "./HotelListingItem"
@@ -100,7 +100,13 @@ export default function HotelListing() {
             ))}
           </ul>
           {showBackToTop ? (
-            <BackToTopButton position="right" onClick={scrollToTop} />
+            <BackToTopButton
+              position="right"
+              onClick={scrollToTop}
+              label={intl.formatMessage({
+                defaultMessage: "Back to top",
+              })}
+            />
           ) : null}
         </>
       )}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
index 3c5e4d2d7..2a69b6611 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
@@ -11,6 +11,7 @@ import {
 } from "react"
 import { useIntl } from "react-intl"
 
+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"
 
@@ -18,7 +19,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 import { debounce } from "@/utils/debounce"
 
@@ -157,7 +157,13 @@ export default function Map({
         <aside className={styles.sidebar} ref={scrollRef}>
           {children}
           {showBackToTop ? (
-            <BackToTopButton position="left" onClick={scrollToTop} />
+            <BackToTopButton
+              position="left"
+              onClick={scrollToTop}
+              label={intl.formatMessage({
+                defaultMessage: "Back to top",
+              })}
+            />
           ) : null}
         </aside>
         <DynamicMap
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx
index 2c4a9e086..a861f2b12 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx
+++ b/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>
   )
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index c64b8fccc..9b41a0ba5 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/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
diff --git a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts b/apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts
deleted file mode 100644
index 11dcab760..000000000
--- a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import type { ComponentProps } from "react"
-import type { Button } from "react-aria-components"
-
-import type { backToTopButtonVariants } from "./variants"
-
-export interface BackToTopButtonProps
-  extends ComponentProps<typeof Button>,
-    VariantProps<typeof backToTopButtonVariants> {}
diff --git a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx b/apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx
deleted file mode 100644
index 82cb6184f..000000000
--- a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client"
-
-import { Button as ButtonRAC } from "react-aria-components"
-import { useIntl } from "react-intl"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { backToTopButtonVariants } from "./variants"
-
-import styles from "./backToTopButton.module.css"
-
-import type { BackToTopButtonProps } from "./backToTopButton"
-
-export function BackToTopButton({ position, ...props }: BackToTopButtonProps) {
-  const intl = useIntl()
-  return (
-    <Typography variant="Body/Supporting text (caption)/smBold">
-      <ButtonRAC
-        className={backToTopButtonVariants({ position })}
-        aria-label={intl.formatMessage({
-          defaultMessage: "Back to top",
-        })}
-        {...props}
-      >
-        <MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
-        <span className={styles.text}>
-          {intl.formatMessage({
-            defaultMessage: "Back to top",
-          })}
-        </span>
-      </ButtonRAC>
-    </Typography>
-  )
-}
diff --git a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css b/packages/design-system/lib/components/BackToTopButton/backToTopButton.module.css
similarity index 100%
rename from apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
rename to packages/design-system/lib/components/BackToTopButton/backToTopButton.module.css
diff --git a/packages/design-system/lib/components/BackToTopButton/index.tsx b/packages/design-system/lib/components/BackToTopButton/index.tsx
new file mode 100644
index 000000000..61e1a7475
--- /dev/null
+++ b/packages/design-system/lib/components/BackToTopButton/index.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { type Button, Button as ButtonRAC } from 'react-aria-components'
+
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
+
+import { backToTopButtonVariants } from './variants'
+
+import styles from './backToTopButton.module.css'
+
+import type { VariantProps } from 'class-variance-authority'
+import type { ComponentProps } from 'react'
+
+interface BackToTopButtonProps
+  extends ComponentProps<typeof Button>,
+    VariantProps<typeof backToTopButtonVariants> {
+  label: string
+}
+
+export function BackToTopButton({
+  position,
+  label,
+  ...props
+}: BackToTopButtonProps) {
+  return (
+    <Typography variant="Body/Supporting text (caption)/smBold">
+      <ButtonRAC
+        className={backToTopButtonVariants({ position })}
+        aria-label={label}
+        {...props}
+      >
+        <MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
+        <span className={styles.text}>{label}</span>
+      </ButtonRAC>
+    </Typography>
+  )
+}
diff --git a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/variants.ts b/packages/design-system/lib/components/BackToTopButton/variants.ts
similarity index 65%
rename from apps/scandic-web/components/TempDesignSystem/BackToTopButton/variants.ts
rename to packages/design-system/lib/components/BackToTopButton/variants.ts
index ea6c9c1c8..1dd7cc413 100644
--- a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/variants.ts
+++ b/packages/design-system/lib/components/BackToTopButton/variants.ts
@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./backToTopButton.module.css"
+import styles from './backToTopButton.module.css'
 
 export const backToTopButtonVariants = cva(styles.backToTopButton, {
   variants: {
@@ -11,6 +11,6 @@ export const backToTopButtonVariants = cva(styles.backToTopButton, {
     },
   },
   defaultVariants: {
-    position: "right",
+    position: 'right',
   },
 })
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index a13d024a9..9e7584bb9 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -4,6 +4,7 @@
   "version": "1.0.0-beta.1",
   "type": "module",
   "exports": {
+    "./BackToTopButton": "./dist/components/BackToTopButton/index.js",
     "./Body": "./dist/components/Body/index.js",
     "./Button": "./dist/components/Button/index.js",
     "./Caption": "./dist/components/Caption/index.js",