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

Merged master into fix/header-skeletons

Browse Source
This commit is contained in:
Linus Flood
2024-12-05 13:24:13 +00:00
parent 6047c5f5e8 ef1b17adfe
commit 6c8634ed10
54 changed files with 480 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx
+80
View File
@@ -0,0 +1,80 @@
import { meetingsAndConferences } from "@/constants/routes/hotelPageParams"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./meetingsAndConferences.module.css"
import type { MeetingsAndConferencesSidePeekProps } from "@/types/components/hotelPage/sidepeek/meetingsAndConferences"
export default async function MeetingsAndConferencesSidePeek({
meetingFacilities,
descriptions,
link,
}: MeetingsAndConferencesSidePeekProps) {
const lang = getLang()
const intl = await getIntl()
const fallbackAlt = intl.formatMessage({ id: "Creative spaces for meetings" })
const primaryImage = meetingFacilities?.heroImages[0]?.imageSizes.medium
const primaryAltText =
meetingFacilities?.heroImages[0]?.metaData.altText || fallbackAlt
const secondaryImage = meetingFacilities?.heroImages[1]?.imageSizes.medium
const secondaryAltText =
meetingFacilities?.heroImages[1]?.metaData.altText || fallbackAlt
return (
<SidePeek
contentKey={meetingsAndConferences[lang]}
title={intl.formatMessage({ id: "Meetings & Conferences" })}
>
<div className={styles.wrapper}>
<Subtitle color="burgundy" asChild>
<Title level="h3">
{intl.formatMessage({ id: "Creative spaces for meetings" })}
</Title>
</Subtitle>
{primaryImage && (
<div className={secondaryImage ? styles.imageContainer : ""}>
<Image
src={primaryImage}
alt={primaryAltText}
height={300}
width={200}
className={styles.image}
/>
{secondaryImage && (
<Image
src={secondaryImage}
alt={secondaryAltText}
height={300}
width={200}
className={`${styles.image} ${styles.secondaryImage}`}
/>
)}
</div>
)}
{descriptions?.medium && (
<Body color="uiTextHighContrast">{descriptions.medium}</Body>
)}
{link && (
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="secondary" asChild>
<Link href={link} weight="bold" color="burgundy">
{intl.formatMessage({ id: "About meetings & conferences" })}
</Link>
</Button>
</div>
)}
</div>
</SidePeek>
)
}
components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css
+44
View File
@@ -0,0 +1,44 @@
.wrapper {
display: grid;
gap: var(--Spacing-x3);
margin-bottom: calc(
var(--Spacing-x4) * 2 + 80px
); /* Creates space between the wrapper and buttonContainer */
}
.image {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: var(--Corner-radius-Medium);
}
.secondaryImage {
display: none;
}
.buttonContainer {
background-color: var(--Base-Background-Primary-Normal);
border-top: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x4) var(--Spacing-x2);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
@media screen and (min-width: 768px) {
.imageContainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x2);
}
.image {
height: 240px;
}
.secondaryImage {
display: block;
}
}
components/ContentType/HotelPage/SidePeeks/index.ts
+1
View File
@@ -1,5 +1,6 @@
export { default as AboutTheHotelSidePeek } from "./AboutTheHotel"
export { default as ActivitiesSidePeek } from "./Activities"
export { default as AmenitiesSidePeek } from "./Amenities"
export { default as MeetingsAndConferencesSidePeek } from "./MeetingsAndConferences"
export { default as RoomSidePeek } from "./Room"
export { default as WellnessAndExerciseSidePeek } from "./WellnessAndExercise"
components/ContentType/HotelPage/index.tsx
+6 -11
View File
@@ -1,9 +1,6 @@
import { notFound } from "next/navigation"
import {
meetingsAndConferences,
restaurantAndBar,
} from "@/constants/routes/hotelPageParams"
import { restaurantAndBar } from "@/constants/routes/hotelPageParams"
import { env } from "@/env/server"
import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
@@ -30,6 +27,7 @@ import {
AboutTheHotelSidePeek,
ActivitiesSidePeek,
AmenitiesSidePeek,
MeetingsAndConferencesSidePeek,
RoomSidePeek,
WellnessAndExerciseSidePeek,
} from "./SidePeeks"
@@ -203,13 +201,10 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
{activitiesCard && (
<ActivitiesSidePeek contentPage={activitiesCard.contentPage} />
)}
<SidePeek
contentKey={meetingsAndConferences[lang]}
title={intl.formatMessage({ id: "Meetings & Conferences" })}
>
{/* TODO */}
Meetings & Conferences
</SidePeek>
<MeetingsAndConferencesSidePeek
meetingFacilities={conferencesAndMeetings}
descriptions={hotelContent.texts.meetingDescription}
/>
{roomCategories.map((room) => (
<RoomSidePeek key={room.name} room={room} />
))}
components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx
+6 -2
View File
@@ -1,14 +1,18 @@
"use client"
import { useIntl } from "react-intl"
import { useReactToPrint } from "react-to-print"
import { DownloadIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
export default function DownloadInvoice() {
import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice"
export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
const intl = useIntl()
const reactToPrintFn = useReactToPrint({ contentRef: mainRef })
function downloadBooking() {
window.print()
reactToPrintFn()
}
return (
components/HotelReservation/BookingConfirmation/Header/index.tsx
+10 -9
View File
@@ -1,9 +1,9 @@
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
"use client"
import { useIntl } from "react-intl"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import AddToCalendar from "./Actions/AddToCalendar"
import DownloadInvoice from "./Actions/DownloadInvoice"
@@ -14,13 +14,14 @@ import styles from "./header.module.css"
import type { EventAttributes } from "ics"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import type { BookingConfirmationHeaderProps } from "@/types/components/hotelReservation/bookingConfirmation/header"
export default async function Header({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
export default function Header({
booking,
hotel,
mainRef,
}: BookingConfirmationHeaderProps) {
const intl = useIntl()
const text = intl.formatMessage<React.ReactNode>(
{ id: "booking.confirmation.text" },
@@ -70,7 +71,7 @@ export default async function Header({
hotelName={hotel.name}
/>
<ManageBooking />
<DownloadInvoice />
<DownloadInvoice mainRef={mainRef} />
</div>
</header>
)
components/HotelReservation/BookingConfirmation/HotelDetails/index.tsx
+7 -8
View File
@@ -1,20 +1,19 @@
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
"use client"
import { useIntl } from "react-intl"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { Toast } from "@/components/TempDesignSystem/Toasts"
import { getIntl } from "@/i18n"
import styles from "./hotelDetails.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import type { BookingConfirmationHotelDetailsProps } from "@/types/components/hotelReservation/bookingConfirmation/hotelDetails"
export default async function HotelDetails({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const { hotel } = await getBookingConfirmation(confirmationNumber)
export default function HotelDetails({
hotel,
}: BookingConfirmationHotelDetailsProps) {
const intl = useIntl()
return (
<div className={styles.container}>
<div className={styles.details}>
components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
+10 -10
View File
@@ -1,23 +1,23 @@
"use client"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import { CreditCardAddIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import useLang from "@/hooks/useLang"
import styles from "./paymentDetails.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import type { BookingConfirmationPaymentDetailsProps } from "@/types/components/hotelReservation/bookingConfirmation/paymentDetails"
export default async function PaymentDetails({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const lang = getLang()
const { booking } = await getBookingConfirmation(confirmationNumber)
export default function PaymentDetails({
booking,
}: BookingConfirmationPaymentDetailsProps) {
const intl = useIntl()
const lang = useLang()
return (
<div className={styles.details}>
<Subtitle color="uiTextHighContrast" type="two">
components/HotelReservation/BookingConfirmation/Promos/index.tsx
+4 -3
View File
@@ -1,11 +1,12 @@
import { getIntl } from "@/i18n"
"use client"
import { useIntl } from "react-intl"
import Promo from "./Promo"
import styles from "./promos.module.css"
export default async function Promos() {
const intl = await getIntl()
export default function Promos() {
const intl = useIntl()
return (
<div className={styles.promos}>
<Promo
components/HotelReservation/BookingConfirmation/Receipt/index.tsx
+13 -16
View File
@@ -1,6 +1,6 @@
"use client"
import { notFound } from "next/navigation"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import { useIntl } from "react-intl"
import { ChevronRightSmallIcon, InfoCircleIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
@@ -9,21 +9,20 @@ 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 { getIntl } from "@/i18n"
import { getBookedHotelRoom } from "@/utils/getBookedHotelRoom"
import styles from "./receipt.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import { BookingConfirmationReceiptProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
export default async function Receipt({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
const roomAndBed = getBookedHotelRoom(hotel, booking.roomTypeCode ?? "")
if (!roomAndBed) {
export default function Receipt({
booking,
hotel,
room,
}: BookingConfirmationReceiptProps) {
const intl = useIntl()
if (!room) {
return notFound()
}
@@ -38,7 +37,7 @@ export default async function Receipt({
<Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
<article className={styles.room}>
<header className={styles.roomHeader}>
<Body color="uiTextHighContrast">{roomAndBed.name}</Body>
<Body color="uiTextHighContrast">{room.name}</Body>
{booking.rateDefinition.isMemberRate ? (
<div className={styles.memberPrice}>
<Body color="uiTextPlaceholder">
@@ -82,9 +81,7 @@ export default async function Receipt({
</Link>
</header>
<div className={styles.entry}>
<Body color="uiTextHighContrast">
{roomAndBed.bedType.description}
</Body>
<Body color="uiTextHighContrast">{room.bedType.description}</Body>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: booking.currencyCode,
components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
+8 -6
View File
@@ -1,3 +1,6 @@
"use client"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import {
@@ -10,16 +13,15 @@ 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 { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import useLang from "@/hooks/useLang"
import styles from "./room.module.css"
import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/room"
import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"
export default async function Room({ booking, img, roomName }: RoomProps) {
const intl = await getIntl()
const lang = getLang()
export default function Room({ booking, img, roomName }: RoomProps) {
const intl = useIntl()
const lang = useLang()
const fromDate = dt(booking.checkInDate).locale(lang)
const toDate = dt(booking.checkOutDate).locale(lang)
components/HotelReservation/BookingConfirmation/Rooms/index.tsx
+9 -16
View File
@@ -1,30 +1,23 @@
"use client"
import { notFound } from "next/navigation"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import { getBookedHotelRoom } from "@/utils/getBookedHotelRoom"
import Room from "./Room"
import styles from "./rooms.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
export default async function Rooms({
confirmationNumber,
}: BookingConfirmationProps) {
const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
const roomAndBed = getBookedHotelRoom(hotel, booking.roomTypeCode ?? "")
if (!roomAndBed) {
export default function Rooms({
booking,
room,
}: BookingConfirmationRoomsProps) {
if (!room) {
return notFound()
}
return (
<section className={styles.rooms}>
<Room
booking={booking}
img={roomAndBed.images[0]}
roomName={roomAndBed.name}
/>
<Room booking={booking} img={room.images[0]} roomName={room.name} />
</section>
)
}
components/HotelReservation/BookingConfirmation/confirmation.module.css
+42
View File
@@ -0,0 +1,42 @@
.main {
background-color: var(--Base-Surface-Primary-light-Normal);
display: grid;
gap: var(--Spacing-x5);
grid-template-areas: "header" "booking";
margin: 0 auto;
min-height: 100dvh;
padding-top: var(--Spacing-x5);
width: var(--max-width-page);
}
.booking {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
grid-area: booking;
padding-bottom: var(--Spacing-x9);
}
.aside {
display: none;
}
@media screen and (min-width: 1367px) {
.main {
grid-template-areas:
"header receipt"
"booking receipt";
grid-template-columns: 1fr 340px;
grid-template-rows: auto 1fr;
padding-top: var(--Spacing-x9);
}
.mobileReceipt {
display: none;
}
.aside {
display: grid;
grid-area: receipt;
}
}
components/HotelReservation/BookingConfirmation/index.tsx
+57
View File
@@ -0,0 +1,57 @@
"use client"
import { use, useRef } from "react"
import Header from "@/components/HotelReservation/BookingConfirmation/Header"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Divider from "@/components/TempDesignSystem/Divider"
import styles from "./confirmation.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default function BookingConfirmation({
bookingConfirmationPromise,
}: BookingConfirmationProps) {
const bookingConfirmation = use(bookingConfirmationPromise)
const mainRef = useRef<HTMLElement | null>(null)
return (
<main className={styles.main} ref={mainRef}>
<Header
booking={bookingConfirmation.booking}
hotel={bookingConfirmation.hotel}
mainRef={mainRef}
/>
<div className={styles.booking}>
<Rooms
booking={bookingConfirmation.booking}
room={bookingConfirmation.room}
/>
<PaymentDetails booking={bookingConfirmation.booking} />
<Divider color="primaryLightSubtle" />
<HotelDetails hotel={bookingConfirmation.hotel} />
<Promos />
<div className={styles.mobileReceipt}>
<Receipt
booking={bookingConfirmation.booking}
hotel={bookingConfirmation.hotel}
room={bookingConfirmation.room}
/>
</div>
</div>
<aside className={styles.aside}>
<SidePanel variant="receipt">
<Receipt
booking={bookingConfirmation.booking}
hotel={bookingConfirmation.hotel}
room={bookingConfirmation.room}
/>
</SidePanel>
</aside>
</main>
)
}
components/HotelReservation/Contact/contact.module.css
+18 -7
View File
@@ -4,6 +4,7 @@
grid-template-rows: auto;
gap: var(--Spacing-x2);
font-family: var(--typography-Body-Regular-fontFamily);
margin-bottom: var(--Spacing-x3);
}
.address,
@@ -20,6 +21,7 @@
list-style-type: none;
display: flex;
flex-direction: column;
min-width: 0;
}
.soMeIcons {
@@ -28,6 +30,19 @@
}
.ecoLabel {
width: 38px;
height: auto;
}
.ecoLabel img {
width: 100%;
height: auto;
flex-shrink: 0;
grid-column: 1 / 3;
grid-row: 4 / 4;
}
.ecoContainer {
display: flex;
align-items: center;
column-gap: var(--Spacing-x-one-and-half);
@@ -38,10 +53,6 @@
margin-bottom: var(--Spacing-x1);
}
.ecoLabel img {
flex-shrink: 0;
}
.ecoLabelText {
display: flex;
color: var(--UI-Text-Medium-contrast);
@@ -49,8 +60,8 @@
justify-content: center;
}
.googleMaps {
text-decoration: none;
.link {
text-decoration: underline;
font-family: var(--typography-Body-Regular-fontFamily);
color: var(--Base-Text-Medium-contrast);
color: var(--Base-Text-High-contrast);
}
components/HotelReservation/Contact/index.tsx
+22 -25
View File
@@ -24,31 +24,27 @@ export default function Contact({ hotel }: ContactProps) {
<Body textTransform="bold">
{intl.formatMessage({ id: "Address" })}
</Body>
<Body>
{`${hotel.address.streetAddress}, ${hotel.address.city}`}
</Body>
<Body>{`${hotel.address.streetAddress}, `}</Body>
<Body>{hotel.address.city}</Body>
</li>
<li>
<Body textTransform="bold">
{intl.formatMessage({ id: "Driving directions" })}
</Body>
<a
<Link
href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
className={styles.googleMaps}
target="_blank"
>
Google Maps
</a>
<span className={styles.link}>Google Maps</span>
</Link>
</li>
<li>
<Body textTransform="bold">
{intl.formatMessage({ id: "Contact us" })}
</Body>
<Link
href={`tel:${hotel.contactInformation.phoneNumber}`}
color="peach80"
>
{hotel.contactInformation.phoneNumber}
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
<span className={styles.link}>
{hotel.contactInformation.phoneNumber}
</span>
</Link>
</li>
<li>
@@ -76,23 +72,24 @@ export default function Contact({ hotel }: ContactProps) {
<Body textTransform="bold">
{intl.formatMessage({ id: "Email" })}
</Body>
<Link
href={`mailto:${hotel.contactInformation.email}`}
color="peach80"
>
{hotel.contactInformation.email}
<Link href={`mailto:${hotel.contactInformation.email}`}>
<span className={styles.link}>
{hotel.contactInformation.email}
</span>
</Link>
</li>
</ul>
</address>
{hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? (
<div className={styles.ecoLabel}>
<Image
height={38}
width={43}
alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
/>
<div className={styles.ecoContainer}>
<div className={styles.ecoLabel}>
<Image
height={38}
width={38}
alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
/>
</div>
<div className={styles.ecoLabelText}>
<span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
<span>
components/ImageGallery/index.tsx
+4 -3
View File
@@ -6,7 +6,8 @@ import { useIntl } from "react-intl"
import { GalleryIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Caption from "../TempDesignSystem/Text/Caption"
import styles from "./imageGallery.module.css"
@@ -44,9 +45,9 @@ function ImageGallery({
/>
<div className={styles.imageCount}>
<GalleryIcon color="white" />
<Footnote color="white" type="label">
<Caption color="white" type="label">
{images.length}
</Footnote>
</Caption>
</div>
</div>
<Lightbox
components/Lightbox/Lightbox.module.css
+1
View File
@@ -122,6 +122,7 @@
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x1);
max-height: none;
padding: var(--Spacing-x3) 0;
}
.thumbnailContainer {
components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx
+1
View File
@@ -14,6 +14,7 @@ export default function Accessibility({
<AccordionItem
title={intl.formatMessage({ id: "Accessibility" })}
icon={IconName.Accessibility}
variant="sidepeek"
>
<Body>{accessibilityElevatorPitchText}</Body>
</AccordionItem>
components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx
+1
View File
@@ -13,6 +13,7 @@ export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
<AccordionItem
title={intl.formatMessage({ id: "Check-in/Check-out" })}
icon={IconName.Calendar}
variant="sidepeek"
>
<Body textTransform="bold">{intl.formatMessage({ id: "Hours" })}</Body>
<Body>{`${intl.formatMessage({ id: "Check in from" })}: ${checkin.checkInTime}`}</Body>
components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx
+1
View File
@@ -14,6 +14,7 @@ export default function MeetingsAndConferences({
<AccordionItem
title={intl.formatMessage({ id: "Meetings & Conferences" })}
icon={IconName.Business}
variant="sidepeek"
>
<Body>{meetingDescription}</Body>
</AccordionItem>
components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx
+1
View File
@@ -16,6 +16,7 @@ export default function Parking({ parking }: ParkingProps) {
title={intl.formatMessage({ id: "Parking" })}
icon={IconName.Parking}
className={styles.parking}
variant="sidepeek"
>
{parking.map((p) => (
<div key={p.name}>
components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx
+1
View File
@@ -15,6 +15,7 @@ export default function Restaurant({
<AccordionItem
title={intl.formatMessage({ id: "Restaurant" }, { count: 1 })}
icon={IconName.Restaurant}
variant="sidepeek"
>
<Body>{restaurantsContentDescriptionMedium}</Body>
</AccordionItem>
components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css
+1
View File
@@ -10,6 +10,7 @@
align-items: center;
gap: var(--Spacing-x1);
padding-left: var(--Spacing-x1);
justify-items: flex-start;
}
.list li svg {
components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
+17 -6
View File
@@ -9,13 +9,24 @@
gap: var(--Spacing-x2);
}
.amenity {
font-family: var(--typography-Body-Regular-fontFamily);
border-bottom: 1px solid var(--Base-Border-Subtle);
/* padding set to align with AccordionItem which has a different composition */
padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half))
var(--Spacing-x3);
.content:last-child {
gap: 0;
}
.content > p {
margin-bottom: var(--Spacing-x-one-and-half);
}
.content > ul > li:first-child {
border-top: 1px solid var(--Base-Border-Subtle);
}
.amenity > p {
border-top: 1px solid var(--Base-Border-Subtle);
padding: calc(var(--Spacing-x-one-and-half) + var(--Spacing-x1))
var(--Spacing-x1);
display: flex;
align-items: center;
gap: var(--Spacing-x1);
}
components/SidePeeks/HotelSidePeek/index.tsx
+8 -11
View File
@@ -71,24 +71,21 @@ export default function HotelSidePeek({
}
/>
)}
</Accordion>
<div className={styles.amenity}>
{amenitiesList.map((amenity) => {
const Icon = mapFacilityToIcon(amenity.id)
return (
<div key={amenity.id} className={styles.amenity}>
<Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
{Icon && (
<Icon width={24} height={24} color="uiTextMediumContrast" />
<Icon width={24} height={24} color="uiTextHighContrast" />
)}
<Body
asChild
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{amenity.name}</span>
</Body>
</div>
{amenity.name}
</Subtitle>
)
})}
</Accordion>
</div>
{/* TODO: handle linking to Hotel Page */}
{/* {showCTA && (
<Button theme="base" intent="secondary" size="large">
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
+10 -1
View File
@@ -6,6 +6,10 @@
padding: var(--Spacing-x1);
}
.accordionItem.sidepeek {
padding: var(--Spacing-x1) 0;
}
.summary {
position: relative;
display: flex;
@@ -18,7 +22,7 @@
font-weight: var(--typography-Body-Bold-fontWeight);
transition: background-color 0.3s;
}
.summary:hover {
.summary.card:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.accordionItem.light .summary:hover {
@@ -33,6 +37,11 @@
border-radius: var(--Corner-radius-Medium);
}
.accordionItem.sidepeek .summary {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
align-items: center;
}
.title {
flex-grow: 1;
}
components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+12 -10
View File
@@ -50,16 +50,10 @@ export default function AccordionItem({
<li className={accordionItemVariants({ className, variant, theme })}>
<details ref={detailsRef} onToggle={toggleAccordion}>
<summary className={styles.summary}>
{IconComp && <IconComp className={styles.icon} color="burgundy" />}
{variant === "card" ? (
<Body
textTransform="bold"
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
) : (
{IconComp && (
<IconComp className={styles.icon} color="baseTextHighcontrast" />
)}
{variant === "sidepeek" ? (
<Subtitle
className={styles.title}
type="two"
@@ -67,6 +61,14 @@ export default function AccordionItem({
>
{title}
</Subtitle>
) : (
<Body
textTransform="bold"
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
)}
<ChevronDownIcon
className={styles.chevron}
components/TempDesignSystem/Accordion/AccordionItem/variants.ts
+1
View File
@@ -6,6 +6,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
variants: {
variant: {
card: styles.card,
sidepeek: styles.sidepeek,
},
theme: {
default: styles.default,
components/TempDesignSystem/Accordion/variants.ts
+1
View File
@@ -6,6 +6,7 @@ export const accordionVariants = cva(styles.accordion, {
variants: {
variant: {
card: styles.card,
sidepeek: styles.sidepeek,
},
theme: {
default: styles.default,