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.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",

packages/design-system/lib/components/Toasts/Toast.stories.tsx

@@ -0,0 +1,93 @@
+import { Toast } from './Toast'
+
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { expect } from 'storybook/test'
+
+import { config } from './variants.ts'
+
+const meta: Meta<typeof Toast> = {
+  title: 'Components/Toasts/Toast',
+  component: Toast,
+  argTypes: {
+    variant: {
+      control: 'select',
+      type: 'string',
+      options: Object.keys(config.variants.variant),
+      table: {
+        defaultValue: { summary: 'info' },
+      },
+    },
+    message: {
+      control: 'text',
+      type: 'string',
+      table: {
+        defaultValue: { summary: 'Toast message' },
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toast>
+
+export const Default: Story = {
+  args: {
+    variant: 'info',
+    message: 'This is a toast',
+  },
+  play: async ({ canvas }) => {
+    const toast = await canvas.findByRole('status')
+    expect(toast).toBeVisible()
+  },
+}
+
+export const DefaultWithCustomContent: Story = {
+  args: {
+    variant: 'info',
+    children: (
+      <p style={{ fontStyle: 'italic' }}>This is a custom info toast</p>
+    ),
+  },
+  play: async ({ canvas }) => {
+    const toast = await canvas.findByRole('status')
+    expect(toast).toBeVisible()
+    expect(canvas.getByText('This is a custom info toast')).toBeVisible()
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    message: 'This is a success toast',
+  },
+  play: async ({ canvas, args }) => {
+    const toast = await canvas.findByRole('status')
+    expect(toast).toBeVisible()
+    expect(canvas.getByText(args.message as string)).toBeVisible()
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    message: 'This is an error toast',
+  },
+  play: async ({ canvas, args }) => {
+    const toast = await canvas.findByRole('alert')
+    expect(toast).toBeVisible()
+    expect(canvas.getByText(args.message as string)).toBeVisible()
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    message: 'This is a warning toast',
+  },
+  play: async ({ canvas, args }) => {
+    const toast = await canvas.findByRole('alert')
+    expect(toast).toBeVisible()
+    expect(canvas.getByText(args.message as string)).toBeVisible()
+  },
+}

packages/design-system/lib/components/Toasts/Toast.tsx

@@ -0,0 +1,84 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import { toastVariants } from './variants'
+import { MaterialIcon, MaterialIconSetIconProps } from '../Icons/MaterialIcon'
+
+import styles from './toasts.module.css'
+import { Typography } from '../Typography'
+import { useIntl } from 'react-intl'
+import { IconButton } from '../IconButton'
+
+export type ToastsProps = VariantProps<typeof toastVariants> & {
+  variant: NonNullable<VariantProps<typeof toastVariants>['variant']>
+  onClose?: () => void
+} & (
+    | {
+        children: React.ReactNode
+        message?: never
+      }
+    | {
+        children?: never
+        message: React.ReactNode
+      }
+  )
+
+export function Toast({ children, message, onClose, variant }: ToastsProps) {
+  const className = toastVariants({ variant })
+  const intl = useIntl()
+  const Icon = <AlertIcon variant={variant} color="Icon/Inverted" />
+
+  return (
+    <div className={className} role={getRole(variant)} aria-atomic="true">
+      <div className={styles.iconContainer}>{Icon && Icon}</div>
+      {message ? (
+        <Typography variant={'Body/Paragraph/mdRegular'}>
+          <p className={styles.message}>{message}</p>
+        </Typography>
+      ) : (
+        <div className={styles.content}>{children}</div>
+      )}
+      {onClose ? (
+        <IconButton
+          onClick={onClose}
+          aria-label={intl.formatMessage({
+            defaultMessage: 'Dismiss notification',
+          })}
+          theme={'Black'}
+        >
+          <MaterialIcon icon="close" />
+        </IconButton>
+      ) : null}
+    </div>
+  )
+}
+
+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} />
+  }
+}
+
+function getRole(variant: ToastsProps['variant']) {
+  switch (variant) {
+    case 'error':
+    case 'warning':
+      return 'alert'
+    case 'info':
+    case 'success':
+    default:
+      return 'status'
+  }
+}

packages/design-system/lib/components/Toasts/ToastHandler.stories.tsx

@@ -0,0 +1,87 @@
+import { toast } from './index.tsx'
+import { Toast } from './Toast.tsx'
+
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { config } from './variants.ts'
+import { ToastHandler } from './ToastHandler.tsx'
+import { Button } from '../Button/Button.tsx'
+import { expect, waitFor } from 'storybook/test'
+
+const meta: Meta<typeof Toast> = {
+  title: 'Components/Toasts/ToastHandler',
+  component: Toast,
+  argTypes: {
+    variant: {
+      control: 'select',
+      type: 'string',
+      options: Object.keys(config.variants.variant),
+      table: {
+        defaultValue: { summary: 'info' },
+      },
+    },
+    message: {
+      control: 'text',
+      type: 'string',
+      table: {
+        defaultValue: { summary: 'Toast message' },
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toast>
+
+export const Default: Story = {
+  args: {
+    variant: 'info',
+    message: 'This is a toast',
+  },
+  render: (args) => {
+    return <Renderer variant={args.variant} message={args.message as string} />
+  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    let toast = canvas.queryByRole('status')
+    expect(toast).not.toBeInTheDocument()
+
+    const showToastButton = await canvas.findByRole('button')
+    await userEvent.click(showToastButton)
+
+    toast = await canvas.findByRole(
+      ['info', 'success'].indexOf(args.variant) !== -1 ? 'status' : 'alert'
+    )
+    await waitFor(async () => await expect(toast).toBeVisible())
+
+    const closeButton = await canvas.findByLabelText('Dismiss notification')
+    await userEvent.click(closeButton)
+
+    await waitFor(async () => await expect(toast).not.toBeVisible())
+  },
+}
+
+const Renderer = ({
+  message,
+  variant,
+}: {
+  message: string
+  variant: 'info' | 'success' | 'warning' | 'error'
+  onDismiss?: () => void
+}) => {
+  const text = 'Show Toast'
+  return (
+    <>
+      <Button
+        variant="Primary"
+        onPress={() => {
+          toast[variant](message)
+        }}
+      >
+        {text}
+      </Button>
+      <ToastHandler />
+    </>
+  )
+}

packages/design-system/lib/components/Toasts/ToastHandler.tsx

@@ -0,0 +1,5 @@
+import { Toaster } from 'sonner'
+
+export function ToastHandler() {
+  return <Toaster position="bottom-right" duration={5000} />
+}

packages/design-system/lib/components/Toasts/index.tsx

@@ -0,0 +1,49 @@
+import { type ExternalToast, toast as sonnerToast } from 'sonner'
+import { Toast } from './Toast'
+
+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
+    ),
+}

packages/design-system/lib/components/Toasts/variants.ts

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

packages/design-system/package.json

@@ -154,6 +154,8 @@
     "./Table": "./lib/components/Table/index.tsx",
     "./Title": "./lib/components/Title/index.tsx",
     "./Tooltip": "./lib/components/Tooltip/index.tsx",
+    "./Toast": "./lib/components/Toasts/index.tsx",
+    "./ToastHandler": "./lib/components/Toasts/ToastHandler.tsx",
     "./TripAdvisorChip": "./lib/components/TripAdvisorChip/index.tsx",
     "./Typography": "./lib/components/Typography/index.tsx",
     "./JsonToHtml": "./lib/components/JsonToHtml/JsonToHtml.tsx",
@@ -196,7 +198,8 @@
     "test:browser": "vitest --config=vitest.browser.config.ts"
   },
   "dependencies": {
-    "@scandic-hotels/common": "workspace:*"
+    "@scandic-hotels/common": "workspace:*",
+    "sonner": "^2.0.3"
   },
   "peerDependencies": {
     "@babel/core": "^7.27.4",

yarn.lock

@@ -6212,6 +6212,7 @@ __metadata:
     react-dom: "npm:^19.1.0"
     rollup: "npm:^4.40.2"
     rollup-preserve-directives: "npm:^1.1.3"
+    sonner: "npm:^2.0.3"
     storybook: "npm:^9.1.2"
     storybook-react-intl: "npm:^4.0.7"
     typescript: "npm:^5.8.3"
@@ -6422,7 +6423,6 @@ __metadata:
     react-to-print: "npm:^3.1.0"
     schema-dts: "npm:^1.1.5"
     server-only: "npm:^0.0.1"
-    sonner: "npm:^2.0.3"
     start-server-and-test: "npm:^2.0.11"
     supercluster: "npm:^8.0.1"
     ts-morph: "npm:^25.0.1"