Merged in feat/SW-2528-restaurant-icons-sidepeek (pull request #2610)

feat(SW-2528): add restaurant type icon to sidepeek

* feat(SW-2528): add restaurant type icon to sidepeek


Approved-by: Anton Gunnarsson

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

@@ -9,6 +9,7 @@ import { appendSlugToPathname } from "@/utils/appendSlugToPathname"
 import { trackClick } from "@/utils/tracking"
 
 import SidePeekImages from "../../Images"
+import { getRestaurantIconName } from "./utils"
 
 import styles from "./restaurantBarItem.module.css"
 
@@ -26,6 +27,7 @@ export default async function RestaurantBarItem({
     menus,
     restaurantPage,
     mainBody,
+    type,
   } = restaurant
   const visibleImages = restaurant.content.images.slice(0, 2)
 
@@ -36,8 +38,9 @@ export default async function RestaurantBarItem({
   return (
     <div className={styles.restaurantBarItem}>
       <div className={styles.stickyHeading}>
+        <MaterialIcon icon={getRestaurantIconName(type)} color="CurrentColor" />
         <Typography variant="Title/Subtitle/lg">
-          <h3 className={styles.heading}>{name}</h3>
+          <h3>{name}</h3>
         </Typography>
       </div>
       {visibleImages.length ? <SidePeekImages images={visibleImages} /> : null}

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/restaurantBarItem.module.css

@@ -6,6 +6,10 @@
 .stickyHeading {
   position: sticky;
   top: 0;
+  display: flex;
+  gap: var(--Space-x1);
+  color: var(--Text-Interactive-Default);
+  align-items: center;
 }
 /* Hack to make it look like the heading has a background which covers the top of the sidepeek */
 .stickyHeading::before {

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/utils.tsx

@@ -0,0 +1,30 @@
+import { logger } from "@scandic-hotels/common/logger"
+
+import type { MaterialIconProps } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import { RestaurantTypes } from "@/types/enums/restaurants"
+
+export function getRestaurantIconName(type: string): MaterialIconProps["icon"] {
+  switch (type) {
+    case RestaurantTypes.Restaurant:
+      return "restaurant"
+
+    case RestaurantTypes.Bar:
+    case RestaurantTypes.RooftopBar:
+    case RestaurantTypes.SkyBar:
+      return "local_bar"
+
+    case RestaurantTypes.Cafe:
+      return "local_cafe"
+
+    case RestaurantTypes.OutdoorTerrace:
+      return "deck"
+
+    case RestaurantTypes.Other:
+      return "brunch_dining"
+
+    default:
+      logger.warn("Unsupported restaurant type")
+      return "restaurant"
+  }
+}

apps/scandic-web/types/enums/restaurants.ts

@@ -0,0 +1,9 @@
+export enum RestaurantTypes {
+  Restaurant = "Restaurant",
+  Bar = "Bar",
+  RooftopBar = "RooftopBar",
+  SkyBar = "SkyBar",
+  Cafe = "Cafe",
+  OutdoorTerrace = "OutdoorTerrace",
+  Other = "Other",
+}