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

feat: add logic to map facilities to icons + responsive script positioning

Browse Source
This commit is contained in:
Chuma McPhoy
2024-07-05 21:00:50 +02:00
parent 26815cc9bc
commit cfc4aca561
10 changed files with 110 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
View File

@@ -8,11 +8,23 @@
padding: var(--Spacing-x-one-and-half) var(--Spacing-x0) !important;
}
.amenityItemList {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}
.amenityItem {
display: inline-flex;
gap: var(--Spacing-x1);
}
@media screen and (min-width: 1367px) {
.amenitiesContainer {
background-color: var(--Scandic-Beige-10);
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x-one-and-half)
var(--Spacing-x3);
border-radius: var(--Corner-radius-Large);
margin-top: var(--Spacing-x5);
}
}

18
components/ContentType/HotelPage/AmenitiesList/index.tsx
View File

@@ -1,3 +1,4 @@
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { ChevronRightIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -17,13 +18,18 @@ export default function AmenitiesList({
.slice(0, 5)
return (
<section className={styles.amenitiesContainer}>
{/*TODO: Update to "Subtitle 2" once we have the new tokens. */}
<Subtitle color="black">At the hotel</Subtitle>
<div>
{sortedAmenities.map((facility, index) => (
<Body color="textMediumContrast" key={facility.id}>
{facility.name}
</Body>
))}
<div className={styles.amenityItemList}>
{sortedAmenities.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.name)
return (
<div className={styles.amenityItem} key={facility.id}>
{IconComponent && <IconComponent color="grey80" />}
<Body color="textMediumContrast">{facility.name}</Body>
</div>
)
})}
</div>
<Button
className={styles.showAllButton}

10
components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -37,11 +37,13 @@ export default async function IntroSection({
return (
<section className={styles.introSection}>
<BiroScript className={styles.welcomeLabel} color="red">
{formatMessage({ id: "Welcome to" })}:
</BiroScript>
<div className={styles.mainContent}>
<Title level="h2">{hotelName}</Title>
<div className={styles.titleContainer}>
<BiroScript className={styles.welcomeLabel} color="red">
{formatMessage({ id: "Welcome to" })}:
</BiroScript>
<Title level="h2">{hotelName}</Title>
</div>
<Body color="textMediumContrast">{formattedLocationText}</Body>
<Link
className={styles.introLink}

19
components/ContentType/HotelPage/IntroSection/introSection.module.css
View File

@@ -1,7 +1,6 @@
.introSection {
margin-top: var(--Spacing-x3);
display: grid;
gap: var(--Spacing-x3);
gap: var(--Spacing-x2);
position: relative;
}
@@ -16,8 +15,7 @@
}
.welcomeLabel {
/* TODO: Update and use absolute position. */
transform: rotate(-3.378deg) translate(0px, -15px);
transform: rotate(-4deg) translate(0px, -15px);
}
.introLink {
@@ -25,3 +23,16 @@
text-decoration-color: var(--Scandic-Peach-80);
width: fit-content;
}
@media screen and (min-width: 768px) {
.titleContainer {
display: grid;
gap: var(--Spacing-x-one-and-half);
}
}
@media screen and (min-width: 1367px) {
.titleContainer {
gap: var(--Spacing-x0);
}
}

22
components/ContentType/HotelPage/data.ts Normal file
View File

@@ -0,0 +1,22 @@
import { FC } from "react"
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import { IconName, IconProps } from "@/types/components/icon"
const facilityToIconMap: { [key: string]: IconName } = {
Bar: IconName.Bar,
"Bikes for loan": IconName.Biking,
Gym: IconName.Fitness,
"Free WiFi": IconName.Wifi,
//TODO: Ask design team what icon(s) should be used for meetings.
"Meeting rooms": IconName.People2,
"Meeting / conference facilities": IconName.People2,
"Pet-friendly rooms": IconName.Pets,
Restaurant: IconName.Restaurant,
}
export function mapFacilityToIcon(facilityName: string): FC<IconProps> | null {
const iconName = facilityToIconMap[facilityName]
return getIconByIconName(iconName) || null
}

4
components/ContentType/HotelPage/hotelPage.module.css
View File

@@ -1,7 +1,7 @@
.pageContainer {
display: grid;
gap: var(--Spacing-x9);
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
padding: var(--Spacing-x5) var(--Spacing-x3) var(--Spacing-x4);
}
.introContainer {
@@ -13,7 +13,7 @@
@media screen and (min-width: 1367px) {
.pageContainer {
gap: var(--Spacing-x3);
padding-left: var(--Spacing-x5);
padding: var(--Spacing-x9) var(--Spacing-x5);
}
.introContainer {
display: grid;