Merged in fix/SW-2553-sidepeeks (pull request #1919)

Fix/SW-2553 sidepeeks

* fix(SW-2553): apply sidepeek display logic

* chore: move convertToChildType and getPriceType utils

* fix: apply PR requested changes

* fix(SW-2553): fix roomNumber for multiroom

* fix(SW-2553): fix sidepeek for my-stay page


Approved-by: Michael Zetterberg
Approved-by: Bianca Widstam
Approved-by: Matilda Landström

apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx

@@ -0,0 +1,15 @@
+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>
+  )
+}

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

@@ -0,0 +1,68 @@
+"use client"
+import { useEffect } from "react"
+import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
+
+import Button from "../Button"
+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}
+                  <Button
+                    aria-label={intl.formatMessage({
+                      defaultMessage: "Close",
+                    })}
+                    className={styles.closeButton}
+                    intent="text"
+                    onPress={close}
+                  >
+                    <MaterialIcon
+                      icon="close"
+                      color="Icon/Interactive/Default"
+                    />
+                  </Button>
+                </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
+}

apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeek.ts

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

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

@@ -0,0 +1,102 @@
+.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(--Base-Background-Primary-Normal);
+  z-index: var(--sidepeek-z-index);
+}
+
+.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;
+}
+
+.closeButton {
+  padding: 0;
+}
+
+.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;
+  }
+}

apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/types.ts

@@ -0,0 +1,10 @@
+export type SidePeekProps = {
+  activeContent: string | null
+  onClose: (isOpen: boolean) => void
+}
+export type SidePeekContentProps = {
+  title?: string
+  contentKey: string
+  isActive?: boolean
+  onClose?: () => void
+}