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/HotelReservation/MyStay/SingleRoom/ToggleSidePeek.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"
 
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
@@ -35,7 +36,7 @@ export default function ToggleSidePeek({
       wrapping
     >
       {title ? title : intl.formatMessage({ id: "See room details" })}
-      <ChevronRight height="14" />
+      <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx

@@ -2,21 +2,16 @@
 
 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"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 
-import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
-import {
-  BedDoubleIcon,
-  BookingCodeIcon,
-  CoffeeIcon,
-  ContractIcon,
-  DoorOpenIcon,
-  PersonIcon,
-} from "@/components/Icons"
-import Refresh from "@/components/Icons/Refresh"
+import { IconForFeatureCode } from "@/components/HotelReservation/utils"
 import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import IconChip from "@/components/TempDesignSystem/IconChip"
@@ -168,10 +163,13 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                     )
                   )
                   .map((item) => {
-                    const Icon = getIconForFeatureCode(item.code)
                     return (
                       <span className={styles.package} key={item.code}>
-                        <Icon width={16} height={16} color="burgundy" />
+                        <IconForFeatureCode
+                          featureCode={item.code}
+                          size={16}
+                          color="Icon/Interactive/Default"
+                        />
                       </span>
                     )
                   })}
@@ -191,7 +189,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
               <div className={styles.bookingDetails}>
                 <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>
@@ -208,7 +210,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                 </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>
@@ -223,7 +229,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                 </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>
@@ -241,7 +251,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                 </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>
@@ -263,7 +277,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                 {hasPackages && (
                   <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" })}
@@ -289,7 +307,7 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
 
                 <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>
@@ -318,7 +336,10 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
           </div>
           <div className={styles.bookingInformation}>
             {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>