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

Merged in fix/hotel-card-fixes (pull request #2209)

Browse Source 
fix: update typography including missing header element in hotel cards

Approved-by: Tobias Johansson
Approved-by: Erik Tiekstra
Approved-by: Matilda Landström
This commit is contained in:
Christian Andolf
2025-05-27 07:32:48 +00:00
parent 883fd23949 642a6881e2
commit 46faf93aba
3 changed files with 61 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/scandic-web/components/HotelReservation/HotelCard/hotelCard.module.css
View File

@@ -6,6 +6,7 @@
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
color: var(--Text-Default);
} }
.card.active { .card.active {
@@ -27,13 +28,13 @@
} }
.hotelInformation { .hotelInformation {
margin-bottom: var(--Spacing-x-half); margin-bottom: var(--Space-x05);
} }
.hotelContent { .hotelContent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--Spacing-x2); padding: var(--Space-x2);
} }
.hotelDescription { .hotelDescription {
@@ -43,14 +44,14 @@
.titleContainer { .titleContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
margin-top: var(--Spacing-x-half); margin-top: var(--Space-x05);
} }
.addressContainer { .addressContainer {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--Spacing-x1); gap: var(--Space-x1);
} }
.address { .address {
@@ -61,26 +62,27 @@
.facilities { .facilities {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--Spacing-x1); gap: var(--Space-x1);
margin-top: var(--Spacing-x-one-and-half); margin-top: var(--Space-x15);
} }
.facilitiesItem { .facilitiesItem {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
color: var(--Text-Secondary);
} }
.specialAlerts { .specialAlerts {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x1); gap: var(--Space-x1);
} }
.prices { .prices {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.link:hover { .link:hover {
@@ -105,7 +107,7 @@
.pointsCard { .pointsCard {
background-color: var(--Base-Surface-Secondary-light-Normal); background-color: var(--Base-Surface-Secondary-light-Normal);
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
} }
@@ -155,23 +157,23 @@
.pageListing .hotelInformation { .pageListing .hotelInformation {
width: min(422px, 100%); width: min(422px, 100%);
padding-right: var(--Spacing-x2); padding-right: var(--Space-x2);
margin: 0; margin: 0;
} }
.pageListing .facilities { .pageListing .facilities {
margin: var(--Spacing-x1) 0; margin: var(--Space-x1) 0;
} }
.pageListing .hotelContent { .pageListing .hotelContent {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: var(--Spacing-x2); gap: var(--Space-x2);
padding-left: var(--Spacing-x3); padding-left: var(--Space-x3);
} }
.pageListing .titleContainer { .pageListing .titleContainer {
margin-bottom: var(--Spacing-x-one-and-half); margin-bottom: var(--Space-x15);
} }
.pageListing .fakeButton { .pageListing .fakeButton {

78
apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
View File

@@ -17,9 +17,7 @@ import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery" import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip" import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting" import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -89,22 +87,27 @@ function HotelCard({
> >
<div> <div>
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
<ImageGallery title={hotel.name} images={galleryImages} fill /> <ImageGallery
title={hotel.name}
images={galleryImages}
fill
sizes="(min-width: 768px) calc(100vw - 340px), (min-width: 1367px) 33vw, 100vw"
/>
{hotel.ratings?.tripAdvisor && ( {hotel.ratings?.tripAdvisor && (
<TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} /> <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
)} )}
</div> </div>
</div> </div>
<div className={styles.hotelContent}> <div className={styles.hotelContent}>
<section className={styles.hotelInformation}> <div className={styles.hotelInformation}>
<div className={styles.titleContainer}> <div className={styles.titleContainer}>
<HotelLogoIcon <HotelLogoIcon
hotelId={hotel.operaId} hotelId={hotel.operaId}
hotelType={hotel.hotelType} hotelType={hotel.hotelType}
/> />
<Subtitle textTransform="capitalize" color="uiTextHighContrast"> <Typography variant="Title/Subtitle/lg">
{hotel.name} <h2>{hotel.name}</h2>
</Subtitle> </Typography>
<div className={styles.addressContainer}> <div className={styles.addressContainer}>
<address className={styles.address}> <address className={styles.address}>
{type == HotelCardListingTypeEnum.MapListing ? ( {type == HotelCardListingTypeEnum.MapListing ? (
@@ -133,37 +136,40 @@ function HotelCard({
<div> <div>
<Divider variant="vertical" color="subtle" /> <Divider variant="vertical" color="subtle" />
</div> </div>
<Caption color="uiTextPlaceholder"> <Typography variant="Body/Supporting text (caption)/smRegular">
{intl.formatMessage( <span>
{ {intl.formatMessage(
defaultMessage: "{number} km to city center", {
}, defaultMessage: "{number} km to city center",
{ },
number: getSingleDecimal( {
hotel.location.distanceToCentre / 1000 number: getSingleDecimal(
), hotel.location.distanceToCentre / 1000
} ),
)} }
</Caption> )}
</span>
</Typography>
</div> </div>
</div> </div>
<Body className={styles.hotelDescription}>
{hotel.hotelContent.texts.descriptions?.short} {hotel.hotelContent.texts.descriptions ? (
</Body> <Typography variant="Body/Paragraph/mdRegular">
<p className={styles.hotelDescription}>
{hotel.hotelContent.texts.descriptions.short}
</p>
</Typography>
) : null}
<div className={styles.facilities}> <div className={styles.facilities}>
{amenities.map((facility) => { {amenities.map((facility) => (
const Icon = ( <div className={styles.facilitiesItem} key={facility.id}>
<FacilityToIcon id={facility.id} color="Icon/Default" /> <FacilityToIcon id={facility.id} color="CurrentColor" />
) <Typography variant="Body/Supporting text (caption)/smRegular">
return ( <span>{facility.name}</span>
<div className={styles.facilitiesItem} key={facility.id}> </Typography>
{Icon && Icon} </div>
<Caption color="uiTextMediumContrast"> ))}
{facility.name}
</Caption>
</div>
)
})}
</div> </div>
<ReadMore <ReadMore
label={intl.formatMessage({ label={intl.formatMessage({
@@ -173,7 +179,7 @@ function HotelCard({
showCTA={true} showCTA={true}
sidePeekKey={SidePeekEnum.hotelDetails} sidePeekKey={SidePeekEnum.hotelDetails}
/> />
</section> </div>
<PricesWrapper <PricesWrapper
href={`${selectRate(lang)}?hotel=${hotel.operaId}`} href={`${selectRate(lang)}?hotel=${hotel.operaId}`}
isClickable={availability.productType && !isDisabled} isClickable={availability.productType && !isDisabled}

3
apps/scandic-web/components/ImageGallery/index.tsx
View File

@@ -1,6 +1,5 @@
"use client" "use client"
import { cx } from "class-variance-authority"
import { memo, useState } from "react" import { memo, useState } from "react"
import { Button } from "react-aria-components" import { Button } from "react-aria-components"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
@@ -36,7 +35,7 @@ function ImageGallery({
return ( return (
<> <>
<div className={cx(styles.wrapper, { [styles.fill]: fill })}> <div className={styles.wrapper}>
<Image <Image
className={styles.image} className={styles.image}
src={firstImage.src} src={firstImage.src}