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
2025-08-06 08:35:34 +00:00
parent 75ffd5d10b
commit 7fb082f712
21 changed files with 152 additions and 65 deletions
--- a/packages/design-system/lib/components/SidePeek/index.tsx
+++ b/packages/design-system/lib/components/SidePeek/index.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { useContext, useRef } from 'react'
+import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
+
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { OldDSButton as Button } from '../OldDSButton'
+import { Typography } from '../Typography'
+
+import { SidePeekContext } from './SidePeekContext'
+
+import SidePeekSEO from './SidePeekSEO'
+
+import styles from './sidePeek.module.css'
+
+interface SidePeekProps {
+  contentKey?: string
+  title: string
+  isOpen?: boolean
+  openInRoot?: boolean
+  handleClose?: (isOpen: boolean) => void
+  closeLabel: string
+}
+
+export default function SidePeek({
+  children,
+  title,
+  contentKey,
+  handleClose,
+  isOpen,
+  openInRoot = false,
+  closeLabel,
+}: React.PropsWithChildren<SidePeekProps>) {
+  const rootDiv = useRef<HTMLDivElement>(null)
+
+  const context = useContext(SidePeekContext)
+  function onClose() {
+    const closeHandler = handleClose || context?.handleClose
+    closeHandler?.(false)
+  }
+
+  return (
+    <>
+      <div ref={openInRoot ? null : rootDiv}>
+        <ModalOverlay
+          UNSTABLE_portalContainer={rootDiv.current || undefined}
+          className={styles.overlay}
+          isOpen={
+            isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
+          }
+          onOpenChange={onClose}
+          isDismissable
+        >
+          <Modal className={styles.modal}>
+            <Dialog className={styles.dialog} aria-label={title}>
+              <aside className={styles.sidePeek}>
+                <header className={styles.header}>
+                  {title ? (
+                    <Typography variant="Title/md">
+                      <h2 className={styles.heading}>{title}</h2>
+                    </Typography>
+                  ) : null}
+                  <Button
+                    aria-label={closeLabel}
+                    className={styles.closeButton}
+                    intent="text"
+                    onPress={onClose}
+                  >
+                    <MaterialIcon
+                      icon="close"
+                      color="Icon/Interactive/Default"
+                    />
+                  </Button>
+                </header>
+                <div className={styles.sidePeekContent}>{children}</div>
+              </aside>
+            </Dialog>
+          </Modal>
+        </ModalOverlay>
+      </div>
+
+      <SidePeekSEO title={title}>{children}</SidePeekSEO>
+    </>
+  )
+}