Merged in feat/sw-3218-move-sidepeek-to-design-system (pull request #2598)

feat(SW-3218): Move SidePeek to design-system

* Remove SidePeekProvider dependency on Next

* Remove dependency on i18n in sidepeek

* Inline types

* Move SidePeek to design-system

* Fix align-items value


Approved-by: Bianca Widstam

apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx

@@ -2,13 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import SidePeek from "@scandic-hotels/design-system/SidePeek"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
 import Contact from "@/components/HotelReservation/Contact"
 import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
 import Accordion from "@/components/TempDesignSystem/Accordion"
-import SidePeek from "@/components/TempDesignSystem/SidePeek"
 
 import AccessibilityAccordionItem from "../AmenitiesSidepeekContent/Accordions/Accessibility"
 import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Breakfast"
@@ -34,6 +34,9 @@ export default function HotelSidePeek({
       title={hotel.name}
       isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
       handleClose={close}
+      closeLabel={intl.formatMessage({
+        defaultMessage: "Close",
+      })}
     >
       <div className={styles.content}>
         <Typography variant="Title/Subtitle/lg">

apps/scandic-web/components/SidePeeks/RoomSidePeek/index.tsx

@@ -1,4 +1,6 @@
-import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import { useIntl } from "react-intl"
+
+import SidePeek from "@scandic-hotels/design-system/SidePeek"
 
 import { RoomSidePeekContent } from "./RoomSidePeekContent"
 
@@ -10,11 +12,16 @@ export default function RoomSidePeek({
   activeSidePeek,
   close,
 }: RoomSidePeekProps) {
+  const intl = useIntl()
+
   return (
     <SidePeek
       title={room.name}
       isOpen={activeSidePeek === SidePeekEnum.roomDetails}
       handleClose={close}
+      closeLabel={intl.formatMessage({
+        defaultMessage: "Close",
+      })}
     >
       <RoomSidePeekContent room={room} />
     </SidePeek>

apps/scandic-web/components/SidePeeks/SidePeekProvider/index.tsx

@@ -1,51 +0,0 @@
-"use client"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { createContext, useEffect, useState } from "react"
-
-interface SidepeekProviderProps extends React.PropsWithChildren {
-  onOpen?: (sidePeek: string) => void
-}
-
-interface ISidePeekContext {
-  handleClose: (isOpen: boolean) => void
-  activeSidePeek: string | null
-}
-
-export const SidePeekContext = createContext<ISidePeekContext | null>(null)
-
-export default function SidePeekProvider({
-  children,
-  onOpen,
-}: SidepeekProviderProps) {
-  const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const [activeSidePeek, setActiveSidePeek] = useState<string | null>(null)
-  useEffect(() => {
-    const sidePeekParam = searchParams.get("s")
-    if (sidePeekParam !== activeSidePeek) {
-      setActiveSidePeek(sidePeekParam)
-    }
-  }, [searchParams, activeSidePeek])
-
-  useEffect(() => {
-    if (activeSidePeek && onOpen) {
-      onOpen(activeSidePeek)
-    }
-  }, [activeSidePeek, onOpen])
-
-  function handleClose(isOpen: boolean) {
-    if (!isOpen) {
-      const nextSearchParams = new URLSearchParams(searchParams.toString())
-      nextSearchParams.delete("s")
-      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
-      setActiveSidePeek(null)
-    }
-  }
-
-  return (
-    <SidePeekContext.Provider value={{ handleClose, activeSidePeek }}>
-      {children}
-    </SidePeekContext.Provider>
-  )
-}