fix(BOOK-146): Synced default Sidepeek and SelfControlled Sidepeek in regards of functionality and looks

Approved-by: Bianca Widstam

packages/design-system/lib/components/SidePeek/KeepBodyVisible.tsx

@@ -0,0 +1,13 @@
+import useSetOverflowVisibleOnRA from '@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA'
+import { useEffect } from 'react'
+
+export function KeepBodyVisible() {
+  const toggle = useSetOverflowVisibleOnRA()
+
+  useEffect(() => {
+    toggle(true)
+    return () => toggle(false)
+  }, [toggle])
+
+  return null
+}

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

@@ -5,15 +5,15 @@ import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
 import { useIntl } from 'react-intl'
 
 import usePopStateHandler from '@scandic-hotels/common/hooks/usePopStateHandler'
-import useSetOverflowVisibleOnRA from '@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA'
 
-import { IconButton } from '../../IconButton'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Typography } from '../../Typography'
+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 { KeepBodyVisible } from './KeepBodyVisible'
+import styles from './sidePeek.module.css'
 
 interface SidePeekSelfControlledProps extends React.PropsWithChildren {
   title: string
@@ -56,8 +56,9 @@ export default function SidePeekSelfControlled({
       >
         <Modal className={styles.modal}>
           <Dialog className={styles.dialog} aria-label={title}>
-            <aside className={styles.sidePeek}>
+            <aside className={styles.aside}>
               <header className={styles.header}>
+                <div className={styles.headerContent}>
                   {title ? (
                     <Typography variant="Title/md" className={styles.heading}>
                       <h2>{title}</h2>
@@ -78,6 +79,7 @@ export default function SidePeekSelfControlled({
                       color="Icon/Interactive/Default"
                     />
                   </IconButton>
+                </div>
               </header>
               <div className={styles.sidePeekContent}>{children}</div>
               <KeepBodyVisible />
@@ -90,12 +92,3 @@ export default function SidePeekSelfControlled({
     </>
   )
 }
-
-function KeepBodyVisible() {
-  const toggle = useSetOverflowVisibleOnRA()
-  useEffect(() => {
-    toggle(true)
-    return () => toggle(false)
-  }, [toggle])
-  return null
-}

packages/design-system/lib/components/SidePeek/SelfControlled/sidePeek.ts

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

packages/design-system/lib/components/SidePeek/SelfControlled/sidePeekSelfControlled.module.css

@@ -1,81 +0,0 @@
-.modal {
-  --sidepeek-desktop-width: 560px;
-}
-
-@keyframes slide-in {
-  from {
-    right: calc(-1 * var(--sidepeek-desktop-width));
-  }
-
-  to {
-    right: 0;
-  }
-}
-
-.modal[data-entering] {
-  animation: slide-in 250ms;
-}
-
-.modal[data-exiting] {
-  animation: slide-in 250ms reverse;
-}
-
-.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;
-}
-
-.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(--Space-x4);
-}
-
-.header:has(> h2) {
-  justify-content: space-between;
-}
-
-.heading {
-  color: var(--Text-Heading);
-}
-
-.sidePeekContent {
-  padding: var(--Space-x4);
-  overflow-y: auto;
-}
-
-@media screen and (min-width: 1367px) {
-  .modal {
-    top: 0;
-    right: 0px;
-    width: var(--sidepeek-desktop-width);
-    height: 100vh;
-  }
-}

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

@@ -11,6 +11,7 @@ import { SidePeekContext } from './SidePeekContext'
 import SidePeekSEO from './SidePeekSEO'
 
 import { debounce } from '@scandic-hotels/common/utils/debounce'
+import { KeepBodyVisible } from './KeepBodyVisible'
 import styles from './sidePeek.module.css'
 
 interface SidePeekProps {
@@ -112,6 +113,7 @@ export default function SidePeek({
                   </div>
                 </header>
                 <div className={styles.sidePeekContent}>{children}</div>
+                <KeepBodyVisible />
               </aside>
             </Dialog>
           </Modal>

packages/design-system/package.json

@@ -173,7 +173,7 @@
     "./Select": "./lib/components/Select/index.tsx",
     "./SidePeek": "./lib/components/SidePeek/index.tsx",
     "./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
-    "./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled/index.tsx",
+    "./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled.tsx",
     "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
     "./StaticMap": "./lib/components/StaticMap/index.tsx",
     "./Subtitle": "./lib/components/Subtitle/index.tsx",