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; display: grid;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
position: relative; position: relative;
max-width: 607px; /* Max width according to Figma */ max-width: var(--hotel-page-intro-section-width);
} }
.mainContent { .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 SectionContainer from "@/components/Section/Container"
import Grids from "@/components/TempDesignSystem/Grids" import Grids from "@/components/TempDesignSystem/Grids"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { RoomCard } from "./RoomCard" import { RoomCard } from "./RoomCard"
@@ -15,7 +16,7 @@ import styles from "./rooms.module.css"
import type { RoomsProps } from "@/types/components/hotelPage/room" import type { RoomsProps } from "@/types/components/hotelPage/room"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation" import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
export function Rooms({ rooms }: RoomsProps) { export function Rooms({ rooms, preamble }: RoomsProps) {
const intl = useIntl() const intl = useIntl()
const showToggleButton = rooms.length > 3 const showToggleButton = rooms.length > 3
const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton) const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
@@ -35,9 +36,12 @@ export function Rooms({ rooms }: RoomsProps) {
className={styles.roomsContainer} className={styles.roomsContainer}
> >
<div ref={scrollRef} className={styles.scrollRef}></div> <div ref={scrollRef} className={styles.scrollRef}></div>
<Title as="h3" level="h2"> <div className={styles.sectionHeader}>
{intl.formatMessage({ id: "Rooms" })} <Title as="h3" level="h2">
</Title> {intl.formatMessage({ id: "Rooms" })}
</Title>
{preamble && <Body color="uiTextHighContrast">{preamble}</Body>}
</div>
<Grids.Stackable <Grids.Stackable
className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`} 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) { .grid:not(.allVisible) :nth-child(n + 4) {
display: none; 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(--hotel-page-navigation-height) + var(--booking-widget-mobile-height) +
var(--Spacing-x2) var(--Spacing-x2)
); );
--hotel-page-intro-section-width: 607px; /* Max width according to Figma */
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"header" "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 { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
import type { Facility } from "@/types/hotel" import type { Facility } from "@/types/hotel"
import { PageContentTypeEnum } from "@/types/requests/contentType" import { PageContentTypeEnum } from "@/types/requests/contentType"
import type {
ActivitiesCard,
SpaPage,
} from "@/types/trpc/routers/contentstack/hotelPage"
export default async function HotelPage({ hotelId }: HotelPageProps) { export default async function HotelPage({ hotelId }: HotelPageProps) {
const lang = getLang() const lang = getLang()
@@ -70,6 +66,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
healthAndWellness, healthAndWellness,
restaurantImages, restaurantImages,
conferencesAndMeetings, conferencesAndMeetings,
hotelRoomElevatorPitchText,
hotelContent, hotelContent,
detailedFacilities, detailedFacilities,
healthFacilities, healthFacilities,
@@ -164,7 +161,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
</div> </div>
) : null} ) : null}
</div> </div>
<Rooms rooms={roomCategories} /> <Rooms rooms={roomCategories} preamble={hotelRoomElevatorPitchText} />
<Facilities <Facilities
facilities={facilities} facilities={facilities}
activitiesCard={activitiesCard?.upcoming_activities_card} activitiesCard={activitiesCard?.upcoming_activities_card}

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

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