From 72301df4e7db894884b46d00fb1ee27f926b115c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?= Date: Mon, 13 Jan 2025 11:16:21 +0100 Subject: [PATCH] chore(SW-1373): add room elevator pitch --- .../HotelPage/IntroSection/introSection.module.css | 2 +- components/ContentType/HotelPage/Rooms/index.tsx | 12 ++++++++---- .../ContentType/HotelPage/Rooms/rooms.module.css | 6 ++++++ .../ContentType/HotelPage/hotelPage.module.css | 2 ++ components/ContentType/HotelPage/index.tsx | 7 ++----- types/components/hotelPage/room.ts | 1 + 6 files changed, 20 insertions(+), 10 deletions(-) diff --git a/components/ContentType/HotelPage/IntroSection/introSection.module.css b/components/ContentType/HotelPage/IntroSection/introSection.module.css index 5e9ec4b80..f6db7e388 100644 --- a/components/ContentType/HotelPage/IntroSection/introSection.module.css +++ b/components/ContentType/HotelPage/IntroSection/introSection.module.css @@ -2,7 +2,7 @@ display: grid; gap: var(--Spacing-x2); position: relative; - max-width: 607px; /* Max width according to Figma */ + max-width: var(--hotel-page-intro-section-width); } .mainContent { diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx index 4d5766187..54711f597 100644 --- a/components/ContentType/HotelPage/Rooms/index.tsx +++ b/components/ContentType/HotelPage/Rooms/index.tsx @@ -6,6 +6,7 @@ import { useIntl } from "react-intl" import SectionContainer from "@/components/Section/Container" import Grids from "@/components/TempDesignSystem/Grids" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" +import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" import { RoomCard } from "./RoomCard" @@ -15,7 +16,7 @@ import styles from "./rooms.module.css" import type { RoomsProps } from "@/types/components/hotelPage/room" import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation" -export function Rooms({ rooms }: RoomsProps) { +export function Rooms({ rooms, preamble }: RoomsProps) { const intl = useIntl() const showToggleButton = rooms.length > 3 const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton) @@ -35,9 +36,12 @@ export function Rooms({ rooms }: RoomsProps) { className={styles.roomsContainer} >
- - {intl.formatMessage({ id: "Rooms" })} - +
+ + {intl.formatMessage({ id: "Rooms" })} + + {preamble && {preamble}} +
diff --git a/components/ContentType/HotelPage/Rooms/rooms.module.css b/components/ContentType/HotelPage/Rooms/rooms.module.css index 7e9ad6ac5..e46a11ad9 100644 --- a/components/ContentType/HotelPage/Rooms/rooms.module.css +++ b/components/ContentType/HotelPage/Rooms/rooms.module.css @@ -20,3 +20,9 @@ .grid:not(.allVisible) :nth-child(n + 4) { display: none; } + +.sectionHeader { + display: grid; + gap: var(--Spacing-x-one-and-half); + max-width: var(--hotel-page-intro-section-width); +} diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css index 3632a4b61..3792293d8 100644 --- a/components/ContentType/HotelPage/hotelPage.module.css +++ b/components/ContentType/HotelPage/hotelPage.module.css @@ -8,6 +8,8 @@ var(--hotel-page-navigation-height) + var(--booking-widget-mobile-height) + var(--Spacing-x2) ); + --hotel-page-intro-section-width: 607px; /* Max width according to Figma */ + display: grid; grid-template-areas: "header" diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx index 8a658bbb6..dccc0bdd2 100644 --- a/components/ContentType/HotelPage/index.tsx +++ b/components/ContentType/HotelPage/index.tsx @@ -41,10 +41,6 @@ import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage" import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation" import type { Facility } from "@/types/hotel" import { PageContentTypeEnum } from "@/types/requests/contentType" -import type { - ActivitiesCard, - SpaPage, -} from "@/types/trpc/routers/contentstack/hotelPage" export default async function HotelPage({ hotelId }: HotelPageProps) { const lang = getLang() @@ -70,6 +66,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) { healthAndWellness, restaurantImages, conferencesAndMeetings, + hotelRoomElevatorPitchText, hotelContent, detailedFacilities, healthFacilities, @@ -164,7 +161,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) { ) : null} - +