@maggioli-design-system/mds-modal 3.1.0 → 3.2.1

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

@@ -84,7 +84,7 @@
     height: 100%;
     width: 100%;
 }
-.animate-left, 
+.animate-left,
   .animate-right{
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
@@ -137,10 +137,10 @@
     justify-content: center;
 }
 
-:host ( .animate-bottom-opened ), 
-:host ( .animate-center-opened ), 
-:host ( .animate-left-opened ), 
-:host ( .animate-right-opened ), 
+:host ( .animate-bottom-opened ),
+:host ( .animate-center-opened ),
+:host ( .animate-left-opened ),
+:host ( .animate-right-opened ),
 :host ( .animate-top-opened ){
     pointer-events: auto;
     transition-duration: 500ms;
@@ -202,7 +202,7 @@
     }
 }
 
-:host ( .animate-bottom ) .window,  
+:host ( .animate-bottom ) .window,
 :host ( .animate-bottom ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
@@ -211,21 +211,21 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-bottom-intro ) .window, 
+:host ( .animate-bottom-intro ) .window,
 :host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-:host ( .animate-bottom-opened.animate-bottom-outro ) .window,  
-:host ( .animate-bottom-opened.animate-bottom-outro ) > ::slotted ( [slot=window] ),  
-:host ( .animate-bottom-opened ) .window,  
+:host ( .animate-bottom-opened.animate-bottom-outro ) .window,
+:host ( .animate-bottom-opened.animate-bottom-outro ) > ::slotted ( [slot=window] ),
+:host ( .animate-bottom-opened ) .window,
 :host ( .animate-bottom-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-bottom-outro ) .window, 
+:host ( .animate-bottom-outro ) .window,
 :host ( .animate-bottom-outro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
@@ -241,9 +241,7 @@
     }
 }
 
-
-  :host ( .animate-center ) .window,  
-  
+:host ( .animate-center ) .window,
 :host ( .animate-center ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
@@ -252,29 +250,21 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-
-  :host ( .animate-center-intro ) .window, 
-  
+:host ( .animate-center-intro ) .window,
 :host ( .animate-center-intro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-
-  :host ( .animate-center-opened.animate-center-outro ) .window,  
-  
-:host ( .animate-center-opened.animate-center-outro ) > ::slotted ( [slot=window] ),  
-  
-:host ( .animate-center-opened ) .window,  
-  
+:host ( .animate-center-opened.animate-center-outro ) .window,
+:host ( .animate-center-opened.animate-center-outro ) > ::slotted ( [slot=window] ),
+:host ( .animate-center-opened ) .window,
 :host ( .animate-center-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-
-  :host ( .animate-center-outro ) .window, 
-  
+:host ( .animate-center-outro ) .window,
 :host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
@@ -283,7 +273,7 @@
     justify-content: flex-start;
 }
 
-:host ( .animate-left ) .window,  
+:host ( .animate-left ) .window,
 :host ( .animate-left ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
@@ -292,34 +282,28 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-left-intro ) .window, 
+:host ( .animate-left-intro ) .window,
 :host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
     transform: translateX(calc(-100% - 50px));
   }
 
-
-  :host ( .animate-left-opened.animate-left-outro ) .window,  
-  
-:host ( .animate-left-opened.animate-left-outro ) > ::slotted ( [slot=window] ),  
-  
-:host ( .animate-left-opened ) .window,  
-  
+:host ( .animate-left-opened.animate-left-outro ) .window,
+:host ( .animate-left-opened.animate-left-outro ) > ::slotted ( [slot=window] ),
+:host ( .animate-left-opened ) .window,
 :host ( .animate-left-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: translateX(0);
 }
 
-:host ( .animate-left-opened ) .close, 
+:host ( .animate-left-opened ) .close,
 :host ( .animate-left-opened.animate-left-outro ) .close{
     opacity: 1;
 
   transform: translate(-24px, 24px) rotate(0);
 }
 
-
-  :host ( .animate-left-outro ) .window, 
-  
+:host ( .animate-left-outro ) .window,
 :host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
     transform: translateX(calc(-100% - 50px));
   }
@@ -338,9 +322,7 @@
     justify-content: flex-end;
 }
 
