feat(SW-2144): added back-to-top button on destination map views

Approved-by: Matilda Landström

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

@@ -4,30 +4,32 @@ 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"
 
-export function BackToTopButton({
-  onClick,
-  position,
-}: {
-  onClick: () => void
-  position: "left" | "right" | "center"
-}) {
+import type { BackToTopButtonProps } from "./backToTopButton"
+
+export function BackToTopButton({ position, ...props }: BackToTopButtonProps) {
   const intl = useIntl()
   return (
-    <ButtonRAC
-      className={backToTopButtonVariants({ position })}
-      onPress={onClick}
-    >
-      <MaterialIcon icon="arrow_upward" color="CurrentColor" />
-      <span className={styles.backToTopButtonText}>
-        {intl.formatMessage({
+    <Typography variant="Body/Supporting text (caption)/smBold">
+      <ButtonRAC
+        className={backToTopButtonVariants({ position })}
+        aria-label={intl.formatMessage({
           defaultMessage: "Back to top",
         })}
-      </span>
-    </ButtonRAC>
+        {...props}
+      >
+        <MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
+        <span className={styles.text}>
+          {intl.formatMessage({
+            defaultMessage: "Back to top",
+          })}
+        </span>
+      </ButtonRAC>
+    </Typography>
   )
 }