feat(SW-1960): Improved scrolling and tabnavigation on hotel pages

Approved-by: Matilda Landström

apps/scandic-web/app/globals.css

@@ -18,6 +18,7 @@
   --main-menu-mobile-height: 75px;
   --main-menu-desktop-height: 125px;
   --booking-widget-mobile-height: 75px;
+  --booking-widget-tablet-height: 150px;
   --booking-widget-desktop-height: 77px;
   --hotel-page-map-desktop-width: 23.75rem;
 

apps/scandic-web/components/Blocks/Accordion/accordion.module.css

@@ -1,3 +1,7 @@
+.accordionSection {
+  scroll-margin-top: var(--hotel-page-scroll-margin-top);
+}
+
 .accordion:not(.allVisible) :nth-child(n + 6) {
   display: none;
 }

apps/scandic-web/components/Blocks/Accordion/index.tsx

@@ -24,7 +24,10 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
   }
 
   return (
-    <SectionContainer id={HotelHashValues.faq}>
+    <SectionContainer
+      className={styles.accordionSection}
+      id={HotelHashValues.faq}
+    >
       <SectionHeader textTransform="uppercase" title={title} />
       <Accordion
         className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}

apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -1,13 +1,17 @@
 "use client"
 
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
 import { useRouter } from "next/navigation"
-import { useEffect, useRef } from "react"
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { StickyElementNameEnum } from "@/stores/sticky-position"
 
-import Link from "@/components/TempDesignSystem/Link"
 import useHash from "@/hooks/useHash"
+import useScrollShadows from "@/hooks/useScrollShadows"
 import useScrollSpy from "@/hooks/useScrollSpy"
 import useStickyPosition from "@/hooks/useStickyPosition"
 import { trackHotelTabClick } from "@/utils/tracking"
