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/Header/MainMenu/Avatar/index.tsx

@@ -1,4 +1,5 @@
-import { PersonIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Image from "@/components/Image"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
@@ -8,7 +9,7 @@ import type { AvatarProps } from "@/types/components/header/avatar"
 
 export default function Avatar({ image, initials }: AvatarProps) {
   let classNames = [styles.avatar]
-  let element = <PersonIcon color="white" />
+  let element = <MaterialIcon icon="person" color="Icon/Inverted" />
   if (image) {
     classNames.push(styles.image)
     element = <Image src={image.src} alt={image.alt} width={28} height={28} />

apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx

@@ -2,9 +2,10 @@
 import NextLink from "next/link"
 import { useIntl } from "react-intl"
 
+import { ScandicLogoIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ScandicLogoIcon } from "@/components/Icons"
 import useLang from "@/hooks/useLang"
 
 import styles from "./logoLink.module.css"
@@ -29,7 +30,11 @@ export function LogoLink() {
       onClick={handleNavigate}
       aria-label={intl.formatMessage({ id: "Back to scandichotels.com" })}
     >
-      <ScandicLogoIcon width="103px" height="22px" color="red" />
+      <ScandicLogoIcon
+        width="103px"
+        height="22px"
+        color="Icon/Interactive/Accent"
+      />
     </NextLink>
   )
 }

apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx

@@ -9,6 +9,7 @@ import { customerService } from "@/constants/currentWebHrefs"
 import { findMyBooking } from "@/constants/routes/findMyBooking"
 import useDropdownStore from "@/stores/main-menu"
 
+import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
@@ -20,7 +21,6 @@ import styles from "./mobileMenu.module.css"
 
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
-import { IconName } from "@/types/components/icon"
 
 export default function MobileMenu({
   children,

apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -3,9 +3,10 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownSmallIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useClickOutside from "@/hooks/useClickOutside"
@@ -65,9 +66,11 @@ export default function MyPagesMenu({
             )}
           </span>
         </Body>
-        <ChevronDownSmallIcon
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          size={20}
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
-          color="red"
+          color="Icon/Interactive/Accent"
         />
       </MainMenuButton>
       {isMyPagesMenuOpen ? (
@@ -92,7 +95,12 @@ export function MyPagesMenuSkeleton() {
       <MainMenuButton>
         <Avatar />
         <SkeletonShimmer width="10ch" />
-        <ChevronDownSmallIcon className={`${styles.chevron}`} color="red" />
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          size={20}
+          className={`${styles.chevron}`}
+          color="Icon/Interactive/Accent"
+        />
       </MainMenuButton>
     </div>
   )

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -3,10 +3,11 @@
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { logout } from "@/constants/routes/handleAuth"
 import { trpc } from "@/lib/trpc/client"
 
-import { ArrowRightIcon } from "@/components/Icons"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -100,7 +101,11 @@ function PrimaryLinks({
             className={styles.link}
           >
             {link.text}
-            <ArrowRightIcon className={styles.arrow} color="burgundy" />
+            <MaterialIcon
+              icon="arrow_forward"
+              className={styles.arrow}
+              color="CurrentColor"
+            />
           </Link>
         </li>
       ))}
@@ -130,7 +135,11 @@ function SecondaryLinks({
             className={styles.link}
           >
             {link.text}
-            <ArrowRightIcon className={styles.arrow} color="burgundy" />
+            <MaterialIcon
+              icon="arrow_forward"
+              className={styles.arrow}
+              color="Icon/Interactive/Default"
+            />
           </Link>
         </li>
       ))}

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -2,9 +2,10 @@
 
 import FocusLock from "react-focus-lock"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons"
 import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -43,7 +44,11 @@ export default function MegaMenu({
               className={styles.backButton}
               onClick={() => toggleMegaMenu(false)}
             >
-              <ChevronLeftIcon color="red" height={20} width={20} />
+              <MaterialIcon
+                icon="chevron_left"
+                size={20}
+                color="Icon/Interactive/Accent"
+              />
               <Subtitle type="one" color="burgundy" asChild>
                 <span>{title}</span>
               </Subtitle>
@@ -61,7 +66,7 @@ export default function MegaMenu({
                 onClick={handleNavigate}
               >
                 {seeAllLink.title}
-                <ArrowRightIcon color="burgundy" />
+                <MaterialIcon icon="arrow_forward" color="CurrentColor" />
               </Link>
             ) : null}
           </div>
@@ -87,8 +92,9 @@ export default function MegaMenu({
                           onClick={handleNavigate}
                         >
                           {title}
-                          <ArrowRightIcon
-                            color="burgundy"
+                          <MaterialIcon
+                            icon="arrow_forward"
+                            color="Icon/Interactive/Default"
                             className={styles.arrow}
                           />
                         </Link>

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -2,9 +2,10 @@
 
 import { useRef } from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownSmallIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
@@ -49,16 +50,18 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
       >
         {title}
         {isMobile ? (
-          <ChevronRightIcon
+          <MaterialIcon
+            icon="chevron_right"
+            size={20}
             className={`${styles.chevron}`}
-            color="red"
-            height={20}
-            width={20}
+            color="Icon/Interactive/Accent"
           />
         ) : (
-          <ChevronDownSmallIcon
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            size={20}
             className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
-            color="red"
+            color="Icon/Interactive/Accent"
           />
         )}
       </MainMenuButton>