Merged in chore/SW-3246-move-alert-to-design-system (pull request #2698)

chore(SW-3246): Moved Alert component into design system

* chore(SW-3246): Moved Alert component into design system

* chore(SW-3246): Optimsed code and imports

* chore(SW-3246): Moved type AlertTypeEnum and other to common package


Approved-by: Anton Gunnarsson

apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx

@@ -3,14 +3,14 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import Alert from "@/components/TempDesignSystem/Alert"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import CityListingItem from "./CityListingItem"

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/Content.tsx

@@ -3,9 +3,8 @@
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
-
-import Alert from "@/components/TempDesignSystem/Alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
 import HotelCardCarousel from "../../../HotelCardCarousel"
 import HotelListItem from "../HotelListItem"

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/index.tsx

@@ -2,13 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import Body from "@scandic-hotels/design-system/Body"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import Alert from "@/components/TempDesignSystem/Alert"
 
 import CityListItem from "../CityListItem"
 import CityListSkeleton from "./CityListSkeleton"

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx

@@ -5,16 +5,16 @@ import { useParams } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import Alert from "@/components/TempDesignSystem/Alert"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import HotelListingItem from "./HotelListingItem"

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -3,6 +3,7 @@ import { Suspense } from "react"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { safeTry } from "@scandic-hotels/common/utils/safeTry"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import Link from "@scandic-hotels/design-system/Link"
 
 import {
@@ -14,7 +15,6 @@ import {
 import AccordionSection from "@/components/Blocks/Accordion"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import HotelCampaigns from "@/components/ContentType/HotelPage/Campaigns"
-import Alert from "@/components/TempDesignSystem/Alert"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"

apps/scandic-web/components/DestinationFilterAndSort/index.tsx

@@ -10,16 +10,16 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
-import Alert from "../TempDesignSystem/Alert"
 import Filter from "./Filter"
 import Sort from "./Sort"
 

apps/scandic-web/components/HotelFilterAndSort/index.tsx

@@ -9,16 +9,16 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { useHotelListingDataStore } from "@/stores/hotel-listing-data"
 
-import Alert from "../TempDesignSystem/Alert"
 import Filter from "./Filter"
 import Sort from "./Sort"
 

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

@@ -1,8 +1,9 @@
 import { notFound } from "next/navigation"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { dt } from "@scandic-hotels/common/dt"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
@@ -12,7 +13,6 @@ import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
 import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
 import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
 import SidePanel from "@/components/HotelReservation/SidePanel"
-import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/BookingAlert/index.tsx

@@ -4,14 +4,14 @@ import { usePathname, useSearchParams } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { BookingErrorCodeEnum } from "@scandic-hotels/trpc/enums/bookingErrorCode"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import useLang from "@/hooks/useLang"
 
 import styles from "./bookingAlert.module.css"

apps/scandic-web/components/HotelReservation/FnFNotAllowedAlert/FnFNotAllowedAlert.tsx

@@ -1,6 +1,6 @@
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 
 import styles from "./FnFNotAllowedAlert.module.css"

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

@@ -1,13 +1,14 @@
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import { dt } from "@scandic-hotels/common/dt"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
@@ -15,7 +16,6 @@ import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
-import Alert from "@/components/TempDesignSystem/Alert"
 import useLang from "@/hooks/useLang"
 
 import styles from "./confirmationStep.module.css"

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

@@ -1,15 +1,15 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import Body from "@scandic-hotels/design-system/Body"
 import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import Select from "@/components/TempDesignSystem/Form/Select"
 import { getErrorMessage } from "@/utils/getErrorMessage"
 

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

@@ -2,10 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import { trackMyStayPageLink } from "@/utils/tracking"
 
 import SummaryCard from "./SummaryCard"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Alerts.tsx

@@ -1,12 +1,12 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
-import Alert from "@/components/TempDesignSystem/Alert"
 
 interface AlertsProps extends React.PropsWithChildren {
   closeModal: () => void

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Alerts/CannotChangeDate.tsx

@@ -1,10 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
-import Alert from "@/components/TempDesignSystem/Alert"
 
 export default function CannotChangeDate({
   closeModal,

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Alerts/MultiRoomBooking.tsx

@@ -1,10 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
-import Alert from "@/components/TempDesignSystem/Alert"
 
 export default function MultiRoomBooking({
   closeModal,

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Alerts/NotMainRoom.tsx

@@ -1,10 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
-import Alert from "@/components/TempDesignSystem/Alert"
 
 export default function NotMainRoom({
   closeModal,

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

@@ -1,9 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
-
-import Alert from "@/components/TempDesignSystem/Alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
 export default function NoAvailability() {
   const intl = useIntl()

apps/scandic-web/components/HotelReservation/SelectHotel/NoAvailabilityAlert.tsx

@@ -1,7 +1,7 @@
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { alternativeHotels } from "@scandic-hotels/common/constants/routes/hotelReservation"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx

@@ -4,11 +4,11 @@ import { useState } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
-import Alert from "@/components/TempDesignSystem/Alert"
 
 import styles from "./hotelDescription.module.css"
 

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,5 +1,6 @@
 import { dt } from "@scandic-hotels/common/dt"
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
@@ -8,7 +9,6 @@ import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
-import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/NoAvailabilityAlert/index.tsx

@@ -1,11 +1,11 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { alternativeHotels } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { AvailabilityEnum } from "@scandic-hotels/trpc/enums/selectHotel"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx

@@ -3,9 +3,9 @@
 import { TRPCClientError } from "@trpc/client"
 import { useIntl } from "react-intl"
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
 
 import { RateSummary } from "./RateSummary"

apps/scandic-web/components/HotelReservation/utils/index.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { dt } from "@scandic-hotels/common/dt"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
 import { getHotelAlertsForBookingDates } from "./index"
 

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Alert/index.tsx

@@ -3,12 +3,11 @@
 import { useRouter, useSearchParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 
 import { DTMC_SUCCESS_BANNER_KEY } from "@/constants/dtmc"
 
-import Alert from "@/components/TempDesignSystem/Alert"
-
 export default function DigitalTeamMemberCardAlert() {
   const intl = useIntl()
   const router = useRouter()

apps/scandic-web/components/SitewideAlert/index.tsx

@@ -2,13 +2,13 @@
 
 import { useCallback, useRef } from "react"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
 import { debounce } from "@scandic-hotels/common/utils/debounce"
+import { Alert } from "@scandic-hotels/design-system/Alert"
 import { trpc } from "@scandic-hotels/trpc/client"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import useLang from "@/hooks/useLang"
 
 import styles from "./sitewideAlert.module.css"

packages/common/constants/alert.ts

@@ -9,3 +9,13 @@ export const AlertVisibleOnEnum = {
   WEB: "WEB",
   APP: "APP",
 } as const
+
+export type SidepeekContent = {
+  heading: string
+  content: {
+    json?: any
+    embedded_itemsConnection: {
+      edges: any
+    }
+  }
+}

packages/common/package.json

@@ -33,6 +33,7 @@
     "./utils/isValidJson": "./utils/isValidJson.ts",
     "./hooks/*": "./hooks/*.ts",
     "./stores/*": "./stores/*.ts",
+    "./constants/alert": "./constants/alert.ts",
     "./constants/currency": "./constants/currency.ts",
     "./constants/dateFormats": "./constants/dateFormats.ts",
     "./constants/facilities": "./constants/facilities.ts",

packages/design-system/lib/components/Alert/Sidepeek/index.tsx

@@ -1,16 +1,16 @@
-"use client"
+'use client'
 
-import { useState } from "react"
-import { useIntl } from "react-intl"
+import { useState } from 'react'
+import { useIntl } from 'react-intl'
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import SidePeek from "@scandic-hotels/design-system/SidePeek"
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { JsonToHtml } from '../../JsonToHtml/JsonToHtml'
+import { Button } from '../../Button'
+import SidePeek from '../../SidePeek'
 
-import styles from "./sidepeek.module.css"
+import styles from './sidepeek.module.css'
 
-import type { AlertSidepeekProps } from "./sidepeek"
+import type { AlertSidepeekProps } from './sidepeek'
 
 export default function AlertSidepeek({
   ctaText,
@@ -24,11 +24,11 @@ export default function AlertSidepeek({
     <div className={styles.alertSidepeek}>
       <Button
         onPress={() => setSidePeekIsOpen(true)}
-        theme="base"
-        variant="icon"
-        intent="text"
-        size="small"
+        variant="Text"
+        color="Primary"
+        size="Small"
         wrapping
+        typography="Body/Supporting text (caption)/smBold"
       >
         {ctaText}
         <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
@@ -39,7 +39,7 @@ export default function AlertSidepeek({
         isOpen={sidePeekIsOpen}
         handleClose={() => setSidePeekIsOpen(false)}
         closeLabel={intl.formatMessage({
-          defaultMessage: "Close",
+          defaultMessage: 'Close',
         })}
       >
         <JsonToHtml

packages/design-system/lib/components/Alert/Sidepeek/sidepeek.ts

@@ -1,4 +1,4 @@
-import type { SidepeekContent } from "@scandic-hotels/trpc/types/siteConfig"
+import type { SidepeekContent } from '@scandic-hotels/common/constants/alert'
 
 export interface AlertSidepeekProps {
   ctaText: string

packages/design-system/lib/components/Alert/alert.ts

@@ -1,9 +1,11 @@
-import type { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
-import type { SidepeekContent } from "@scandic-hotels/trpc/types/siteConfig"
-import type { VariantProps } from "class-variance-authority"
-import type { AriaRole } from "react"
+import type {
+  AlertTypeEnum,
+  SidepeekContent,
+} from '@scandic-hotels/common/constants/alert'
+import type { VariantProps } from 'class-variance-authority'
+import type { AriaRole } from 'react'
 
-import type { alertVariants } from "./variants"
+import type { alertVariants } from './variants'
 
 export interface AlertProps extends VariantProps<typeof alertVariants> {
   className?: string
@@ -24,5 +26,5 @@ export interface AlertProps extends VariantProps<typeof alertVariants> {
   } | null
   close?: () => void
   ariaRole?: AriaRole
-  ariaLive?: "off" | "assertive" | "polite"
+  ariaLive?: 'off' | 'assertive' | 'polite'
 }

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

@@ -1,19 +1,19 @@
-"use client"
+'use client'
 
-import Body from "@scandic-hotels/design-system/Body"
-import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import { Button } from '../Button'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import Link from '../Link'
+import { Typography } from '../Typography'
 
-import AlertSidepeek from "./Sidepeek"
-import { IconByAlertType } from "./utils"
-import { alertVariants } from "./variants"
+import AlertSidepeek from './Sidepeek'
+import { IconByAlertType } from './utils'
+import { alertVariants } from './variants'
 
-import styles from "./alert.module.css"
+import styles from './alert.module.css'
 
-import type { AlertProps } from "./alert"
+import type { AlertProps } from './alert'
 
-export default function Alert({
+export function Alert({
   className,
   variant,
   type,
@@ -49,30 +49,32 @@ export default function Alert({
         <div className={styles.innerContent}>
           <div className={styles.textWrapper}>
             {heading ? (
-              <Body textTransform="bold" asChild>
+              <Typography variant="Body/Paragraph/mdBold">
                 <h2>{heading}</h2>
-              </Body>
+              </Typography>
             ) : null}
             {text ? (
-              <Body>
-                {text}
-                {phoneContact?.phoneNumber ? (
-                  <>
-                    <span> {phoneContact.displayText} </span>
-                    <Link
-                      href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
-                    >
-                      {phoneContact.phoneNumber}
-                    </Link>
-                    {phoneContact.footnote ? (
-                      <>
-                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                        <span>. ({phoneContact.footnote})</span>
-                      </>
-                    ) : null}
-                  </>
-                ) : null}
-              </Body>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p>
+                  {text}
+                  {phoneContact?.phoneNumber ? (
+                    <>
+                      <span> {phoneContact.displayText} </span>
+                      <Link
+                        href={`tel:${phoneContact.phoneNumber.replace(/ /g, '')}`}
+                      >
+                        {phoneContact.phoneNumber}
+                      </Link>
+                      {phoneContact.footnote ? (
+                        <>
+                          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                          <span>. ({phoneContact.footnote})</span>
+                        </>
+                      ) : null}
+                    </>
+                  ) : null}
+                </p>
+              </Typography>
             ) : null}
           </div>
 

packages/design-system/lib/components/Alert/utils.tsx

@@ -1,28 +1,28 @@
 import {
   MaterialIcon,
   type MaterialIconSetIconProps,
-} from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+} from '../Icons/MaterialIcon'
+import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
 
-import type { JSX } from "react"
+import type { JSX } from 'react'
 
-import type { AlertProps } from "./alert"
+import type { AlertProps } from './alert'
 
 interface IconByAlertProps {
   alertType: AlertTypeEnum
-  variant?: AlertProps["variant"]
+  variant?: AlertProps['variant']
 }
 
 export function IconByAlertType({
   alertType,
-  variant = "inline",
+  variant = 'inline',
   ...props
 }: IconByAlertProps & MaterialIconSetIconProps): JSX.Element {
   switch (alertType) {
     case AlertTypeEnum.Alarm:
       return (
         <MaterialIcon
-          color={variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Error"}
+          color={variant === 'inline' ? 'Icon/Inverted' : 'Icon/Feedback/Error'}
           isFilled
           icon="error"
           {...props}
@@ -33,7 +33,7 @@ export function IconByAlertType({
         <MaterialIcon
           icon="warning"
           color={
-            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Warning"
+            variant === 'inline' ? 'Icon/Inverted' : 'Icon/Feedback/Warning'
           }
           isFilled
           {...props}
@@ -44,7 +44,7 @@ export function IconByAlertType({
         <MaterialIcon
           icon="check_circle"
           color={
-            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Success"
+            variant === 'inline' ? 'Icon/Inverted' : 'Icon/Feedback/Success'
           }
           isFilled
           {...props}
@@ -55,7 +55,7 @@ export function IconByAlertType({
       return (
         <MaterialIcon
           color={
-            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Information"
+            variant === 'inline' ? 'Icon/Inverted' : 'Icon/Feedback/Information'
           }
           isFilled
           icon="info"

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

@@ -1,8 +1,8 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
+import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
 
-import styles from "./alert.module.css"
+import styles from './alert.module.css'
 
 export const alertVariants = cva(styles.alert, {
   variants: {
@@ -18,7 +18,7 @@ export const alertVariants = cva(styles.alert, {
     },
   },
   defaultVariants: {
-    variant: "inline",
+    variant: 'inline',
     type: AlertTypeEnum.Info,
   },
 })

packages/design-system/package.json

@@ -6,6 +6,7 @@
   "exports": {
     "./Accordion": "./lib/components/Accordion/index.tsx",
     "./Accordion/AccordionItem": "./lib/components/Accordion/AccordionItem/index.tsx",
+    "./Alert": "./lib/components/Alert/index.tsx",
     "./Avatar": "./lib/components/Avatar/index.tsx",
     "./BackToTopButton": "./lib/components/BackToTopButton/index.tsx",
     "./Body": "./lib/components/Body/index.tsx",

packages/trpc/lib/routers/contentstack/base/output.ts

@@ -1,10 +1,13 @@
 import { z, ZodError, ZodIssueCode } from "zod"
 
+import {
+  AlertTypeEnum,
+  AlertVisibleOnEnum,
+} from "@scandic-hotels/common/constants/alert"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { logger } from "@scandic-hotels/common/logger"
 import { removeMultipleSlashes } from "@scandic-hotels/common/utils/url"
 
-import { AlertTypeEnum, AlertVisibleOnEnum } from "../../../types/alert"
 import { discriminatedUnion } from "../../../utils/discriminatedUnion"
 import {
   cardBlockRefsSchema,

packages/trpc/lib/routers/hotels/schemas/hotel/specialAlerts.ts

@@ -1,10 +1,9 @@
 import { z } from "zod"
 
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { dt } from "@scandic-hotels/common/dt"
 import { nullableStringValidator } from "@scandic-hotels/common/utils/zod/stringValidator"
 
-import { AlertTypeEnum } from "../../../../types/alert"
-
 const specialAlertSchema = z.object({
   description: nullableStringValidator,
   displayInBookingFlow: z.boolean().default(false),