feat(SW-2975): Added top campaign to campaign overview page

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx

@@ -21,20 +21,24 @@ import type { HotelDataWithUrl } from "@/types/hotel"
 interface CampaignHotelListingClientProps {
   heading: string
   hotels: HotelDataWithUrl[]
+  visibleCountMobile?: 3 | 6
+  visibleCountDesktop?: 3 | 6
 }
 
 export default function CampaignHotelListingClient({
   heading,
   hotels,
+  visibleCountMobile = 3,
+  visibleCountDesktop = 6,
 }: CampaignHotelListingClientProps) {
   const intl = useIntl()
   const isMobile = useMediaQuery("(max-width: 767px)")
   const scrollRef = useRef<HTMLElement>(null)
 
-  const initialCount = isMobile ? 3 : 6 // Initial number of hotels to show
-  const thresholdCount = isMobile ? 6 : 9 // This is the threshold at which we start showing the "Show More" button
-  const showAllThreshold = isMobile ? 9 : 18 // This is the threshold at which we show the "Show All" button
-  const incrementCount = isMobile ? 3 : 6 // Number of hotels to increment when the button is clicked
+  const initialCount = isMobile ? visibleCountMobile : visibleCountDesktop // Initial number of hotels to show
+  const thresholdCount = initialCount + 3 // This is the threshold at which we start showing the "Show More" button
+  const showAllThreshold = initialCount * 3 // This is the threshold at which we show the "Show All" button
+  const incrementCount = initialCount // Number of hotels to increment when the button is clicked
 
   const [visibleCount, setVisibleCount] = useState(() =>
     // Set initial visible count based on the number of hotels and the threshold
@@ -86,8 +90,8 @@ export default function CampaignHotelListingClient({
   return (
     <section className={styles.hotelListingSection} ref={scrollRef}>
       <header className={styles.header}>
-        <Typography variant="Title/md">
-          <h2 className={styles.heading}>{heading}</h2>
+        <Typography variant="Title/Subtitle/lg">
+          <h3>{heading}</h3>
         </Typography>
       </header>
       <ul className={styles.list}>

apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css

@@ -8,10 +8,6 @@
   scroll-margin-top: var(--scroll-margin-top);
 }
 
-.heading {
-  color: var(--Text-Heading);
-}
-
 .list {
   list-style: none;
   display: grid;
@@ -27,7 +23,6 @@
     --scroll-margin-top: calc(
       var(--booking-widget-tablet-height) + var(--Spacing-x2)
     );
-    gap: var(--Space-x5);
   }
   .list {
     row-gap: var(--Space-x5);

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

@@ -5,11 +5,15 @@ import CampaignHotelListingClient from "./Client"
 interface CampaignHotelListingProps {
   heading: string
   hotelIds: string[]
+  visibleCountMobile?: 3 | 6
+  visibleCountDesktop?: 3 | 6
 }
 
 export default async function CampaignHotelListing({
   heading,
   hotelIds,
+  visibleCountMobile,
+  visibleCountDesktop,
 }: CampaignHotelListingProps) {
   const hotels = await getHotelsByCSFilter({ hotelsToInclude: hotelIds })
 
@@ -17,5 +21,12 @@ export default async function CampaignHotelListing({
     return null
   }
 
-  return <CampaignHotelListingClient heading={heading} hotels={hotels} />
+  return (
+    <CampaignHotelListingClient
+      heading={heading}
+      hotels={hotels}
+      visibleCountMobile={visibleCountMobile}
+      visibleCountDesktop={visibleCountDesktop}
+    />
+  )
 }