feat(toast): add toast component

RISDEV-4777

.storybook/preview.ts

@@ -1,11 +1,13 @@
 import { setup } from "@storybook/vue3";
 import PrimeVue from "primevue/config";
 import { RisUiTheme } from "../src/primevue";
+import ToastService from "primevue/toastservice";
 import "../public/fonts.css";
 
 setup((app) => {
   app.use(PrimeVue, {
     pt: RisUiTheme,
     unstyled: true,
   });
+  app.use(ToastService);
 });

src/primevue/index.ts

@@ -5,11 +5,13 @@ import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
 import password from "./password/password";
+import toast from "./toast/toast";
 
 export const RisUiTheme = {
   button,
   inputText,
   inputGroup,
   inputGroupAddon,
   password,
+  toast
 };

src/primevue/toast/toast.stories.ts

@@ -0,0 +1,139 @@
+import { Meta, StoryObj } from "@storybook/vue3";
+import Toast from "primevue/toast";
+import { useToast } from "primevue/usetoast";
+import { html } from "@/lib/tags.ts";
+import Btn from "primevue/button";
+import IconCheck from "~icons/ic/baseline-check-circle-outline";
+
+
+const meta: Meta<typeof Toast> = {
+    component: Toast,
+    tags: ["autodocs"],
+    args: {
+        position: 'top-right',
+    },
+
+    argTypes: {
+        position: {
+            control: { type: 'select' },
+            options: [
+                'top-right', 'top-left',
+                'bottom-right', 'bottom-left',
+            ],
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Success: Story = {
+    render: (args) => ({
+        components: { Toast, Btn, IconCheck },
+        setup() {
+            const toast = useToast();
+
+            const showSuccess = () => {
+                toast.add({
+                    severity: 'success',
+                    summary: 'Verkündung erfolgreich hochgeladen',
+                    detail: 'Sie können mit der Arbeit an der neuen Verkündung beginnen.',
+                    life: 3000
+                });
+            };
+
+            return { args, showSuccess };
+        },
+        template: html`
+            <div class="card flex">
+                <Toast v-bind="args">
+                    <template #messageicon>
+                        <IconCheck/>
+                    </template>
+                </Toast>
+                <Btn label="Success" @click="showSuccess" />
+            </div>
+        `,
+    }),
+};
+
+export const Warning: Story = {
+    render: (args) => ({
+        components: { Toast, Btn },
+        setup() {
+            const toast = useToast();
+
+            const showWarn = () => {
+                toast.add({
+                    severity: 'warn',
+                    summary: 'This is a warning',
+                    detail: 'This is a warning message.',
+                    life: 3000
+                });
+            };
+
+            return { args, showWarn };
+        },
+        template: html`
+            <div class="card flex">
+                <Toast v-bind="args"/>
+                <Btn label="Warning" @click="showWarn" />
+            </div>
+        `,
+    }),
+};
+
+export const Error: Story = {
+    render: (args) => ({
+        components: { Toast, Btn },
+        setup() {
+            const toast = useToast();
+
+            const showError = () => {
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'An error occurred.',
+                    life: 3000
+                });
+            };
+
+            return { args, showError };
+        },
+        template: html`
+            <div class="card flex">
+                <Toast v-bind="args"/>
+                <Btn label="Error Toast" @click="showError" />
+            </div>
+        `,
+    }),
+};
+
+export const SuccessSticky: Story = {
+    render: (args) => ({
+        components: { Toast, Btn, IconCheck },
+        setup() {
+            const toast = useToast();
+
+            const showSuccess = () => {
+                toast.add({
+                    severity: 'success',
+                    summary: 'Verkündung erfolgreich hochgeladen',
+                    detail: 'Sie können mit der Arbeit an der neuen Verkündung beginnen.',
+                });
+            };
+
+            return { args, showSuccess };
+        },
+        template: html`
+            <div class="card flex">
+                <Toast v-bind="args">
+                    <template #messageicon>
+                        <IconCheck/>
+                    </template>
+                </Toast>
+                <Btn label="Sticky Toast" @click="showSuccess" />
+            </div>
+        `,
+    }),
+};

src/primevue/toast/toast.ts

@@ -0,0 +1,62 @@
+import { ToastPassThroughOptions } from "primevue/toast";
+import { tw } from "@/lib/tags.ts";
+
+const toast: ToastPassThroughOptions = {
+    message: ({ props }) => {
+        const base = tw`flex flex-row items-center gap-8 border-l-8 p-16`;
+
+        const severity = props.message?.severity;
+
+        const success = tw`border-l-green-900 bg-green-200`;
+        const error = tw`border-l-red-900 bg-red-200 text-red-900`;
+        const warn = tw`border-l-yellow-900 bg-yellow-200 text-yellow-900`;
+
+        return {
+            class: {
+                [base]: true,
+                [success]: severity === "success",
+                [error]: severity === "error",
+                [warn]: severity === "warn",
+            },
+        };
+    },
+
+    messageContent: () => ({
+        class: tw`flex flex-row items-start gap-8`,
+    }),
+
+    messageIcon: ({ props }) => {
+        const baseIcon = tw`p-2 w-20 h-20`;
+
+        const severity = props.message?.severity ?? "info";
+
+        const successIcon = tw`text-green-900`;
+        const errorIcon = tw`text-red-800`;
+        const warnIcon = tw`text-yellow-800`;
+        const infoIcon = tw`text-blue-800`;
+
+        return {
+            class: {
+                [baseIcon]: true,
+                [successIcon]: severity === "success",
+                [errorIcon]: severity === "error",
+                [warnIcon]: severity === "warn",
+                [infoIcon]: severity === "info",
+            },
+        };
+    },
+
+    messageText: () => ({
+        class: tw`text-black`,
+    }),
+
+    summary: () => ({
+        class: tw`font-bold`,
+    }),
+
+    closeIcon: () => ({
+        class: tw`text-blue-800`,
+    }),
+};
+
+export default toast;