-
-  :host ( .animate-right ) .window,  
-  
+:host ( .animate-right ) .window,
 :host ( .animate-right ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
@@ -349,30 +331,28 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-right-intro ) .window, 
+:host ( .animate-right-intro ) .window,
 :host ( .animate-right-intro ) > ::slotted ( [slot=window] ) {
     transform: translateX(calc(100% + 50px));
   }
 
-:host ( .animate-right-opened.animate-right-outro ) .window,  
-:host ( .animate-right-opened.animate-right-outro ) > ::slotted ( [slot=window] ),  
-:host ( .animate-right-opened ) .window,  
+:host ( .animate-right-opened.animate-right-outro ) .window,
+:host ( .animate-right-opened.animate-right-outro ) > ::slotted ( [slot=window] ),
+:host ( .animate-right-opened ) .window,
 :host ( .animate-right-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: translateX(0);
 }
 
-:host ( .animate-right-opened ) .close, 
+:host ( .animate-right-opened ) .close,
 :host ( .animate-right-opened.animate-right-outro ) .close{
     opacity: 1;
 
   transform: translate(24px, 24px) rotate(0);
 }
 
-
-  :host ( .animate-right-outro ) .window, 
-  
+:host ( .animate-right-outro ) .window,
 :host ( .animate-right-outro ) > ::slotted ( [slot=window] ) {
     transform: translateX(calc(100% + 50px));
   }
@@ -398,9 +378,7 @@
     }
 }
 
