fix(SW-2759): Sticky position for mobile map toggle button on hotel pages

Approved-by: Christian Andolf
Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx

@@ -1,7 +1,8 @@
 "use client"
-import Link from "next/link"
-import { useParams, useSearchParams } from "next/navigation"
-import { useEffect, useMemo, useState } from "react"
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
+import { useParams } from "next/navigation"
+import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -13,12 +14,7 @@ import styles from "./mobileToggle.module.css"
 
 export default function MobileMapToggle() {
   const intl = useIntl()
-  const searchParams = useSearchParams()
   const params = useParams()
-  const isMapView = useMemo(
-    () => searchParams.get("view") === "map",
-    [searchParams]
-  )
   const [mapUrl, setMapUrl] = useState<string | null>(null)
 
   useEffect(() => {
@@ -33,41 +29,34 @@ export default function MobileMapToggle() {
 
   return (
     <div className={styles.mobileToggle}>
-      <span
-        className={`${styles.iconWrapper} ${!isMapView ? styles.active : ""}`}
-      >
-        <MaterialIcon
-          icon="home"
-          color={!isMapView ? "Icon/Inverted" : "Icon/Accent"}
-        />
-        <Typography variant="Body/Supporting text (caption)/smBold">
+      <Typography variant="Body/Supporting text (caption)/smBold">
+        <span className={cx(styles.iconWrapper, styles.active)}>
+          <MaterialIcon icon="home" color="CurrentColor" />
           <span>
             {intl.formatMessage({
               defaultMessage: "Hotel",
             })}
           </span>
-        </Typography>
-      </span>
-      <span
-        className={`${styles.iconWrapper} ${isMapView ? styles.active : ""}`}
-      >
-        <Link
-          className={styles.link}
-          href={mapUrl}
-          onClick={trackHotelMapClick}
-        >
-          <MaterialIcon
-            icon="map"
-            color={isMapView ? "Icon/Inverted" : "Icon/Interactive/Accent"}
-          />
-          <Typography variant="Body/Supporting text (caption)/smBold">
+        </span>
+      </Typography>
+      <span className={styles.iconWrapper}>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <NextLink
+            className={styles.link}
+            href={mapUrl}
+            onClick={trackHotelMapClick}
+            aria-label={intl.formatMessage({
+              defaultMessage: "See map",
+            })}
+          >
+            <MaterialIcon icon="map" color="CurrentColor" />
             <span>
               {intl.formatMessage({
                 defaultMessage: "Map",
               })}
             </span>
-          </Typography>
-        </Link>
+          </NextLink>
+        </Typography>
       </span>
     </div>
   )

apps/scandic-web/components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css

@@ -1,47 +1,43 @@
 .mobileToggle {
-  position: fixed;
-  left: 50%;
-  transform: translate(-50%, 0);
-  bottom: var(--Spacing-x5);
+  position: sticky;
+  bottom: var(--Space-x5);
+  margin-bottom: var(--Space-x5);
   z-index: var(--hotel-mobile-map-toggle-button-z-index);
-  margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   align-items: center;
-  border-radius: 4rem;
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Rounded);
+  background-color: var(--Component-Button-Inverted-Fill-Default);
   box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.15);
-  padding: var(--Spacing-x-half);
+  padding: 6px;
+  width: fit-content;
+  justify-self: center;
 }
 
 .iconWrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--Spacing-x-half);
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-width: 0;
-  cursor: pointer;
+  gap: var(--Space-x05);
+  padding: var(--Space-x1) var(--Space-x2);
+  background-color: transparent;
   border-radius: 2.5rem;
-  color: var(--Base-Text-Accent);
-}
-.iconWrapper:hover {
-  background-color: var(--Base-Surface-Primary-light-Hover);
-}
+  color: var(--Text-Accent-Primary);
 
-.iconWrapper.active {
-  background-color: var(--Primary-Strong-Surface-Normal);
-  color: var(--Base-Text-Inverted);
-}
-.iconWrapper.active:hover {
-  background-color: var(--Primary-Strong-Surface-Hover);
+  &.active {
+    background-color: var(--Surface-Brand-Primary-2-Default);
+    color: var(--Text-Inverted);
+  }
+
+  &:not(.active) {
+    cursor: pointer;
+  }
 }
 
 .link {
   display: contents;
-  color: var(--Base-Text-Accent);
+  color: var(--Text-Accent-Primary);
 }
 
 @media screen and (min-width: 1367px) {