Merged in chore/SW-3298-move-sidepeekselfcontrolled- (pull request #2710)

chore(SW-3298): Moved SidePeekSelfControlled to design system

* chore(SW-3298): Moved SidePeekSelfControlled to design system


Approved-by: Anton Gunnarsson

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx

@@ -10,6 +10,7 @@ import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
+import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -17,7 +18,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
-import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
 
 import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup"
 

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

@@ -9,6 +9,7 @@ import IconChip from "@scandic-hotels/design-system/IconChip"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
@@ -17,7 +18,6 @@ import PriceType from "@/components/HotelReservation/MyStay/PriceType"
 import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
 import { sumPackages } from "@/components/HotelReservation/utils"
 import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription"
-import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import useLang from "@/hooks/useLang"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 

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

@@ -4,8 +4,8 @@ import { DialogTrigger } from "react-aria-components"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
-import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import { trackOpenSidePeekEvent } from "@/utils/tracking"
 
 import { HotelSidePeekContent } from "./HotelSidePeekContent"

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

@@ -4,8 +4,8 @@ import { DialogTrigger } from "react-aria-components"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
-import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import { trackOpenSidePeekEvent } from "@/utils/tracking"
 
 import { RoomSidePeekContent } from "./RoomSidePeekContent"

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

@@ -6,10 +6,9 @@ import {
   Popover as RAPopover,
 } from "react-aria-components"
 
+import useSetOverFlowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import useSetOverFlowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
-
 import { Arrow } from "./Arrow"
 
 import styles from "./popover.module.css"

packages/design-system/lib/components/SidePeek/SelfControlled/SidePeekSEO.tsx

@@ -1,4 +1,4 @@
-import type { SidePeekSelfControlledProps } from "./sidePeek"
+import type { SidePeekSelfControlledProps } from './sidePeek'
 
 // Sidepeeks generally have important content that should be indexed by search engines.
 // The content is hidden behind a modal, but it is still important for SEO.
@@ -6,7 +6,7 @@ import type { SidePeekSelfControlledProps } from "./sidePeek"
 export default function SidePeekSEO({
   title,
   children,
-}: React.PropsWithChildren<Pick<SidePeekSelfControlledProps, "title">>) {
+}: React.PropsWithChildren<Pick<SidePeekSelfControlledProps, 'title'>>) {
   return (
     <div className="sr-only">
       <h2>{title}</h2>

packages/design-system/lib/components/SidePeek/SelfControlled/index.tsx

@@ -1,20 +1,20 @@
-"use client"
+'use client'
 
-import { useEffect } from "react"
+import { useEffect } from 'react'
-import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
-import { useIntl } from "react-intl"
+import { useIntl } from 'react-intl'
 
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import useSetOverflowVisibleOnRA from '@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA'
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
+import { IconButton } from '../../IconButton'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
 
-import SidePeekSEO from "./SidePeekSEO"
+import SidePeekSEO from './SidePeekSEO'
 
-import styles from "./sidePeekSelfControlled.module.css"
+import styles from './sidePeekSelfControlled.module.css'
 
-import type { SidePeekSelfControlledProps } from "./sidePeek"
+import type { SidePeekSelfControlledProps } from './sidePeek'
 
 export default function SidePeekSelfControlled({
   children,
@@ -39,7 +39,7 @@ export default function SidePeekSelfControlled({
                     style="Muted"
                     onPress={close}
                     aria-label={intl.formatMessage({
-                      defaultMessage: "Close",
+                      defaultMessage: 'Close',
                     })}
                   >
                     <MaterialIcon

packages/design-system/package.json

@@ -144,6 +144,7 @@
     "./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
     "./Select": "./lib/components/Select/index.tsx",
     "./SidePeek": "./lib/components/SidePeek/index.tsx",
+    "./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled/index.tsx",
     "./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
     "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
     "./StaticMap": "./lib/components/StaticMap/index.tsx",