-
-  :host ( .animate-top ) .window,  
-  
+:host ( .animate-top ) .window,
 :host ( .animate-top ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
@@ -409,29 +387,21 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-
-  :host ( .animate-top-intro ) .window, 
-  
+:host ( .animate-top-intro ) .window,
 :host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-
-  :host ( .animate-top-opened.animate-top-outro ) .window,  
-  
-:host ( .animate-top-opened.animate-top-outro ) > ::slotted ( [slot=window] ),  
-  
-:host ( .animate-top-opened ) .window,  
-  
+:host ( .animate-top-opened.animate-top-outro ) .window,
+:host ( .animate-top-opened.animate-top-outro ) > ::slotted ( [slot=window] ),
+:host ( .animate-top-opened ) .window,
 :host ( .animate-top-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-
-  :host ( .animate-top-outro ) .window, 
-  
+:host ( .animate-top-outro ) .window,
 :host ( .animate-top-outro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }

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

@@ -7,13 +7,14 @@ export class MdsModal {
     this.top = null;
     this.bottom = null;
     this.animationState = 'intro';
-    /**
-     * Specifies the animation position of the modal window
-     */
-    this.position = null;
     this.animationName = (customState = null, customPosition = null) => {
       return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
     };
+    this.checkKeyboardEscape = (event) => {
+      if (event.code === 'Escape') {
+        this.close.emit();
+      }
+    };
     this.closeModal = (e = null) => {
       var _a;
       if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
@@ -24,6 +25,9 @@ export class MdsModal {
         this.close.emit();
       }
     };
+    this.stateOpened = undefined;
+    this.opened = undefined;
+    this.position = null;
   }
   componentWillLoad() {
     this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
@@ -36,6 +40,10 @@ export class MdsModal {
     if (this.position === null) {
       this.position = 'right';
     }
+    if (this.window) {
+      const modal = this.hostElement.querySelector('[slot="window"]');
+      modal.setAttribute('role', 'modal');
+    }
   }
   componentWillRender() {
     this.animationState = this.opened ? 'intro' : 'outro';
@@ -48,6 +56,14 @@ export class MdsModal {
       this.hostElement.classList.add(this.animationName(this.animationState));
       window.clearTimeout(this.animationDeelay);
     }, 500);
+    if (this.opened) {
+      this.addKeyboardEscapeListener();
+      return;
+    }
+    this.removeKeyboardEscapeListener();
+  }
+  disconnectedCallback() {
+    this.removeKeyboardEscapeListener();
   }
   positionChange(_newValue, oldValue) {
     window.clearTimeout(this.animationDeelay);
@@ -55,19 +71,30 @@ export class MdsModal {
     this.hostElement.classList.remove(this.animationName('intro', oldValue));
     this.hostElement.classList.remove(this.animationName('outro', oldValue));
   }
+  addKeyboardEscapeListener() {
+    window.addEventListener('keydown', this.checkKeyboardEscape.bind(this));
+  }
+  removeKeyboardEscapeListener() {
+    window.removeEventListener('keydown', this.checkKeyboardEscape.bind(this));
+  }
   openedChange(newValue) {
     this.stateOpened = newValue;
     window.clearTimeout(this.animationDeelay);
+    if (newValue) {
+      this.addKeyboardEscapeListener();
+      return;
+    }
+    this.removeKeyboardEscapeListener();
   }
   onCloseListener() {
     this.opened = false;
   }
   render() {
-    return (h(Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+    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' : ''}`) }, this.top &&
+        h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog" }, this.top &&
           h("slot", { name: "top" }), h("slot", null), this.bottom &&
           h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, class: "svg close" })));
   }

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { useState } from 'react';
 import { modalPositionDictionary } from '../meta/dictionary';
 export default {
   title: 'UI / Modal',
@@ -21,5 +22,12 @@ const fullName = `${firstName} ${lastName}`;
 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('close', () => { setOpened(false); });
+  return h("div", null, h("mds-button", { onClick: () => setOpened(true) }, "Apri modale"), h("mds-modal", { opened: opened, onClose: () => 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({});
+export const ARIATest = AriaTemplate.bind({});

package/dist/collection/dictionary/typography.js

@@ -1,7 +1,7 @@
 const typographyDictionary = [
   'action',
   'caption',
-  'code',
+  'snippet',
   'detail',
   'h1',
   'h2',
@@ -19,10 +19,10 @@ const typographyVariationsDictionary = [
   'title',
   'info',
   'read',
-  'mono',
+  'code',
 ];
 const typographyMonoDictionary = [
-  'code',
+  'snippet',
   'hack',
 ];
 const typographyTitleDictionary = [

package/dist/components/mds-modal.js

@@ -16,13 +16,14 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.top = null;
     this.bottom = null;
     this.animationState = 'intro';
-    /**
-     * Specifies the animation position of the modal window
-     */
-    this.position = null;
     this.animationName = (customState = null, customPosition = null) => {
       return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
     };
+    this.checkKeyboardEscape = (event) => {
+      if (event.code === 'Escape') {
+        this.close.emit();
+      }
+    };
     this.closeModal = (e = null) => {
       var _a;
       if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
@@ -33,6 +34,9 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.close.emit();
       }
     };
+    this.stateOpened = undefined;
+    this.opened = undefined;
+    this.position = null;
   }
   componentWillLoad() {
     this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
@@ -45,6 +49,10 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.position === null) {
       this.position = 'right';
     }
+    if (this.window) {
+      const modal = this.hostElement.querySelector('[slot="window"]');
+      modal.setAttribute('role', 'modal');
+    }
   }
   componentWillRender() {
     this.animationState = this.opened ? 'intro' : 'outro';
@@ -57,6 +65,14 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.hostElement.classList.add(this.animationName(this.animationState));
       window.clearTimeout(this.animationDeelay);
     }, 500);
+    if (this.opened) {
+      this.addKeyboardEscapeListener();
+      return;
+    }
+    this.removeKeyboardEscapeListener();
+  }
+  disconnectedCallback() {
+    this.removeKeyboardEscapeListener();
   }
   positionChange(_newValue, oldValue) {
     window.clearTimeout(this.animationDeelay);
@@ -64,19 +80,30 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hostElement.classList.remove(this.animationName('intro', oldValue));
     this.hostElement.classList.remove(this.animationName('outro', oldValue));
   }
+  addKeyboardEscapeListener() {
+    window.addEventListener('keydown', this.checkKeyboardEscape.bind(this));
+  }
+  removeKeyboardEscapeListener() {
+    window.removeEventListener('keydown', this.checkKeyboardEscape.bind(this));
+  }
   openedChange(newValue) {
     this.stateOpened = newValue;
     window.clearTimeout(this.animationDeelay);
+    if (newValue) {
+      this.addKeyboardEscapeListener();
+      return;
+    }
+    this.removeKeyboardEscapeListener();
   }
   onCloseListener() {
     this.opened = false;
   }
   render() {
-    return (h(Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+    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' : ''}`) }, this.top &&
+        h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog" }, this.top &&
           h("slot", { name: "top" }), h("slot", null), this.bottom &&
           h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, class: "svg close" })));
   }