Merged in fix/SW-1895-update-hotel-listning-to-show-all (pull request #1535)

fix(SW-1895): always display full list of cities or countries

* fix(SW-1895): always display full list of cities or countries


Approved-by: Erik Tiekstra
Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/DestinationPage/CityListing/cityListing.module.css

@@ -18,10 +18,6 @@
   gap: var(--Spacing-x2);
 }
 
-.cityList:not(.allVisible) li:nth-child(n + 6) {
-  display: none;
-}
-
 @media screen and (min-width: 768px) {
   .container {
     --scroll-margin-top: calc(

apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef, useState } from "react"
+import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
@@ -8,7 +8,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 ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
@@ -30,16 +29,6 @@ export default function CityListing() {
     activeCities: state.activeCities,
     isLoading: state.isLoading,
   }))
-  const [allCitiesVisible, setAllCitiesVisible] = useState(
-    activeCities.length <= 5
-  )
-
-  function handleShowMore() {
-    if (scrollRef.current && allCitiesVisible) {
-      scrollRef.current.scrollIntoView({ behavior: "smooth" })
-    }
-    setAllCitiesVisible((state) => !state)
-  }
 
   return isLoading ? (
     <CityListingSkeleton />
@@ -66,21 +55,13 @@ export default function CityListing() {
         />
       ) : (
         <>
-          <ul
+          <ul className={styles.cityList}>
-            className={`${styles.cityList} ${allCitiesVisible ? styles.allVisible : ""}`}
-          >
             {activeCities.map((city) => (
               <li key={city.system.uid}>
                 <CityListingItem city={city} />
               </li>
             ))}
           </ul>
-          {activeCities.length > 5 ? (
-            <ShowMoreButton
-              loadMoreData={handleShowMore}
-              showLess={allCitiesVisible}
-            />
-          ) : null}
           {showBackToTop && (
             <BackToTopButton position="center" onClick={scrollToTop} />
           )}

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css

@@ -19,10 +19,6 @@
   gap: var(--Spacing-x2);
 }
 
-.hotelList:not(.allVisible) li:nth-child(n + 6) {
-  display: none;
-}
-
 @media screen and (min-width: 768px) {
   .container {
     --scroll-margin-top: calc(

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef, useState } from "react"
+import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
@@ -8,7 +8,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 ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
@@ -30,16 +29,6 @@ export default function HotelListing() {
     activeHotels: state.activeHotels,
     isLoading: state.isLoading,
   }))
-  const [allHotelsVisible, setAllHotelsVisible] = useState(
-    activeHotels.length <= 5
-  )
-
-  function handleShowMore() {
-    if (scrollRef.current && allHotelsVisible) {
-      scrollRef.current.scrollIntoView({ behavior: "smooth" })
-    }
-    setAllHotelsVisible((state) => !state)
-  }
 
   return isLoading ? (
     <HotelListingSkeleton />
@@ -66,21 +55,13 @@ export default function HotelListing() {
         />
       ) : (
         <>
-          <ul
+          <ul className={styles.hotelList}>
-            className={`${styles.hotelList} ${allHotelsVisible ? styles.allVisible : ""}`}
-          >
             {activeHotels.map(({ hotel, url }) => (
               <li key={hotel.name}>
                 <HotelListingItem hotel={hotel} url={url} />
               </li>
             ))}
           </ul>
-          {activeHotels.length > 5 ? (
-            <ShowMoreButton
-              loadMoreData={handleShowMore}
-              showLess={allHotelsVisible}
-            />
-          ) : null}
           {showBackToTop && (
             <BackToTopButton position="center" onClick={scrollToTop} />
           )}