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/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx

@@ -2,11 +2,11 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { partnerSas } from "@/constants/routes/myPages"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
@@ -18,7 +18,7 @@ export function AlreadyLinkedError() {
 
   return (
     <SASModal>
-      <ErrorCircleFilledIcon height={64} width={64} color="red" />
+      <MaterialIcon icon="cancel" isFilled size={64} />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Accounts are already linked" })}</h1>
       </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx

@@ -2,11 +2,11 @@
 import { Link } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { profile } from "@/constants/routes/myPages"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
@@ -18,7 +18,12 @@ export function DateOfBirthError() {
 
   return (
     <SASModal>
-      <ErrorCircleFilledIcon height={64} width={64} color="red" />
+      <MaterialIcon
+        icon="cancel"
+        color="Icon/Feedback/Error"
+        isFilled
+        size={64}
+      />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Date of birth not matching" })}</h1>
       </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/GenericError.tsx

@@ -1,10 +1,9 @@
 "use client"
 import Image from "next/image"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
-
 import { SASModal } from "./SASModal"
 
 import type { ReactNode } from "react"
@@ -21,7 +20,12 @@ export function GenericError({
   return (
     <SASModal>
       {variant === "error" ? (
-        <ErrorCircleFilledIcon height={64} width={64} color="red" />
+        <MaterialIcon
+          icon="cancel"
+          isFilled
+          size={64}
+          color="Icon/Feedback/Error"
+        />
       ) : (
         <Image
           src="/_static/img/scandic-loyalty-time.svg"

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx

@@ -6,11 +6,11 @@ import { useTransition } from "react"
 import { FormProvider, useForm } 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 { profileEdit } from "@/constants/routes/myPages"
 
-import { ArrowRightIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
@@ -94,7 +94,8 @@ export function LinkAccountForm({
             {intl.formatMessage({
               id: "Edit your personal details",
             })}
-            <ArrowRightIcon color="peach80" height={18} width={18} />
+
+            <MaterialIcon icon="arrow_forward" size={18} color="CurrentColor" />
           </Link>
         </div>
         <div className={styles.termsAndConditions}>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/success/page.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { partnerSas } from "@/constants/routes/myPages"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
 import { Redirect } from "@/components/Redirect"
 import { getIntl } from "@/i18n"
 
@@ -20,7 +20,11 @@ export default async function SASxScandicLinkPage({
   return (
     <SASModal>
       <Redirect url={partnerSas[params.lang]} timeout={3000} />
-      <CheckCircle height={64} width={64} color="uiSemanticSuccess" />
+      <MaterialIcon
+        icon="check_circle"
+        size={64}
+        color="Icon/Feedback/Success"
+      />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Your accounts are linked" })}</h1>
       </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx

@@ -6,11 +6,11 @@ import { useParams, useRouter } from "next/navigation"
 import { type ReactNode, useState, useTransition } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { trpc } from "@/lib/trpc/client"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Link from "@/components/TempDesignSystem/Link"
 
 import { GenericError } from "../components/GenericError"
@@ -170,7 +170,12 @@ export default function OneTimePasswordForm({
       />
       {errorMessage && (
         <div className={styles["error-message"]}>
-          <ErrorCircleFilledIcon height={20} width={20} color="red" />
+          <MaterialIcon
+            icon="cancel"
+            isFilled
+            size={20}
+            color="Icon/Feedback/Error"
+          />
           <Typography variant="Body/Supporting text (caption)/smRegular">
             <p style={{ color: "var(--Scandic-Red-60)" }}>{errorMessage}</p>
           </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx

@@ -1,13 +1,13 @@
 import Link from "next/link"
 import React, { Suspense } from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { hotelreservation } from "@/constants/routes/hotelReservation"
 import { partnerSas } from "@/constants/routes/myPages"
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
-import { CalendarAddIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
@@ -129,7 +129,11 @@ async function TransactionCard({
             {/* TODO correct link */}
             <Link href={hotelreservation(lang)} color="none">
               {intl.formatMessage({ id: "Book now" })}{" "}
-              <CalendarAddIcon width={20} height={20} color="currentColor" />
+              <MaterialIcon
+                icon="calendar_add_on"
+                size={20}
+                color="CurrentColor"
+              />
             </Link>
           </Button>
         </div>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/unlink/success/page.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { overview } from "@/constants/routes/myPages"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
 import { Redirect } from "@/components/Redirect"
 import { getIntl } from "@/i18n"
 
@@ -20,7 +20,11 @@ export default async function SASxScandicUnlinkSuccessPage({
   return (
     <SASModal>
       <Redirect url={overview[params.lang]} timeout={3000} />
-      <CheckCircle height={64} width={64} color="uiSemanticSuccess" />
+      <MaterialIcon
+        icon="check_circle"
+        size={64}
+        color="Icon/Feedback/Success"
+      />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Your accounts are now unlinked" })}</h1>
       </Typography>