Merged in SW-3317-move-toast-to-design-system (pull request #2716)

SW-3317 move toast to design system

* chore: Move toast to design-system and add interaction tests

* Move toast to design-system and add storybook tests

* Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3317-move-toast-to-design-system

* merge

* move sonner dependency to @scandic-hotels/design-system


Approved-by: Anton Gunnarsson

apps/scandic-web/app/[lang]/(live)/layout.tsx

@@ -11,6 +11,7 @@ import { NuqsAdapter } from "nuqs/adapters/next/app"
 
 import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider"
 import { Lang } from "@scandic-hotels/common/constants/language"
+import { ToastHandler } from "@scandic-hotels/design-system/ToastHandler"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
@@ -22,7 +23,6 @@ import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCl
 import { RACRouterProvider } from "@/components/RACRouterProvider"
 import RouteChange from "@/components/RouteChange"
 import SitewideAlert from "@/components/SitewideAlert"
-import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
 import { UserExists } from "@/components/UserExists"

apps/scandic-web/app/[lang]/(no-layout)/layout.tsx

@@ -10,6 +10,7 @@ import { SessionProvider } from "next-auth/react"
 import { NuqsAdapter } from "nuqs/adapters/next/app"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
+import { ToastHandler } from "@scandic-hotels/design-system/ToastHandler"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
@@ -17,7 +18,6 @@ import { SessionRefresher } from "@/components/Auth/TokenRefresher"
 import CookieBotConsent from "@/components/CookieBot"
 import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner"
 import RouteChange from "@/components/RouteChange"
-import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
 import { getMessages } from "@/i18n"

apps/scandic-web/app/[lang]/(partner)/layout.tsx

@@ -9,6 +9,7 @@ import Script from "next/script"
 import { NuqsAdapter } from "nuqs/adapters/next/app"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
+import { ToastHandler } from "@scandic-hotels/design-system/ToastHandler"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
@@ -16,7 +17,6 @@ import TokenRefresher from "@/components/Auth/TokenRefresher"
 import CookieBotConsent from "@/components/CookieBot"
 import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner"
 import RouteChange from "@/components/RouteChange"
-import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
 import { FontPreload } from "@/fonts/font-preloading"

apps/scandic-web/app/[lang]/webview/layout.tsx

@@ -8,11 +8,11 @@ import Script from "next/script"
 import { NuqsAdapter } from "nuqs/adapters/next/app"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
+import { ToastHandler } from "@scandic-hotels/design-system/ToastHandler"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
 import RouteChange from "@/components/RouteChange"
-import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
 import { FontPreload } from "@/fonts/font-preloading"

apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx

@@ -4,8 +4,7 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-
-import { toast } from "@/components/TempDesignSystem/Toasts"
+import { toast } from "@scandic-hotels/design-system/Toast"
 
 import styles from "./copybutton.module.css"
 

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

@@ -7,8 +7,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
-
-import { toast } from "@/components/TempDesignSystem/Toasts"
+import { toast } from "@scandic-hotels/design-system/Toast"
 
 import { RewardIcon } from "../../RewardIcon"
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/Form.tsx

@@ -6,8 +6,7 @@ import { useIntl } from "react-intl"
 import { z } from "zod"
 
 import { Search } from "@scandic-hotels/booking-flow/BookingWidget/BookingWidgetForm/FormContent/Search"
-
-import { toast } from "@/components/TempDesignSystem/Toasts"
+import { toast } from "@scandic-hotels/design-system/Toast"
 
 const destinationSearchFormSchema = z.object({
   destinationSearch: z.string().min(1),

apps/scandic-web/components/Forms/Edit/Profile/index.tsx

@@ -9,6 +9,7 @@ import { profile } from "@scandic-hotels/common/constants/routes/myPages"
 import { logger } from "@scandic-hotels/common/logger"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { langToApiLang } from "@scandic-hotels/trpc/constants/apiLang"
 
@@ -18,7 +19,6 @@ import { logout } from "@/constants/routes/handleAuth"
 import { editProfile } from "@/actions/editProfile"
 import Dialog from "@/components/Dialog"
 import ChangeNameDisclaimer from "@/components/MyPages/Profile/ChangeNameDisclaimer"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
 import { formatPhoneNumber } from "@/utils/phone"
 

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -13,6 +13,7 @@ import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
 import Link from "@scandic-hotels/design-system/Link"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import {
@@ -29,7 +30,6 @@ import {
 
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import useLang from "@/hooks/useLang"
 import { getFormattedCountryList } from "@/utils/countries"

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

@@ -4,8 +4,8 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { logger } from "@scandic-hotels/common/logger"
+import { toast } from "@scandic-hotels/design-system/Toast"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 import type { AddToCalendarProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar"

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

@@ -12,12 +12,12 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { customerService } from "@/constants/webHrefs"
 
 import Input from "@/components/TempDesignSystem/Form/Input"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema"

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx

@@ -12,6 +12,7 @@ import { dt } from "@scandic-hotels/common/dt"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Modal from "@scandic-hotels/design-system/Modal"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
@@ -31,7 +32,6 @@ import {
   setAncillarySessionData,
 } from "@/components/HotelReservation/MyStay/utils/ancillaries"
 import LoadingSpinner from "@/components/LoadingSpinner"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"
 import {

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx

@@ -3,10 +3,10 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import Dialog from "@/components/Dialog"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 import { trackRemoveAncillary } from "@/utils/tracking/myStay"
 

apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx

@@ -11,13 +11,13 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { isWebview } from "@/constants/routes/webviews"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 import ModifyContact from "../ModifyContact"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx

@@ -3,13 +3,13 @@ import { differenceInCalendarDays } from "date-fns"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 import { trackCancelStay } from "@/utils/tracking"
 

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx

@@ -4,13 +4,13 @@ import { useIntl } from "react-intl"
 import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
 import PriceContainer from "@/components/HotelReservation/MyStay/ReferenceCard/PriceContainer"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 import PriceAndDate from "./PriceAndDate"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Form/index.tsx

@@ -4,11 +4,11 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import { toast } from "@scandic-hotels/design-system/Toast"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import NoAvailability from "./Alerts/NoAvailability"
 import NewDates from "./NewDates"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx

@@ -9,6 +9,7 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import Link from "@scandic-hotels/design-system/Link"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
@@ -20,7 +21,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import LoadingSpinner from "@/components/LoadingSpinner"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"
 import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"

apps/scandic-web/components/HotelReservation/SelectRate/AvailabilityError.tsx

@@ -4,10 +4,9 @@ import { usePathname, useSearchParams } from "next/navigation"
 import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { BookingErrorCodeEnum } from "@scandic-hotels/trpc/enums/bookingErrorCode"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
-
 export default function AvailabilityError() {
   const intl = useIntl()
   const pathname = usePathname()

apps/scandic-web/components/MyPages/CopyMembershipIdButton/index.tsx

@@ -4,10 +4,9 @@ import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
-
 import styles from "./copyMembershipIdButton.module.css"
 
 interface CopyMembershipIdButtonProps {

apps/scandic-web/components/MyPages/SASLevelUpgradeCheck.tsx

@@ -6,11 +6,11 @@ import { useIntl } from "react-intl"
 
 import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
 import { logger } from "@scandic-hotels/common/logger"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 export function SASLevelUpgradeCheck() {

apps/scandic-web/components/MyPages/Surprises/Client.tsx

@@ -9,6 +9,7 @@ import { useIntl } from "react-intl"
 import { benefits } from "@scandic-hotels/common/constants/routes/myPages"
 import { logger } from "@scandic-hotels/common/logger"
 import Link from "@scandic-hotels/design-system/Link"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -18,7 +19,6 @@ import {
 } from "@/constants/routes/webviews"
 import { customerService } from "@/constants/webHrefs"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 import confetti from "./confetti"

apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx

@@ -6,9 +6,9 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 import styles from "./addCreditCardButton.module.css"

apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx

@@ -3,10 +3,10 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import Dialog from "@/components/Dialog"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import type { DeleteCreditCardConfirmationProps } from "@/types/components/myPages/myProfile/creditCards"
 

apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx

@@ -4,10 +4,9 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
-
 import styles from "./managePreferencesButton.module.css"
 
 export default function ManagePreferencesButton() {

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

@@ -1,104 +0,0 @@
-import { type ExternalToast, toast as sonnerToast, Toaster } from "sonner"
-
-import Body from "@scandic-hotels/design-system/Body"
-import {
-  MaterialIcon,
-  type MaterialIconSetIconProps,
-} from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-
-import { toastVariants } from "./variants"
-
-import styles from "./toasts.module.css"
-
-import type { ToastsProps } from "./toasts"
-
-export function ToastHandler() {
-  return <Toaster position="bottom-right" duration={5000} />
-}
-
-interface AlertIconProps {
-  variant: ToastsProps["variant"]
-}
-function AlertIcon({
-  variant,
-  ...props
-}: AlertIconProps & MaterialIconSetIconProps) {
-  switch (variant) {
-    case "error":
-      return <MaterialIcon icon="cancel" {...props} />
-    case "info":
-      return <MaterialIcon icon="info" {...props} />
-    case "success":
-      return <MaterialIcon icon="check_circle" {...props} />
-    case "warning":
-      return <MaterialIcon icon="warning" {...props} />
-  }
-}
-
-export function Toast({ children, message, onClose, variant }: ToastsProps) {
-  const className = toastVariants({ variant })
-  const Icon = <AlertIcon variant={variant} color="Icon/Inverted" />
-  return (
-    <div className={className}>
-      <div className={styles.iconContainer}>{Icon && Icon}</div>
-      {message ? (
-        <Body className={styles.message}>{message}</Body>
-      ) : (
-        <div className={styles.content}>{children}</div>
-      )}
-      {onClose ? (
-        <Button onClick={onClose} variant="icon" intent="tertiary">
-          <MaterialIcon icon="close" />
-        </Button>
-      ) : null}
-    </div>
-  )
-}
-
-export const toast = {
-  success: (message: React.ReactNode, options?: ExternalToast) =>
-    sonnerToast.custom(
-      (t) => (
-        <Toast
-          variant="success"
-          message={message}
-          onClose={() => sonnerToast.dismiss(t)}
-        />
-      ),
-      options
-    ),
-  info: (message: React.ReactNode, options?: ExternalToast) =>
-    sonnerToast.custom(
-      (t) => (
-        <Toast
-          variant="info"
-          message={message}
-          onClose={() => sonnerToast.dismiss(t)}
-        />
-      ),
-      options
-    ),
-  error: (message: React.ReactNode, options?: ExternalToast) =>
-    sonnerToast.custom(
-      (t) => (
-        <Toast
-          variant="error"
-          message={message}
-          onClose={() => sonnerToast.dismiss(t)}
-        />
-      ),
-      options
-    ),
-  warning: (message: React.ReactNode, options?: ExternalToast) =>
-    sonnerToast.custom(
-      (t) => (
-        <Toast
-          variant="warning"
-          message={message}
-          onClose={() => sonnerToast.dismiss(t)}
-        />
-      ),
-      options
-    ),
-}

apps/scandic-web/components/TempDesignSystem/Toasts/toasts.module.css

@@ -1,48 +0,0 @@
-.toast {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  border-radius: var(--Corner-radius-lg);
-  overflow: hidden;
-  background: var(--Base-Surface-Primary-light-Normal);
-  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
-  align-items: center;
-}
-
-.content {
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x3);
-}
-
-@media screen and (min-width: 768px) {
-  .toast {
-    width: var(--width);
-  }
-}
-
-.toast .message {
-  padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
-}
-
-.success {
-  --icon-background-color: var(--UI-Semantic-Success);
-}
-
-.error {
-  --icon-background-color: var(--UI-Semantic-Error);
-}
-
-.warning {
-  --icon-background-color: var(--UI-Semantic-Warning);
-}
-
-.info {
-  --icon-background-color: var(--UI-Semantic-Information);
-}
-
-.iconContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--icon-background-color);
-  padding: var(--Spacing-x2);
-  height: 100%;
-}

apps/scandic-web/components/TempDesignSystem/Toasts/toasts.ts

@@ -1,17 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { toastVariants } from "./variants"
-
-export type ToastsProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> &
-  VariantProps<typeof toastVariants> & {
-    onClose?: () => void
-  } & (
-    | {
-        children: React.ReactNode
-        message?: never
-      }
-    | {
-        children?: never
-        message: React.ReactNode
-      }
-  )

apps/scandic-web/components/TempDesignSystem/Toasts/variants.ts

@@ -1,14 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./toasts.module.css"
-
-export const toastVariants = cva(styles.toast, {
-  variants: {
-    variant: {
-      success: styles.success,
-      info: styles.info,
-      warning: styles.warning,
-      error: styles.error,
-    },
-  },
-})

apps/scandic-web/hooks/booking/useGuaranteeBooking.ts

@@ -3,10 +3,10 @@ import { useCallback, useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { trackEvent } from "@scandic-hotels/common/tracking/base"
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 
 const maxRetries = 15

apps/scandic-web/hooks/booking/useGuaranteePaymentFailedToast.ts

@@ -4,10 +4,9 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect } from "react"
 import { useIntl } from "react-intl"
 
+import { toast } from "@scandic-hotels/design-system/Toast"
 import { BookingErrorCodeEnum } from "@scandic-hotels/trpc/enums/bookingErrorCode"
 
-import { toast } from "@/components/TempDesignSystem/Toasts"
-
 export function useGuaranteePaymentFailedToast() {
   const intl = useIntl()
   const searchParams = useSearchParams()

apps/scandic-web/package.json

@@ -93,7 +93,6 @@
     "react-intl": "^7.1.11",
     "react-to-print": "^3.1.0",
     "server-only": "^0.0.1",
-    "sonner": "^2.0.3",
     "supercluster": "^8.0.1",
     "usehooks-ts": "3.1.1",
     "zod": "^3.24.4",