feat(toast): cleans up stories

RISDEV-4777
digitalservicebund · Sep 9, 2024 · 8988ec6 · 8988ec6
1 parent ed54bc0
commit 8988ec6
Showing 1 changed file with 35 additions and 42 deletions.
diff --git a/src/primevue/toast/toast.stories.ts b/src/primevue/toast/toast.stories.ts
@@ -51,58 +51,55 @@ export const Success: Story = {
     `,
   }),
 };
-
-export const WarningAutoClose: Story = {
+export const Info: Story = {
   render: (args) => ({
     components: { Toast, Btn },
     setup() {
       const toast = useToast();
 
-      const showWarn = () => {
+      const showInfo = () => {
         toast.add({
-          severity: "warn",
-          summary: "This is a warning",
-          detail: "This is a warning message.",
-          life: 3000,
+          severity: "info",
+          summary: "Info Message",
+          detail: "This is an informational message.",
         });
       };
 
-      return { args, showWarn };
+      return { args, showInfo };
     },
     template: html`
       <div class="card flex">
         <Toast v-bind="args" />
-        <Btn label="Warning" @click="showWarn" />
+        <Btn label="Info" @click="showInfo" />
       </div>
     `,
   }),
 };
-
-export const Info: Story = {
+export const WarningWithAutoClose: Story = {
   render: (args) => ({
     components: { Toast, Btn },
     setup() {
       const toast = useToast();
 
-      const showInfo = () => {
+      const showWarn = () => {
         toast.add({
-          severity: "info",
-          summary: "Info Message",
-          detail: "This is an informational message.",
+          severity: "warn",
+          summary: "This is a warning",
+          detail: "This is a warning message.",
+          life: 3000,
         });
       };
 
-      return { args, showInfo };
+      return { args, showWarn };
     },
     template: html`
       <div class="card flex">
         <Toast v-bind="args" />
-        <Btn label="Show Info Toast" @click="showInfo" />
+        <Btn label="Warning" @click="showWarn" />
       </div>
     `,
   }),
 };
-
 export const Error: Story = {
   render: (args) => ({
     components: { Toast, Btn },
@@ -122,64 +119,60 @@ export const Error: Story = {
     template: html`
       <div class="card flex">
         <Toast v-bind="args" />
-        <Btn label="Error Toast" @click="showError" />
+        <Btn label="Error" @click="showError" />
       </div>
     `,
   }),
 };
-
-export const SuccessSticky: Story = {
+export const MultipleToasts: Story = {
   render: (args) => ({
-    components: { Toast, Btn, IconCheck },
+    components: { Toast, Btn },
     setup() {
       const toast = useToast();
 
-      const showSuccess = () => {
+      const showMultiple = () => {
         toast.add({
           severity: "success",
           summary: "Verkündung erfolgreich hochgeladen",
           detail: "Sie können mit der Arbeit an der neuen Verkündung beginnen.",
         });
+        toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content' });
+        toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content'});
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content'});
       };
 
-      return { args, showSuccess };
+      return { args, showMultiple };
     },
     template: html`
       <div class="card flex">
-        <Toast v-bind="args">
-          <template #messageicon>
-            <IconCheck />
-          </template>
-        </Toast>
-        <Btn label="Sticky Toast" @click="showSuccess" />
+        <Toast v-bind="args"/>
+        <Btn label="Multiple Toasts" @click="showMultiple()" />
       </div>
     `,
   }),
 };
-
-export const MultipleToasts: Story = {
+export const ErrorNotClosableShortLived: Story = {
   render: (args) => ({
     components: { Toast, Btn },
     setup() {
       const toast = useToast();
 
-      const showMultiple = () => {
+      const showError = () => {
         toast.add({
-          severity: "success",
-          summary: "Verkündung erfolgreich hochgeladen",
-          detail: "Sie können mit der Arbeit an der neuen Verkündung beginnen.",
+          severity: "error",
+          summary: "Error",
+          detail: "An error occurred.",
+          closable: false,
+          life: 5000,
         });
-        toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content' });
-        toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content'});
-        toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content'});
       };
 
-      return { args, showMultiple };
+      return { args, showError };
     },
     template: html`
       <div class="card flex">
-        <Toast v-bind="args"/>
-        <Btn label="Multiple Toasts" @click="showMultiple()" />
+        <Toast v-bind="args" />
+        <Btn label="Error" @click="showError" />
       </div>
     `,
   }),