scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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


Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
2025-08-26 14:29:54 +00:00
parent 5f8d77e54a
commit 67bdf5bbcf
11 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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"

2
apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx
View File

@@ -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"

3
apps/scandic-web/components/TempDesignSystem/Popover/index.tsx
View File

@@ -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"

16
apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx
View File

@@ -1,16 +0,0 @@
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.
// This component is used to provide SEO information for the sidepeek content.
export default function SidePeekSEO({
title,
children,
}: React.PropsWithChildren<Pick<SidePeekSelfControlledProps, "title">>) {
return (
<div className="sr-only">
<h2>{title}</h2>
{children}
</div>
)
}

72
apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx
View File

@@ -1,72 +0,0 @@
"use client"
import { useEffect } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl"
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 useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
import SidePeekSEO from "./SidePeekSEO"
import styles from "./sidePeekSelfControlled.module.css"
import type { SidePeekSelfControlledProps } from "./sidePeek"
export default function SidePeekSelfControlled({
children,
title,
}: React.PropsWithChildren<SidePeekSelfControlledProps>) {
const intl = useIntl()
return (
<>
<ModalOverlay className={styles.overlay} isDismissable>
<Modal className={styles.modal}>
<Dialog className={styles.dialog} aria-label={title}>
{({ close }) => (
<aside className={styles.sidePeek}>
<header className={styles.header}>
{title ? (
<Typography variant="Title/md" className={styles.heading}>
<h2>{title}</h2>
</Typography>
) : null}
<IconButton
theme="Black"
style="Muted"
onPress={close}
aria-label={intl.formatMessage({
defaultMessage: "Close",
})}
>
<MaterialIcon
icon="close"
size={24}
color="Icon/Interactive/Default"
/>
</IconButton>
</header>
<div className={styles.sidePeekContent}>{children}</div>
<KeepBodyVisible />
</aside>
)}
</Dialog>
</Modal>
</ModalOverlay>
<SidePeekSEO title={title}>{children}</SidePeekSEO>
</>
)
}
function KeepBodyVisible() {
const toggle = useSetOverflowVisibleOnRA()
useEffect(() => {
toggle(true)
return () => toggle(false)
}, [toggle])
return null
}

3
apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeek.ts
View File

@@ -1,3 +0,0 @@
export interface SidePeekSelfControlledProps {
title: string
}

99
apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css
View File

@@ -1,99 +0,0 @@
.modal {
--sidepeek-desktop-width: 560px;
}
@keyframes slide-in {
from {
right: calc(-1 * var(--sidepeek-desktop-width));
}
to {
right: 0;
}
}
@keyframes slide-up {
from {
top: 100vh;
}
to {
top: 0;
}
}
.overlay {
position: fixed;
inset: 0;
z-index: var(--sidepeek-z-index);
background-color: var(--UI-Opacity-Almost-Black-30);
}
.modal {
position: fixed;
top: 0;
right: auto;
bottom: 0;
width: 100%;
height: 100vh;
background-color: var(--Background-Primary);
z-index: var(--sidepeek-z-index);
outline: none;
}
.modal[data-entering] {
animation: slide-up 300ms;
}
.modal[data-exiting] {
animation: slide-up 300ms reverse;
}
.dialog {
height: 100%;
outline: none;
}
.sidePeek {
display: grid;
grid-template-rows: min-content auto;
height: 100%;
}
.header {
display: flex;
justify-content: flex-end;
border-bottom: 1px solid var(--Base-Border-Subtle);
align-items: center;
padding: var(--Spacing-x4);
}
.header:has(> h2) {
justify-content: space-between;
}
.heading {
color: var(--Text-Heading);
}
.sidePeekContent {
padding: var(--Spacing-x4);
overflow-y: auto;
}
@media screen and (min-width: 1367px) {
.modal {
top: 0;
right: 0px;
width: var(--sidepeek-desktop-width);
height: 100vh;
}
.modal[data-entering] {
animation: slide-in 250ms;
}
.modal[data-exiting] {
animation: slide-in 250ms reverse;
}
}

11
apps/scandic-web/hooks/useSetOverflowVisibleOnRA.ts
View File

@@ -1,11 +0,0 @@
export default function useSetOverflowVisibleOnRA(isNestedInModal?: boolean) {
function setOverflowVisible(isOpen: boolean) {
if (isOpen) {
document.body.style.overflow = "visible"
} else if (!isNestedInModal) {
document.body.style.overflow = ""
}
}
return setOverflowVisible
}