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

Merged in feat/SW-2511-hotel-page-map (pull request #2582)

Browse Source 
feat(SW-2511): hotel page map and marker improvements

* feat(SW-2511): update hotel page map

* fix(SW-2511): fix issue with identical id's for POIs


Approved-by: Anton Gunnarsson
This commit is contained in:
Matilda Landström
2025-07-31 09:06:48 +00:00
parent ace44d00dc
commit e323ca9914
20 changed files with 139 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx
+23 -21
View File
@@ -4,8 +4,7 @@ import {
} from "@vis.gl/react-google-maps"
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { Typography } from "@scandic-hotels/design-system/Typography"
import HotelMarkerByType from "../../Markers"
import PoiMarker from "../../Markers/Poi"
@@ -46,7 +45,7 @@ export default function PoiMapMarkers({
{pointsOfInterest.map((poi) => (
<AdvancedMarker
key={poi.name}
key={poi.name + poi.categoryName}
className={styles.advancedMarker}
position={poi.coordinates}
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
@@ -61,25 +60,28 @@ export default function PoiMapMarkers({
<PoiMarker
group={poi.group}
categoryName={poi.categoryName}
size={activePoi === poi.name ? 20 : 16}
size={activePoi === poi.name ? "large" : "small"}
/>
<Body className={styles.poiLabel} asChild>
<span>
{poi.name}
<Caption asChild>
<span>
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
</span>
</Caption>
</span>
</Body>
<span className={styles.poiLabel}>
<Typography variant="Body/Paragraph/mdRegular">
<span>{poi.name}</span>
</Typography>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.distance}
>
<span>
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
</span>
</Typography>
</span>
</span>
</AdvancedMarker>
))}
apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/poiMapMarkers.module.css
+13 -9
View File
@@ -1,14 +1,14 @@
.advancedMarker {
height: var(--Spacing-x4);
height: var(--Space-x4);
width: var(
--Spacing-x4
--Space-x4
) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
}
.advancedMarker.active {
height: var(--Spacing-x5);
height: var(--Space-x5);
width: var(
--Spacing-x5
--Space-x5
) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
}
@@ -19,15 +19,15 @@
display: flex;
justify-content: center;
align-items: center;
padding: var(--Spacing-x-half);
padding: var(--Space-x05);
border-radius: var(--Corner-radius-rounded);
background-color: var(--Base-Surface-Primary-light-Normal);
background-color: var(--Surface-UI-Fill-Default);
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.poi.active {
padding-right: var(--Spacing-x-one-and-half);
padding-right: var(--Space-x15);
}
.poiLabel {
@@ -37,6 +37,10 @@
.poi.active .poiLabel {
display: flex;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
text-wrap: nowrap;
}
.distance {
color: var(--Text-Secondary);
}
apps/scandic-web/components/Maps/Markers/Poi/index.tsx
+3 -3
View File
@@ -9,18 +9,18 @@ export default function PoiMarker({
group,
categoryName,
skipBackground,
size = 16,
size = "small",
className = "",
}: PoiMarkerProps) {
const iconName = getIconByPoiGroupAndCategory(group, categoryName)
const classNames = poiVariants({ group, skipBackground, className })
const classNames = poiVariants({ group, skipBackground, size, className })
return iconName ? (
<span className={classNames}>
<IconByIconName
iconName={iconName}
color={skipBackground ? "Icon/Feedback/Neutral" : "Icon/Inverted"}
size={size}
size={size === "small" ? 16 : size === "large" ? 24 : 20}
/>
</span>
) : null
apps/scandic-web/components/Maps/Markers/Poi/poi.module.css
+16 -9
View File
@@ -1,30 +1,37 @@
.icon {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--Corner-radius-rounded);
background-color: var(--UI-Text-Placeholder);
background-color: var(--Surface-UI-Fill-Default);
}
.small {
width: var(--Space-x3);
height: var(--Space-x3);
}
.large {
width: var(--Space-x4);
height: var(--Space-x4);
}
.attractions {
background-color: var(--Base-Interactive-Surface-Secondary-normal);
background-color: var(--Surface-Accent-3);
}
.business {
background-color: var(--Scandic-Yellow-50);
background-color: var(--Surface-Accent-4);
}
.location {
background-color: var(--UI-Text-Placeholder);
background-color: var(--Surface-Feedback-Neutral-Accent);
}
.parking {
background-color: var(--UI-Text-Active);
background-color: var(--Surface-Accent-5);
}
.publicTransport {
background-color: var(--Base-Interactive-Surface-Tertiary-normal);
background-color: var(--Surface-Accent-2);
}
.shoppingDining {
background-color: var(--Base-Interactive-Surface-Primary-normal);
background-color: var(--Surface-Accent-1);
}
.icon.transparent {
apps/scandic-web/components/Maps/Markers/Poi/variants.ts
+6
View File
@@ -18,8 +18,14 @@ export const poiVariants = cva(styles.icon, {
true: styles.transparent,
false: "",
},
size: {
small: styles.small,
medium: styles.small,
large: styles.large,
},
},
defaultVariants: {
skipBackground: false,
size: "small",
},
})
apps/scandic-web/components/Maps/Markers/utils.ts
+1 -1
View File
@@ -16,7 +16,7 @@ export function getIconByPoiGroupAndCategory(
case PointOfInterestGroupEnum.PARKING:
return IconName.Parking
case PointOfInterestGroupEnum.SHOPPING_DINING:
return IconName.Shopping
return category === "Restaurant" ? IconName.Restaurant : IconName.Shopping
case PointOfInterestGroupEnum.LOCATION:
default:
return IconName.Location