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

fix: remove redundant DialogTrigger from SidePeek

Browse Source
This commit is contained in:
Arvid Norlin
2024-10-15 15:04:42 +02:00
parent 103dcc7f1e
commit b1beb7931a
12 changed files with 71 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
View File

@@ -36,37 +36,35 @@ export default async function StepPage({
}
return (
<>
<section>
<SectionAccordion
header="Select bed"
step={StepEnum.selectBed}
label={intl.formatMessage({ id: "Request bedtype" })}
>
<BedType />
</SectionAccordion>
<SectionAccordion
header="Food options"
step={StepEnum.breakfast}
label={intl.formatMessage({ id: "Select breakfast options" })}
>
<Breakfast />
</SectionAccordion>
<SectionAccordion
header="Details"
step={StepEnum.details}
label={intl.formatMessage({ id: "Enter your details" })}
>
<Details user={user} />
</SectionAccordion>
<SectionAccordion
header="Payment"
step={StepEnum.payment}
label={intl.formatMessage({ id: "Select payment method" })}
>
<Payment hotel={hotel.data.attributes} />
</SectionAccordion>
</section>
</>
<section>
<SectionAccordion
header="Select bed"
step={StepEnum.selectBed}
label={intl.formatMessage({ id: "Request bedtype" })}
>
<BedType />
</SectionAccordion>
<SectionAccordion
header="Food options"
step={StepEnum.breakfast}
label={intl.formatMessage({ id: "Select breakfast options" })}
>
<Breakfast />
</SectionAccordion>
<SectionAccordion
header="Details"
step={StepEnum.details}
label={intl.formatMessage({ id: "Enter your details" })}
>
<Details user={user} />
</SectionAccordion>
<SectionAccordion
header="Payment"
step={StepEnum.payment}
label={intl.formatMessage({ id: "Select payment method" })}
>
<Payment hotel={hotel.data.attributes} />
</SectionAccordion>
</section>
)
}

2
components/HotelReservation/Contact/index.tsx
View File

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

8
components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css
View File

@@ -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);

4
components/HotelReservation/EnterDetails/SidePeek/index.tsx
View File

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

75
components/TempDesignSystem/SidePeek/index.tsx
View File

@@ -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>
)
}

1
i18n/dictionaries/da.json
View File

@@ -116,7 +116,6 @@
"Get member benefits & offers": "Få medlemsfordele og tilbud",
"Go back to edit": "Gå tilbage til redigering",
"Go back to overview": "Gå tilbage til oversigten",
"Google Maps": "Google Maps",
"Guest information": "Gæsteinformation",
"Guests & Rooms": "Gæster & værelser",
"Hi": "Hei",

1
i18n/dictionaries/de.json
View File

@@ -116,7 +116,6 @@
"Get member benefits & offers": "Holen Sie sich Vorteile und Angebote für Mitglieder",
"Go back to edit": "Zurück zum Bearbeiten",
"Go back to overview": "Zurück zur Übersicht",
"Google Maps": "Google Maps",
"Guest information": "Informationen für Gäste",
"Guests & Rooms": "Gäste & Zimmer",
"Hi": "Hallo",

1
i18n/dictionaries/en.json
View File

@@ -119,7 +119,6 @@
"Get member benefits & offers": "Get member benefits & offers",
"Go back to edit": "Go back to edit",
"Go back to overview": "Go back to overview",
"Google Maps": "Google Maps",
"Guest information": "Guest information",
"Guests & Rooms": "Guests & Rooms",
"Hi": "Hi",

1
i18n/dictionaries/fi.json
View File

@@ -116,7 +116,6 @@
"Get member benefits & offers": "Hanki jäsenetuja ja -tarjouksia",
"Go back to edit": "Palaa muokkaamaan",
"Go back to overview": "Palaa yleiskatsaukseen",
"Google Maps": "Google Maps",
"Guest information": "Vieraan tiedot",
"Guests & Rooms": "Vieraat & Huoneet",
"Hi": "Hi",

1
i18n/dictionaries/no.json
View File

@@ -115,7 +115,6 @@
"Get member benefits & offers": "Få medlemsfordeler og tilbud",
"Go back to edit": "Gå tilbake til redigering",
"Go back to overview": "Gå tilbake til oversikten",
"Google Maps": "Google Maps",
"Guest information": "Informasjon til gjester",
"Guests & Rooms": "Gjester & rom",
"Hi": "Hei",

1
i18n/dictionaries/sv.json
View File

@@ -115,7 +115,6 @@
"Get member benefits & offers": "Ta del av medlemsförmåner och erbjudanden",
"Go back to edit": "Gå tillbaka till redigeringen",
"Go back to overview": "Gå tillbaka till översikten",
"Google Maps": "Google Maps",
"Guest information": "Information till gästerna",
"Guests & Rooms": "Gäster & rum",
"Hi": "Hej",

4
stores/enter-details.ts
View File

@@ -23,7 +23,7 @@ interface EnterDetailsState {
isValid: Record<StepEnum, boolean>
completeStep: (updatedData: Partial<EnterDetailsState["data"]>) => void
navigate: (step: StepEnum, searchParams?: Record<string, string>) => void
openSidePeek: (key: SidePeekEnum.hotelDetails | null) => void
openSidePeek: (key: SidePeekEnum | null) => void
closeSidePeek: () => void
}
@@ -108,7 +108,7 @@ export function initEditDetailsState(currentStep: StepEnum) {
window.history.pushState({}, "", step + "?" + query.toString())
})
),
openSidePeek: (key: SidePeekEnum | null) => set({ activeSidePeek: key }),
openSidePeek: (key) => set({ activeSidePeek: key }),
closeSidePeek: () => set({ activeSidePeek: null }),
currentStep,
activeSidePeek: null,