feat(SW-93): add mocked facility cards

components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css

@@ -0,0 +1,31 @@
+.one {
+  grid-column: span 1;
+}
+
+.two {
+  grid-column: span 2;
+}
+
+.three {
+  grid-column: 1/-1;
+}
+
+.desktopGrid {
+  display: none;
+}
+
+.mobileGrid {
+  display: grid;
+  gap: var(--Spacing-x-quarter);
+}
+
+@media screen and (min-width: 768px) {
+  .desktopGrid {
+    display: grid;
+    gap: var(--Spacing-x1);
+  }
+
+  .mobileGrid {
+    display: none;
+  }
+}

components/ContentType/HotelPage/Facilities/CardGrid/index.tsx

@@ -0,0 +1,34 @@
+import Card from "@/components/TempDesignSystem/Card"
+import CardImage from "@/components/TempDesignSystem/Card/CardImage"
+import Grids from "@/components/TempDesignSystem/Grids"
+import { sortCards } from "@/utils/imageCard"
+
+import styles from "./cardGrid.module.css"
+
+import type { CardGridProps } from "@/types/components/hotelPage/facilities"
+
+export default async function CardGrid({ facility }: CardGridProps) {
+  const imageCard = sortCards(facility)
+  return (
+    <section id={imageCard.card?.id}>
+      <Grids.Stackable className={styles.desktopGrid}>
+        {facility.map((card: any, idx: number) => (
+          <Card
+            theme={card.theme || "primaryDark"}
+            key={idx}
+            scriptedTopTitle={card.scriptedTopTitle}
+            heading={card.heading}
+            bodyText={card.bodyText}
+            secondaryButton={card.secondaryButton}
+            primaryButton={card.primaryButton}
+            backgroundImage={card.backgroundImage}
+            className={styles[card.columnSpan]}
+          />
+        ))}
+      </Grids.Stackable>
+      <Grids.Stackable className={styles.mobileGrid}>
+        <CardImage card={imageCard.card} imageCards={imageCard.images} />
+      </Grids.Stackable>
+    </section>
+  )
+}

components/ContentType/HotelPage/Facilities/facilities.module.css

@@ -0,0 +1,9 @@
+.grid {
+  gap: var(--Spacing-x2);
+}
+
+@media screen and (min-width: 768px) {
+  .grid {
+    gap: var(--Spacing-x7);
+  }
+}

components/ContentType/HotelPage/Facilities/index.tsx

@@ -0,0 +1,17 @@
+import SectionContainer from "@/components/Section/Container"
+
+import CardGrid from "./CardGrid"
+
+import styles from "./facilities.module.css"
+
+import type { FacilityProps } from "@/types/components/hotelPage/facilities"
+
+export default async function Facilities({ facilities }: FacilityProps) {
+  return (
+    <SectionContainer className={styles.grid}>
+      {facilities.map((facility: any, idx: number) => (
+        <CardGrid key={`grid_${idx}`} facility={facility} />
+      ))}
+    </SectionContainer>
+  )
+}

components/ContentType/HotelPage/Facilities/mockData.ts

