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/TempDesignSystem/Alert/Sidepeek/index.tsx

@@ -2,7 +2,8 @@
 
 import { useState } from "react"
 
-import { ChevronRightIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import JsonToHtml from "@/components/JsonToHtml"
 import Button from "@/components/TempDesignSystem/Button"
 
@@ -30,7 +31,7 @@ export default function AlertSidepeek({
         wrapping
       >
         {ctaText}
-        <ChevronRightIcon height={20} width={20} />
+        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
       </Button>
 
       <SidePeek

apps/scandic-web/components/TempDesignSystem/Alert/index.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
-import { CloseLargeIcon } from "@/components/Icons"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import Link from "../Link"
@@ -42,7 +42,7 @@ export default function Alert({
     <section className={classNames} role={ariaRole} aria-live={ariaLive}>
       <div className={styles.content}>
         <span className={styles.iconWrapper}>
-          <Icon className={styles.icon} width={24} height={24} />
+          <Icon className={styles.icon} size={24} />
         </span>
         <div className={styles.innerContent}>
           <div className={styles.textWrapper}>
@@ -91,7 +91,7 @@ export default function Alert({
         </div>
         {close ? (
           <Button onPress={close} variant="Text" className={styles.closeButton}>
-            <CloseLargeIcon height={24} width={24} color="uiTextPlaceholder" />
+            <MaterialIcon icon="close" color="CurrentColor" />
           </Button>
         ) : null}
       </div>

apps/scandic-web/components/TempDesignSystem/Alert/utils.ts

@@ -1,17 +0,0 @@
-import { InfoCircleIcon } from "@/components/Icons"
-import CrossCircleIcon from "@/components/Icons/CrossCircle"
-import WarningTriangleIcon from "@/components/Icons/WarningTriangle"
-
-import { AlertTypeEnum } from "@/types/enums/alert"
-
-export function getIconByAlertType(alertType: AlertTypeEnum) {
-  switch (alertType) {
-    case AlertTypeEnum.Alarm:
-      return CrossCircleIcon
-    case AlertTypeEnum.Warning:
-      return WarningTriangleIcon
-    case AlertTypeEnum.Info:
-    default:
-      return InfoCircleIcon
-  }
-}

apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/display-name */
+import {
+  MaterialIcon,
+  type MaterialIconSetIconProps,
+} from "@scandic-hotels/design-system/Icons"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export function getIconByAlertType(alertType: AlertTypeEnum) {
+  switch (alertType) {
+    case AlertTypeEnum.Alarm:
+      return function (props: MaterialIconSetIconProps) {
+        return (
+          <MaterialIcon
+            color="Icon/Inverted"
+            isFilled
+            icon="cancel"
+            {...props}
+          />
+        )
+      }
+    case AlertTypeEnum.Warning:
+      return function (props: MaterialIconSetIconProps) {
+        return (
+          <MaterialIcon
+            icon="warning"
+            color="Icon/Inverted"
+            isFilled
+            {...props}
+          />
+        )
+      }
+    case AlertTypeEnum.Info:
+    default:
+      return function (props: MaterialIconSetIconProps) {
+        return (
+          <MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
+        )
+      }
+  }
+}