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/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/index.tsx

@@ -3,15 +3,14 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
 import {
   AncillaryStepEnum,
   useAddAncillaryStore,
 } from "@/stores/my-stay/add-ancillary-flow"
 
-import { ChevronDownSmallIcon, ChevronUpSmallIcon } from "@/components/Icons"
-
-import { type  AncillaryFormData,quantitySchema } from "../../schema"
+import { type AncillaryFormData, quantitySchema } from "../../schema"
 
 import styles from "./actionButtons.module.css"
 
@@ -81,16 +80,16 @@ export default function ActionButtons({
         >
           {intl.formatMessage({ id: "Price details" })}
           {isPriceDetailsOpen ? (
-            <ChevronUpSmallIcon
-              width={20}
-              height={20}
-              color="baseButtonTextOnFillNormal"
+            <MaterialIcon
+              icon="keyboard_arrow_up"
+              size={20}
+              color="Icon/Interactive/Accent"
             />
           ) : (
-            <ChevronDownSmallIcon
-              width={20}
-              height={20}
-              color="baseButtonTextOnFillNormal"
+            <MaterialIcon
+              icon="keyboard_arrow_down"
+              size={20}
+              color="Icon/Interactive/Accent"
             />
           )}
         </Button>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx

@@ -1,11 +1,11 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
-import { DiamondIcon } from "@/components/Icons"
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import Select from "@/components/TempDesignSystem/Form/Select"
 
@@ -63,7 +63,7 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
           </Typography>
           <div className={styles.totalPointsContainer}>
             <div className={styles.totalPoints}>
-              <DiamondIcon />
+              <MaterialIcon icon="diamond" />
               <Typography variant="Title/Overline/sm">
                 <h2>{intl.formatMessage({ id: "Total points" })}</h2>
               </Typography>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx

@@ -1,9 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { trpc } from "@/lib/trpc/client"
 
 import Dialog from "@/components/Dialog"
-import { DeleteIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
@@ -34,7 +35,7 @@ export default function RemoveButton({
       titleText={`${intl.formatMessage({ id: "Remove" })} ${title}`}
       trigger={
         <Button intent="text" size="small" variant="icon" theme="base">
-          <DeleteIcon />
+          <MaterialIcon icon="delete" color="CurrentColor" />
           {intl.formatMessage({ id: "Remove" })}
         </Button>
       }

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx

@@ -1,7 +1,8 @@
 import { useRouter } from "next/navigation"
 import { useIntl } from "react-intl"
 
-import { CheckCircleIcon, EditIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Button from "@/components/TempDesignSystem/Button"
@@ -48,7 +49,12 @@ export function AddedAncillaries({
             <Accordion className={styles.ancillaryMobile}>
               <AccordionItem
                 title={ancillaryTitle}
-                icon={<CheckCircleIcon color="uiSemanticSuccess" />}
+                icon={
+                  <MaterialIcon
+                    icon="check_circle"
+                    color="Icon/Feedback/Success"
+                  />
+                }
               >
                 <div>
                   {ancillary.comment && (
@@ -84,7 +90,7 @@ export function AddedAncillaries({
                         variant="icon"
                         theme="base"
                       >
-                        <EditIcon />
+                        <MaterialIcon icon="edit_square" color="CurrentColor" />
                         {intl.formatMessage({ id: "Modify" })}
                       </Button>
                       <Divider
@@ -105,7 +111,10 @@ export function AddedAncillaries({
             <div className={styles.ancillaryDesktop}>
               <div className={styles.specification}>
                 <div className={styles.name}>
-                  <CheckCircleIcon color="uiSemanticSuccess" />
+                  <MaterialIcon
+                    icon="check_circle"
+                    color="Icon/Feedback/Success"
+                  />
                   <Body textTransform="bold">{ancillaryTitle}</Body>
                   <Body textTransform="bold">{`X${ancillary.totalUnit}`}</Body>
                 </div>
@@ -140,7 +149,7 @@ export function AddedAncillaries({
                       variant="icon"
                       theme="base"
                     >
-                      <EditIcon />
+                      <MaterialIcon icon="edit_square" color="CurrentColor" />
                       {intl.formatMessage({ id: "Modify" })}
                     </Button>
                     <Divider

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ViewAllAncillaries/index.tsx

@@ -1,8 +1,9 @@
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
-import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 export default function ViewAllAncillaries() {
@@ -17,11 +18,7 @@ export default function ViewAllAncillaries() {
       onClick={openModal}
     >
       {intl.formatMessage({ id: "View all" })}
-      <ChevronRightSmallIcon
-        width={20}
-        height={20}
-        color="baseButtonTextOnFillNormal"
-      />
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }