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

fix: moved typings to typings folder and removed fallback variable values. Also fixed so only RoomCard is client component

Browse Source
This commit is contained in:
Erik Tiekstra
2024-07-05 12:49:52 +02:00
committed by Chuma McPhoy
parent 7eea7aa400
commit ea8165bec9
7 changed files with 64 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
View File

@@ -1,39 +1,54 @@
"use client" "use client"
import { useIntl } from "react-intl"
import { ImageIcon } from "@/components/Icons" import { ImageIcon } from "@/components/Icons"
import Image from "@/components/Image" import Image from "@/components/Image"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { RoomCardProps } from "./roomCard"
import styles from "./roomCard.module.css" import styles from "./roomCard.module.css"
import { RoomCardProps } from "@/types/components/hotelPage/roomCard"
export function RoomCard({ export function RoomCard({
badgeText, badgeTextTransKey,
title, id,
images,
subtitle, subtitle,
cta, title,
image,
imageCount,
imageClick,
}: RoomCardProps) { }: 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 ( return (
<article className={styles.roomCard}> <article className={styles.roomCard}>
<button className={styles.imageWrapper} onClick={imageClick}> <button className={styles.imageWrapper} onClick={handleImageClick}>
{badgeText && <span className={styles.badge}>{badgeText}</span>} {badgeTextTransKey && (
{imageCount && ( <span className={styles.badge}>
<span className={styles.imageCount}> {formatMessage({ id: badgeTextTransKey })}
<ImageIcon color="white" />
{imageCount}
</span> </span>
)} )}
<span className={styles.imageCount}>
<ImageIcon color="white" />
{images.length}
</span>
<Image <Image
className={styles.image} className={styles.image}
src={image.src} src={mainImage.src}
alt={image.alt} alt={mainImage.alt}
height={image.height} height={mainImage.height}
width={image.width} width={mainImage.width}
/> />
</button> </button>
<div className={styles.content}> <div className={styles.content}>
@@ -43,8 +58,8 @@ export function RoomCard({
</Title> </Title>
<Body color="grey">{subtitle}</Body> <Body color="grey">{subtitle}</Body>
</div> </div>
<button className={styles.cta} onClick={cta.callback}> <button className={styles.cta} onClick={handleRoomCtaClick}>
{cta.text} {formatMessage({ id: "View room" })}
</button> </button>
</div> </div>
</article> </article>

16
components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
View File

@@ -12,7 +12,7 @@
background-color: var(--Scandic-Blue-100); background-color: var(--Scandic-Blue-100);
padding: var(--Spacing-x-half) var(--Spacing-x1); padding: var(--Spacing-x-half) var(--Spacing-x1);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
color: var(--Tertiary-Dark-On-Surface-Text, #fff0c2); color: var(--Tertiary-Dark-On-Surface-Text);
text-transform: uppercase; text-transform: uppercase;
font-family: var(--typography-Title-5-fontFamily); font-family: var(--typography-Title-5-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize); font-size: var(--typography-Footnote-Regular-fontSize);
@@ -26,12 +26,8 @@
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
align-items: center; align-items: center;
background-color: color-mix( background-color: var(--Scandic-Opacity-Almost-Black-60);
in srgb, color: var(--Scandic-Opacity-White-100);
var(--Scandic-Beige-80) 80%,
transparent
);
color: white;
padding: var(--Spacing-x-half) var(--Spacing-x1); padding: var(--Spacing-x-half) var(--Spacing-x1);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
} }
@@ -67,7 +63,7 @@
} }
.subtitle { .subtitle {
color: var(--UI-Text-Placeholder, #787472); color: var(--UI-Text-Placeholder);
} }
.cta { .cta {
@@ -79,12 +75,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-half); 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-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize); font-size: var(--typography-Body-Bold-fontSize);
font-weight: 600; font-weight: 600;
text-decoration: underline; text-decoration: underline;
} }
.cta:hover { .cta:hover {
color: var(--Base-Text-High-contrast, #4d001b); color: var(--Base-Text-High-contrast);
} }

16
components/ContentType/HotelPage/Rooms/RoomCard/roomCard.ts
View File

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

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

@@ -1,56 +1,31 @@
"use client"
import { useIntl } from "react-intl"
import { RoomCard } from "./RoomCard" import { RoomCard } from "./RoomCard"
import { RoomsProps } from "./rooms"
import styles from "./rooms.module.css" import styles from "./rooms.module.css"
export function Rooms({ rooms }: RoomsProps) { import { RoomsProps } from "@/types/components/hotelPage/rooms"
const { formatMessage } = useIntl()
export function Rooms({ rooms }: RoomsProps) {
// TODO: Typings should be adjusted to match the actual data structure // TODO: Typings should be adjusted to match the actual data structure
const mappedRooms = rooms.map((room) => ({ const mappedRooms = rooms.map((room) => ({
id: room.id, id: room.id,
image: room.images[0], images: room.images,
imageCount: room.images.length,
title: room.title, title: room.title,
subtitle: room.subtitle, subtitle: room.subtitle,
popularChoice: room.popularChoice, 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 ( return (
<section className={styles.cardContainer}> <section className={styles.cardContainer}>
{mappedRooms.map( {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
({ id, image, imageCount, title, subtitle, popularChoice }) => ( <RoomCard
<RoomCard key={id}
key={id} id={id}
image={image} images={images}
imageCount={imageCount} title={title}
title={title} subtitle={subtitle}
subtitle={subtitle} badgeTextTransKey={popularChoice ? "Popular choice" : null}
badgeText={ />
popularChoice ? formatMessage({ id: "Popular choice" }) : null ))}
}
imageClick={() => handleImageClick(id)}
cta={{
text: formatMessage({ id: "See room details" }),
callback: () => handleRoomCtaClick(id),
}}
/>
)
)}
</section> </section>
) )
} }

2
components/ContentType/HotelPage/tempHotelPageData.ts
View File

@@ -1,4 +1,4 @@
import { RoomsProps } from "./Rooms/rooms" import { RoomsProps } from "../../../types/components/hotelPage/rooms"
export const MOCK_ROOMS: RoomsProps["rooms"] = [ export const MOCK_ROOMS: RoomsProps["rooms"] = [
{ {

9
types/components/hotelPage/roomCard.ts Normal file
View File

@@ -0,0 +1,9 @@
import { ImageProps } from "next/image"
export interface RoomCardProps {
id: string
images: ImageProps[]
title: string
subtitle: string
badgeTextTransKey?: string | null
}

0
components/ContentType/HotelPage/Rooms/rooms.ts → types/components/hotelPage/rooms.ts
View File