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"

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

@@ -1,52 +0,0 @@
-"use client"
-
-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 styles from "./sidepeek.module.css"
-
-import type { AlertSidepeekProps } from "./sidepeek"
-
-export default function AlertSidepeek({
-  ctaText,
-  sidePeekContent,
-}: AlertSidepeekProps) {
-  const intl = useIntl()
-  const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
-  const { heading, content } = sidePeekContent
-
-  return (
-    <div className={styles.alertSidepeek}>
-      <Button
-        onPress={() => setSidePeekIsOpen(true)}
-        theme="base"
-        variant="icon"
-        intent="text"
-        size="small"
-        wrapping
-      >
-        {ctaText}
-        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
-      </Button>
-
-      <SidePeek
-        title={heading}
-        isOpen={sidePeekIsOpen}
-        handleClose={() => setSidePeekIsOpen(false)}
-        closeLabel={intl.formatMessage({
-          defaultMessage: "Close",
-        })}
-      >
-        <JsonToHtml
-          nodes={content.json.children}
-          embeds={content.embedded_itemsConnection.edges}
-        />
-      </SidePeek>
-    </div>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/sidepeek.module.css

@@ -1,3 +0,0 @@
-.alertSidepeek {
-  flex-shrink: 0;
-}

apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/sidepeek.ts

@@ -1,6 +0,0 @@
-import type { SidepeekContent } from "@scandic-hotels/trpc/types/siteConfig"
-
-export interface AlertSidepeekProps {
-  ctaText: string
-  sidePeekContent: NonNullable<SidepeekContent>
-}

apps/scandic-web/components/TempDesignSystem/Alert/alert.module.css

@@ -1,115 +0,0 @@
-.alert {
-  overflow: hidden;
-}
-
-.iconWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.content {
-  width: 100%;
-  max-width: var(--max-width-page);
-  margin: 0 auto;
-  display: flex;
-  gap: var(--Spacing-x2);
-}
-
-.innerContent {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x2) 0;
-  flex-grow: 1;
-}
-
-.textWrapper {
-  display: grid;
-  gap: var(--Spacing-x-half);
-}
-
-.alert .closeButton {
-  padding: var(--Spacing-x-one-and-half);
-  display: flex;
-  align-items: center;
-}
-
-/* Intent: inline */
-.inline {
-  border-radius: var(--Corner-radius-lg);
-  border: 1px solid var(--Base-Border-Subtle);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-.inline .innerContent {
-  padding-right: var(--Spacing-x3);
-}
-.inline .iconWrapper {
-  padding: var(--Spacing-x-one-and-half);
-}
-.inline.alarm .iconWrapper {
-  background-color: var(--Surface-Feedback-Error-Accent);
-}
-.inline.warning .iconWrapper {
-  background-color: var(--Surface-Feedback-Warning-Accent);
-}
-.inline.info .iconWrapper {
-  background-color: var(--Surface-Feedback-Information-Accent);
-}
-.inline.success .iconWrapper {
-  background-color: var(--Surface-Feedback-Succes-Accent);
-}
-.inline .icon,
-.inline .icon * {
-  fill: var(--Base-Surface-Primary-light-Normal);
-}
-
-/* Intent: banner */
-.banner {
-  border-left-width: 6px;
-  border-left-style: solid;
-}
-.banner.alarm {
-  border-left-color: var(--Surface-Feedback-Error-Accent);
-  background-color: var(--Scandic-Red-00);
-}
-.banner.warning {
-  border-left-color: var(--Surface-Feedback-Warning-Accent);
-  background-color: var(--Scandic-Yellow-00);
-}
-.banner.info {
-  border-left-color: var(--Surface-Feedback-Information-Accent);
-  background-color: var(--Scandic-Blue-00);
-}
-.banner.success {
-  border-left-color: var(--Surface-Feedback-Succes-Accent);
-  background-color: var(--Scandic-Green-00);
-}
-.banner.alarm .icon,
-.banner.alarm .icon * {
-  fill: var(--Surface-Feedback-Error-Accent);
-}
-.banner.warning .icon,
-.banner.warning .icon * {
-  fill: var(--Surface-Feedback-Warning-Accent);
-}
-.banner.info .icon,
-.banner.info .icon * {
-  fill: var(--Surface-Feedback-Information-Accent);
-}
-
-.banner.success .icon,
-.banner.sucess .icon * {
-  fill: var(--Surface-Feedback-Succes-Accent);
-}
-
-@media screen and (min-width: 768px) {
-  .innerContent {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--Spacing-x2);
-  }
-}

apps/scandic-web/components/TempDesignSystem/Alert/alert.ts

@@ -1,28 +0,0 @@
-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 { alertVariants } from "./variants"
-
-export interface AlertProps extends VariantProps<typeof alertVariants> {
-  className?: string
-  type: AlertTypeEnum
-  heading?: string | null
-  text?: string | null
-  phoneContact?: {
-    displayText: string
-    phoneNumber?: string
-    footnote?: string | null
-  } | null
-  sidepeekContent?: SidepeekContent | null
-  sidepeekCtaText?: string | null
-  link?: {
-    url: string
-    title: string
-    keepSearchParams?: boolean
-  } | null
-  close?: () => void
-  ariaRole?: AriaRole
-  ariaLive?: "off" | "assertive" | "polite"
-}

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

@@ -1,103 +0,0 @@
-"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 AlertSidepeek from "./Sidepeek"
-import { IconByAlertType } from "./utils"
-import { alertVariants } from "./variants"
-
-import styles from "./alert.module.css"
-
-import type { AlertProps } from "./alert"
-
-export default function Alert({
-  className,
-  variant,
-  type,
-  heading,
-  text,
-  link,
-  close,
-  phoneContact,
-  sidepeekCtaText,
-  sidepeekContent,
-  ariaLive,
-  ariaRole,
-}: AlertProps) {
-  const classNames = alertVariants({
-    className,
-    variant,
-    type,
-  })
-
-  if (!text && !heading) {
-    return null
-  }
-  return (
-    <section className={classNames} role={ariaRole} aria-live={ariaLive}>
-      <div className={styles.content}>
-        <span className={styles.iconWrapper}>
-          <IconByAlertType
-            alertType={type}
-            className={styles.icon}
-            variant={variant}
-          />
-        </span>
-        <div className={styles.innerContent}>
-          <div className={styles.textWrapper}>
-            {heading ? (
-              <Body textTransform="bold" asChild>
-                <h2>{heading}</h2>
-              </Body>
-            ) : 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>
-            ) : null}
-          </div>
-
-          {link ? (
-            <Link
-              textDecoration="underline"
-              href={link.url}
-              keepSearchParams={link.keepSearchParams}
-            >
-              {link.title}
-            </Link>
-          ) : null}
-          {!link && sidepeekCtaText && sidepeekContent ? (
-            <AlertSidepeek
-              ctaText={sidepeekCtaText}
-              sidePeekContent={sidepeekContent}
-            />
-          ) : null}
-        </div>
-        {close ? (
-          <Button onPress={close} variant="Text" className={styles.closeButton}>
-            <MaterialIcon icon="close" color="CurrentColor" />
-          </Button>
-        ) : null}
-      </div>
-    </section>
-  )
-}

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

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

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

@@ -1,24 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
-
-import styles from "./alert.module.css"
-
-export const alertVariants = cva(styles.alert, {
-  variants: {
-    variant: {
-      inline: styles.inline,
-      banner: styles.banner,
-    },
-    type: {
-      [AlertTypeEnum.Info]: styles.info,
-      [AlertTypeEnum.Warning]: styles.warning,
-      [AlertTypeEnum.Alarm]: styles.alarm,
-      [AlertTypeEnum.Success]: styles.success,
-    },
-  },
-  defaultVariants: {
-    variant: "inline",
-    type: AlertTypeEnum.Info,
-  },
-})