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>