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

feat(SW-340): Added scroll to top button

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-08 10:00:53 +01:00
parent 2748120890
commit 5f46844b9b
22 changed files with 238 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
View File

@@ -10,30 +10,39 @@
.dialogContainer {
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
width: 402px;
min-height: 227px;
min-width: 334px;
background: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
flex-direction: row;
display: flex;
position: relative;
}
.closeIcon {
position: absolute;
top: 7px;
right: 7px;
}
.imageContainer {
position: relative;
min-height: 227px;
width: 177px;
}
.tripAdvisor {
display: none;
min-width: 177px;
}
.imageContainer img {
object-fit: cover;
}
.tripAdvisor {
position: absolute;
display: block;
left: 7px;
top: 7px;
}
.content {
width: 100%;
min-width: 201px;
padding: var(--Spacing-x-one-and-half);
gap: var(--Spacing-x1);
display: flex;
@@ -65,6 +74,13 @@
color: var(--Base-Text-Subtle-light-Normal);
}
.button {
.content .button {
margin-top: auto;
}
@media (min-width: 768px) {
.facilities,
.memberPrice {
display: none;
}
}

34
components/HotelReservation/HotelCardDialog/index.tsx
View File

@@ -3,6 +3,7 @@
import { useIntl } from "react-intl"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { CloseLargeIcon } from "@/components/Icons"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
@@ -13,17 +14,19 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./hotelCardDialog.module.css"
import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
import { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map"
export default function HotelCardDialog({
pin,
isOpen,
}: {
isOpen: boolean
pin: HotelPin
}) {
handleClose,
}: HotelCardDialogProps) {
const intl = useIntl()
if (!pin) {
return null
}
const {
name,
publicPrice,
@@ -34,15 +37,20 @@ export default function HotelCardDialog({
ratings,
} = pin
const firstImage = images[0]?.imageSizes?.small
const altText = images[0]?.metaData?.altText
return (
<dialog open={isOpen} className={styles.dialog}>
<div className={styles.dialogContainer}>
<CloseLargeIcon
onClick={handleClose}
className={styles.closeIcon}
width={16}
height={16}
/>
<div className={styles.imageContainer}>
<Image
src={images[0].imageSizes.small}
alt={images[0].metaData.altText}
fill
/>
<Image src={firstImage} alt={altText} fill />
<div className={styles.tripAdvisor}>
<Chip intent="primary" className={styles.tripAdvisor}>
<TripAdvisorIcon color="white" />
@@ -58,7 +66,9 @@ export default function HotelCardDialog({
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && <IconComponent color="grey80" />}
<Caption color="textMediumContrast">{facility.name}</Caption>
<Caption color="uiTextMediumContrast">
{facility.name}
</Caption>
</div>
)
})}
@@ -72,7 +82,7 @@ export default function HotelCardDialog({
</Body>
</Subtitle>
{memberPrice && (
<Subtitle type="two" color="red">
<Subtitle type="two" color="red" className={styles.memberPrice}>
{memberPrice} {currency}
<Body asChild color="red">
<span>/{intl.formatMessage({ id: "night" })}</span>