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

feat(SW-340): Added HotelCardDialog component

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-07 16:07:54 +01:00
parent 7a49d4a393
commit 2748120890
19 changed files with 309 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css
View File

@@ -4,10 +4,8 @@
}
.advancedMarker.active {
height: var(--Spacing-x5);
width: var(
--Spacing-x5
) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
height: 32px;
min-width: 109px !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
}
.pin {
@@ -23,10 +21,11 @@
background-color: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
gap: var(--Spacing-x1);
width: max-content;
}
.pin.active {
padding-right: var(--Spacing-x-one-and-half);
background-color: var(--Primary-Dark-Surface-Normal);
}
.pinLabel {
@@ -49,3 +48,22 @@
justify-content: center;
background: var(--Primary-Dark-Surface-Normal);
}
.pin.active .pinIcon {
background: var(--Base-Surface-Primary-light-Normal);
}
.card {
display: none;
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
width: 402px;
height: 181px;
background-color: var(--Base-Surface-Primary-light-Normal);
}
.card.active {
display: block;
}

29
components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
View File

@@ -3,21 +3,31 @@ import {
AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
import Body from "@/components/TempDesignSystem/Text/Body"
import HotelMarker from "../../Markers/Hotel"
import HotelMarker from "../../Markers/HotelMarker"
import styles from "./hotelListingMapContent.module.css"
import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
export default function HotelListingMapContent({
activeHotelPin,
hotelPins,
hotels,
onActiveHotelPinChange,
}: {
activeHotelPin?: HotelPin["name"] | null
hotelPins: HotelPin[]
hotels?: HotelData[]
onActiveHotelPinChange?: (pinName: string | null) => void
}) {
function toggleActiveHotelPin(pinName: string) {
onActiveHotelPinChange?.(activeHotelPin === pinName ? null : pinName)
}
return (
<div>
{hotelPins.map((pin) => (
@@ -27,16 +37,27 @@ export default function HotelListingMapContent({
position={pin.coordinates}
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
zIndex={activeHotelPin === pin.name ? 2 : 0}
onMouseEnter={() => onActiveHotelPinChange?.(pin.name)}
onMouseLeave={() => onActiveHotelPinChange?.(null)}
onClick={() => toggleActiveHotelPin(pin.name)}
>
<HotelCardDialog isOpen={activeHotelPin === pin.name} pin={pin} />
<span
className={`${styles.pin} ${activeHotelPin === pin.name ? styles.active : ""}`}
>
<span className={styles.pinIcon}>
<HotelMarker width={16} />
<HotelMarker
width={16}
color={activeHotelPin === pin.name ? "burgundy" : "white"}
/>
</span>
<Body asChild>
<Body
asChild
color={activeHotelPin === pin.name ? "white" : "textHighContrast"}
>
<span>
{pin.price} {pin.currency}
{pin.memberPrice} {pin.currency}
</span>
</Body>
</span>

3
components/Maps/InteractiveMap/index.tsx
View File

@@ -18,6 +18,7 @@ export default function InteractiveMap({
activePoi,
hotelPins,
activeHotelPin,
hotels,
mapId,
closeButton,
onActivePoiChange,
@@ -54,6 +55,8 @@ export default function InteractiveMap({
<HotelListingMapContent
activeHotelPin={activeHotelPin}
hotelPins={hotelPins}
onActiveHotelPinChange={onActiveHotelPinChange}
hotels={hotels}
/>
)}
{pointsOfInterest && (