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/SelectHotel/BookingCodeFilter/index.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
 
-import { PriceTagIcon } from "@/components/Icons"
 import Select from "@/components/TempDesignSystem/Select"
 
 import styles from "./bookingCodeFilter.module.css"
@@ -50,7 +51,7 @@ export default function BookingCodeFilter() {
           label=""
           items={bookingCodeFilterItems}
           defaultSelectedKey={activeCodeFilter}
-          optionsIcon={<PriceTagIcon />}
+          optionsIcon={<MaterialIcon icon="sell" />}
         />
       </div>
     </>

apps/scandic-web/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx

@@ -13,9 +13,10 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
-import { CloseLargeIcon, FilterIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Select from "@/components/TempDesignSystem/Select"
@@ -95,7 +96,7 @@ export default function FilterAndSortModal({
     <>
       <DialogTrigger>
         <Button intent="secondary" size="small" theme="base" variant="icon">
-          <FilterIcon color="baseTextHighcontrast" />
+          <MaterialIcon icon="filter_alt" color="Icon/Intense" />
           {intl.formatMessage({ id: "Filter and sort" })}
           {activeFilters.length > 0 && (
             <Footnote className={styles.badge}>{activeFilters.length}</Footnote>
@@ -112,7 +113,7 @@ export default function FilterAndSortModal({
                       type="button"
                       className={styles.close}
                     >
-                      <CloseLargeIcon />
+                      <MaterialIcon icon="close" />
                     </button>
                     <Subtitle
                       type="two"

apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx

@@ -2,7 +2,7 @@
 
 import { Checkbox as AriaCheckbox } from "react-aria-components"
 
-import CheckIcon from "@/components/Icons/Check"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
 import styles from "./filterCheckbox.module.css"
 
@@ -24,7 +24,9 @@ export default function FilterCheckbox({
         <>
           <span className={styles.checkboxContainer}>
             <span className={styles.checkbox}>
-              {isSelected && <CheckIcon color="white" />}
+              {isSelected && (
+                <MaterialIcon icon="check" color="Icon/Inverted" />
+              )}
             </span>
             {name}
           </span>

apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx

@@ -2,12 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import {
   alternativeHotelsMap,
   selectHotelMap,
 } from "@/constants/routes/hotelReservation"
 
-import { MapIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
@@ -45,7 +46,7 @@ export default function MobileMapButtonContainer({
           keepSearchParams
           weight="bold"
         >
-          <MapIcon color="baseTextHighcontrast" />
+          <MaterialIcon icon="map" color="Icon/Intense" />
           {intl.formatMessage({ id: "See on map" })}
         </Link>
       </Button>

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -4,13 +4,14 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { selectHotel } from "@/constants/routes/hotelReservation"
 import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
-import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
@@ -134,7 +135,7 @@ export default function SelectHotelContent({
       asChild
     >
       <Link href={selectHotel(lang)} keepSearchParams prefetch>
-        <CloseIcon color="burgundy" />
+        <MaterialIcon icon="close" size={20} color="CurrentColor" />
         {intl.formatMessage({ id: "Close the map" })}
       </Link>
     </Button>
@@ -153,7 +154,7 @@ export default function SelectHotelContent({
             asChild
           >
             <Link href={selectHotel(lang)} keepSearchParams>
-              <CloseLargeIcon />
+              <MaterialIcon icon="close" color="CurrentColor" />
             </Link>
           </Button>
           <FilterAndSortModal

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -2,6 +2,8 @@ import stringify from "json-stable-stringify-without-jsonify"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import {
   alternativeHotels,
   alternativeHotelsMap,
@@ -9,7 +11,6 @@ import {
   selectHotelMap,
 } from "@/constants/routes/hotelReservation"
 
-import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
 import Button from "@/components/TempDesignSystem/Button"
@@ -217,10 +218,10 @@ export default async function SelectHotel({
                 />
                 <Button wrapping size="medium" intent="text" theme="base">
                   {intl.formatMessage({ id: "See map" })}
-                  <ChevronRightIcon
-                    color="baseButtonTextOnFillNormal"
-                    width={20}
-                    height={20}
+                  <MaterialIcon
+                    icon="chevron_right"
+                    size={20}
+                    color="CurrentColor"
                   />
                 </Button>
               </div>