feat(dialog, confirmDialog): add preset for dialog and confirm dialog

RISDEV-4776

.storybook/preview.ts

@@ -1,7 +1,9 @@
 /// <reference types="vite/client" />
+
 import { Preview, setup } from "@storybook/vue3";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import PrimeVue from "primevue/config";
+import ConfirmationService from "primevue/confirmationservice";
 import ToastService from "primevue/toastservice";
 import "../public/fonts.css";
 import { RisUiTheme } from "../src/primevue";
@@ -21,6 +23,8 @@ setup((app) => {
     unstyled: true,
   });
 
+  app.use(ConfirmationService);
+
   app.use(ToastService);
 });
 

src/primevue/confirmDialog/confirmDialog.stories.ts

@@ -0,0 +1,55 @@
+import { html } from "@/lib/tags.ts";
+import { Meta, StoryObj } from "@storybook/vue3";
+import PrimevueButton from "primevue/button";
+import ConfirmDialog from "primevue/confirmdialog";
+import { useConfirm } from "primevue/useconfirm";
+import IcBaselineErrorOutline from "~icons/ic/baseline-error-outline";
+
+const meta: Meta<typeof ConfirmDialog> = {
+  component: ConfirmDialog,
+
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { ConfirmDialog, PrimevueButton, IcBaselineErrorOutline },
+    setup() {
+      const confirm = useConfirm();
+
+      const showConfirm = () => {
+        confirm.require({
+          header: "Verkündung existiert bereits",
+          message:
+            "Diese Verkündung befindet sich bereits im System. Möchten Sie die bestehende Verkündung überschreiben?",
+          acceptProps: {
+            label: "Überschreiben",
+            severity: "secondary",
+            autofocus: false,
+          },
+          rejectProps: {
+            label: "Abbrechen",
+            severity: "primary",
+            autofocus: true,
+          },
+          acceptClass: "w-full",
+          rejectClass: "w-full",
+        });
+      };
+
+      return { args, showConfirm };
+    },
+    template: html`
+      <ConfirmDialog v-bind="args">
+        <template #icon>
+          <IcBaselineErrorOutline class="text-red-800" />
+        </template>
+      </ConfirmDialog>
+
+      <PrimevueButton @click="showConfirm()" label="Save" />
+    `,
+  }),
+};

src/primevue/confirmDialog/confirmDialog.ts

@@ -0,0 +1,7 @@
+import { ConfirmDialogPassThroughOptions } from "primevue/confirmdialog";
+
+const confirmDialog: ConfirmDialogPassThroughOptions = {
+  // All styling implemented in primevue/dialog
+};
+
+export default confirmDialog;

src/primevue/dialog/dialog.css

@@ -0,0 +1,5 @@
+.ris-dialog-content {
+  svg:first-child {
+    flex: none;
+  }
+}

src/primevue/dialog/dialog.stories.ts

