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/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { CalendarAddIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 export default function AddToCalendarButton({
@@ -13,7 +14,7 @@ export default function AddToCalendarButton({
 
   return (
     <Button intent="text" size="small" theme="base" wrapping onPress={onPress}>
-      <CalendarAddIcon />
+      <MaterialIcon icon="calendar_add_on" color="CurrentColor" />
       {intl.formatMessage({ id: "Add to calendar" })}
     </Button>
   )

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx

@@ -2,7 +2,8 @@
 import { useIntl } from "react-intl"
 import { useReactToPrint } from "react-to-print"
 
-import { DownloadIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice"
@@ -24,7 +25,7 @@ export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
       variant="icon"
       wrapping
     >
-      <DownloadIcon />
+      <MaterialIcon icon="download" color="CurrentColor" />
       {intl.formatMessage({ id: "Download invoice" })}
     </Button>
   )

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { EditIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 
@@ -20,7 +21,7 @@ export default function ManageBooking({ bookingUrl }: ManageBookingProps) {
       wrapping
     >
       <Link color="none" href={bookingUrl} weight="bold">
-        <EditIcon />
+        <MaterialIcon icon="edit_square" color="CurrentColor" />
         {intl.formatMessage({ id: "Manage booking" })}
       </Link>
     </Button>

apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx

@@ -2,11 +2,11 @@
 import React from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
-import { PriceTagIcon } from "@/components/Icons"
-import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -106,7 +106,7 @@ export default function PriceDetailsModal() {
           <Caption color="burgundy">
             {intl.formatMessage({ id: "Price details" })}
           </Caption>
-          <ChevronRightSmallIcon color="burgundy" height="20px" width="20px" />
+          <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
         </Button>
       }
     >
@@ -220,7 +220,7 @@ export default function PriceDetailsModal() {
           {bookingCode && (
             <tr className={styles.row}>
               <td>
-                <PriceTagIcon />
+                <MaterialIcon icon="sell" />
                 {bookingCode}
               </td>
               <td></td>

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx

@@ -2,10 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { CancellationRuleEnum, ChildBedTypeEnum } from "@/constants/booking"
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
@@ -77,7 +78,7 @@ export default function ReceiptRoom({
                 variant="icon"
               >
                 {intl.formatMessage({ id: "Reservation policy" })}
-                <InfoCircleIcon color="peach80" />
+                <MaterialIcon icon="info" color="CurrentColor" />
               </Link>
             </Button>
           }
@@ -96,12 +97,12 @@ export default function ReceiptRoom({
                 color="uiTextHighContrast"
                 className={styles.termsText}
               >
-                <CheckIcon
-                  color="uiSemanticSuccess"
-                  width={20}
-                  height={20}
+                <MaterialIcon
+                  icon="check"
+                  color="Icon/Feedback/Success"
+                  size={20}
                   className={styles.termsIcon}
-                ></CheckIcon>
+                />
                 {info}
               </Body>
             ))}

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -2,16 +2,12 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { CancellationRuleEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 
-import {
-  CheckCircleIcon,
-  ChevronRightSmallIcon,
-  CrossCircle,
-} from "@/components/Icons"
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -42,14 +38,22 @@ export default function Room({ booking, img, roomName }: RoomProps) {
         <div className={styles.benefits}>
           {booking.rateDefinition.isMemberRate ? (
             <>
-              <CheckCircleIcon color="green" height={20} width={20} />
+              <MaterialIcon
+                color="Icon/Feedback/Success"
+                icon="check_circle"
+                size={20}
+              />
               <Caption>
                 {intl.formatMessage({ id: "Membership benefits applied" })}
               </Caption>
             </>
           ) : (
             <>
-              <CrossCircle color="red" height={20} width={20} />
+              <MaterialIcon
+                color="Icon/Interactive/Accent"
+                icon="cancel"
+                size={20}
+              />
               <Caption>
                 {intl.formatMessage({ id: "No membership benefits applied" })}
               </Caption>
@@ -58,7 +62,11 @@ export default function Room({ booking, img, roomName }: RoomProps) {
         </div>
         {booking.guaranteeInfo && (
           <div className={styles.benefits}>
-            <CheckCircleIcon color="green" height={20} width={20} />
+            <MaterialIcon
+              icon="check"
+              color="Icon/Feedback/Success"
+              size={20}
+            />
             <Typography variant="Body/Supporting text (caption)/smRegular">
               <p>
                 <strong>
@@ -90,7 +98,11 @@ export default function Room({ booking, img, roomName }: RoomProps) {
             </Subtitle>
             <Link color="burgundy" href="" variant="icon">
               {intl.formatMessage({ id: "View room details" })}
-              <ChevronRightSmallIcon color="burgundy" />
+              <MaterialIcon
+                icon="chevron_right"
+                size={20}
+                color="CurrentColor"
+              />
             </Link>
           </div>
           <ul className={styles.details}>