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/JobylonFeed/JobylonCard/index.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { OpenInNewSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -53,7 +54,7 @@ export default function JobylonCard({ job }: JobylonCardProps) {
         >
           <a href={job.url} target="_blank" rel="noopener noreferrer">
             {intl.formatMessage({ id: "View & apply" })}
-            <OpenInNewSmallIcon />
+            <MaterialIcon icon="open_in_new" size={20} />
           </a>
         </Button>
       </div>

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,6 +1,7 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { serverClient } from "@/lib/trpc/server"
 
-import { CheckIcon } from "@/components/Icons"
 import MembershipLevelIcon from "@/components/Levels/Icon"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -84,9 +85,10 @@ async function LevelCard({ level }: LevelCardProps) {
             textAlign="center"
             color="textMediumContrast"
           >
-            <CheckIcon
+            <MaterialIcon
+              icon="check"
               className={styles.checkIcon}
-              color="primaryLightOnSurfaceAccent"
+              color="Icon/Interactive/Accent"
             />
             {reward.label}
           </Caption>

apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.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 { toast } from "@/components/TempDesignSystem/Toasts"
 
@@ -33,7 +34,7 @@ export default function CopyButton({ membershipNumber }: CopyButtonProps) {
       size="small"
       intent="tertiary"
     >
-      <CopyIcon color="pale" />
+      <MaterialIcon icon="content_copy" color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx

@@ -1,6 +1,6 @@
 import { Minus } from "react-feather"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
 import styles from "./rewardValue.module.css"
 
@@ -11,7 +11,13 @@ export default function RewardValue({ reward }: RewardValueProps) {
     return <Minus color="var(--UI-Grey-40)" />
   }
   if (!reward.value) {
-    return <CheckCircle height={32} width={32} color="green" />
+    return (
+      <MaterialIcon
+        icon="check_circle"
+        size={32}
+        color="Icon/Feedback/Success"
+      />
+    )
   }
   return (
     <div className={styles.rewardValueContainer}>

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}
     />
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx

@@ -3,8 +3,9 @@
 import { useParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Dialog from "@/components/Dialog"
-import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 import type { LangParams } from "@/types/params"
@@ -27,7 +28,7 @@ export function UnlinkSAS() {
       trigger={
         <Button intent="text" theme="base">
           {intl.formatMessage({ id: "Unlink accounts" })}
-          <ChevronRightSmallIcon color="burgundy" />
+          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
         </Button>
       }
     />

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx

@@ -1,13 +1,16 @@
 import { cx } from "class-variance-authority"
 import { type ReactNode, Suspense } from "react"
 
+import {
+  DiamondAddIcon,
+  MaterialIcon,
+} from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"
 import { env } from "@/env/server"
 import { getProfile } from "@/lib/trpc/memoizedRequests"
 
-import { DiamondIcon, InfoCircleIcon, LinkIcon } from "@/components/Icons"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
@@ -56,7 +59,7 @@ export default async function SASLinkedAccount({
       <div className={styles.mutationSection}>
         <Typography variant="Body/Supporting text (caption)/smRegular">
           <p className={styles.caption}>
-            <InfoCircleIcon height={20} width={20} />
+            <MaterialIcon icon="info" size={20} />
             {intl.formatMessage({
               id: "Changes in tier match can take up to 24 hours to be displayed.",
             })}
@@ -207,13 +210,9 @@ async function TierMatchMessage({
   }
 
   const iconMap: Record<MatchState, ReactNode> = {
-    boostedBySAS: (
-      <DiamondIcon height={20} width={20} color="uiTextMediumContrast" />
-    ),
-    boostedByScandic: (
-      <DiamondIcon height={20} width={20} color="uiTextMediumContrast" />
-    ),
-    noBoost: <LinkIcon height={20} width={20} color="uiTextMediumContrast" />,
+    boostedBySAS: <DiamondAddIcon size={20} />,
+    boostedByScandic: <DiamondAddIcon size={20} />,
+    noBoost: <MaterialIcon icon="link" size={20} />,
   }
 
   return (

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx

@@ -1,9 +1,8 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
-import ArrowFromIcon from "@/components/Icons/ArrowFrom"
-import ArrowToIcon from "@/components/Icons/ArrowTo"
 import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { getIntl } from "@/i18n"
@@ -77,7 +76,7 @@ async function TransferPointsFormContent({
                 <Typography variant="Tag/sm">
                   <p>{intl.formatMessage({ id: "Transfer from" })}</p>
                 </Typography>
-                <ArrowFromIcon />
+                <MaterialIcon icon="upload" />
               </div>
               <Typography variant="Title/Subtitle/md">
                 <p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
@@ -117,7 +116,7 @@ async function TransferPointsFormContent({
           <div className={styles.transferTo}>
             <div>
               <div className={styles.labelWithIcon}>
-                <ArrowToIcon />
+                <MaterialIcon icon="download" />
                 <Typography variant="Tag/sm">
                   <p>{intl.formatMessage({ id: "Transfer to" })}</p>
                 </Typography>

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx

@@ -15,10 +15,10 @@ import {
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { SAS_TRANSFER_POINT_KEY } from "@/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/sasUtils"
-import SwipeIcon from "@/components/Icons/Swipe"
 import Image from "@/components/Image"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
@@ -77,7 +77,7 @@ export function TransferPointsFormClient({
             <SliderFill />
             <SliderThumb className={styles.sliderThumb}>
               <SliderOutput className={styles.sliderOutput} />
-              <SwipeIcon color="white" />
+              <MaterialIcon icon="swipe" color="Icon/Inverted" />
             </SliderThumb>
           </SliderTrack>
         </Slider>

apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { ChevronDownIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./button.module.css"
@@ -24,7 +25,11 @@ export default function ShowMoreButton({
         theme="base"
         intent="text"
       >
-        <ChevronDownIcon width={20} height={20} />
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          size={20}
+          color="CurrentColor"
+        />
         {intl.formatMessage({ id: "Show more" })}
       </Button>
     </div>

apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -1,7 +1,8 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 
-import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
@@ -33,7 +34,7 @@ export default async function EmptyUpcomingStaysBlock() {
         color="peach80"
       >
         {intl.formatMessage({ id: "Get inspired" })}
-        <ArrowRightIcon color="peach80" />
+        <MaterialIcon icon="arrow_forward" color="CurrentColor" />
       </Link>
     </section>
   )

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -2,9 +2,10 @@
 
 import { useState } from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { CalendarIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Link from "@/components/TempDesignSystem/Link"
@@ -51,7 +52,10 @@ export default function StayCard({ stay }: StayCardProps) {
             {hotelInformation.hotelName}
           </Title>
           <div className={styles.date}>
-            <CalendarIcon color="burgundy" height={24} width={24} />
+            <MaterialIcon
+              icon="calendar_month"
+              color="Icon/Interactive/Default"
+            />
             <Caption asChild>
               <time dateTime={arrivalDateTime}>{arrivalDate}</time>
             </Caption>

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -1,7 +1,8 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 
-import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
@@ -33,7 +34,8 @@ export default async function EmptyUpcomingStaysBlock() {
         color="peach80"
       >
         {intl.formatMessage({ id: "Get inspired" })}
-        <ArrowRightIcon color="peach80" />
+
+        <MaterialIcon color="CurrentColor" icon="arrow_forward" />
       </Link>
     </section>
   )