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/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}
         </>
       )}

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}
         </>
       )}

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

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

apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts

@@ -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> {}

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

@@ -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>
-  )
-}

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>
+  )
+}

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',
   },
 })

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",