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

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

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

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

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