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

fix(SW-1608): Hotel listing synced with design

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-05-26 11:49:51 +00:00
parent a790a52067
commit a8e52c6c8a
4 changed files with 70 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
View File

@@ -1,13 +1,9 @@
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ButtonLink from "@/components/ButtonLink"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -37,56 +33,58 @@ export default async function HotelListingItem({
<Image
src={image.src}
alt={image.alt}
width={300}
height={200}
width={400}
height={300}
sizes="(min-width: 768px) 400px, 100vw"
className={styles.image}
/>
<section className={styles.content}>
<div className={styles.intro}>
<HotelLogoIcon hotelId={hotel.operaId} hotelType={hotel.hotelType} />
<Subtitle asChild>
<Title as="h3">{hotel.name}</Title>
</Subtitle>
<div className={styles.captions}>
<Caption color="uiTextPlaceholder">
{hotel.address.streetAddress}
</Caption>
<div className={styles.dividerContainer}>
<Divider variant="vertical" color="beige" />
<Typography variant="Title/Subtitle/lg">
<h4>{hotel.name}</h4>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={styles.captions}>
<span>{hotel.address.streetAddress}</span>
<Divider variant="vertical" color="Border/Divider/Default" />
<span>
{intl.formatMessage(
{
defaultMessage: "{number} km to city center",
},
{
number: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</span>
</div>
<Caption color="uiTextPlaceholder">
{intl.formatMessage(
{
defaultMessage: "{number} km to city center",
},
{
number: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</Caption>
</div>
</Typography>
</div>
<Body>{description}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>{description}</p>
</Typography>
{cta.url && (
<Button
intent="primary"
theme="base"
size="small"
className={styles.button}
asChild
>
<Link
{cta.url ? (
<>
<Divider
className={styles.ctaDivider}
variant="horizontal"
color="borderDividerSubtle"
/>
<ButtonLink
variant="Primary"
size="Small"
href={cta.url}
color="white"
target={cta.openInNewTab ? "_blank" : "_self"}
className={styles.button}
>
{cta.text}
</Link>
</Button>
)}
</ButtonLink>
</>
) : null}
</section>
</article>
)