@@ -0,0 +1,159 @@
+import {
+  activities,
+  meetingsAndConferences,
+  restaurantAndBar,
+  wellnessAndExercise,
+} from "@/constants/routes/hotelPageParams"
+
+import { getLang } from "@/i18n/serverContext"
+
+import type { Facilities } from "@/types/components/hotelPage/facilities"
+
+const lang = getLang()
+/* 
+Most of this will be available from the api. Some will need to come from Contentstack. "Activities" will most likely come from Contentstack, which is prepped for.
+ */
+export const MOCK_FACILITIES: Facilities = [
+  [
+    {
+      id: "restaurant-and-bar",
+      theme: "primaryDark",
+      scriptedTopTitle: "Restaurant & Bar",
+      heading: "Enjoy relaxed restaurant experience",
+      secondaryButton: {
+        href: `?s=${restaurantAndBar[lang]}`,
+        title: "Read more & book a table",
+        isExternal: false,
+      },
+      columnSpan: "one",
+    },
+    {
+      backgroundImage: {
+        url: "https://imagevault.scandichotels.com/publishedmedia/79xttlmnum0kjbwhyh18/scandic-helsinki-hub-restaurant-food-tuna.jpg",
+        title: "scandic-helsinki-hub-restaurant-food-tuna.jpg",
+        meta: {
+          alt: "food in restaurant at scandic helsinki hub",
+          caption: "food in restaurant at scandic helsinki hub",
+        },
+        id: 81751,
+        dimensions: {
+          width: 5935,
+          height: 3957,
+          aspectRatio: 1.499873641647713,
+        },
+      },
+      columnSpan: "one",
+    },
+    {
+      backgroundImage: {
+        url: "https://imagevault.scandichotels.com/publishedmedia/48sb3eyhhzj727l2j1af/Scandic-helsinki-hub-II-centro-41.jpg",
+        meta: {
+          alt: "restaurant il centro at scandic helsinki hu",
+          caption: "restaurant il centro at scandic helsinki hub",
+        },
+        id: 82457,
+        title: "Scandic-helsinki-hub-II-centro-41.jpg",
+        dimensions: {
+          width: 4200,
+          height: 2800,
+          aspectRatio: 1.5,
+        },
+      },
+      columnSpan: "one",
+    },
+  ],
+  [
+    {
+      backgroundImage: {
+        url: "https://imagevault.scandichotels.com/publishedmedia/csef06n329hjfiet1avj/Scandic-spectrum-8.jpg",
+        meta: {
+          alt: "man with a laptop",
+          caption: "man with a laptop",
+        },
+        id: 82713,
+        title: "Scandic-spectrum-8.jpg",
+        dimensions: {
+          width: 7499,
+          height: 4999,
+          aspectRatio: 1.500100020004001,
+        },
+      },
+      columnSpan: "two",
+    },
+    {
+      id: "meetings-and-conferences",
+      theme: "primaryDim",
+      scriptedTopTitle: "Meetings & Conferences",
+      heading: "Events that make an impression",
+      secondaryButton: {
+        href: `?s=${meetingsAndConferences[lang]}`,
+        title: "About meetings & conferences",
+        isExternal: false,
+      },
+      columnSpan: "one",
+    },
+  ],
+  [
+    {
+      id: "wellness-and-exercise",
+      theme: "one",
+      scriptedTopTitle: "Wellness & Exercise",
+      heading: "Sauna and gym",
+      secondaryButton: {
+        href: `?s=${wellnessAndExercise[lang]}`,
+        title: "Read more about wellness & exercise",
+        isExternal: false,
+      },
+      columnSpan: "one",
+    },
+    {
+      backgroundImage: {
+        url: "https://imagevault.scandichotels.com/publishedmedia/69acct5i3pk5be7d6ub0/scandic-helsinki-hub-sauna.jpg",
+        meta: {
+          alt: "sauna at scandic helsinki hub",
+          caption: "sauna at scandic helsinki hub",
+        },
+        id: 81814,
+        title: "scandic-helsinki-hub-sauna.jpg",
+        dimensions: {
+          width: 4000,
+          height: 2667,
+          aspectRatio: 1.4998125234345707,
+        },
+      },
+      columnSpan: "one",
+    },
+    {
+      backgroundImage: {
+        url: "https://imagevault.scandichotels.com/publishedmedia/eu70o6z85idy24r92ysf/Scandic-Helsinki-Hub-gym-22.jpg",
+        meta: {
+          alt: "Gym at hotel Scandic Helsinki Hub",
+          caption: "Gym at hotel Scandic Helsinki Hub",
+        },
+        id: 81867,
+        title: "Scandic-Helsinki-Hub-gym-22.jpg",
+        dimensions: {
+          width: 4000,
+          height: 2667,
+          aspectRatio: 1.4998125234345707,
+        },
+      },
+      columnSpan: "one",
+    },
+  ],
+  [
+    {
+      id: "activities",
+      theme: "primaryDark",
+      scriptedTopTitle: "Activities",
+      heading: "Upcoming activities at DownTown Camper",
+      bodyText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+      secondaryButton: {
+        href: `?s=${activities[lang]}`,
+        title: "Discover activities",
+        isExternal: false,
+      },
+      columnSpan: "three",
+    },
+  ],
+]

components/ContentType/HotelPage/SidePeeks.tsx

@@ -4,7 +4,14 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { about, amenities } from "@/constants/routes/hotelPageParams"
+import {
+  about,
+  activities,
+  amenities,
+  meetingsAndConferences,
+  restaurantAndBar,
+  wellnessAndExercise,
+} from "@/constants/routes/hotelPageParams"
 
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import SidePeekItem from "@/components/TempDesignSystem/SidePeek/Item"
@@ -57,6 +64,34 @@ function SidePeekContainer() {
       >
         Some additional information about the hotel
       </SidePeekItem>
+      <SidePeekItem
+        contentKey={restaurantAndBar[lang]}
+        title={intl.formatMessage({ id: "Restaurant & Bar" })}
+      >
+        {/* TODO */}
+        Restaurant & Bar
+      </SidePeekItem>
+      <SidePeekItem
+        contentKey={wellnessAndExercise[lang]}
+        title={intl.formatMessage({ id: "Wellness & Exercise" })}
+      >
+        {/* TODO */}
+        Wellness & Exercise
+      </SidePeekItem>
+      <SidePeekItem
+        contentKey={activities[lang]}
+        title={intl.formatMessage({ id: "Activities" })}
+      >
+        {/* TODO */}
+        Activities
+      </SidePeekItem>
+      <SidePeekItem
+        contentKey={meetingsAndConferences[lang]}
+        title={intl.formatMessage({ id: "Meetings & Conferences" })}
+      >
+        {/* TODO */}
+        Meetings & Conferences
+      </SidePeekItem>
     </SidePeek>
   )
 }

components/ContentType/HotelPage/index.tsx

@@ -2,7 +2,9 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
 
+import { MOCK_FACILITIES } from "./Facilities/mockData"
 import AmenitiesList from "./AmenitiesList"
+import Facilities from "./Facilities"
 import IntroSection from "./IntroSection"
 import { Rooms } from "./Rooms"
 import SidePeeks from "./SidePeeks"
@@ -45,6 +47,7 @@ export default async function HotelPage() {
           <AmenitiesList detailedFacilities={hotel.detailedFacilities} />
         </div>
         <Rooms rooms={roomCategories} />
+        <Facilities facilities={MOCK_FACILITIES} />
       </main>
     </div>
   )