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

Merged in feat/SW-1549-map-improvements (pull request #1783)

Browse Source 
Feat/SW-1549 map improvements

* fix: imported new icon

* refactor: rename component and set map handling to 'greedy'

* fix: show cards for 3s after hover

* refactor: update styles and added HotelPin component

* fix: change from close to back icon

* refactor: update to only use 1 state value for active pin and card

* fix: add click handler when dialog is opened

* fix: performance fixes for the dialog carousel

* fix: added border

* fix: clear timeout on mouseenter

* fix: changed to absolute import

* fix: moved hover state into the store

* fix: renamed store actions


Approved-by: Michael Zetterberg
This commit is contained in:
Tobias Johansson
2025-04-15 13:23:23 +00:00
parent 57cd2f6a7f
commit 9a9789e736
27 changed files with 288 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
View File

@@ -62,28 +62,20 @@ export default function ListingHotelCardDialog({
setImageError={setImageError}
position="top"
/>
<div className={styles.detailsContainer}>
<div>
<div className={styles.name}>
<Subtitle type="two">{name}</Subtitle>
</div>
<div className={styles.facilities}>
{amenities.map((facility) => {
const Icon = (
{amenities.map((facility) => (
<div className={styles.facilitiesItem} key={facility.id}>
<FacilityToIcon
id={facility.id}
size={20}
color="Icon/Default"
/>
)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{Icon && Icon}
<Caption color="uiTextMediumContrast">
{facility.name}
</Caption>
</div>
)
})}
</div>
))}
</div>
</div>
</div>
@@ -115,7 +107,7 @@ export default function ListingHotelCardDialog({
</>
)}
{memberPrice && (
<Subtitle type="two" color="red" className={styles.memberPrice}>
<Subtitle type="two" color="red">
{intl.formatMessage(
{
defaultMessage: "{price} {currency}",

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

@@ -65,10 +65,8 @@ export default function StandaloneHotelCardDialog({
/>
<div className={styles.content}>
<div className={styles.header}>
<div className={styles.detailsContainer}>
<div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
<div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
</div>
<div className={styles.facilities}>
@@ -126,11 +124,7 @@ export default function StandaloneHotelCardDialog({
</Subtitle>
)}
{memberPrice && (
<Subtitle
type="two"
color="red"
className={styles.memberPrice}
>
<Subtitle type="two" color="red">
{intl.formatMessage(
{
defaultMessage: "{price} {currency}",

2
apps/scandic-web/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
View File

@@ -66,7 +66,7 @@
white-space: nowrap;
position: relative;
padding-right: 20px;
gap: 0 var(--Spacing-x1);
gap: 0 var(--Spacing-x-one-and-half);
max-width: 242px;
}
.dialogContainer[data-type="listing"] .facilities::after {

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

@@ -31,7 +31,7 @@ export default function HotelCardDialog({
<dialog open={isOpen} className={styles.dialog}>
<div className={styles.dialogContainer} data-type={type}>
<div onClick={handleClose}>
<MaterialIcon icon="close" className={styles.closeIcon} size={16} />
<MaterialIcon icon="close" className={styles.closeIcon} size={22} />
</div>
{type === "standalone" ? (