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/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -4,9 +4,10 @@ import { type FieldError, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 
-import { ErrorCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
@@ -212,7 +213,11 @@ function CodeRulesModal() {
     <Modal
       trigger={
         <Button intent="text">
-          <InfoCircleIcon color="uiTextPlaceholder" height={20} width={20} />
+          <MaterialIcon
+            icon="info"
+            color="Icon/Interactive/Placeholder"
+            size={20}
+          />
         </Button>
       }
       title={codeVoucher}
@@ -257,8 +262,11 @@ function BookingCodeError({ codeError }: { codeError: FieldError }) {
   return (
     <div className={styles.errorContainer}>
       <Caption color={isInvalidErr ? "red" : "blue"} className={styles.error}>
-        <ErrorCircleIcon
-          color={isInvalidErr ? "red" : "blue"}
+        <MaterialIcon
+          icon="error"
+          color={
+            isInvalidErr ? "Icon/Feedback/Information" : "Icon/Feedback/Error"
+          }
           className={styles.errorIcon}
         />
         {intl.formatMessage({ id: codeError.message })}

apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx

@@ -4,9 +4,10 @@ import { useCallback, useEffect, useRef } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 
-import { InfoCircleIcon } from "@/components/Icons"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -87,7 +88,12 @@ export default function RewardNight() {
       {redemptionErr && (
         <div className={styles.errorContainer}>
           <Caption className={styles.error} type="regular" color="blue">
-            <InfoCircleIcon color="blue" className={styles.errorIcon} />
+            <MaterialIcon
+              icon="error"
+              size={24}
+              color="Icon/Feedback/Information"
+              className={styles.errorIcon}
+            />
             {intl.formatMessage({ id: redemptionErr.message })}
           </Caption>
           {isMultiRoomError ? <RemoveExtraRooms /> : null}

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { DeleteIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { buttonVariants } from "./variants"
@@ -32,7 +33,7 @@ export default function ClearSearchButton({
       tabIndex={0}
       type="button"
     >
-      <DeleteIcon color="burgundy" height={20} width={20} />
+      <MaterialIcon icon="delete" color="Icon/Interactive/Default" size={20} />
       <Caption color="burgundy" type="bold" asChild>
         <span>{intl.formatMessage({ id: "Clear searches" })}</span>
       </Caption>

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx

@@ -3,7 +3,8 @@ import { useEffect, useState } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { ErrorCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -71,7 +72,7 @@ export default function SearchList({
               variant="error"
             >
               <Caption className={styles.heading} color="red">
-                <ErrorCircleIcon color="red" />
+                <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
                 {intl.formatMessage({ id: "Enter destination or hotel" })}
               </Caption>
               <Body>
@@ -89,7 +90,7 @@ export default function SearchList({
               variant="error"
             >
               <Caption className={styles.heading} color="red">
-                <ErrorCircleIcon color="red" />
+                <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
                 {intl.formatMessage({ id: "No results" })}
               </Caption>
               <Body>

apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

@@ -2,11 +2,12 @@
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
 import DatePicker from "@/components/DatePicker"
 import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
-import { SearchIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -77,7 +78,7 @@ export default function FormContent({
             type="submit"
           >
             <span className={styles.icon}>
-              <SearchIcon color="white" width={28} height={28} />
+              <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
             </span>
           </Button>
         </div>
@@ -109,7 +110,7 @@ export default function FormContent({
               <span>{intl.formatMessage({ id: "Search" })}</span>
             </Caption>
             <span className={styles.icon}>
-              <SearchIcon color="white" width={28} height={28} />
+              <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
             </span>
           </Button>
         </div>
@@ -163,7 +164,7 @@ export function BookingWidgetFormContentSkeleton() {
             <span>{intl.formatMessage({ id: "Search" })}</span>
           </Caption>
           <span className={styles.icon}>
-            <SearchIcon color="white" width={28} height={28} />
+            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
           </span>
         </Button>
       </div>