Modals

Use Modals for dialog boxes. If you need the modal to open by itself, pass { open: true } as an option.

import { ButtonKind } from "@hedia/windfall/css/buttons";
import { ModalSize } from "@hedia/windfall/css/modals";
import { button } from "@hedia/windfall/html/buttons";
import { modalBody, modalDialog, modalFooter, modalHeader, modalTitle } from "@hedia/windfall/html/modals";
import { paragraph } from "@hedia/windfall/html/paragraph";

button(
	{
		kind: ButtonKind.Primary,
		"data-action": "showModal",
		"data-target": "#modal",
	},
	"Show modal",
),
modalDialog(
	{ id: "modal", size: ModalSize.Small },
	modalHeader(modalTitle("Lorem ipsum dolor sit amet.")),
	modalBody(
		paragraph(
			"Suspendisse sodales orci nec sodales ultrices. Cras velit augue, accumsan non lobortis id, sollicitudin sed massa.",
		),
	),
	modalFooter(
		button({ kind: ButtonKind.Primary }, "Primary Action"),
		button({ kind: ButtonKind.Secondary, "data-action": "close" }, "Cancel"),
	),
),