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

feat(SW-880): create facility card component

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-18 10:24:45 +01:00
committed by Joakim Jäderberg
parent ce6914a7e4
commit 3f73699e73
6 changed files with 109 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css Normal file
View File

@@ -0,0 +1,22 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}
.image {
width: 100%;
height: 270px;
object-fit: cover;
border-radius: var(--Corner-radius-Medium);
}
.information {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-one-and-half);
}
.body {
margin-top: var(--Spacing-x1);
}

54
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx Normal file
View File

@@ -0,0 +1,54 @@
import Image from "@/components/Image"
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 styles from "./facilityCard.module.css"
import type { FacilityCardProps } from "@/types/components/hotelPage/sidepeek/facilityCard"
export default async function FacilityCard({
imgUrl,
imgAltText,
facilityType,
ordinaryOpeningTimes,
weekendOpeningTimes,
}: FacilityCardProps) {
const intl = await getIntl()
return (
<div className={styles.content}>
{imgUrl && (
<Image
src={imgUrl}
alt={imgAltText || ""}
className={styles.image}
height={400}
width={200}
/>
)}
<div className={styles.information}>
<Subtitle color="burgundy" asChild type="one">
<Title level="h3">
{intl.formatMessage({ id: `${facilityType}` })}
</Title>
</Subtitle>
<div>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: " Opening Hours" })}
</Subtitle>
<Body color="uiTextHighContrast" className={styles.body}>
{ordinaryOpeningTimes.alwaysOpen
? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Mon-Fri" })} ${ordinaryOpeningTimes.openingTime}-${ordinaryOpeningTimes.closingTime}`}
</Body>
<Body color="uiTextHighContrast">
{weekendOpeningTimes.alwaysOpen
? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Sat-Sun" })} ${weekendOpeningTimes.openingTime}-${weekendOpeningTimes.closingTime}`}
</Body>
</div>
</div>
</div>
)
}

47
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
View File

@@ -1,15 +1,13 @@
import { wellnessAndExercise } from "@/constants/routes/hotelPageParams" import { wellnessAndExercise } from "@/constants/routes/hotelPageParams"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import SidePeek from "@/components/TempDesignSystem/SidePeek" 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 { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import FacilityCard from "./FacilityCard"
import styles from "./wellnessAndExercise.module.css" import styles from "./wellnessAndExercise.module.css"
import type { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelPage/sidepeek/wellnessAndExercise" import type { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelPage/sidepeek/wellnessAndExercise"
@@ -28,39 +26,14 @@ export default async function WellnessAndExerciseSidePeek({
> >
<div className={styles.wrapper}> <div className={styles.wrapper}>
{healthFacilities.map((facility) => ( {healthFacilities.map((facility) => (
<div className={styles.content} key={facility.type}> <FacilityCard
{facility.content.images[0]?.imageSizes.medium && ( key={facility.type}
<Image imgUrl={facility.content.images[0]?.imageSizes.medium}
src={facility.content.images[0].imageSizes.medium} imgAltText={facility.content.images[0]?.metaData.altText}
alt={facility.content.images[0].metaData.altText || ""} facilityType={facility.type}
className={styles.image} ordinaryOpeningTimes={facility.openingDetails.openingHours.ordinary}
height={400} weekendOpeningTimes={facility.openingDetails.openingHours.weekends}
width={200} />
/>
)}
<div className={styles.information}>
<Subtitle color="burgundy" asChild type="one">
<Title level="h3">
{intl.formatMessage({ id: `${facility.type}` })}
</Title>
</Subtitle>
<div>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: " Opening Hours" })}
</Subtitle>
<Body color="uiTextHighContrast" className={styles.body}>
{facility.openingDetails.openingHours.ordinary.alwaysOpen
? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Mon-Fri" })} ${facility.openingDetails.openingHours.ordinary.openingTime}-${facility.openingDetails.openingHours.ordinary.closingTime}`}
</Body>
<Body color="uiTextHighContrast">
{facility.openingDetails.openingHours.weekends.alwaysOpen
? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Sat-Sun" })} ${facility.openingDetails.openingHours.weekends.openingTime}-${facility.openingDetails.openingHours.weekends.closingTime}`}
</Body>
</div>
</div>
</div>
))} ))}
</div> </div>
{buttonUrl && ( {buttonUrl && (

23
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css
View File

@@ -7,29 +7,6 @@
); /* Creates space between the wrapper and buttonContainer */ ); /* Creates space between the wrapper and buttonContainer */
} }
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}
.image {
width: 100%;
height: 270px;
object-fit: cover;
border-radius: var(--Corner-radius-Medium);
}
.information {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-one-and-half);
}
.body {
margin-top: var(--Spacing-x1);
}
.buttonContainer { .buttonContainer {
background-color: var(--Base-Background-Primary-Normal); background-color: var(--Base-Background-Primary-Normal);
border-top: 1px solid var(--Base-Border-Subtle); border-top: 1px solid var(--Base-Border-Subtle);

5
components/ContentType/HotelPage/index.tsx
View File

@@ -147,7 +147,10 @@ export default async function HotelPage() {
{/* TODO */} {/* TODO */}
Restaurant & Bar Restaurant & Bar
</SidePeek> </SidePeek>
<WellnessAndExerciseSidePeek healthFacilities={healthFacilities} /> <WellnessAndExerciseSidePeek
healthFacilities={healthFacilities}
buttonUrl="#"
/>
<SidePeek <SidePeek
contentKey={hotelPageParams.activities[lang]} contentKey={hotelPageParams.activities[lang]}
title={intl.formatMessage({ id: "Activities" })} title={intl.formatMessage({ id: "Activities" })}

19
types/components/hotelPage/sidepeek/facilityCard.ts Normal file
View File

@@ -0,0 +1,19 @@
export type FacilityCardProps = {
imgUrl: string
imgAltText: string
facilityType: string
ordinaryOpeningTimes: {
alwaysOpen: boolean
isClosed: boolean
openingTime?: string
closingTime?: string
sortOrder?: number
}
weekendOpeningTimes: {
alwaysOpen: boolean
isClosed: boolean
openingTime?: string
closingTime?: string
sortOrder?: number
}
}