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

Merged in fix/SW-2165-map-navigate-hotel-card (pull request #2246)

Browse Source 
fix(SW-2165): map navigate on enter press 

* fix(SW-2165): navigate on enter press and refactor

* fix(SW-2165): responsive design

* fix(SW-2165): replace spacing variables

* fix(SW-2165): resolve pr comment

* fix(SW-2165): remove isOpen, hide/show logic already handled

* fix(SW-2165): remove dialog

* fix(SW-2165): use buttonicon

* fix(SW-2165): do not focus on close button without tab

* fix(SW-2165): remove unneccessary css


Approved-by: Christian Andolf
This commit is contained in:
Bianca Widstam
2025-06-02 11:10:27 +00:00
parent 6df8c75d2d
commit 47abd7d5ef
11 changed files with 382 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
View File

@@ -1,7 +1,11 @@
"use client"
import { useSession } from "next-auth/react"
import { useState } from "react"
import { useIntl } from "react-intl"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { selectRate } from "@/constants/routes/hotelReservation"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
@@ -11,6 +15,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { isValidClientSession } from "@/utils/clientSession"
import { trackEvent } from "@/utils/tracking/base"
@@ -18,25 +23,22 @@ import HotelPointsRow from "../../HotelCard/HotelPointsRow"
import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
import HotelCardDialogImage from "../HotelCardDialogImage"
import styles from "../hotelCardDialog.module.css"
import styles from "./standaloneHotelCardDialog.module.css"
import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
import type { Lang } from "@/constants/languages"
interface StandaloneHotelCardProps {
data: HotelPin
lang: Lang
imageError: boolean
setImageError: (error: boolean) => void
handleClose: () => void
}
export default function StandaloneHotelCardDialog({
data,
lang,
imageError,
setImageError,
handleClose,
}: StandaloneHotelCardProps) {
const intl = useIntl()
const lang = useLang()
const [imageError, setImageError] = useState(false)
const { data: session } = useSession()
const isUserLoggedIn = isValidClientSession(session)
const {
@@ -57,7 +59,18 @@ export default function StandaloneHotelCardDialog({
const altText = images[0]?.metaData?.altText
return (
<>
<div className={styles.container}>
<IconButton
theme="Black"
style="Muted"
className={styles.closeButton}
onPress={handleClose}
aria-label={intl.formatMessage({
defaultMessage: "Close",
})}
>
<MaterialIcon icon="close" size={22} color="CurrentColor" />
</IconButton>
<HotelCardDialogImage
firstImage={firstImage}
altText={altText}
@@ -67,10 +80,8 @@ export default function StandaloneHotelCardDialog({
position="left"
/>
<div className={styles.content}>
<div className={styles.header}>
<div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
<div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
<div className={styles.facilities}>
{amenities.slice(0, 3).map((facility) => {
@@ -246,6 +257,6 @@ export default function StandaloneHotelCardDialog({
)}
</div>
</div>
</>
</div>
)
}

67
apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css Normal file
View File

@@ -0,0 +1,67 @@
.container {
flex-direction: row;
display: flex;
position: relative;
background: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
}
.content {
width: 100%;
max-width: 220px;
padding: var(--Space-x15);
display: flex;
flex-direction: column;
}
.name {
height: 48px;
max-width: 180px;
margin-bottom: var(--Space-x05);
display: flex;
align-items: center;
padding-right: var(--Space-x1);
}
.facilities {
display: flex;
flex-wrap: wrap;
gap: 0 var(--Space-x1);
}
.facilitiesItem {
display: flex;
align-items: center;
gap: var(--Space-x05);
}
.prices {
display: flex;
flex-direction: column;
gap: var(--Space-x1);
justify-content: space-between;
}
.priceCard {
border-radius: var(--Corner-radius-md);
padding: var(--Space-x05) var(--Space-x1);
background: var(--Base-Surface-Secondary-light-Normal);
margin-top: var(--Space-x1);
}
.pricesContainer {
display: flex;
flex-direction: column;
gap: var(--Space-x1);
justify-content: space-between;
}
.content .button {
margin-top: auto;
}
.closeButton {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}