fix: remove redundant DialogTrigger from SidePeek

2024-10-15 15:04:42 +02:00
parent 103dcc7f1e
commit b1beb7931a
12 changed files with 71 additions and 90 deletions
@@ -33,7 +33,7 @@ export default function Contact({ hotel }: ContactProps) {
              {intl.formatMessage({ id: "Driving directions" })}
            </span>
            <Link href="#" color="peach80">
-              {intl.formatMessage({ id: "Google Maps" })}
+              Google Maps
            </Link>
          </li>
          <li>
@@ -1,10 +1,4 @@
-.article {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
-}
-
-.section {
+.spacing {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x2);
@@ -28,10 +28,10 @@ export default function EnterDetailsSidePeek({ hotel }: SidePeekProps) {
      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
      handleClose={close}
    >
-      <article className={styles.article}>
+      <article className={styles.spacing}>
        <Contact hotel={hotel} />
        <Divider />
-        <section className={styles.section}>
+        <section className={styles.spacing}>
          <Body>{hotel.hotelContent.texts.descriptions.medium}</Body>

          <Body>{hotel.hotelContent.texts.facilityInformation}</Body>
@@ -10,7 +10,7 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"

-import { CloseLargeIcon } from "@/components/Icons"
+import { CloseIcon } from "@/components/Icons"
 import { SidePeekContext } from "@/components/SidePeekProvider"

 import Button from "../Button"
@@ -52,48 +52,43 @@ function SidePeek({
      </div>
    )
  }
-
  return (
    <div ref={setRef}>
-      <DialogTrigger>
-        <ModalOverlay
-          UNSTABLE_portalContainer={rootDiv}
-          className={styles.overlay}
-          isOpen={
-            isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
-          }
-          onOpenChange={onClose}
-          isDismissable
-        >
-          <Modal className={styles.modal}>
-            <Dialog className={styles.dialog}>
-              <aside className={styles.sidePeek}>
-                <header className={styles.header}>
-                  {title ? (
-                    <Title
-                      color="burgundy"
-                      textTransform="uppercase"
-                      level="h2"
-                      as="h3"
-                    >
-                      {title}
-                    </Title>
-                  ) : null}
-                  <Button
-                    aria-label={intl.formatMessage({ id: "Close" })}
-                    className={styles.closeButton}
-                    intent="text"
-                    onPress={onClose}
+      <ModalOverlay
+        UNSTABLE_portalContainer={rootDiv}
+        className={styles.overlay}
+        isOpen={isOpen || 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 ? (
+                  <Title
+                    color="burgundy"
+                    textTransform="uppercase"
+                    level="h2"
+                    as="h3"
                  >
-                    <CloseLargeIcon color="burgundy" />
-                  </Button>
-                </header>
-                <div className={styles.sidePeekContent}>{children}</div>
-              </aside>
-            </Dialog>
-          </Modal>
-        </ModalOverlay>
-      </DialogTrigger>
+                    {title}
+                  </Title>
+                ) : null}
+                <Button
+                  aria-label={intl.formatMessage({ id: "Close" })}
+                  className={styles.closeButton}
+                  intent="text"
+                  onPress={onClose}
+                >
+                  <CloseIcon color="burgundy" height={32} width={32} />
+                </Button>
+              </header>
+              <div className={styles.sidePeekContent}>{children}</div>
+            </aside>
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
    </div>
  )
 }