Merged in feat/SW-1711-SW-2077-icons (pull request #1709)

Fix(SW-1711)/(SW-2077): Export icons individually * fix(SW-1711): export icons individually Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
2025-04-07 07:25:25 +00:00
parent 02cae62e57
commit 1239f0c662
234 changed files with 446 additions and 472 deletions
@@ -2,7 +2,7 @@

 import { useRef } from "react"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import { IconByIconName } from "@/components/Icons/IconByIconName"
 import { trackAccordionClick } from "@/utils/tracking"
@@ -2,7 +2,7 @@

 import { useState } from "react"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import JsonToHtml from "@/components/JsonToHtml"
 import Button from "@/components/TempDesignSystem/Button"
@@ -1,13 +1,13 @@
 "use client"

 import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Body from "@/components/TempDesignSystem/Text/Body"

 import Link from "../Link"
 import AlertSidepeek from "./Sidepeek"
-import { getIconByAlertType } from "./utils"
+import { IconByAlertType } from "./utils"
 import { alertVariants } from "./variants"

 import styles from "./alert.module.css"
@@ -33,7 +33,6 @@ export default function Alert({
    variant,
    type,
  })
-  const Icon = getIconByAlertType(type)

  if (!text && !heading) {
    return null
@@ -42,7 +41,7 @@ export default function Alert({
    <section className={classNames} role={ariaRole} aria-live={ariaLive}>
      <div className={styles.content}>
        <span className={styles.iconWrapper}>
-          <Icon className={styles.icon} size={24} />
+          <IconByAlertType alertType={type} className={styles.icon} />
        </span>
        <div className={styles.innerContent}>
          <div className={styles.textWrapper}>
@@ -1,41 +1,36 @@
-/* eslint-disable react/display-name */
 import {
  MaterialIcon,
  type MaterialIconSetIconProps,
-} from "@scandic-hotels/design-system/Icons"
+} from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import { AlertTypeEnum } from "@/types/enums/alert"

-export function getIconByAlertType(alertType: AlertTypeEnum) {
+interface IconByAlertProps {
+  alertType: AlertTypeEnum
+}
+
+export function IconByAlertType({
+  alertType,
+  ...props
+}: IconByAlertProps & MaterialIconSetIconProps): JSX.Element {
  switch (alertType) {
    case AlertTypeEnum.Alarm:
-      return function (props: MaterialIconSetIconProps) {
-        return (
-          <MaterialIcon
-            color="Icon/Inverted"
-            isFilled
-            icon="cancel"
-            {...props}
-          />
-        )
-      }
+      return (
+        <MaterialIcon color="Icon/Inverted" isFilled icon="cancel" {...props} />
+      )
    case AlertTypeEnum.Warning:
-      return function (props: MaterialIconSetIconProps) {
-        return (
-          <MaterialIcon
-            icon="warning"
-            color="Icon/Inverted"
-            isFilled
-            {...props}
-          />
-        )
-      }
+      return (
+        <MaterialIcon
+          icon="warning"
+          color="Icon/Inverted"
+          isFilled
+          {...props}
+        />
+      )
    case AlertTypeEnum.Info:
    default:
-      return function (props: MaterialIconSetIconProps) {
-        return (
-          <MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
-        )
-      }
+      return (
+        <MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
+      )
  }
 }
@@ -3,7 +3,7 @@
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import { backToTopButtonVariants } from "./variants"

@@ -1,7 +1,7 @@
 import { cx } from "class-variance-authority"
 import { Breadcrumb as AriaBreadcrumb } from "react-aria-components"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Link from "@/components/TempDesignSystem/Link"

@@ -1,4 +1,4 @@
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
@@ -11,7 +11,7 @@ import {
  Popover,
 } from "react-aria-components"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { debounce } from "@/utils/debounce"
@@ -3,7 +3,7 @@
 import { Checkbox as AriaCheckbox } from "react-aria-components"
 import { useController, useFormContext } from "react-hook-form"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Caption from "@/components/TempDesignSystem/Text/Caption"

@@ -1,4 +1,4 @@
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Caption from "@/components/TempDesignSystem/Text/Caption"

@@ -1,7 +1,7 @@
 import { useMemo } from "react"
 import { useFormContext } from "react-hook-form"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Caption from "@/components/TempDesignSystem/Text/Caption"

@@ -3,7 +3,7 @@ import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -5,7 +5,7 @@ import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Button from "@/components/TempDesignSystem/Button"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
@@ -12,7 +12,7 @@ import {
 } from "react-international-phone"
 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
@@ -3,7 +3,7 @@
 import { cx } from "class-variance-authority"
 import { useFormContext } from "react-hook-form"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import Divider from "@/components/TempDesignSystem/Divider"
@@ -1,7 +1,5 @@
-import {
-  type IconProps,
-  MaterialIcon,
-} from "@scandic-hotels/design-system/Icons"
+import { type IconProps } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import styles from "./chevron.module.css"

@@ -3,7 +3,7 @@
 import { Switch as AriaSwitch } from "react-aria-components"
 import { useController, useFormContext } from "react-hook-form"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Caption from "@/components/TempDesignSystem/Text/Caption"

@@ -8,7 +8,7 @@ import {
 } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Label from "@/components/TempDesignSystem/Form/Label"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -1,6 +1,6 @@
 import Link from "next/link"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Caption from "@/components/TempDesignSystem/Text/Caption"

@@ -1,4 +1,4 @@
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
@@ -2,7 +2,7 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Image from "@/components/Image"

@@ -6,7 +6,7 @@ import {
  Popover as RAPopover,
 } from "react-aria-components"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import useSetOverFlowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"

@@ -2,7 +2,7 @@

 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Button from "@/components/TempDesignSystem/Button"

@@ -4,7 +4,7 @@ import { useContext, useRef } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider"
@@ -3,7 +3,7 @@
 import { useState } from "react"

 import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import ButtonLink from "@/components/ButtonLink"
 import JsonToHtml from "@/components/JsonToHtml"
@@ -3,7 +3,7 @@ import { type ExternalToast, toast as sonnerToast, Toaster } from "sonner"
 import {
  MaterialIcon,
  type MaterialIconSetIconProps,
-} from "@scandic-hotels/design-system/Icons"
+} from "@scandic-hotels/design-system/Icons/MaterialIcon"

 import Button from "../Button"
 import Body from "../Text/Body"