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/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/index.tsx

@@ -1,9 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useRatesStore } from "@/stores/select-rate"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Label from "@/components/TempDesignSystem/Form/Label"
@@ -57,7 +58,11 @@ export default function FlexibilityOption({
     return (
       <div className={styles.noPricesCard}>
         <div className={styles.header}>
-          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
+          <MaterialIcon
+            icon="info"
+            size={16}
+            color="Icon/Interactive/Placeholder"
+          />
           <div className={styles.priceType}>
             <Caption>{title}</Caption>
             <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
@@ -108,10 +113,10 @@ export default function FlexibilityOption({
           <Modal
             trigger={
               <Button intent="text">
-                <InfoCircleIcon
-                  width={16}
-                  height={16}
-                  color="uiTextMediumContrast"
+                <MaterialIcon
+                  icon="info"
+                  size={16}
+                  color="Icon/Interactive/Placeholder"
                 />
               </Button>
             }
@@ -125,12 +130,12 @@ export default function FlexibilityOption({
                   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>
               ))}
@@ -149,7 +154,7 @@ export default function FlexibilityOption({
         />
 
         <div className={styles.checkIcon}>
-          <CheckIcon color="white" height="16" width="16" />
+          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
         </div>
       </div>
     </label>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionCheque/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -71,11 +72,7 @@ export default function FlexibilityOptionCheque({
           <Modal
             trigger={
               <Button intent="text">
-                <InfoCircleIcon
-                  width={16}
-                  height={16}
-                  color="uiTextMediumContrast"
-                />
+                <MaterialIcon icon="info" size={16} color="Icon/Default" />
               </Button>
             }
             title={chequeRateName}
@@ -88,12 +85,12 @@ export default function FlexibilityOptionCheque({
                   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>
               ))}
@@ -110,7 +107,7 @@ export default function FlexibilityOptionCheque({
         />
 
         <div className={styles.checkIcon}>
-          <CheckIcon color="white" height="16" width="16" />
+          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
         </div>
       </div>
     </label>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionPoints/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Label from "@/components/TempDesignSystem/Form/Label"
@@ -38,7 +39,7 @@ export default function FlexibilityOptionPoints({
     return (
       <div className={styles.noPricesCard}>
         <div className={styles.header}>
-          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
+          <MaterialIcon icon="info" size={16} />
           <div className={styles.priceType}>
             <Caption>{title}</Caption>
             <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
@@ -79,11 +80,7 @@ export default function FlexibilityOptionPoints({
           <Modal
             trigger={
               <Button intent="text">
-                <InfoCircleIcon
-                  width={16}
-                  height={16}
-                  color="uiTextMediumContrast"
-                />
+                <MaterialIcon icon="info" size={16} />
               </Button>
             }
             title={rewardNightTitle}
@@ -97,10 +94,10 @@ export default function FlexibilityOptionPoints({
                     color="uiTextHighContrast"
                     className={styles.termsText}
                   >
-                    <CheckIcon
-                      color="uiSemanticSuccess"
-                      width={20}
-                      height={20}
+                    <MaterialIcon
+                      icon="check"
+                      color="Icon/Feedback/Success"
+                      size={20}
                       className={styles.termsIcon}
                     />
                     {info}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionVoucher/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -70,11 +71,7 @@ export default function FlexibilityOptionVoucher({
           <Modal
             trigger={
               <Button intent="text">
-                <InfoCircleIcon
-                  width={16}
-                  height={16}
-                  color="uiTextMediumContrast"
-                />
+                <MaterialIcon icon="info" size={16} color="Icon/Default" />
               </Button>
             }
             title={voucherRateName}
@@ -87,12 +84,12 @@ export default function FlexibilityOptionVoucher({
                   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>
               ))}
@@ -109,7 +106,7 @@ export default function FlexibilityOptionVoucher({
         />
 
         <div className={styles.checkIcon}>
-          <CheckIcon color="white" height="16" width="16" />
+          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
         </div>
       </div>
     </label>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx

@@ -4,12 +4,13 @@ import { useSearchParams } from "next/navigation"
 import { createElement } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 import { useRatesStore } from "@/stores/select-rate"
 
 import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
-import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
-import { ErrorCircleIcon, PriceTagIcon } from "@/components/Icons"
+import { IconForFeatureCode } from "@/components/HotelReservation/utils"
 import ImageGallery from "@/components/ImageGallery"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -19,8 +20,8 @@ import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import { cardVariants } from "./cardVariants"
 import FlexibilityOption from "./FlexibilityOption"
-import FlexibilityOptionPoints from "./FlexibilityOptionPoints"
 import FlexibilityOptionCheque from "./FlexibilityOptionCheque"
+import FlexibilityOptionPoints from "./FlexibilityOptionPoints"
 import FlexibilityOptionVoucher from "./FlexibilityOptionVoucher"
 import RoomSize from "./RoomSize"
 
@@ -211,11 +212,12 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
             .filter((feature) => selectedPackage === feature.code)
             .map((feature) => (
               <span className={styles.chip} key={feature.code}>
-                {createElement(getIconForFeatureCode(feature.code), {
-                  color: "burgundy",
-                  height: 16,
-                  width: 16,
-                })}
+                {createElement(() => (
+                  <IconForFeatureCode
+                    featureCode={feature.code}
+                    color={"Icon/Interactive/Default"}
+                  />
+                ))}
               </span>
             ))}
         </div>
@@ -271,7 +273,11 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
             <div></div>
             <div className={styles.noRoomsContainer}>
               <div className={styles.noRooms}>
-                <ErrorCircleIcon color="red" width={16} />
+                <MaterialIcon
+                  icon="error"
+                  color="Icon/Interactive/Accent"
+                  size={16}
+                />
                 <Caption color="uiTextHighContrast" type="bold">
                   {intl.formatMessage({
                     id: "This room is not available",
@@ -288,7 +294,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
               )}
               {bookingCode ? (
                 <span className={!isBookingCodeRate ? styles.strikedText : ""}>
-                  <PriceTagIcon />
+                  <MaterialIcon icon="sell" />
                   {bookingCode}
                 </span>
               ) : null}
@@ -315,15 +321,18 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
                 roomTypeCode: roomConfiguration.roomTypeCode,
                 title: rateTitle,
                 rateName:
-                  isBookingCodeRate || isRedemption ||
+                  isBookingCodeRate ||
+                  isRedemption ||
                   product.voucher ||
                   product.bonusCheque
                     ? rateDefinition?.title
                     : undefined,
               }
-              return (<>
-                  {isRedemption &&
-                  <FlexibilityOptionPoints key={product.rate} {...props} />}
+              return (
+                <>
+                  {isRedemption && (
+                    <FlexibilityOptionPoints key={product.rate} {...props} />
+                  )}
                   {product.voucher ? (
                     <FlexibilityOptionVoucher
                       key={product.rate}