@mozaic-ds/web-components 1.0.0-beta.4 → 1.0.0-beta.7

package/dist/components/toaster/Toaster.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Timeout: Story;
+export declare const WithButton: {
+    args: {
+        action: string;
+    };
+};
+export declare const WithLink: {
+    args: {
+        action: string;
+    };
+};
+//# sourceMappingURL=Toaster.stories.d.ts.map

package/dist/components/toaster/Toaster.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IA4HX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAQpB,CAAC"}

package/dist/components/toaster/Toaster.stories.js

@@ -0,0 +1,156 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { action } from 'storybook/actions';
+const meta = {
+    title: 'Overlay/Toaster',
+    component: 'm-toaster',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '300px' },
+            description: {
+                component: 'A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.',
+            },
+        },
+    },
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'If true, displays the toaster.',
+            table: {
+                type: { summary: 'boolean' },
+                category: 'attributes',
+            },
+        },
+        position: {
+            description: 'Position of the toaster.',
+            control: { type: 'radio' },
+            options: ['top', 'bottom', 'top-center', 'bottom-center'],
+            table: {
+                type: { summary: `'top' | 'bottom' | 'top-center' | 'bottom-center'` },
+                defaultValue: { summary: "'top'" },
+                category: 'attributes',
+            },
+        },
+        description: {
+            control: 'text',
+            description: 'Description/message of the toaster.',
+            table: {
+                type: { summary: 'string' },
+                category: 'attributes',
+            },
+        },
+        status: {
+            control: { type: 'radio' },
+            options: ['warning', 'error', 'success', 'info'],
+            description: 'Status (determines icon and style).',
+            table: {
+                type: { summary: `'info' | 'success' | 'warning' | 'error'` },
+                defaultValue: { summary: "'info'" },
+                category: 'attributes',
+            },
+        },
+        closable: {
+            control: 'boolean',
+            description: 'If true, shows a close button.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+                category: 'attributes',
+            },
+        },
+        progress: {
+            control: 'boolean',
+            description: 'If true, shows the progress indicator.',
+            table: {
+                type: { summary: 'boolean' },
+                category: 'attributes',
+            },
+        },
+        timeout: {
+            control: 'number',
+            description: 'Auto-dismiss timeout in milliseconds.',
+            table: {
+                type: { summary: 'number' },
+                category: 'attributes',
+            },
+        },
+        action: {
+            control: 'text',
+            description: 'Use this slot to insert a button or a link in the toaster',
+            table: {
+                type: { summary: 'any' },
+                category: 'slots',
+            },
+        },
+        'update:open': {
+            control: 'text',
+            description: 'Emits when the checkbox value changes, updating the modelValue prop.',
+            table: {
+                type: { summary: 'boolean' },
+                category: 'events',
+            },
+        },
+        '--toaster-z-index': {
+            description: 'Customise the z-index of the toaster',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '4' },
+            },
+        },
+    },
+    args: {
+        open: true,
+        description: 'This message must be short, be concise.',
+    },
+    render: (args) => {
+        const handleUpdateOpen = action('update:open');
+        return html `
+      <m-toaster
+        open=${ifDefined(args.open)}
+        position=${ifDefined(args.position)}
+        status=${ifDefined(args.status)}
+        description=${ifDefined(args.description)}
+        closable=${ifDefined(args.closable)}
+        progress=${ifDefined(args.progress)}
+        timeout=${ifDefined(args.timeout)}
+        @update:open=${handleUpdateOpen}
+      >
+        ${unsafeHTML(ifDefined(args.action))}
+      </m-toaster>
+    `;
+    },
+};
+export default meta;
+export const Info = {};
+export const Success = {
+    args: { status: 'success' },
+};
+export const Warning = {
+    args: { status: 'warning' },
+};
+export const Error = {
+    args: { status: 'error' },
+};
+export const Timeout = {
+    args: { timeout: 5000 },
+};
+export const WithButton = {
+    args: {
+        action: `
+      <m-button slot="action" size="s" appearance="inverse" outlined="true">Undo</m-button>
+    `,
+    },
+};
+export const WithLink = {
+    args: {
+        action: `
+      <m-link slot="action" href="#" appearance="inverse">
+        Learn more
+      </m-link>
+    `,
+    },
+};