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/EnterDetails/BedType/index.tsx

@@ -18,8 +18,9 @@ import { bedTypeFormSchema } from "./schema"
 
 import styles from "./bedOptions.module.css"
 
+import type { IconProps } from "@scandic-hotels/design-system/Icons"
+
 import type { BedTypeFormSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type { IconProps } from "@/types/components/icon"
 
 export default function BedType() {
   const {
@@ -113,10 +114,8 @@ function BedIconRenderer({
 
   return (
     <div className={`${props.className} ${styles.iconContainer}`}>
-      <MainBedIcon height={32} color="uiTextMediumContrast" />
-      {ExtraBedIcon && (
-        <ExtraBedIcon height={32} color="uiTextMediumContrast" />
-      )}
+      <MainBedIcon size={32} />
+      {ExtraBedIcon && <ExtraBedIcon size={32} />}
     </div>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -5,11 +5,11 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { PaymentMethodEnum } from "@/constants/booking"
 
-import { InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
@@ -56,11 +56,7 @@ export default function ConfirmBooking({
             className={styles.infoButton}
             onPress={() => setModalOpen(true)}
           >
-            <InfoCircleIcon
-              width={20}
-              height={20}
-              color="uiTextMediumContrast"
-            />
+            <MaterialIcon icon="info" size={20} color="CurrentColor" />
             {intl.formatMessage({ id: "How does it work" })}
           </Button>
 

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CheckIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -65,7 +66,12 @@ export default function JoinScandicFriendsCard({
             className={styles.listItem}
             color="uiTextPlaceholder"
           >
-            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+            <MaterialIcon
+              icon="check"
+              size={20}
+              color="Icon/Interactive/Placeholder"
+            />
+            {item.title}
           </Caption>
         ))}
       </div>

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { privacyPolicy } from "@/constants/currentWebHrefs"
 
-import { CheckIcon } from "@/components/Icons"
 import LoginButton from "@/components/LoginButton"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
@@ -85,7 +86,12 @@ export default function JoinScandicFriendsCard({
             color="uiTextPlaceholder"
             className={styles.listItem}
           >
-            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+            <MaterialIcon
+              icon="check"
+              color="Icon/Interactive/Placeholder"
+              size={20}
+            />
+            {item.title}
           </Caption>
         ))}
       </div>

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { MagicWandIcon } from "@/components/Icons"
+import { MagicWandIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"

apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { ChevronDownIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Divider from "@/components/TempDesignSystem/Divider"
 import TextArea from "@/components/TempDesignSystem/Form/TextArea"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -28,7 +29,7 @@ export default function SpecialRequests() {
         >
           {intl.formatMessage({ id: "Special requests" })}
         </Footnote>
-        <ChevronDownIcon className={styles.chevron} />
+        <MaterialIcon icon="keyboard_arrow_down" className={styles.chevron} />
         <Divider className={styles.divider} color="subtle" />
       </button>
       <div className={styles.content}>

apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx

@@ -1,9 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./header.module.css"
@@ -29,7 +30,7 @@ export default function ToggleSidePeek({
       className={styles.toggle}
     >
       {intl.formatMessage({ id: "See hotel details" })}
-      <ChevronRight height="14" color="white" />
+      <MaterialIcon icon="chevron_right" size={14} color="Icon/Inverted" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx

@@ -1,6 +1,7 @@
 import { useIntl } from "react-intl"
 
-import ChevronDown from "@/components/Icons/ChevronDown"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -13,7 +14,11 @@ export default function GuaranteeDetails() {
       <Caption color="burgundy" type="bold" asChild>
         <summary className={styles.summary}>
           {intl.formatMessage({ id: "How it works" })}
-          <ChevronDown color="burgundy" height={16} />
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            color="Icon/Interactive/Default"
+            size={16}
+          />
         </summary>
       </Caption>
       <section className={styles.content}>

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -9,7 +9,8 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { ChevronRightSmallIcon, CloseLargeIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -50,7 +51,7 @@ export default function PriceChangeSummary({
         onClick={() => toggleOpen((isOpen) => !isOpen)}
       >
         {intl.formatMessage({ id: "See price details" })}
-        <ChevronRightSmallIcon />
+        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
       </Button>
       <ModalOverlay isOpen={isOpen} onOpenChange={toggleOpen}>
         <Modal>
@@ -66,7 +67,7 @@ export default function PriceChangeSummary({
                     variant="clean"
                     className={styles.closeButton}
                   >
-                    <CloseLargeIcon height={20} width={20} />
+                    <MaterialIcon icon="close" size={20} color="CurrentColor" />
                   </Button>
                 </header>
                 <section>

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx

@@ -1,9 +1,10 @@
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { InfoCircleIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -75,7 +76,11 @@ export default function PriceChangeDialog({
         <Dialog aria-label={title} className={styles.dialog}>
           <header className={styles.header}>
             <div className={styles.titleContainer}>
-              <InfoCircleIcon height={48} width={48} color="burgundy" />
+              <MaterialIcon
+                icon="info"
+                size={48}
+                color="Icon/Interactive/Default"
+              />
               <Title
                 level="h1"
                 as="h3"

apps/scandic-web/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -2,7 +2,8 @@
 import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -108,7 +109,7 @@ export default function SectionAccordion({
       <div className={styles.iconWrapper}>
         <div className={styles.circle} data-checked={isStepComplete}>
           {isStepComplete ? (
-            <CheckIcon color="white" height="16" width="16" />
+            <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
           ) : null}
         </div>
       </div>
@@ -131,9 +132,10 @@ export default function SectionAccordion({
             {title}
           </Subtitle>
           {isStepComplete && (
-            <ChevronDownIcon
+            <MaterialIcon
+              icon="keyboard_arrow_down"
               className={`${styles.button} ${isOpen ? styles.buttonOpen : ""}`}
-              color="burgundy"
+              color="Icon/Interactive/Default"
             />
           )}
         </button>

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"
 
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
@@ -31,7 +32,7 @@ export default function ToggleSidePeek({
       wrapping
     >
       {title ? title : intl.formatMessage({ id: "See room details" })}
-      <ChevronRight height="14" />
+      <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -4,10 +4,11 @@ import { useRouter } from "next/navigation"
 import { useTransition } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { selectRate } from "@/constants/routes/hotelReservation"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { CheckIcon, EditIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -43,7 +44,7 @@ export default function SelectedRoom() {
     <div className={styles.wrapper} data-available={room.isAvailable}>
       <div className={styles.iconWrapper}>
         <div className={styles.circle}>
-          <CheckIcon color="white" height="16" width="16" />
+          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
         </div>
       </div>
       <div className={styles.main}>
@@ -80,7 +81,7 @@ export default function SelectedRoom() {
             onClick={changeRoom}
             disabled={isPending}
           >
-            <EditIcon color="burgundy" />
+            <MaterialIcon icon="edit_square" color="CurrentColor" />
             <Caption color="burgundy" type="bold">
               {intl.formatMessage({ id: "Change room" })}
             </Caption>

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx

@@ -3,9 +3,10 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { PriceTagIcon } from "@/components/Icons"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
@@ -299,7 +300,7 @@ export default function PriceDetailsTable({
         {bookingCode && totalPrice.local.regularPrice && (
           <tr className={styles.row}>
             <td>
-              <PriceTagIcon />
+              <MaterialIcon icon="sell" />
               {bookingCode}
             </td>
             <td></td>

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -3,16 +3,12 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
-import {
-  ArrowRightIcon,
-  CheckIcon,
-  ChevronDownSmallIcon,
-  PriceTagIcon,
-} from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -92,7 +88,11 @@ export default function SummaryUI({
         </Subtitle>
         <Body className={styles.date} color="baseTextMediumContrast">
           {dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
-          <ArrowRightIcon color="peach80" height={15} width={15} />
+          <MaterialIcon
+            icon="arrow_right"
+            color="Icon/Interactive/Secondary"
+            size={15}
+          />
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
         <Button
@@ -101,7 +101,11 @@ export default function SummaryUI({
           className={styles.chevronButton}
           onClick={handleToggleSummary}
         >
-          <ChevronDownSmallIcon height="20" width="20" />
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            size={20}
+            color="CurrentColor"
+          />
         </Button>
       </header>
       <Divider color="primaryLightSubtle" />
@@ -216,12 +220,12 @@ export default function SummaryUI({
                         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>
                     ))}
@@ -434,7 +438,7 @@ export default function SummaryUI({
         </div>
         {booking.bookingCode && (
           <div>
-            <PriceTagIcon />
+            <MaterialIcon icon="sell" />
             {booking.bookingCode}
           </div>
         )}