scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(SW-1373): add room elevator pitch

Browse Source
This commit is contained in:
Matilda Landström
2025-01-13 11:16:21 +01:00
parent cb0dfcecad
commit 72301df4e7
6 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ContentType/HotelPage/IntroSection/introSection.module.css
View File

@@ -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 {

12
components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -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}
>
<div ref={scrollRef} className={styles.scrollRef}></div>
<Title as="h3" level="h2">
{intl.formatMessage({ id: "Rooms" })}
</Title>
<div className={styles.sectionHeader}>
<Title as="h3" level="h2">
{intl.formatMessage({ id: "Rooms" })}
</Title>
{preamble && <Body color="uiTextHighContrast">{preamble}</Body>}
</div>
<Grids.Stackable
className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`}
>

6
components/ContentType/HotelPage/Rooms/rooms.module.css
View File

@@ -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);
}

2
components/ContentType/HotelPage/hotelPage.module.css
View File

@@ -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"

7
components/ContentType/HotelPage/index.tsx
View File

@@ -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) {
</div>
) : null}
</div>
<Rooms rooms={roomCategories} />
<Rooms rooms={roomCategories} preamble={hotelRoomElevatorPitchText} />
<Facilities
facilities={facilities}
activitiesCard={activitiesCard?.upcoming_activities_card}

1
types/components/hotelPage/room.ts
View File

@@ -6,4 +6,5 @@ export interface RoomCardProps {
export type RoomsProps = {
rooms: RoomData[]
preamble?: string
}