@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/statusnotification/StatusNotification.stories.js

@@ -1,101 +1,68 @@
-import { within, expect } from 'storybook/test';
+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';
-/**
- * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged.
- * It often provides feedback on a process, highlights a status update, or alerts users about an issue.
- * Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
- * The `StatusNotification` component is the **Svelte / WebComponent** implementation of the **Status Notification** component of Mozaic Design System.
- */
-export default {
+const meta = {
     title: 'Status/Status Notification',
-    tags: ['autodocs', 'new'],
+    component: 'm-status-notification',
     argTypes: {
-        title: {
-            description: 'Specify the notification title',
-            control: 'text',
-        },
-        closable: {
-            description: 'Specify if the notification is closable',
-            control: 'boolean',
-        },
-        hasfooter: {
-            description: 'Specify if the notification has a footer',
-            control: 'boolean',
-        },
         status: {
-            description: 'Specify the notification type',
-            control: { type: 'radio' },
-            options: ['warning', 'error', 'success', 'info'],
+            control: 'radio',
+            options: ['info', 'success', 'warning', 'error'],
         },
-        onclose: {
-            name: 'onclose',
-            description: 'On close button clicked',
-            action: 'click',
-            table: {
-                category: 'Events',
-            },
+        close: {
+            control: false,
         },
     },
+    args: {
+        title: 'This is a title, be concise and use the description message to give details.',
+        description: 'Description message.',
+    },
+    render: (args) => html ` <m-status-notification
+      title=${ifDefined(args.title)}
+      description=${ifDefined(args.description)}
+      status=${ifDefined(args.status)}
+      closable=${ifDefined(args.closable)}
+      @close=${action('close')}
+    >
+      ${unsafeHTML(ifDefined(args.footer))}
+    </m-status-notification>`,
 };
-const Template = (args) => {
-    const notification = document.createElement('m-status-notification');
-    notification.setAttribute('title', 'This is a title');
-    if (args.closable)
-        notification.setAttribute('closable', args.closable);
-    if (args.hasfooter)
-        notification.setAttribute('hasfooter', args.hasfooter);
-    notification.innerText = 'This is a description, be concise and use the description message to give details.';
-    const Slot = document.createElement('div');
-    Slot.setAttribute('slot', 'footer');
-    Slot.classList.add('content-slot');
-    Slot.innerHTML = 'Insert footer slot (Action element)';
-    notification.appendChild(Slot);
-    if (args.title)
-        notification.setAttribute('title', args.title);
-    if (args.description)
-        notification.setAttribute('description', args.description);
-    if (args.status)
-        notification.setAttribute('status', args.status);
-    notification.onclose = action('onclose');
-    return notification;
+export default meta;
+export const Info = {};
+export const Success = {
+    args: { status: 'success' },
 };
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    expect(notification?.getAttribute('title')).toBe('This is a title');
+export const Warning = {
+    args: { status: 'warning' },
 };
-export const Warning = Template.bind({});
-Warning.args = { title: 'Warning Notification', status: 'warning' };
-Warning.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    expect(notification).toHaveAttribute('status', 'warning');
-    expect(notification?.getAttribute('title')).toBe('Warning Notification');
+export const Error = {
+    args: { status: 'error' },
 };
-export const Danger = Template.bind({});
-Danger.args = { title: 'Danger Notification', status: 'error' };
-Danger.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    expect(notification).toHaveAttribute('status', 'error');
-    expect(notification?.getAttribute('title')).toBe('Danger Notification');
+export const Closable = {
+    args: { closable: true },
 };
-export const Success = Template.bind({});
-Success.args = { title: 'Success Notification', status: 'success' };
-Success.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    expect(notification).toHaveAttribute('status', 'success');
-    expect(notification?.getAttribute('title')).toBe('Success Notification');
+export const WithButton = {
+    args: {
+        footer: `<m-button outlined slot="footer">Button Label</m-button>`,
+    },
 };
-export const WithFooter = Template.bind({});
-WithFooter.args = {
-    title: 'Success Notification',
-    status: 'success',
-    hasfooter: 'true',
+export const WithButtons = {
+    args: {
+        footer: `
+      <m-button slot="footer">Button Label</m-button>
+      <m-button slot="footer" outlined="true">Button Label</m-button>
+    `,
+    },
 };
-WithFooter.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    const footerSlot = notification?.querySelector('[slot="footer"]');
-    expect(notification).toHaveAttribute('hasfooter', 'true');
-    expect(footerSlot).toBeTruthy();
-    expect(footerSlot?.textContent).toContain('Insert footer slot');
+export const WithLink = {
+    args: {
+        footer: `
+      <m-link href="#" iconPosition="right" slot="footer">
+        Stand-alone link
+
+        <arrow-next-20 slot="icon"></arrow-next-20>
+      </m-link>
+    `,
+    },
 };