@maggioli-design-system/mds-modal 4.7.1 → 4.7.2

package/dist/collection/components/mds-modal/mds-modal.css

@@ -18,7 +18,7 @@
 
 
 .svg svg {
-  aspect-ratio: 1 / 1;
+  aspect-ratio: 1/1;
   height: 100%;
   width: 100%;
 }
@@ -34,21 +34,14 @@
 .absolute {
   position: absolute;
 }
-.mx-6 {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
 .ml-auto {
   margin-left: auto;
 }
 .flex {
   display: flex;
 }
-.w-16 {
-  width: 4rem;
-}
 .min-w-0 {
-  min-width: 0px;
+  min-width: 0rem;
 }
 .max-w-lg {
   max-width: 32rem;
@@ -59,9 +52,6 @@
 .items-center {
   align-items: center;
 }
-.gap-4 {
-  gap: 1rem;
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -86,11 +76,8 @@
 .bg-transparent {
   background-color: transparent;
 }
-.p-4 {
-  padding: 1rem;
-}
-.p-8 {
-  padding: 2rem;
+.text {
+  font-size: 1rem;
 }
 .text-tone-neutral-02 {
   --tw-text-opacity: 1;
@@ -160,7 +147,7 @@
 }
 
 .close {
-  top: 0px;
+  top: 0rem;
   height: 2.25rem;
   width: 2.25rem;
   border-radius: 9999px;
@@ -180,7 +167,7 @@
 
 .window {
   height: 100%;
-  gap: 0px;
+  gap: 0rem;
 
   background-color: var(--mds-modal-window-background);
   box-shadow: var(--mds-modal-window-shadow);
@@ -332,7 +319,7 @@
 }
 
 :host( .to-left ) .close {
-  right: 0px;
+  right: 0rem;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
@@ -381,7 +368,7 @@
 }
 
 :host( .to-right ) .close {
-  left: 0px;
+  left: 0rem;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
@@ -429,10 +416,4 @@
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-@media (max-width: 767px) {
-  .mobile\:w-12 {
-    width: 3rem;
-  }
-}
-
 

package/dist/collection/components/mds-modal/mds-modal.js

@@ -9,194 +9,194 @@ import { KeyboardManager } from "../../common/keyboard-manager";
  * @slot window - Use directly a window component if you need it. Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsModal {
-  constructor() {
-    this.window = false;
-    this.top = false;
-    this.bottom = false;
-    this.animationState = 'intro';
-    this.km = new KeyboardManager();
-    this.componentDidLoad = () => {
-      var _a;
-      this.km.addElement(this.host, 'host');
-      const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
-      if (close)
-        this.km.addElement(close, 'close');
-      this.km.attachEscapeBehavior(() => this.closeEvent.emit());
-      this.km.attachClickBehavior('close');
-    };
-    this.animationName = (customState = '', customPosition = '') => {
-      return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`;
-    };
-    this.closeModal = (e) => {
-      var _a;
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-        return;
-      }
-      this.opened = e.target !== e.currentTarget;
-      if (!this.opened) {
-        this.closeEvent.emit();
-      }
-    };
-    this.stateOpened = undefined;
-    this.opened = false;
-    this.position = 'center';
-  }
-  componentWillLoad() {
-    var _a;
-    this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
-    this.top = this.host.querySelector('[slot="top"]') !== null;
-    this.window = this.host.querySelector('[slot="window"]') !== null;
-    this.stateOpened = this.opened;
-    if (!this.window) {
-      this.position = 'right';
-    }
-    if (this.window) {
-      (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
-    }
-  }
-  componentWillRender() {
-    this.animationState = this.opened ? 'intro' : 'outro';
-    this.host.classList.add(this.animationName());
-  }
-  componentDidRender() {
-    this.animationDeelay = window.setTimeout(() => {
-      this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
-      this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
-      this.host.classList.add(this.animationName(this.animationState));
-      window.clearTimeout(this.animationDeelay);
-    }, 500);
-  }
-  disconnectedCallback() {
-    this.km.detachEscapeBehavior();
-    this.km.detachClickBehavior('close');
-  }
-  positionChange(_newValue, oldValue) {
-    window.clearTimeout(this.animationDeelay);
-    this.host.classList.remove(this.animationName('', oldValue));
-    this.host.classList.remove(this.animationName('intro', oldValue));
-    this.host.classList.remove(this.animationName('outro', oldValue));
-  }
-  openedChange(newValue) {
-    this.stateOpened = newValue;
-    window.clearTimeout(this.animationDeelay);
-  }
-  onModalCloseListener() {
-    this.opened = false;
-  }
-  onBannerCloseListener() {
-    this.opened = false;
-  }
-  render() {
-    return (h(Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
-      ? h("slot", { name: "window" })
-      : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
-        h("slot", { name: "top" }), h("slot", null), this.bottom &&
-        h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focus-bounce-light" })));
-  }
-  static get is() { return "mds-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["mds-modal.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["mds-modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "opened": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies if the modal is opened or not"
-        },
-        "attribute": "opened",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "position": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "ModalPositionType",
-          "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
-          "references": {
-            "ModalPositionType": {
-              "location": "import",
-              "path": "./meta/types",
-              "id": "src/components/mds-modal/meta/types.ts::ModalPositionType"
+    constructor() {
+        this.window = false;
+        this.top = false;
+        this.bottom = false;
+        this.animationState = 'intro';
+        this.km = new KeyboardManager();
+        this.componentDidLoad = () => {
+            var _a;
+            this.km.addElement(this.host, 'host');
+            const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
+            if (close)
+                this.km.addElement(close, 'close');
+            this.km.attachEscapeBehavior(() => this.closeEvent.emit());
+            this.km.attachClickBehavior('close');
+        };
+        this.animationName = (customState = '', customPosition = '') => {
+            return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`;
+        };
+        this.closeModal = (e) => {
+            var _a;
+            if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+                return;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Specifies the animation position of the modal window"
-        },
-        "attribute": "position",
-        "reflect": true,
-        "defaultValue": "'center'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "stateOpened": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "closeEvent",
-        "name": "mdsModalClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits when a modal is closed"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+            this.opened = e.target !== e.currentTarget;
+            if (!this.opened) {
+                this.closeEvent.emit();
+            }
+        };
+        this.stateOpened = undefined;
+        this.opened = false;
+        this.position = 'center';
+    }
+    componentWillLoad() {
+        var _a;
+        this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
+        this.top = this.host.querySelector('[slot="top"]') !== null;
+        this.window = this.host.querySelector('[slot="window"]') !== null;
+        this.stateOpened = this.opened;
+        if (!this.window) {
+            this.position = 'right';
+        }
+        if (this.window) {
+            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
         }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "position",
-        "methodName": "positionChange"
-      }, {
-        "propName": "opened",
-        "methodName": "openedChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "mdsModalClose",
-        "method": "onModalCloseListener",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "mdsBannerClose",
-        "method": "onBannerCloseListener",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    componentWillRender() {
+        this.animationState = this.opened ? 'intro' : 'outro';
+        this.host.classList.add(this.animationName());
+    }
+    componentDidRender() {
+        this.animationDeelay = window.setTimeout(() => {
+            this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
+            this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
+            this.host.classList.add(this.animationName(this.animationState));
+            window.clearTimeout(this.animationDeelay);
+        }, 500);
+    }
+    disconnectedCallback() {
+        this.km.detachEscapeBehavior();
+        this.km.detachClickBehavior('close');
+    }
+    positionChange(_newValue, oldValue) {
+        window.clearTimeout(this.animationDeelay);
+        this.host.classList.remove(this.animationName('', oldValue));
+        this.host.classList.remove(this.animationName('intro', oldValue));
+        this.host.classList.remove(this.animationName('outro', oldValue));
+    }
+    openedChange(newValue) {
+        this.stateOpened = newValue;
+        window.clearTimeout(this.animationDeelay);
+    }
+    onModalCloseListener() {
+        this.opened = false;
+    }
+    onBannerCloseListener() {
+        this.opened = false;
+    }
+    render() {
+        return (h(Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+            ? h("slot", { name: "window" })
+            : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
+                h("slot", { name: "top" }), h("slot", null), this.bottom &&
+                h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focus-bounce-light" })));
+    }
+    static get is() { return "mds-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mds-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mds-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the modal is opened or not"
+                },
+                "attribute": "opened",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ModalPositionType",
+                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
+                    "references": {
+                        "ModalPositionType": {
+                            "location": "import",
+                            "path": "./meta/types",
+                            "id": "src/components/mds-modal/meta/types.ts::ModalPositionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the animation position of the modal window"
+                },
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "'center'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stateOpened": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeEvent",
+                "name": "mdsModalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when a modal is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "position",
+                "methodName": "positionChange"
+            }, {
+                "propName": "opened",
+                "methodName": "openedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mdsModalClose",
+                "method": "onModalCloseListener",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mdsBannerClose",
+                "method": "onBannerCloseListener",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/mds-modal/meta/dictionary.js

@@ -1,8 +1,8 @@
 const modalPositionDictionary = [
-  'bottom',
-  'center',
-  'left',
-  'right',
-  'top',
+    'bottom',
+    'center',
+    'left',
+    'right',
+    'top',
 ];
 export { modalPositionDictionary, };

package/dist/collection/components/mds-modal/test/mds-modal.e2e.js

@@ -1,17 +1,17 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('mds-modal', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<mds-modal></mds-modal>');
-    const element = await page.find('mds-modal');
-    // La riga seguente non è valida perché `animate-right-intro` viene impostato in `componentDidRender`
-    // e quindi appena instanziato non è presente come classe
-    expect(element).toHaveClass('to-right');
-    expect(element).toHaveAttribute('hydrated');
-    expect(element).toHaveAttribute('position');
-    expect(element.getAttribute('position')).toBe('right');
-    expect(element).not.toHaveAttribute('opened');
-    expect(element.shadowRoot).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<mds-modal></mds-modal>');
+        const element = await page.find('mds-modal');
+        // La riga seguente non è valida perché `animate-right-intro` viene impostato in `componentDidRender`
+        // e quindi appena instanziato non è presente come classe
+        expect(element).toHaveClass('to-right');
+        expect(element).toHaveAttribute('hydrated');
+        expect(element).toHaveAttribute('position');
+        expect(element.getAttribute('position')).toBe('right');
+        expect(element).not.toHaveAttribute('opened');
+        expect(element.shadowRoot).toEqualHtml(`
       <div class="window" part="window" role="dialog">
         <slot></slot>
       </div>
@@ -21,13 +21,13 @@ describe('mds-modal', () => {
         </svg>
       </i>
     `);
-  });
-  it('renders opened', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<mds-modal opened="true"></mds-modal>');
-    const element = await page.find('mds-modal');
-    expect(element.getAttribute('opened')).not.toBe('false');
-    expect(element.shadowRoot).toEqualHtml(`
+    });
+    it('renders opened', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<mds-modal opened="true"></mds-modal>');
+        const element = await page.find('mds-modal');
+        expect(element.getAttribute('opened')).not.toBe('false');
+        expect(element.shadowRoot).toEqualHtml(`
       <div class="window" part="window" role="dialog">
         <slot></slot>
       </div>
@@ -37,19 +37,19 @@ describe('mds-modal', () => {
         </svg>
       </i>
     `);
-  });
-  it('can be closed', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<mds-modal opened="true"></mds-modal>');
-    const element = await page.find('mds-modal');
-    expect(element.getAttribute('opened')).not.toBe('false');
-    await page.mouse.click(window.innerWidth / 2, window.innerHeight / 2);
-    // const mdsIcon = element.shadowRoot.querySelector('mds-icon') as HTMLElement
-    // console.info('mdsIcon', mdsIcon)
-    // const closeButton = mdsIcon.shadowRoot.querySelector('i') as HTMLElement
-    // console.info('closeButton', closeButton)
-    // closeButton.click()
-    await page.waitForChanges();
-    expect(element).not.toHaveClass('opened');
-  });
+    });
+    it('can be closed', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<mds-modal opened="true"></mds-modal>');
+        const element = await page.find('mds-modal');
+        expect(element.getAttribute('opened')).not.toBe('false');
+        await page.mouse.click(window.innerWidth / 2, window.innerHeight / 2);
+        // const mdsIcon = element.shadowRoot.querySelector('mds-icon') as HTMLElement
+        // console.info('mdsIcon', mdsIcon)
+        // const closeButton = mdsIcon.shadowRoot.querySelector('i') as HTMLElement
+        // console.info('closeButton', closeButton)
+        // closeButton.click()
+        await page.waitForChanges();
+        expect(element).not.toHaveClass('opened');
+    });
 });

package/dist/collection/components/mds-modal/test/mds-modal.stories.js

@@ -2,19 +2,19 @@ import { h } from "@stencil/core";
 import { useState } from "react";
 import { modalPositionDictionary } from "../meta/dictionary";
 export default {
-  title: 'UI / Modal',
-  argTypes: {
-    opened: {
-      description: 'Specifies if the modal is opened or not',
-      type: { name: 'boolean', required: false },
+    title: 'UI / Modal',
+    argTypes: {
+        opened: {
+            description: 'Specifies if the modal is opened or not',
+            type: { name: 'boolean', required: false },
+        },
+        position: {
+            control: { type: 'select' },
+            description: 'Specifies the animation position of the modal window',
+            options: modalPositionDictionary,
+            type: { name: 'string', required: false },
+        },
     },
-    position: {
-      control: { type: 'select' },
-      description: 'Specifies the animation position of the modal window',
-      options: modalPositionDictionary,
-      type: { name: 'string', required: false },
-    },
-  },
 };
 const firstName = 'Mario';
 const lastName = 'Rossi';
@@ -23,10 +23,10 @@ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com
 const Template = args => h("mds-modal", Object.assign({}, args), h("header", { slot: "top", class: "p-8 max-w-lg flex gap-4 items-center border-b border-tone-neutral-09" }, h("mds-img", { class: "w-16", src: "/logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-8 max-w-lg" }, h("mds-text", null, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-8 max-w-lg flex gap-4 text-tone-neutral-02 border-t border-tone-neutral-09" }, h("mds-author", null, h("mds-avatar", { slot: "avatar", class: "w-16 mobile:w-12", src: "/avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6", class: "truncate min-w-0" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04 truncate min-w-0" }, email)), h("mds-button", { icon: "mdi/dots-vertical", class: "ml-auto bg-transparent text-tone-neutral-02 p-4 border border-tone-neutral-09 rounded-full" })));
 const CustomTemplate = args => h("mds-modal", Object.assign({}, args), h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("mds-text", { typography: "detail" }, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "primary", tone: "quiet" }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm")));
 const AriaTemplate = () => {
-  // Click not working with reader
-  const [opened, setOpened] = useState(false);
-  window.addEventListener('mdsModalClose', () => { setOpened(false); });
-  return h("div", null, h("mds-button", { onClick: () => setOpened(true) }, "Apri modale"), h("mds-modal", { opened: opened, onMdsModalClose: () => setOpened(false) }, h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("mds-text", { typography: "detail" }, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "dark", tone: "quiet", onClick: () => setOpened(false) }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm"))));
+    // Click not working with reader
+    const [opened, setOpened] = useState(false);
+    window.addEventListener('mdsModalClose', () => { setOpened(false); });
+    return h("div", null, h("mds-button", { onClick: () => setOpened(true) }, "Apri modale"), h("mds-modal", { opened: opened, onMdsModalClose: () => setOpened(false) }, h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("mds-text", { typography: "detail" }, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "dark", tone: "quiet", onClick: () => setOpened(false) }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm"))));
 };
 export const Default = Template.bind({});
 export const CustomWindow = CustomTemplate.bind({});