diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx index 4e4bd5c86..257d73cbf 100644 --- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx +++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx @@ -1,39 +1,54 @@ "use client" +import { useIntl } from "react-intl" + import { ImageIcon } from "@/components/Icons" import Image from "@/components/Image" import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" -import { RoomCardProps } from "./roomCard" - import styles from "./roomCard.module.css" +import { RoomCardProps } from "@/types/components/hotelPage/roomCard" + export function RoomCard({ - badgeText, - title, + badgeTextTransKey, + id, + images, subtitle, - cta, - image, - imageCount, - imageClick, + title, }: RoomCardProps) { + const { formatMessage } = useIntl() + const mainImage = images[0] + + function handleImageClick() { + // TODO: Implement opening of a model with carousel + console.log("Image clicked: ", id) + } + + function handleRoomCtaClick() { + // TODO: Implement opening side-peek component with room details + console.log("Room CTA clicked: ", id) + } + return (
-
@@ -43,8 +58,8 @@ export function RoomCard({ {subtitle}
-
diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css b/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css index f616a6767..3678cdff2 100644 --- a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css +++ b/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css @@ -12,7 +12,7 @@ background-color: var(--Scandic-Blue-100); padding: var(--Spacing-x-half) var(--Spacing-x1); border-radius: var(--Corner-radius-Medium); - color: var(--Tertiary-Dark-On-Surface-Text, #fff0c2); + color: var(--Tertiary-Dark-On-Surface-Text); text-transform: uppercase; font-family: var(--typography-Title-5-fontFamily); font-size: var(--typography-Footnote-Regular-fontSize); @@ -26,12 +26,8 @@ display: flex; gap: var(--Spacing-x-half); align-items: center; - background-color: color-mix( - in srgb, - var(--Scandic-Beige-80) 80%, - transparent - ); - color: white; + background-color: var(--Scandic-Opacity-Almost-Black-60); + color: var(--Scandic-Opacity-White-100); padding: var(--Spacing-x-half) var(--Spacing-x1); border-radius: var(--Corner-radius-Medium); } @@ -67,7 +63,7 @@ } .subtitle { - color: var(--UI-Text-Placeholder, #787472); + color: var(--UI-Text-Placeholder); } .cta { @@ -79,12 +75,12 @@ display: flex; align-items: center; gap: var(--Spacing-x-half); - color: var(--Base-Text-Medium-contrast, #8f4350); + color: var(--Base-Text-Medium-contrast); font-family: var(--typography-Body-Bold-fontFamily); font-size: var(--typography-Body-Bold-fontSize); font-weight: 600; text-decoration: underline; } .cta:hover { - color: var(--Base-Text-High-contrast, #4d001b); + color: var(--Base-Text-High-contrast); } diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.ts b/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.ts deleted file mode 100644 index 06226e7c8..000000000 --- a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { ImageProps } from "next/image" - -interface RoomCardCtaProps { - text: string - callback: () => void -} - -export interface RoomCardProps { - image: ImageProps - imageCount: number - imageClick: () => void - title: string - subtitle: string - cta: RoomCardCtaProps - badgeText?: string | null -} diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx index d98c514d7..7dd0f2c88 100644 --- a/components/ContentType/HotelPage/Rooms/index.tsx +++ b/components/ContentType/HotelPage/Rooms/index.tsx @@ -1,56 +1,31 @@ -"use client" - -import { useIntl } from "react-intl" - import { RoomCard } from "./RoomCard" -import { RoomsProps } from "./rooms" import styles from "./rooms.module.css" -export function Rooms({ rooms }: RoomsProps) { - const { formatMessage } = useIntl() +import { RoomsProps } from "@/types/components/hotelPage/rooms" +export function Rooms({ rooms }: RoomsProps) { // TODO: Typings should be adjusted to match the actual data structure const mappedRooms = rooms.map((room) => ({ id: room.id, - image: room.images[0], - imageCount: room.images.length, + images: room.images, title: room.title, subtitle: room.subtitle, popularChoice: room.popularChoice, })) - function handleImageClick(id: string) { - // TODO: Implement opening of a model with carousel - console.log("Image clicked: ", id) - } - - function handleRoomCtaClick(id: string) { - // TODO: Implement opening side-peek component with room details - console.log("Room CTA clicked: ", id) - } - return (
- {mappedRooms.map( - ({ id, image, imageCount, title, subtitle, popularChoice }) => ( - handleImageClick(id)} - cta={{ - text: formatMessage({ id: "See room details" }), - callback: () => handleRoomCtaClick(id), - }} - /> - ) - )} + {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => ( + + ))}
) } diff --git a/components/ContentType/HotelPage/tempHotelPageData.ts b/components/ContentType/HotelPage/tempHotelPageData.ts index 783565208..30b4921b6 100644 --- a/components/ContentType/HotelPage/tempHotelPageData.ts +++ b/components/ContentType/HotelPage/tempHotelPageData.ts @@ -1,4 +1,4 @@ -import { RoomsProps } from "./Rooms/rooms" +import { RoomsProps } from "../../../types/components/hotelPage/rooms" export const MOCK_ROOMS: RoomsProps["rooms"] = [ { diff --git a/types/components/hotelPage/roomCard.ts b/types/components/hotelPage/roomCard.ts new file mode 100644 index 000000000..bfdec37bb --- /dev/null +++ b/types/components/hotelPage/roomCard.ts @@ -0,0 +1,9 @@ +import { ImageProps } from "next/image" + +export interface RoomCardProps { + id: string + images: ImageProps[] + title: string + subtitle: string + badgeTextTransKey?: string | null +} diff --git a/components/ContentType/HotelPage/Rooms/rooms.ts b/types/components/hotelPage/rooms.ts similarity index 100% rename from components/ContentType/HotelPage/Rooms/rooms.ts rename to types/components/hotelPage/rooms.ts