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

2024-07-05 21:00:50 +02:00
parent 26815cc9bc
commit cfc4aca561
10 changed files with 110 additions and 16 deletions
--- a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
+++ b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
@@ -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);
  }
 }
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -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}
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -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}
--- a/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -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);
+  }
+}
--- a/components/ContentType/HotelPage/data.ts
+++ b/components/ContentType/HotelPage/data.ts
@@ -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
+}
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -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;
--- a/components/Icons/People2.tsx
+++ b/components/Icons/People2.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function People2Icon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_75_294"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_75_294)">
+        <path
+          d="M1 20V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V20H1ZM19 20V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V20H19ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -25,6 +25,7 @@ import {
  LocationIcon,
  LockIcon,
  ParkingIcon,
+  People2Icon,
  PersonIcon,
  PetsIcon,
  PhoneIcon,
@@ -88,6 +89,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return ParkingIcon
    case IconName.Person:
      return PersonIcon
+    case IconName.People2:
+      return People2Icon
    case IconName.Pets:
      return PetsIcon
    case IconName.Phone:
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -22,6 +22,7 @@ export { default as InfoCircleIcon } from "./InfoCircle"
 export { default as LocationIcon } from "./Location"
 export { default as LockIcon } from "./Lock"
 export { default as ParkingIcon } from "./Parking"
+export { default as People2Icon } from "./People2"
 export { default as PersonIcon } from "./Person"
 export { default as PetsIcon } from "./Pets"
 export { default as PhoneIcon } from "./Phone"
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -32,6 +32,7 @@ export enum IconName {
  Lock = "Lock",
  Parking = "Parking",
  Person = "Person",
+  People2 = "People2",
  Pets = "Pets",
  Phone = "Phone",
  PlusCircle = "PlusCircle",