Merged in feat/SW-1584-destination-content-blocks (pull request #1278)

Feat/SW-1584 destination content blocks

* feat(SW-1584): Added accordion and content blocks to destination city pages

* feat(SW-1584): Added accordion and content blocks to destination country pages


Approved-by: Matilda Landström

components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css

@@ -4,7 +4,7 @@
   grid-template-areas:
     "header"
     "sidebar"
-    "mainSection";
+    "mainContent";
   width: 100%;
   gap: var(--Spacing-x4);
 }
@@ -13,8 +13,10 @@
   grid-area: header;
 }
 
-.mainSection {
-  grid-area: mainSection;
+.mainContent {
+  grid-area: mainContent;
+  display: grid;
+  gap: var(--Spacing-x6);
   padding-bottom: var(--Spacing-x7);
   max-width: var(--max-width-page);
   width: 100%;
@@ -47,7 +49,11 @@
   .pageContainer {
     grid-template-areas:
       "header sidebar"
-      "mainSection sidebar";
+      "mainContent sidebar";
     grid-template-columns: 1fr var(--map-desktop-width);
   }
+
+  .mainContent {
+    gap: var(--Spacing-x9);
+  }
 }

components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -2,6 +2,7 @@ import { Suspense } from "react"
 
 import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests"
 
+import Blocks from "@/components/Blocks"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -28,6 +29,7 @@ export default async function DestinationCityPage() {
 
   const { tracking, destinationCityPage, hotels } = pageData
   const {
+    blocks,
     images,
     heading,
     preamble,
@@ -51,8 +53,10 @@ export default async function DestinationCityPage() {
             destinationName={destination_settings.city}
           />
         </header>
-        <main className={styles.mainSection}>
+        <main className={styles.mainContent}>
           <HotelListing hotels={hotels} />
+
+          {blocks && <Blocks blocks={blocks} />}
         </main>
         <aside className={styles.sidebar}>
           <SidebarContentWrapper>

components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css

@@ -4,7 +4,7 @@
   grid-template-areas:
     "header"
     "sidebar"
-    "mainSection";
+    "mainContent";
   width: 100%;
   gap: var(--Spacing-x4);
 }
@@ -13,10 +13,14 @@
   grid-area: header;
 }
 
-.mainSection {
-  grid-area: mainSection;
+.mainContent {
+  grid-area: mainContent;
+  display: grid;
+  gap: var(--Spacing-x6);
   padding-bottom: var(--Spacing-x7);
   max-width: var(--max-width-page);
+  width: 100%;
+  margin: 0 auto;
 }
 
 .sidebar {
@@ -45,7 +49,11 @@
   .pageContainer {
     grid-template-areas:
       "header sidebar"
-      "mainSection sidebar";
+      "mainContent sidebar";
     grid-template-columns: 1fr var(--map-desktop-width);
   }
+
+  .mainContent {
+    gap: var(--Spacing-x9);
+  }
 }

components/ContentType/DestinationPage/DestinationCountryPage/index.tsx

@@ -2,6 +2,7 @@ import { Suspense } from "react"
 
 import { getDestinationCountryPage } from "@/lib/trpc/memoizedRequests"
 
+import Blocks from "@/components/Blocks"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -35,6 +36,7 @@ export default async function DestinationCountryPage() {
   const { tracking, destinationCountryPage, cities, translatedCountry } =
     pageData
   const {
+    blocks,
     images,
     heading,
     preamble,
@@ -54,8 +56,9 @@ export default async function DestinationCountryPage() {
           </Suspense>
           <TopImages images={images} destinationName={translatedCountry} />
         </header>
-        <main className={styles.mainSection}>
+        <main className={styles.mainContent}>
           <CityListing cities={cities} />
+          {blocks && <Blocks blocks={blocks} />}
         </main>
         <aside className={styles.sidebar}>
           <SidebarContentWrapper>