Merged in feat/SW-1711-switch-icons (pull request #1558)

Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/RoomDetails.tsx

@@ -2,10 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { getBedIcon } from "../RoomSidePeek/bedIcon"
-import { getFacilityIcon } from "../RoomSidePeek/facilityIcon"
+import { getBedIconName } from "../RoomSidePeek/bedIcon"
+import { FacilityIcon } from "../RoomSidePeek/facilityIcon"
 
 import styles from "./bookedRoomSidePeek.module.css"
 
@@ -21,13 +22,13 @@ export default function RoomDetails({
   const sortedFacilities = roomFacilities
     .sort((a, b) => a.sortOrder - b.sortOrder)
     .map((facility) => {
-      const Icon = getFacilityIcon(facility.icon)
+      const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" />
       return { ...facility, Icon }
     })
 
   const bedOptions = roomTypes.map((roomType) => {
-    const BedIcon = getBedIcon(roomType.mainBed.type)
-    return { ...roomType, BedIcon }
+    const bedIconName = getBedIconName(roomType.mainBed.type)
+    return { ...roomType, bedIconName }
   })
 
   return (
@@ -44,9 +45,7 @@ export default function RoomDetails({
         <ul className={styles.facilityList}>
           {sortedFacilities.map(({ name, Icon }) => (
             <li key={name}>
-              {Icon && (
-                <Icon width={24} height={24} color="uiTextMediumContrast" />
-              )}
+              {Icon && Icon}
               <Typography variant="Body/Paragraph/mdRegular">
                 <span className={styles.listText}>{name}</span>
               </Typography>
@@ -66,11 +65,9 @@ export default function RoomDetails({
           </p>
         </Typography>
         <ul className={styles.bedOptions}>
-          {bedOptions.map(({ code, mainBed, BedIcon }) => (
+          {bedOptions.map(({ code, mainBed, bedIconName }) => (
             <li key={code}>
-              {BedIcon && (
-                <BedIcon color="uiTextMediumContrast" width={24} height={24} />
-              )}
+              <MaterialIcon icon={bedIconName} color="Icon/Default" size={24} />
               <Typography variant="Body/Paragraph/mdRegular">
                 <span className={styles.listText}>{mainBed.description}</span>
               </Typography>

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx

@@ -1,5 +1,9 @@
 import { useIntl } from "react-intl"
 
+import {
+  Discount22Icon,
+  MaterialIcon,
+} from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
@@ -8,16 +12,6 @@ import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsSto
 import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
 import Price from "@/components/HotelReservation/MyStay/Price"
 import { hasBreakfastPackage } from "@/components/HotelReservation/MyStay/utils/hasBreakfastPackage"
-import {
-  BedDoubleIcon,
-  BookingCodeIcon,
-  CoffeeIcon,
-  ContractIcon,
-  DoorOpenIcon,
-  PersonIcon,
-} from "@/components/Icons"
-import CrossCircleIcon from "@/components/Icons/CrossCircle"
-import Refresh from "@/components/Icons/Refresh"
 import ImageGallery from "@/components/ImageGallery"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
@@ -113,7 +107,13 @@ export default function BookedRoomSidePeek({
           {isCancelled ? (
             <IconChip
               color={"red"}
-              icon={<CrossCircleIcon width={20} height={20} color="red" />}
+              icon={
+                <MaterialIcon
+                  icon="cancel"
+                  size={20}
+                  color="Icon/Feedback/Error"
+                />
+              }
             >
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <span>{intl.formatMessage({ id: "Cancelled" })}</span>
@@ -161,7 +161,7 @@ export default function BookedRoomSidePeek({
           <div className={styles.roomDetails}>
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <PersonIcon color="grey80" width={20} height={20} />
+                <MaterialIcon icon="person" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Guests" })}</p>
                 </Typography>
@@ -178,7 +178,7 @@ export default function BookedRoomSidePeek({
             </div>
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <ContractIcon color="grey80" width={20} height={20} />
+                <MaterialIcon icon="contract" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Terms" })}</p>
                 </Typography>
@@ -191,7 +191,7 @@ export default function BookedRoomSidePeek({
             </div>
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <Refresh color="grey80" width={20} height={20} />
+                <MaterialIcon icon="refresh" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Modify By" })}</p>
                 </Typography>
@@ -209,7 +209,7 @@ export default function BookedRoomSidePeek({
             </div>
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <CoffeeIcon color="grey80" width={20} height={20} />
+                <MaterialIcon icon="coffee" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Breakfast" })}</p>
                 </Typography>
@@ -236,7 +236,11 @@ export default function BookedRoomSidePeek({
             ) && (
               <div className={styles.row}>
                 <span className={styles.rowTitle}>
-                  <DoorOpenIcon color="grey80" width={20} height={20} />
+                  <MaterialIcon
+                    icon="meeting_room"
+                    color="Icon/Default"
+                    size={20}
+                  />
                   <Typography variant="Body/Paragraph/mdBold">
                     <p>{intl.formatMessage({ id: "Room classification" })}</p>
                   </Typography>
@@ -260,7 +264,7 @@ export default function BookedRoomSidePeek({
 
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <BedDoubleIcon color="grey80" width={20} height={20} />
+                <MaterialIcon icon="bed" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Bed preference" })}</p>
                 </Typography>
@@ -289,7 +293,10 @@ export default function BookedRoomSidePeek({
             </div>
           </div>
           {bookingCode && (
-            <IconChip color={"blue"} icon={<BookingCodeIcon color="blue" />}>
+            <IconChip
+              color="blue"
+              icon={<Discount22Icon color="Icon/Feedback/Information" />}
+            >
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <p className={styles.bookingCode}>
                   <strong>{intl.formatMessage({ id: "Booking code" })}</strong>