@@ -0,0 +1,130 @@
+import { html } from "@/lib/tags.ts";
+import { Meta, StoryObj } from "@storybook/vue3";
+import PrimevueButton from "primevue/button";
+import PrimevueDialog from "primevue/dialog";
+import { ref } from "vue";
+
+const meta: Meta<typeof PrimevueDialog> = {
+  component: PrimevueDialog,
+
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { PrimevueDialog, PrimevueButton },
+    setup() {
+      const visible = ref(false);
+
+      return { args, visible };
+    },
+    template: html`
+      <PrimevueDialog v-model:visible="visible" modal header="Header">
+        <p>This is the content of the modal.</p>
+
+        <template #footer>
+          <PrimevueButton
+            class="w-full"
+            label="Cancel"
+            severity="secondary"
+            @click="visible = false"
+          />
+
+          <PrimevueButton
+            class="w-full"
+            label="Confirm"
+            @click="visible = false"
+            autofocus
+          />
+        </template>
+      </PrimevueDialog>
+
+      <PrimevueButton @click="visible = true" label="Show dialog" />
+    `,
+  }),
+};
+
+export const Scrolling: Story = {
+  render: (args) => ({
+    components: { PrimevueDialog, PrimevueButton },
+    setup() {
+      const visible = ref(false);
+
+      return { args, visible };
+    },
+    template: html`
+      <PrimevueDialog v-model:visible="visible" modal header="Header">
+        <p>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+          takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+          amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+          kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+          amet.
+        </p>
+
+        <p>
+          Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+          molestie consequat, vel illum dolore eu feugiat nulla facilisis at
+          vero eros et accumsan et iusto odio dignissim qui blandit praesent
+          luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+          nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
+          volutpat.
+        </p>
+
+        <p>
+          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+          suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
+          vel eum iriure dolor in hendrerit in vulputate velit esse molestie
+          consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
+          accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+          delenit augue duis dolore te feugait nulla facilisi.
+        </p>
+
+        <p>
+          Nam liber tempor cum soluta nobis eleifend option congue nihil
+          imperdiet doming id quod mazim placerat facer possim assum. Lorem
+          ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+          nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        </p>
+
+        <p>
+          Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+          molestie consequat, vel illum dolore eu feugiat nulla facilisis.
+        </p>
+
+        <template #footer>
+          <PrimevueButton
+            class="w-full"
+            label="Cancel"
+            severity="secondary"
+            @click="visible = false"
+          />
+
+          <PrimevueButton
+            class="w-full"
+            label="Confirm"
+            @click="visible = false"
+            autofocus
+          />
+        </template>
+      </PrimevueDialog>
+
+      <PrimevueButton @click="visible = true" label="Show dialog" />
+    `,
+  }),
+};

src/primevue/dialog/dialog.ts

@@ -0,0 +1,51 @@
+import { tw } from "@/lib/tags";
+import { DialogPassThroughOptions } from "primevue/dialog";
+import "./dialog.css";
+
+const dialog: DialogPassThroughOptions = {
+  root: () => {
+    // Base
+    const base = tw`ris-label2-regular max-h-[90dvh] w-[95dvw] max-w-[25rem] border-2 border-blue-800 bg-white px-56 py-44 shadow-lg`;
+
+    return {
+      class: base,
+    };
+  },
+
+  header: {
+    class: tw`mb-16 flex`,
+  },
+
+  title: {
+    class: tw`ris-label1-bold flex-1`,
+  },
+
+  headerActions: {
+    class: tw`flex-none`,
+  },
+
+  pcCloseButton: {
+    root: {
+      class: tw`flex h-24 w-24 items-center justify-center p-4 text-blue-800 outline-2 outline-gray-500 hover:outline focus:outline active:outline-none`,
+    },
+  },
+
+  content: {
+    // When an SVG is the first child of the content, we're applying a flex
+    // styling. This is a heuristic for an icon in the dialog content, used
+    // (for example) by the confirm dialog. If the svg is not the first child,
+    // we assume that it is used in the context of some other layout and don't
+    // apply extra styling.
+    class: tw`ris-dialog-content overflow-auto has-[svg:first-child]:flex has-[svg:first-child]:gap-8`,
+  },
+
+  footer: {
+    class: tw`mt-40 flex items-center justify-end gap-12`,
+  },
+
+  mask: {
+    class: tw`bg-black/40`,
+  },
+};
+
+export default dialog;

src/primevue/index.ts

@@ -2,6 +2,8 @@ import "./global.css";
 
 import button from "./button/button";
 import checkbox from "./checkbox/checkbox";
+import confirmDialog from "./confirmDialog/confirmDialog";
+import dialog from "./dialog/dialog";
 import fileUpload from "./fileUpload/fileUpload";
 import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
@@ -16,6 +18,8 @@ import toast from "./toast/toast";
 export const RisUiTheme = {
   button,
   checkbox,
+  confirmDialog,
+  dialog,
   fileUpload,
   inputGroup,
   inputGroupAddon,