@@ -31,12 +35,17 @@ export default function TabNavigation({
   const intl = useIntl()
   const router = useRouter()
   const tabNavigationRef = useRef<HTMLDivElement>(null)
+  const tabRefs = useMemo(() => new Map<string, HTMLAnchorElement>(), [])
+
   useStickyPosition({
     ref: tabNavigationRef,
     name: StickyElementNameEnum.HOTEL_TAB_NAVIGATION,
     group: "hotelPage",
   })
 
+  const { containerRef, showLeftShadow, showRightShadow } =
+    useScrollShadows<HTMLDivElement>()
+
   const tabLinks: { hash: HotelHashValues; text: string }[] = [
     {
       hash: HotelHashValues.overview,
@@ -120,6 +129,41 @@ export default function TabNavigation({
     tabLinks.map(({ hash }) => hash)
   )
 
+  const scrollLinkToCenter = useCallback(
+    (hash: string) => {
+      requestAnimationFrame(() => {
+        const activeTab = tabRefs.get(hash)
+        if (!containerRef.current || !activeTab) {
+          return
+        }
+
+        const container = containerRef.current
+        const containerWidth = container.offsetWidth
+        const tabWidth = activeTab.offsetWidth
+        const tabLeft = activeTab.offsetLeft
+        const scrollLeft = tabLeft - containerWidth / 2 + tabWidth / 2
+        const maxScrollLeft = container.scrollWidth - containerWidth
+
+        // Ensure scrollLeft is inside the viewport
+        const boundedScrollLeft = Math.max(
+          0,
+          Math.min(scrollLeft, maxScrollLeft)
+        )
+
+        container.scrollTo({
+          left: boundedScrollLeft,
+          behavior: "smooth",
+        })
+      })
+    },
+    [containerRef, tabRefs]
+  )
+
+  useLayoutEffect(() => {
+    const activeHash = hash || HotelHashValues.overview
+    scrollLinkToCenter(activeHash)
+  }, [hash, scrollLinkToCenter])
+
   useEffect(() => {
     if (activeSectionId) {
       router.replace(`#${activeSectionId}`, { scroll: false })
@@ -127,28 +171,45 @@ export default function TabNavigation({
   }, [activeSectionId, router])
 
   return (
-    <div ref={tabNavigationRef} className={styles.stickyWrapper}>
+    <div
-      <nav className={styles.tabsContainer}>
+      ref={tabNavigationRef}
+      className={cx(styles.containerWrapper, {
+        [styles.showLeftShadow]: showLeftShadow,
+        [styles.showRightShadow]: showRightShadow,
+      })}
+    >
+      <nav className={styles.tabsContainer} ref={containerRef}>
         {tabLinks.map((link) => {
           const isActive =
             hash === link.hash ||
             (!hash && link.hash === HotelHashValues.overview)
           return (
-            <Link
+            <Typography
               key={link.hash}
+              variant={
+                isActive ? "Body/Paragraph/mdBold" : "Body/Paragraph/mdRegular"
+              }
+            >
+              <NextLink
                 href={`#${link.hash}`}
-              active={isActive}
+                className={cx(styles.link, {
-              variant="tab"
+                  [styles.active]: isActive,
-              color="burgundy"
+                })}
-              textDecoration="none"
+                aria-current={isActive}
                 scroll={true}
+                ref={(element) => {
+                  if (element) {
+                    tabRefs.set(link.hash, element)
+                  }
+                }}
                 onClick={() => {
                   pauseScrollSpy()
                   trackHotelTabClick(link.text)
                 }}
               >
                 {link.text}
-            </Link>
+              </NextLink>
+            </Typography>
           )
         })}
       </nav>

apps/scandic-web/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css

@@ -1,33 +1,77 @@
-.stickyWrapper {
+.containerWrapper {
   position: sticky;
-  top: var(--booking-widget-mobile-height);
+  top: 0;
   z-index: var(--hotel-tab-navigation-z-index);
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
+  border-bottom: 1px solid var(--Border-Default);
-  overflow-x: auto;
+  width: 100%;
-  white-space: nowrap;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 76px;
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &::before {
+    left: 0;
+    background: linear-gradient(
+      -90deg,
+      rgba(242, 236, 230, 0.1) 6%,
+      rgba(242, 236, 230, 1) 90%
+    );
+  }
+  &::after {
+    right: 0;
+    background: linear-gradient(
+      90deg,
+      rgba(242, 236, 230, 0.1) 6%,
+      rgba(242, 236, 230, 1) 90%
+    );
+  }
+
+  &.showLeftShadow::before,
+  &.showRightShadow::after {
+    opacity: 1;
+  }
 }
 
 .tabsContainer {
   display: flex;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
   justify-content: flex-start;
-  width: 100%;
+  width: var(--max-width-content);
-  overflow-x: auto;
-  max-width: var(--max-width-page);
   margin: 0 auto;
+  overflow-y: hidden;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  white-space: nowrap;
+  margin-bottom: -1px; /* Adjust for border overlap */
 }
 
-@media screen and (min-width: 768px) {
+.link {
-  .stickyWrapper {
+  color: var(--Text-Interactive-Default);
-    top: var(--booking-widget-desktop-height);
+  padding: var(--Space-x2) var(--Space-x0);
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition: border-bottom-color 0.3s ease-in-out;
+
+  &:hover,
+  &.active {
+    border-bottom-color: var(--Text-Interactive-Default);
   }
 }
 
 @media screen and (min-width: 1367px) {
   .tabsContainer {
-    padding: 0 var(--Spacing-x5);
+    padding: 0 var(--Space-x5);
-    max-width: calc(100% - var(--hotel-page-map-desktop-width));
     overflow-x: visible;
     margin: 0;
   }

apps/scandic-web/components/ContentType/HotelPage/hotelPage.module.css

@@ -59,6 +59,10 @@
 
 @media screen and (min-width: 768px) {
   .pageContainer {
+    --hotel-page-scroll-margin-top: calc(
+      var(--hotel-page-navigation-height) +
+        var(--booking-widget-tablet-height) + var(--Space-x2)
+    );
     margin: 0 auto;
   }
 

apps/scandic-web/components/TabFilters/tabFilters.module.css

@@ -1,6 +1,33 @@
 .containerWrapper {
   position: relative;
   overflow: hidden;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--Space-x3);
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+
+    &.showLeftShadow::before,
+    &.showRightShadow::after {
+      opacity: 1;
+    }
+  }
+
+  &::before {
+    left: 0;
+    background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 6%, #fff 90%);
+  }
+  &::after {
+    right: 0;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 6%, #fff 90%);
+  }
 }
 
 .container {
@@ -13,39 +40,6 @@
   width: 100%;
 }
 
-.containerWrapper::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--Space-x3);
-  pointer-events: none;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  right: 0;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 6%, #fff 90%);
-}
-
-.containerWrapper::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--Space-x3);
-  pointer-events: none;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  left: 0;
-  background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 6%, #fff 90%);
-}
-
-.showLeftShadow::before,
-.showRightShadow::after {
-  opacity: 1;
-}
-
 .filter {
   display: flex;
   align-items: center;

apps/scandic-web/hooks/useScrollSpy.ts

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
+import { debounce } from "../utils/debounce"
+
 export default function useScrollSpy(
   sectionIds: string[],
   options: IntersectionObserverInit = {}
@@ -9,6 +11,7 @@ export default function useScrollSpy(
 } {
   const [activeSectionId, setActiveSectionId] = useState("")
   const observerIsInactive = useRef(false)
+  const safetyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const mergedOptions = useMemo(
     () => ({
@@ -42,6 +45,22 @@ export default function useScrollSpy(
     []
   )
 
+  // Scroll event listener to reset the observerIsInactive state
+  // This is to support the pauseScrollSpy function to prevent the observer from firing when scrolling.
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      if (observerIsInactive.current) {
+        observerIsInactive.current = false
+      }
+    }, 200)
+
+    window.addEventListener("scroll", handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [])
+
   useEffect(() => {
     const observer = new IntersectionObserver(handleIntersection, mergedOptions)
     const elements = sectionIds
@@ -55,12 +74,18 @@ export default function useScrollSpy(
     return () => elements.forEach((el) => el && observer.unobserve(el))
   }, [sectionIds, mergedOptions, handleIntersection])
 
-  const pauseScrollSpy = () => {
+  function pauseScrollSpy() {
     observerIsInactive.current = true
 
-    setTimeout(() => {
+    if (safetyTimeoutRef.current) {
+      clearTimeout(safetyTimeoutRef.current)
+    }
+
+    // Safety timeout - maximum time to wait before re-enabling
+    safetyTimeoutRef.current = setTimeout(() => {
       observerIsInactive.current = false
-    }, 500)
+      safetyTimeoutRef.current = null
+    }, 1500)
   }
 
   return { activeSectionId, pauseScrollSpy }