75a377b59e
chore(SW-3145): Move Body component to design-system * Move Body component to design-system Approved-by: Joakim Jäderberg
87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
"use client"
|
|
import {
|
|
Dialog as AriaDialog,
|
|
DialogTrigger,
|
|
Modal,
|
|
ModalOverlay,
|
|
} from "react-aria-components"
|
|
|
|
import Body from "@scandic-hotels/design-system/Body"
|
|
|
|
import LoadingSpinner from "@/components/LoadingSpinner"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./dialog.module.css"
|
|
|
|
import type { DialogProps } from "@/types/components/dialog"
|
|
|
|
export default function Dialog({
|
|
bodyText,
|
|
cancelButtonText,
|
|
proceedHref,
|
|
proceedIsPending = false,
|
|
proceedOnClick = () => {},
|
|
proceedText,
|
|
titleText,
|
|
trigger,
|
|
}: DialogProps) {
|
|
return (
|
|
<DialogTrigger>
|
|
{trigger}
|
|
<ModalOverlay className={styles.overlay} isDismissable>
|
|
<Modal>
|
|
<AriaDialog role="alertdialog" className={styles.dialog}>
|
|
{({ close }) => (
|
|
<section className={styles.modal}>
|
|
<header className={styles.header}>
|
|
<Subtitle textAlign="center">{titleText}</Subtitle>
|
|
<Body textAlign="center">{bodyText}</Body>
|
|
</header>
|
|
{proceedIsPending ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<footer className={styles.footer}>
|
|
<Button
|
|
intent="secondary"
|
|
onPress={close}
|
|
size="medium"
|
|
theme="base"
|
|
>
|
|
{cancelButtonText}
|
|
</Button>
|
|
{proceedHref ? (
|
|
<Button
|
|
asChild
|
|
intent="primary"
|
|
size="medium"
|
|
theme="base"
|
|
>
|
|
<Link color="none" href={proceedHref}>
|
|
{proceedText}
|
|
</Link>
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
intent="primary"
|
|
onPress={() => {
|
|
proceedOnClick(close)
|
|
}}
|
|
size="medium"
|
|
theme="base"
|
|
>
|
|
{proceedText}
|
|
</Button>
|
|
)}
|
|
</footer>
|
|
)}
|
|
</section>
|
|
)}
|
|
</AriaDialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
</DialogTrigger>
|
|
)
|
|
}
|