Merged master into feat/1268-mask-private-data
This commit is contained in:
Linus Flood
@@ -0,0 +1,49 @@
|
||||
.container {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
padding: var(--Spacing-x2) var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.dividerContainer {
|
||||
padding: 0 var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.captions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(250px, 350px) auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-height: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: min(100%, 200px);
|
||||
}
|
||||
}
|
||||
81
components/Blocks/HotelListing/HotelListingItem/index.tsx
Normal file
81
components/Blocks/HotelListing/HotelListingItem/index.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import HotelLogo from "@/components/Icons/Logos"
|
||||
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"
|
||||
|
||||
import { getTypeSpecificInformation } from "./utils"
|
||||
|
||||
import styles from "./hotelListingItem.module.css"
|
||||
|
||||
import type { HotelListingItemProps } from "@/types/components/contentPage/hotelListingItem"
|
||||
|
||||
export default async function HotelListingItem({
|
||||
hotel,
|
||||
contentType = "hotel",
|
||||
url,
|
||||
}: HotelListingItemProps) {
|
||||
const intl = await getIntl()
|
||||
const { description, imageSrc, altText } = getTypeSpecificInformation(
|
||||
contentType,
|
||||
hotel
|
||||
)
|
||||
|
||||
return (
|
||||
<article className={styles.container}>
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={altText}
|
||||
width={300}
|
||||
height={200}
|
||||
className={styles.image}
|
||||
/>
|
||||
<section className={styles.content}>
|
||||
<div className={styles.intro}>
|
||||
<HotelLogo 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" />
|
||||
</div>
|
||||
<Caption color="uiTextPlaceholder">
|
||||
{intl.formatMessage(
|
||||
{ id: "Distance in km to city centre" },
|
||||
{
|
||||
number: getSingleDecimal(
|
||||
hotel.location.distanceToCentre / 1000
|
||||
),
|
||||
}
|
||||
)}
|
||||
</Caption>
|
||||
</div>
|
||||
</div>
|
||||
<Body>{description}</Body>
|
||||
{url && (
|
||||
<Button
|
||||
intent="primary"
|
||||
theme="base"
|
||||
size="small"
|
||||
className={styles.button}
|
||||
asChild
|
||||
>
|
||||
<Link href={url} color="white">
|
||||
{intl.formatMessage({ id: "See hotel details" })}
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</section>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
36
components/Blocks/HotelListing/HotelListingItem/utils.ts
Normal file
36
components/Blocks/HotelListing/HotelListingItem/utils.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { Hotel } from "@/types/hotel"
|
||||
import type { HotelListing } from "@/types/trpc/routers/contentstack/blocks"
|
||||
|
||||
export function getTypeSpecificInformation(
|
||||
contentType: HotelListing["contentType"],
|
||||
hotel: Hotel
|
||||
) {
|
||||
const { restaurantsOverviewPage, images } = hotel.hotelContent
|
||||
const { descriptions, meetingDescription } = hotel.hotelContent.texts
|
||||
const hotelData = {
|
||||
description: descriptions.short,
|
||||
imageSrc: images.imageSizes.small,
|
||||
altText: images.metaData.altText,
|
||||
}
|
||||
switch (contentType) {
|
||||
case "meeting":
|
||||
const meetingImage = hotel.conferencesAndMeetings?.heroImages[0]
|
||||
return {
|
||||
description: meetingDescription?.short || hotelData.description,
|
||||
imageSrc: meetingImage?.imageSizes.small || hotelData.imageSrc,
|
||||
altText: meetingImage?.metaData.altText || hotelData.altText,
|
||||
}
|
||||
case "restaurant":
|
||||
const restaurantImage = hotel.restaurantImages?.heroImages[0]
|
||||
return {
|
||||
description:
|
||||
restaurantsOverviewPage.restaurantsContentDescriptionShort ||
|
||||
hotelData.description,
|
||||
imageSrc: restaurantImage?.imageSizes.small || hotelData.imageSrc,
|
||||
altText: restaurantImage?.metaData.altText || hotelData.altText,
|
||||
}
|
||||
case "hotel":
|
||||
default:
|
||||
return hotelData
|
||||
}
|
||||
}
|
||||
40
components/Blocks/HotelListing/index.tsx
Normal file
40
components/Blocks/HotelListing/index.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { getHotels } from "@/lib/trpc/memoizedRequests"
|
||||
|
||||
import SectionContainer from "@/components/Section/Container"
|
||||
import Title from "@/components/TempDesignSystem/Text/Title"
|
||||
|
||||
import HotelListingItem from "./HotelListingItem"
|
||||
|
||||
import type { HotelListingProps } from "@/types/components/blocks/hotelListing"
|
||||
|
||||
export default async function HotelListing({
|
||||
heading,
|
||||
locationFilter,
|
||||
hotelsToInclude,
|
||||
contentType,
|
||||
}: HotelListingProps) {
|
||||
const hotels = await getHotels({
|
||||
locationFilter,
|
||||
hotelsToInclude: hotelsToInclude,
|
||||
})
|
||||
|
||||
if (!hotels.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionContainer>
|
||||
<Title level="h4" as="h3" textTransform="capitalize">
|
||||
{heading}
|
||||
</Title>
|
||||
{hotels.map(({ data, url }) => (
|
||||
<HotelListingItem
|
||||
key={data.name}
|
||||
hotel={data}
|
||||
contentType={contentType}
|
||||
url={url}
|
||||
/>
|
||||
))}
|
||||
</SectionContainer>
|
||||
)
|
||||
}
|
||||
@@ -6,13 +6,14 @@ import UspGrid from "@/components/Blocks/UspGrid"
|
||||
import JsonToHtml from "@/components/JsonToHtml"
|
||||
|
||||
import AccordionSection from "./Accordion"
|
||||
import HotelListing from "./HotelListing"
|
||||
import Table from "./Table"
|
||||
|
||||
import type { BlocksProps } from "@/types/components/blocks"
|
||||
import { BlocksEnums } from "@/types/enums/blocks"
|
||||
|
||||
export default function Blocks({ blocks }: BlocksProps) {
|
||||
return blocks.map((block, idx) => {
|
||||
return blocks.map(async (block, idx) => {
|
||||
const firstItem = idx === 0
|
||||
switch (block.typename) {
|
||||
case BlocksEnums.block.Accordion:
|
||||
@@ -48,6 +49,21 @@ export default function Blocks({ blocks }: BlocksProps) {
|
||||
key={`${block.dynamic_content.title}-${idx}`}
|
||||
/>
|
||||
)
|
||||
case BlocksEnums.block.HotelListing:
|
||||
const { heading, contentType, locationFilter, hotelsToInclude } =
|
||||
block.hotel_listing
|
||||
if (!locationFilter && !hotelsToInclude.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<HotelListing
|
||||
heading={heading}
|
||||
locationFilter={locationFilter}
|
||||
hotelsToInclude={hotelsToInclude}
|
||||
contentType={contentType}
|
||||
/>
|
||||
)
|
||||
case BlocksEnums.block.Shortcuts:
|
||||
return (
|
||||
<ShortcutsList
|
||||
|
||||
Reference in New Issue
Block a user