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/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx

@@ -3,7 +3,8 @@
 import { motion } from "framer-motion"
 import { useIntl } from "react-intl"
 
-import { CheckCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./redeem.module.css"
@@ -23,7 +24,7 @@ export default function ActiveRedeemedBadge() {
           ease: "easeInOut",
         }}
       >
-        <CheckCircleIcon color="uiSemanticSuccess" />
+        <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
       </motion.div>
       <Caption>{intl.formatMessage({ id: "Active" })}</Caption>
     </div>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import CopyIcon from "@/components/Icons/Copy"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -51,7 +52,7 @@ export default function Campaign({ reward }: { reward: Campaign }) {
           theme="base"
           intent="primary"
         >
-          <CopyIcon color="pale" />
+          <MaterialIcon icon="content_copy" color="CurrentColor" />
           {intl.formatMessage({ id: "Copy promotion code" })}
         </Button>
       </footer>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx

@@ -2,10 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
 import Countdown from "@/components/Countdown"
-import { CheckCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import useRedeemFlow from "./useRedeemFlow"
@@ -20,7 +21,7 @@ export default function TimedRedeemedBadge() {
   return (
     <>
       <div className={styles.redeemed}>
-        <CheckCircleIcon color="uiSemanticSuccess" />
+        <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
         <Caption>
           {intl.formatMessage({
             id: "Redeemed & valid through:",

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx

@@ -10,9 +10,10 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { trpc } from "@/lib/trpc/client"
 
-import { CloseLargeIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
@@ -117,7 +118,7 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
                         type="button"
                         className={styles.modalClose}
                       >
-                        <CloseLargeIcon />
+                        <MaterialIcon icon="close" />
                       </button>
                     </header>
 

apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts

@@ -1,11 +1,13 @@
+import { type IconProps } from "@scandic-hotels/design-system/Icons"
+
 import { REWARD_IDS } from "@/constants/rewards"
 
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { IconName } from "@/components/Icons/iconName"
+import { IllustrationByIconName } from "@/components/Icons/IllustrationByIconName"
 import { isValidRewardId } from "@/utils/rewards"
 
 import type { FC } from "react"
 
-import { IconName, type IconProps } from "@/types/components/icon"
 import type { RewardId } from "@/types/components/myPages/rewards"
 
 function getIconForRewardId(rewardId: RewardId): IconName {
@@ -61,9 +63,9 @@ function getIconForRewardId(rewardId: RewardId): IconName {
 export function mapRewardToIcon(rewardId: string): FC<IconProps> | null {
   if (!isValidRewardId(rewardId)) {
     // TODO: Update once UX has decided on fallback icon.
-    return getIconByIconName(IconName.GiftOpen)
+    return IllustrationByIconName(IconName.GiftOpen)
   }
 
   const iconName = getIconForRewardId(rewardId)
-  return getIconByIconName(iconName)
+  return IllustrationByIconName(iconName)
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/index.tsx

@@ -11,7 +11,7 @@ const sizeMap = {
 
 export function RewardIcon({
   rewardId,
-  size = "medium",
+  iconSize = "medium",
   ...props
 }: RewardIconProps) {
   const IconComponent = mapRewardToIcon(rewardId)
@@ -20,8 +20,8 @@ export function RewardIcon({
   return (
     <IconComponent
       {...props}
-      width={sizeMap[size].width}
-      height={sizeMap[size].height}
+      width={sizeMap[iconSize].width}
+      height={sizeMap[iconSize].height}
     />
   )
 }