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 ( return (
<> <section>
<section> <SectionAccordion
<SectionAccordion header="Select bed"
header="Select bed" step={StepEnum.selectBed}
step={StepEnum.selectBed} label={intl.formatMessage({ id: "Request bedtype" })}
label={intl.formatMessage({ id: "Request bedtype" })} >
> <BedType />
<BedType /> </SectionAccordion>
</SectionAccordion> <SectionAccordion
<SectionAccordion header="Food options"
header="Food options" step={StepEnum.breakfast}
step={StepEnum.breakfast} label={intl.formatMessage({ id: "Select breakfast options" })}
label={intl.formatMessage({ id: "Select breakfast options" })} >
> <Breakfast />
<Breakfast /> </SectionAccordion>
</SectionAccordion> <SectionAccordion
<SectionAccordion header="Details"
header="Details" step={StepEnum.details}
step={StepEnum.details} label={intl.formatMessage({ id: "Enter your details" })}
label={intl.formatMessage({ id: "Enter your details" })} >
> <Details user={user} />
<Details user={user} /> </SectionAccordion>
</SectionAccordion> <SectionAccordion
<SectionAccordion header="Payment"
header="Payment" step={StepEnum.payment}
step={StepEnum.payment} label={intl.formatMessage({ id: "Select payment method" })}
label={intl.formatMessage({ id: "Select payment method" })} >
> <Payment hotel={hotel.data.attributes} />
<Payment hotel={hotel.data.attributes} /> </SectionAccordion>
</SectionAccordion> </section>
</section>
</>
) )
} }

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

@@ -33,7 +33,7 @@ export default function Contact({ hotel }: ContactProps) {
{intl.formatMessage({ id: "Driving directions" })} {intl.formatMessage({ id: "Driving directions" })}
</span> </span>
<Link href="#" color="peach80"> <Link href="#" color="peach80">
{intl.formatMessage({ id: "Google Maps" })} Google Maps
</Link> </Link>
</li> </li>
<li> <li>

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

@@ -1,10 +1,4 @@
.article { .spacing {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}
.section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x2); 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} isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
handleClose={close} handleClose={close}
> >
<article className={styles.article}> <article className={styles.spacing}>
<Contact hotel={hotel} /> <Contact hotel={hotel} />
<Divider /> <Divider />
<section className={styles.section}> <section className={styles.spacing}>
<Body>{hotel.hotelContent.texts.descriptions.medium}</Body> <Body>{hotel.hotelContent.texts.descriptions.medium}</Body>
<Body>{hotel.hotelContent.texts.facilityInformation}</Body> <Body>{hotel.hotelContent.texts.facilityInformation}</Body>

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

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

1
i18n/dictionaries/da.json
View File

@@ -116,7 +116,6 @@
"Get member benefits & offers": "Få medlemsfordele og tilbud", "Get member benefits & offers": "Få medlemsfordele og tilbud",
"Go back to edit": "Gå tilbage til redigering", "Go back to edit": "Gå tilbage til redigering",
"Go back to overview": "Gå tilbage til oversigten", "Go back to overview": "Gå tilbage til oversigten",
"Google Maps": "Google Maps",
"Guest information": "Gæsteinformation", "Guest information": "Gæsteinformation",
"Guests & Rooms": "Gæster & værelser", "Guests & Rooms": "Gæster & værelser",
"Hi": "Hei", "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", "Get member benefits & offers": "Holen Sie sich Vorteile und Angebote für Mitglieder",
"Go back to edit": "Zurück zum Bearbeiten", "Go back to edit": "Zurück zum Bearbeiten",
"Go back to overview": "Zurück zur Übersicht", "Go back to overview": "Zurück zur Übersicht",
"Google Maps": "Google Maps",
"Guest information": "Informationen für Gäste", "Guest information": "Informationen für Gäste",
"Guests & Rooms": "Gäste & Zimmer", "Guests & Rooms": "Gäste & Zimmer",
"Hi": "Hallo", "Hi": "Hallo",

1
i18n/dictionaries/en.json
View File

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

1
i18n/dictionaries/fi.json
View File

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

1
i18n/dictionaries/no.json
View File

@@ -115,7 +115,6 @@
"Get member benefits & offers": "Få medlemsfordeler og tilbud", "Get member benefits & offers": "Få medlemsfordeler og tilbud",
"Go back to edit": "Gå tilbake til redigering", "Go back to edit": "Gå tilbake til redigering",
"Go back to overview": "Gå tilbake til oversikten", "Go back to overview": "Gå tilbake til oversikten",
"Google Maps": "Google Maps",
"Guest information": "Informasjon til gjester", "Guest information": "Informasjon til gjester",
"Guests & Rooms": "Gjester & rom", "Guests & Rooms": "Gjester & rom",
"Hi": "Hei", "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", "Get member benefits & offers": "Ta del av medlemsförmåner och erbjudanden",
"Go back to edit": "Gå tillbaka till redigeringen", "Go back to edit": "Gå tillbaka till redigeringen",
"Go back to overview": "Gå tillbaka till översikten", "Go back to overview": "Gå tillbaka till översikten",
"Google Maps": "Google Maps",
"Guest information": "Information till gästerna", "Guest information": "Information till gästerna",
"Guests & Rooms": "Gäster & rum", "Guests & Rooms": "Gäster & rum",
"Hi": "Hej", "Hi": "Hej",

4
stores/enter-details.ts
View File

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