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

package/dist/components/modal/Modal.stories.d.ts

@@ -1,12 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@mozaic-ds/icons-svelte/custom-elements/InfoCircle32/InfoCircle32.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+declare const meta: Meta;
+export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
-export declare const Icon: Story;
-export declare const ValidationOnly: Story;
-export declare const TwoOptions: Story;
-export declare const Cancel: Story;
-export declare const Link: Story;
-export declare const Danger: Story;
+export declare const Icon: {
+    args: {
+        icon: string;
+    };
+};
+export declare const ValidationOnly: {
+    args: {
+        footer: string;
+    };
+};
+export declare const TwoOptions: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Cancel: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Link: {
+    args: {
+        link: string;
+        footer: string;
+    };
+};
+export declare const Danger: {
+    args: {
+        footer: string;
+    };
+};
 //# sourceMappingURL=Modal.stories.d.ts.map

package/dist/components/modal/Modal.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBA6BtD,IAAI;AAzBT,wBAyBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAiEtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAalB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAkDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}

package/dist/components/modal/Modal.stories.js

@@ -1,138 +1,109 @@
+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';
-import HelpCircle32 from '@mozaic-ds/icons-svelte/custom-elements/HelpCircle32/HelpCircle32.js';
-export default {
+import '@mozaic-ds/icons-svelte/custom-elements/InfoCircle32/InfoCircle32.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+const meta = {
     title: 'Overlay/Modal',
-    tags: ['autodocs', 'beta'],
+    component: 'm-modal',
     parameters: {
         layout: 'fullscreen',
         docs: {
             story: { height: '400px' },
-            description: {
-                component: 'A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.',
-            },
         },
     },
     args: {
         open: true,
         title: 'Modal title',
-        description: 'A short description',
+        description: `A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.`,
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
     argTypes: {
-        $slots: { table: { disable: true } },
+        'update:open': {
+            control: false,
+        },
+        '--modal-z-index': {
+            description: 'Customise the z-index of the modal',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '3' },
+            },
+        },
+    },
+    render: (args) => {
+        const handleUpdateOpen = action('update:open');
+        return html `
+      <m-modal
+        open=${ifDefined(args.open)}
+        title=${ifDefined(args.title)}
+        description=${ifDefined(args.description)}
+        closable=${ifDefined(args.closable)}
+        @update:open=${handleUpdateOpen}
+      >
+        ${unsafeHTML(ifDefined(args.icon))}
+        ${unsafeHTML(ifDefined(args.default))}
+        ${unsafeHTML(ifDefined(args.link))}
+        ${unsafeHTML(ifDefined(args.footer))}
+      </m-modal>
+    `;
     },
 };
-const createModalTemplate = (args) => {
-    const wrapper = document.createElement('div');
-    const button = document.createElement('m-button');
-    button.textContent = 'Open Modal';
-    const modal = document.createElement('m-modal');
-    modal.setAttribute('title', args.title);
-    modal.setAttribute('description', args.description);
-    modal.setAttribute('open', 'true');
-    modal.addEventListener('update:open', (e) => {
-        if (!e.detail)
-            modal.removeAttribute('open');
-        action('update:open')(e.detail);
-    });
-    // Inject default slot content
-    const contentSlot = document.createElement('div');
-    contentSlot.innerHTML =
-        args.default ??
-            '<p>A modal is a dialog window allowing you to focus the users attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.</p>';
-    modal.appendChild(contentSlot);
-    // Inject icon
-    if (args.icon) {
-        const iconSlot = document.createElement('div');
-        iconSlot.slot = 'icon';
-        iconSlot.innerHTML = args.icon;
-        modal.appendChild(iconSlot);
-    }
-    // Inject footer
-    if (args.footer) {
-        modal.setAttribute('footer', 'true');
-        const footerSlot = document.createElement('div');
-        footerSlot.setAttribute('slot', 'footer');
-        footerSlot.innerHTML = args.footer;
-        modal.appendChild(footerSlot);
-    }
-    // Inject link
-    if (args.link) {
-        const linkSlot = document.createElement('div');
-        modal.setAttribute('link', 'true');
-        linkSlot.setAttribute('slot', 'link');
-        linkSlot.innerHTML = args.link;
-        modal.appendChild(linkSlot);
-    }
-    // Inject icon
-    if (args.icon) {
-        modal.setAttribute('icon', 'true');
-    }
-    // Open modal on button click
-    button.onclick = () => modal.setAttribute('open', 'true');
-    wrapper.appendChild(button);
-    wrapper.appendChild(modal);
-    return wrapper;
-};
-export const Default = {
-    render: (args) => createModalTemplate(args),
-};
+export default meta;
+export const Default = {};
 export const Icon = {
     args: {
-        icon: '<help-circle-32 />',
+        icon: '<info-circle-32 slot="icon"/>',
     },
-    render: (args) => createModalTemplate(args),
 };
 export const ValidationOnly = {
     args: {
         footer: `
-      <m-button>Primary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const TwoOptions = {
     args: {
         footer: `
-      <m-button outlined="true">Secondary action</m-button>
-      <m-button>Primary action</m-button>
+      <m-button outlined="true" slot="footer">Secondary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Cancel = {
     args: {
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button outlined="true">Secondary action</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button outlined="true" slot="footer">Secondary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Link = {
     args: {
         link: `
-      <m-link href="#" size="m">
+      <m-link href="#" size="m" iconPosition="right" slot="link">
         Learn more
+        <external-link-24 slot="icon"></external-link-24>
       </m-link>
     `,
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Danger = {
     args: {
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button appearance="danger">Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button appearance="danger" slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };