Merge remote-tracking branch 'origin' into feature/tracking

2024-12-13 09:02:37 +01:00
parent 6b9f4f4fa9 3dae3e69cc
commit 742a2820d1
329 changed files with 4494 additions and 1910 deletions
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -36,7 +36,7 @@ export default async function AmenitiesList({
                  height={20}
                />
              )}
-              <Body color="textMediumContrast">{facility.name}</Body>
+              <Body color="uiTextMediumContrast">{facility.name}</Body>
            </div>
          )
        })}
--- a/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx
+++ b/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx
@@ -23,6 +23,7 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
          href: `?s=${activities[lang]}`,
          title: activitiesCard.ctaText,
          isExternal: false,
+          scrollOnClick: false,
        }
      : undefined,
    secondaryButton: hasImage
@@ -31,6 +32,7 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
          href: `?s=${activities[lang]}`,
          title: activitiesCard.ctaText,
          isExternal: false,
+          scrollOnClick: false,
        },
  }
  return (
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -51,7 +51,7 @@ export default async function IntroSection({
          </BiroScript>
          <Title level="h2">{hotelName}</Title>
        </div>
-        <Body color="textMediumContrast">{formattedLocationText}</Body>
+        <Body color="uiTextMediumContrast">{formattedLocationText}</Body>
        {hasTripAdvisorData && (
          <Link
            className={styles.introLink}
--- a/components/ContentType/HotelPage/IntroSection/types.ts
+++ b/components/ContentType/HotelPage/IntroSection/types.ts
@@ -1,4 +1,4 @@
-import {
+import type {
  HotelAddress,
  HotelData,
  HotelLocation,
--- a/components/ContentType/HotelPage/Map/MapWithCard/index.tsx
+++ b/components/ContentType/HotelPage/Map/MapWithCard/index.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { PropsWithChildren, useRef } from "react"
+import { type PropsWithChildren, useRef } from "react"

 import { StickyElementNameEnum } from "@/stores/sticky-position"

--- a/components/ContentType/HotelPage/PreviewImages/index.tsx
+++ b/components/ContentType/HotelPage/PreviewImages/index.tsx
@@ -28,6 +28,7 @@ export default function PreviewImages({
          title={image.metaData.title}
          width={index === 0 ? 752 : 292}
          height={index === 0 ? 540 : 266}
+          onClick={() => setLightboxIsOpen(true)}
          className={styles.image}
        />
      ))}
--- a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
+++ b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
@@ -13,6 +13,7 @@
  width: 100%;
  height: 100%;
  max-height: 30vh;
+  cursor: pointer;
 }

 .imageWrapper > :nth-child(2),
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -4,9 +4,9 @@ import { useRef, useState } from "react"
 import { useIntl } from "react-intl"

 import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
 import Grids from "@/components/TempDesignSystem/Grids"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Title from "@/components/TempDesignSystem/Text/Title"

 import { RoomCard } from "./RoomCard"

@@ -35,19 +35,19 @@ export function Rooms({ rooms }: RoomsProps) {
      className={styles.roomsContainer}
    >
      <div ref={scrollRef} className={styles.scrollRef}></div>
-      <SectionHeader
-        textTransform="capitalize"
-        title={intl.formatMessage({ id: "Rooms" })}
-        preamble={null}
-      />
+      <Title as="h3" level="h2">
+        {intl.formatMessage({ id: "Rooms" })}
+      </Title>
      <Grids.Stackable
        className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`}
      >
-        {rooms.map((room) => (
-          <div key={room.id}>
-            <RoomCard room={room} />
-          </div>
-        ))}
+        {rooms
+          .sort((a, b) => a.sortOrder - b.sortOrder)
+          .map((room) => (
+            <div key={room.id}>
+              <RoomCard room={room} />
+            </div>
+          ))}
      </Grids.Stackable>

      {showToggleButton ? (
--- a/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/index.tsx
@@ -40,6 +40,7 @@ export default async function AboutTheHotelSidePeek({
        <Divider color="baseSurfaceSubtleHover" />
        <Preamble>{descriptions.descriptions.medium}</Preamble>
        <Body>{descriptions.facilityInformation}</Body>
+        <Body>{descriptions.surroundingInformation}</Body>
      </section>
    </SidePeek>
  )
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
@@ -17,6 +17,7 @@ export default async function AccessibilityAmenity({
    <AccordionItem
      title={intl.formatMessage({ id: "Accessibility" })}
      icon={IconName.Accessibility}
+      variant="sidepeek"
    >
      <div className={styles.wrapper}>
        {accessibility?.description && (
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
@@ -9,6 +9,7 @@ export default async function BreakfastAmenity() {
    <AccordionItem
      title={intl.formatMessage({ id: "Breakfast" })}
      icon={IconName.CoffeeAlt}
+      variant="sidepeek"
    >
      {/* TODO: breakfast to be implemented */}
    </AccordionItem>
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx
@@ -14,6 +14,7 @@ export default async function CheckInAmenity({
    <AccordionItem
      title={`${intl.formatMessage({ id: "Check-in" })}/${intl.formatMessage({ id: "Check-out" })}`}
      icon={IconName.Business}
+      variant="sidepeek"
    >
      <Body textTransform="bold">{intl.formatMessage({ id: "Times" })}</Body>
      <Body color="uiTextHighContrast">{`${intl.formatMessage({ id: "Check in from" })}: ${checkInTime}`}</Body>
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
@@ -25,6 +25,7 @@ export default async function ParkingAmenity({
    <AccordionItem
      title={intl.formatMessage({ id: "Parking" })}
      icon={IconName.Parking}
+      variant="sidepeek"
    >
      <div className={styles.wrapper}>
        {parking.map((data) => (
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css
@@ -1,10 +1,10 @@
 .wrapper {
-  padding: var(--Spacing-x1);
+  padding: var(--Spacing-x1) var(--Spacing-x0);
  border-bottom: 1px solid var(--Base-Border-Subtle);
 }

 .amenity {
  display: flex;
  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
 }
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx
@@ -1,5 +1,5 @@
 import { HeartIcon } from "@/components/Icons"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import { mapFacilityToIcon } from "../../../data"

@@ -15,16 +15,18 @@ export default function FilteredAmenities({
      {filteredAmenities?.map((amenity) => {
        const Icon = mapFacilityToIcon(amenity.id)
        return (
-          <div key={amenity.name} className={styles.wrapper}>
+          <li key={amenity.name} className={styles.wrapper}>
            <div className={styles.amenity}>
              {Icon ? (
                <Icon color="burgundy" width={24} height={24} />
              ) : (
                <HeartIcon color="burgundy" width={24} height={24} />
              )}
-              <Body color="burgundy">{amenity.name}</Body>
+              <Subtitle color="burgundy" type="two">
+                {amenity.name}
+              </Subtitle>
            </div>
-          </div>
+          </li>
        )
      })}
    </>
--- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx
@@ -6,7 +6,7 @@ import { getIntl } from "@/i18n"

 import styles from "./facility.module.css"

-import { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"
+import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"

 export default async function Facility({ data }: FacilityProps) {
  const intl = await getIntl()
--- a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
+++ b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
@@ -14,6 +14,7 @@
  justify-content: flex-start;
  padding: 0 var(--Spacing-x2);
  width: 100%;
+  overflow-x: auto;
 }

@media screen and (min-width: 768px) {
@@ -26,5 +27,6 @@
  .tabsContainer {
    padding: 0 var(--Spacing-x5);
    max-width: calc(100% - var(--hotel-page-map-desktop-width));
+    overflow-x: visible;
  }
 }
--- a/components/ContentType/HotelPage/data.ts
+++ b/components/ContentType/HotelPage/data.ts
@@ -1,8 +1,8 @@
-import { FC } from "react"
-
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"

-import { IconName, IconProps } from "@/types/components/icon"
+import type { FC } from "react"
+
+import { IconName, type IconProps } from "@/types/components/icon"
 import { FacilityEnum } from "@/types/enums/facilities"

 const facilityToIconMap: Record<FacilityEnum, IconName> = {
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -78,7 +78,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
  const roomCategories =
    hotelData.included?.filter((item) => item.type === "roomcategories") || []
  const images = gallery?.smallerImages
-  const description = hotelContent.texts.descriptions.short
+  const description = hotelContent.texts.descriptions.medium
  const activitiesCard = content?.[0]?.upcoming_activities_card || null

  const facilities: Facility[] = [
--- a/components/ContentType/StaticPages/staticPage.ts
+++ b/components/ContentType/StaticPages/staticPage.ts
@@ -1,10 +1,9 @@
-import { staticPageVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"

 import type { TrackingSDKPageData } from "@/types/components/tracking"
 import type { CollectionPage } from "@/types/trpc/routers/contentstack/collectionPage"
 import type { ContentPage } from "@/types/trpc/routers/contentstack/contentPage"
+import type { staticPageVariants } from "./variants"

 export interface StaticPageProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "content">,