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

Merged in fix/map-card-amenities (pull request #1840)

Browse Source 
Fix/map card amenities

* fix: only display 3 amenities on map card

* fix: add Typography


Approved-by: Christian Andolf
This commit is contained in:
Matilda Landström
2025-04-22 12:46:45 +00:00
parent 652023fac3
commit bcd7474da6
4 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx
View File

@@ -1,4 +1,5 @@
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image"
import Chip from "@/components/TempDesignSystem/Chip"
@@ -34,7 +35,9 @@ export default function DialogImage({
<div className={styles.tripAdvisor}>
<Chip className={styles.tripAdvisor}>
<TripadvisorIcon color="Icon/Interactive/Default" />
{ratings}
<Typography variant="Tag/sm">
<p>{ratings}</p>
</Typography>
</Chip>
</div>
</div>

5
apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css
View File

@@ -24,8 +24,8 @@
}
.closeButton:hover .closeIcon {
background-color: var(--Base-Surface-Subtle-Normal);
color: var(--Primary-Dark-Surface-Hover);
background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
border-radius: 50%;
}
@@ -40,6 +40,7 @@
.hiddenFacilities,
.iconFootnote {
display: none;
color: var(--Text-Secondary);
}
.facilitiesItem {

51
apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx
View File

@@ -1,15 +1,14 @@
"use client"
import Link from "next/link"
import { useState } from "react"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import ButtonLink from "@/components/ButtonLink"
import { FacilityToIcon } from "../../HotelPage/data"
import { usePageType } from "../Map/PageTypeProvider"
@@ -50,11 +49,10 @@ export default function HotelMapCard({
<article className={className}>
<div className={styles.wrapper}>
<Button
intent="text"
size="medium"
variant="icon"
size="Medium"
variant="Icon"
className={styles.closeButton}
onClick={handleClose}
onPress={handleClose}
aria-label={intl.formatMessage({
defaultMessage: "Close",
})}
@@ -80,9 +78,9 @@ export default function HotelMapCard({
<div className={styles.content}>
<div className={styles.name}>
<Body asChild textTransform="bold">
<Typography variant="Body/Paragraph/mdBold">
<h4>{hotelName}</h4>
</Body>
</Typography>
</div>
<div
className={
@@ -102,31 +100,32 @@ export default function HotelMapCard({
return (
<div className={styles.facilitiesItem} key={facility.id}>
{Icon && Icon}
<Footnote
<Typography
className={styles.iconFootnote}
color="uiTextMediumContrast"
variant="Body/Supporting text (caption)/smRegular"
>
{facility.name}
</Footnote>
<p>{facility.name}</p>
</Typography>
</div>
)
})}
</div>
{url && (
<Button
disabled={url ? false : true}
intent="tertiary"
theme="base"
asChild
size="small"
<ButtonLink
href={url}
variant="Tertiary"
color="Primary"
size="Small"
>
<Link href={url}>
{intl.formatMessage({
defaultMessage: "See hotel information",
})}
</Link>
</Button>
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
{intl.formatMessage({
defaultMessage: "See hotel information",
})}
</p>
</Typography>
</ButtonLink>
)}
</div>
</div>

2
apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx
View File

@@ -70,7 +70,7 @@ export default function Marker({ position, properties }: MarkerProps) {
minWidth={450}
>
<HotelMapCard
amenities={properties.amenities}
amenities={properties.amenities.slice(0, 3)}
tripadvisorRating={properties.tripadvisor}
hotelName={properties.name}
image={properties.image}