Merged in fix/alert-icon (pull request #2139)

fix(SW-2807): alert icons

* fix(SW-2807): fix incorrect icon color on sitewide alert

* fix(SW-2807): change error icon


Approved-by: Erik Tiekstra
Approved-by: Linus Flood

apps/scandic-web/components/TempDesignSystem/Alert/index.tsx

@@ -41,7 +41,11 @@ export default function Alert({
     <section className={classNames} role={ariaRole} aria-live={ariaLive}>
       <div className={styles.content}>
         <span className={styles.iconWrapper}>
-          <IconByAlertType alertType={type} className={styles.icon} />
+          <IconByAlertType
+            alertType={type}
+            className={styles.icon}
+            variant={variant}
+          />
         </span>
         <div className={styles.innerContent}>
           <div className={styles.textWrapper}>

apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx

@@ -4,25 +4,35 @@ import {
 } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { AlertTypeEnum } from "@/types/enums/alert"
+import type { AlertProps } from "./alert"
 
 interface IconByAlertProps {
   alertType: AlertTypeEnum
+  variant?: AlertProps["variant"]
 }
 
 export function IconByAlertType({
   alertType,
+  variant = "inline",
   ...props
 }: IconByAlertProps & MaterialIconSetIconProps): JSX.Element {
   switch (alertType) {
     case AlertTypeEnum.Alarm:
       return (
-        <MaterialIcon color="Icon/Inverted" isFilled icon="cancel" {...props} />
+        <MaterialIcon
+          color={variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Error"}
+          isFilled
+          icon="error"
+          {...props}
+        />
       )
     case AlertTypeEnum.Warning:
       return (
         <MaterialIcon
           icon="warning"
-          color="Icon/Inverted"
+          color={
+            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Warning"
+          }
           isFilled
           {...props}
         />
@@ -30,7 +40,14 @@ export function IconByAlertType({
     case AlertTypeEnum.Info:
     default:
       return (
-        <MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
+        <MaterialIcon
+          color={
+            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Information"
+          }
+          isFilled
+          icon="info"
+          {...props}
+        />
       )
   }
 }