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",
+}

packages/design-system/lib/fonts.css

@@ -269,7 +269,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(/_static/fonts/material-symbols/rounded-9290efcd.woff2)
+  src: url(/_static/fonts/material-symbols/rounded-93de53b3.woff2)
     format('woff2');
 }
 

packages/trpc/lib/routers/hotels/schemas/hotel/include/restaurants.ts

@@ -78,18 +78,19 @@ export const restaurantsSchema = z.object({
   attributes: z.object({
     bookTableUrl: nullableStringValidator,
     content: contentSchema,
+    elevatorPitch: z.string().optional(),
     email: z.string().email().optional(),
     externalBreakfast: externalBreakfastSchema,
     isPublished: z.boolean().default(false),
+    mainBody: z.string().optional(),
     menus: z.array(menuItemSchema).default([]),
     name: z.string().default(""),
+    nameInUrl: z.string().optional(),
     openingDetails: z.array(openingDetailsSchema).default([]),
     phoneNumber: z.string().optional(),
     restaurantPage: z.boolean().default(false),
-    elevatorPitch: z.string().optional(),
-    nameInUrl: z.string().optional(),
-    mainBody: z.string().optional(),
     specialAlerts: specialAlertsSchema,
+    type: z.string(),
   }),
   id: z.string(),
   type: z.literal("restaurants"),

scripts/material-symbols-update.mjs

@@ -74,6 +74,7 @@ const icons = [
   'confirmation_number',
   'connected_tv',
   'content_copy',
+  'brunch_dining',
   'contract',
   'cool_to_dry',
   'countertops',