@maggioli-design-system/mds-modal 4.1.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "mds-modal is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -12,6 +12,7 @@
   "unpkg": "dist/mds-modal/mds-modal.esm.js",
   "files": [
     "dist/",
+    "documentation.json",
     "loader/",
     "readme.md",
     "src/",
@@ -23,8 +24,8 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "^11.2.1",
-    "@stencil/core": "^2.22.2",
+    "@maggioli-design-system/styles": "^11.7.0",
+    "@stencil/core": "^2.22.3",
     "clsx": "^1.2.1"
   },
   "license": "MIT",
@@ -39,10 +40,15 @@
       "email": "andrea.pruccoli@maggioli.it",
       "role": "Software Engineer"
     },
+    {
+      "name": "Nicola Tamburini",
+      "email": "nicola.tamburini@maggioli.it",
+      "role": "Software Engineer"
+    },
     {
       "name": "Vittorio Vittori",
       "email": "vittorio.vittori@maggioli.it",
-      "role": "UX UI Designer"
+      "role": "Product Designer"
     }
   ]
 }

package/readme.md

@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property   | Attribute  | Description                                          | Type                                                 | Default     |
-| ---------- | ---------- | ---------------------------------------------------- | ---------------------------------------------------- | ----------- |
-| `opened`   | `opened`   | Specifies if the modal is opened or not              | `boolean`                                            | `undefined` |
-| `position` | `position` | Specifies the animation position of the modal window | `"bottom" \| "center" \| "left" \| "right" \| "top"` | `null`      |
+| Property   | Attribute  | Description                                          | Type                                                              | Default    |
+| ---------- | ---------- | ---------------------------------------------------- | ----------------------------------------------------------------- | ---------- |
+| `opened`   | `opened`   | Specifies if the modal is opened or not              | `boolean`                                                         | `false`    |
+| `position` | `position` | Specifies the animation position of the modal window | `"bottom" \| "center" \| "left" \| "right" \| "top" \| undefined` | `'center'` |
 
 
 ## Events

package/src/common/aria.ts

@@ -7,12 +7,12 @@ const hash = (s: string): string => {
 }
 
 const unslugName = (name: string): string => {
-  return name.split('/').slice(-1).pop().replace(/-/g, ' ')
+  return name.split('/')?.slice(-1).pop()?.replace(/-/g, ' ') ?? name
 }
 
 const setAttributeIfEmpty = (element: HTMLElement, attribute: string, value: string): string => {
   if (element.hasAttribute(attribute)) {
-    return element.getAttribute(attribute)
+    return element.getAttribute(attribute) ?? ''
   }
   element.setAttribute(attribute, value)
   return value

package/src/common/keyboard-manager.ts

@@ -38,7 +38,7 @@ export class KeyboardManager {
   }
 
   detachEscapeBehavior = (): void => {
-    this.escapeCallback = null
+    this.escapeCallback = () => {return}
     if (typeof window !== undefined) {
       window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }

package/src/common/unit.ts

@@ -0,0 +1,14 @@
+const cssDurationToMilliseconds = (duration: string, defaultValue = 1000): number => {
+  if (duration.includes('s')) {
+    return Number(duration.replace('s', '')) * 1000
+  }
+
+  if (duration.includes('ms')) {
+    return Number(duration.replace('s', ''))
+  }
+
+  return defaultValue
+}
+export {
+  cssDurationToMilliseconds,
+}

package/src/components/mds-modal/css/components.css

@@ -0,0 +1,49 @@
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .animate {
+    @apply
+      duration-500
+      ease-in-out-expo
+      opacity-0
+      transition-cosmetic;
+  }
+
+  .animate-bottom-intro,
+  .animate-center-intro,
+  .animate-top-intro {
+    transform: rotateX(-22deg) scale(0.5) translateY(40%);
+  }
+
+  .animate-bottom-opened,
+  .animate-center-opened,
+  .animate-top-opened {
+    @apply opacity-100;
+
+    transform: rotateX(0) scale(1) translateY(0);
+  }
+
+  .animate-bottom-outro,
+  .animate-center-outro,
+  .animate-top-outro {
+    transform: rotateX(-22deg) scale(0.5) translateY(-40%);
+  }
+
+  .animate-right-intro,
+  .animate-right-outro {
+    transform: translateX(calc(100% + 50px));
+  }
+
+  .animate-right-opened,
+  .animate-left-opened {
+    @apply opacity-100;
+
+    transform: translateX(0);
+  }
+
+  .animate-left-intro,
+  .animate-left-outro {
+    transform: translateX(calc(-100% - 50px));
+  }
+}

package/src/components/mds-modal/css/mds-modal-animate-bottom.css

@@ -1,28 +1,28 @@
-:host ( .animate-bottom ) {
+:host( .to-bottom ) {
   @apply
     justify-center
     mobile:p-4
     p-8;
 }
 
-:host ( .animate-bottom ) .window,
-:host ( .animate-bottom ) > ::slotted ( [slot=window] ) {
-  @apply animate-bottom;
+:host( .to-bottom ) .window,
+:host( .to-bottom ) > ::slotted( [slot="window"] ) {
+  @apply animate;
 }
 
-:host ( .animate-bottom-intro ) .window,
-:host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-intro ) .window,
+:host( .to-bottom-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-bottom-intro;
 }
 
-: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] ) {
+:host( .to-bottom-opened.to-bottom-outro ) .window,
+:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot="window"] ),
+:host( .to-bottom-opened ) .window,
+:host( .to-bottom-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-bottom-opened;
 }
 
-:host ( .animate-bottom-outro ) .window,
-:host ( .animate-bottom-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-outro ) .window,
+:host( .to-bottom-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-bottom-outro;
 }

package/src/components/mds-modal/css/mds-modal-animate-center.css

@@ -1,28 +1,28 @@
-:host ( .animate-center ) {
+:host( .to-center ) {
   @apply
     justify-center
     mobile:p-4
     p-8;
 }
 
-:host ( .animate-center ) .window,
-:host ( .animate-center ) > ::slotted ( [slot=window] ) {
-  @apply animate-center;
+:host( .to-center ) .window,
+:host( .to-center ) > ::slotted( [slot="window"] ) {
+  @apply animate;
 }
 
-:host ( .animate-center-intro ) .window,
-:host ( .animate-center-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-intro ) .window,
+:host( .to-center-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-center-intro;
 }
 
-: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] ) {
+:host( .to-center-opened.to-center-outro ) .window,
+:host( .to-center-opened.to-center-outro ) > ::slotted( [slot="window"] ),
+:host( .to-center-opened ) .window,
+:host( .to-center-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-center-opened;
 }
 
-:host ( .animate-center-outro ) .window,
-:host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-outro ) .window,
+:host( .to-center-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-center-outro;
 }

package/src/components/mds-modal/css/mds-modal-animate-left.css

@@ -1,41 +1,41 @@
-:host ( .animate-left ) {
+:host( .to-left ) {
   @apply justify-start;
 }
 
-:host ( .animate-left ) .window,
-:host ( .animate-left ) > ::slotted ( [slot=window] ) {
-  @apply animate-left;
+:host( .to-left ) .window,
+:host( .to-left ) > ::slotted( [slot="window"] ) {
+  @apply animate;
 }
 
-:host ( .animate-left-intro ) .window,
-:host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-intro ) .window,
+:host( .to-left-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-left-intro;
 }
 
-: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] ) {
+:host( .to-left-opened.to-left-outro ) .window,
+:host( .to-left-opened.to-left-outro ) > ::slotted( [slot="window"] ),
+:host( .to-left-opened ) .window,
+:host( .to-left-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-left-opened;
 }
 
-:host ( .animate-left-opened ) .close,
-:host ( .animate-left-opened.animate-left-outro ) .close {
+:host( .to-left-opened ) .close,
+:host( .to-left-opened.to-left-outro ) .close {
   @apply opacity-100;
 
   transform: translate(-24px, 24px) rotate(0);
 }
 
-:host ( .animate-left-outro ) .window,
-:host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-outro ) .window,
+:host( .to-left-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-left-outro;
 }
 
-:host ( .animate-left-outro ) .close {
+:host( .to-left-outro ) .close {
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-left ) .close {
+:host( .to-left ) .close {
   @apply right-0;
 
   transform: translate(36px, 24px) rotate(90deg);

package/src/components/mds-modal/css/mds-modal-animate-right.css

@@ -1,41 +1,41 @@
-:host ( .animate-right ) {
+:host( .to-right ) {
   @apply justify-end;
 }
 
-:host ( .animate-right ) .window,
-:host ( .animate-right ) > ::slotted ( [slot=window] ) {
-  @apply animate-right;
+:host( .to-right ) .window,
+:host( .to-right ) > ::slotted([slot="window"]) {
+  @apply animate;
 }
 
-:host ( .animate-right-intro ) .window,
-:host ( .animate-right-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-intro ) .window,
+:host( .to-right-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-right-intro;
 }
 
-: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] ) {
+:host( .to-right-opened.to-right-outro ) .window,
+:host( .to-right-opened.to-right-outro ) > ::slotted( [slot="window"] ),
+:host( .to-right-opened ) .window,
+:host( .to-right-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-right-opened;
 }
 
-:host ( .animate-right-opened ) .close,
-:host ( .animate-right-opened.animate-right-outro ) .close {
+:host( .to-right-opened ) .close,
+:host( .to-right-opened.to-right-outro ) .close {
   @apply opacity-100;
 
   transform: translate(24px, 24px) rotate(0);
 }
 
-:host ( .animate-right-outro ) .window,
-:host ( .animate-right-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-outro ) .window,
+:host( .to-right-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-right-outro;
 }
 
-:host ( .animate-right-outro ) .close {
+:host( .to-right-outro ) .close {
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) .close {
+:host( .to-right ) .close {
   @apply left-0;
 
   transform: translate(-36px, 24px) rotate(-90deg);

package/src/components/mds-modal/css/mds-modal-animate-top.css

@@ -1,28 +1,28 @@
-:host ( .animate-top ) {
+:host( .to-top ) {
   @apply
     justify-center
     mobile:p-4
     p-8;
 }
 
-:host ( .animate-top ) .window,
-:host ( .animate-top ) > ::slotted ( [slot=window] ) {
-  @apply animate-top;
+:host( .to-top ) .window,
+:host( .to-top ) > ::slotted( [slot="window"] ) {
+  @apply animate;
 }
 
-:host ( .animate-top-intro ) .window,
-:host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-intro ) .window,
+:host( .to-top-intro ) > ::slotted( [slot="window"] ) {
   @apply animate-top-intro;
 }
 
-: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] ) {
+:host( .to-top-opened.to-top-outro ) .window,
+:host( .to-top-opened.to-top-outro ) > ::slotted( [slot="window"] ),
+:host( .to-top-opened ) .window,
+:host( .to-top-opened ) > ::slotted( [slot="window"] ) {
   @apply animate-top-opened;
 }
 
-:host ( .animate-top-outro ) .window,
-:host ( .animate-top-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-outro ) .window,
+:host( .to-top-outro ) > ::slotted( [slot="window"] ) {
   @apply animate-top-outro;
 }

package/src/components/mds-modal/mds-modal.css

@@ -1,4 +1,7 @@
+/* stylelint-disable */
 @import '../../tailwind/components.css';
+@import './css/components.css';
+
 @tailwind components;
 @tailwind utilities;
 
@@ -11,64 +14,6 @@
   * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
 */
 
-@layer components {
-  .animate-bottom,
-  .animate-center,
-  .animate-top {
-    @apply
-      duration-500
-      ease-in-out-expo
-      opacity-0
-      transition-cosmetic;
-  }
-
-  .animate-bottom-intro,
-  .animate-center-intro,
-  .animate-top-intro {
-    transform: rotateX(-22deg) scale(0.5) translateY(40%);
-  }
-
-  .animate-bottom-opened,
-  .animate-center-opened,
-  .animate-top-opened {
-    @apply opacity-100;
-
-    transform: rotateX(0) scale(1) translateY(0);
-  }
-
-  .animate-bottom-outro,
-  .animate-center-outro,
-  .animate-top-outro {
-    transform: rotateX(-22deg) scale(0.5) translateY(-40%);
-  }
-
-  .animate-left,
-  .animate-right {
-    @apply
-      duration-500
-      opacity-0
-      ease-in-out-expo
-      transition-cosmetic;
-  }
-
-  .animate-right-intro,
-  .animate-right-outro {
-    transform: translateX(calc(100% + 50px));
-  }
-
-  .animate-right-opened,
-  .animate-left-opened {
-    @apply opacity-100;
-
-    transform: translateX(0);
-  }
-
-  .animate-left-intro,
-  .animate-left-outro {
-    transform: translateX(calc(-100% - 50px));
-  }
-}
-
 :host {
 
   --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);
@@ -89,27 +34,28 @@
     pointer-events-none;
 
   background-color: rgba(var(--mds-modal-overlay-color) / 0);
+  fill: theme('colors.tone-neutral');
   perspective: 600px;
-  z-index: var(--z-index, 1000);
+  z-index: var(--mds-modal-z-index, 1000);
 }
 
-:host ( [position=top] ) {
+:host( [position=top] ) {
   @apply
     items-start
     justify-center;
 }
 
-:host ( [position=bottom] ) {
+:host( [position=bottom] ) {
   @apply
     items-end
     justify-center;
 }
 
-:host ( .animate-bottom-opened ),
-:host ( .animate-center-opened ),
-:host ( .animate-left-opened ),
-:host ( .animate-right-opened ),
-:host ( .animate-top-opened ) {
+:host( .to-bottom-opened ),
+:host( .to-center-opened ),
+:host( .to-left-opened ),
+:host( .to-right-opened ),
+:host( .to-top-opened ) {
   @apply
     duration-500
     pointer-events-auto;
@@ -123,7 +69,6 @@
     cursor-pointer
     duration-500
     ease-in-out-quart
-    fill-tone-neutral-10
     h-9
     opacity-0
     origin-center
@@ -132,6 +77,7 @@
     top-0
     w-9;
 
+  fill: inherit;
   transform: translate(0, 24px) rotate(90deg);
   transition-property: opacity, outline, outline-offset, transform;
 }
@@ -166,3 +112,4 @@
 @import './css/mds-modal-animate-left.css';
 @import './css/mds-modal-animate-right.css';
 @import './css/mds-modal-animate-top.css';
+

package/src/components/mds-modal/mds-modal.tsx

@@ -12,23 +12,24 @@ import { ModalPositionType, ModalAnimationStateType } from './meta/types'
 export class MdsModal {
 
   private animationDeelay
-  private window: boolean = null
-  private top: boolean = null
-  private bottom: boolean = null
+  private window = false
+  private top = false
+  private bottom = false
   private animationState: ModalAnimationStateType = 'intro'
   private km = new KeyboardManager()
+
   @State() stateOpened: boolean
   @Element() host: HTMLMdsModalElement
 
   /**
    * Specifies if the modal is opened or not
    */
-  @Prop({ reflect: true, mutable: true }) opened?: boolean
+  @Prop({ reflect: true, mutable: true }) opened = false
 
   /**
    * Specifies the animation position of the modal window
    */
-  @Prop({ reflect: true, mutable: true }) position?: ModalPositionType = null
+  @Prop({ reflect: true, mutable: true }) position?: ModalPositionType = 'center'
 
   componentWillLoad (): void {
     this.bottom = this.host.querySelector('[slot="bottom"]') !== null
@@ -36,17 +37,12 @@ export class MdsModal {
     this.window = this.host.querySelector('[slot="window"]') !== null
     this.stateOpened = this.opened
 
-    if (this.window && this.position === null) {
-      this.position = 'center'
-    }
-
-    if (this.position === null) {
+    if (!this.window) {
       this.position = 'right'
     }
 
     if (this.window) {
-      const modal = this.host.querySelector('[slot="window"]')
-      modal.setAttribute('role', 'modal')
+      this.host.querySelector('[slot="window"]')?.setAttribute('role', 'modal')
     }
   }
 
@@ -66,7 +62,8 @@ export class MdsModal {
 
   componentDidLoad = (): void => {
     this.km.addElement(this.host, 'host')
-    this.km.addElement(this.host.shadowRoot.querySelector('.close'), 'close')
+    const close = this.host.shadowRoot?.querySelector('.close')
+    if (close) this.km.addElement(close as HTMLElement, 'close')
     this.km.attachEscapeBehavior(() => this.closeEvent.emit())
     this.km.attachClickBehavior('close')
   }
@@ -76,14 +73,14 @@ export class MdsModal {
     this.km.detachClickBehavior('close')
   }
 
-  private animationName = (customState: string = null, customPosition: string = null): string => {
-    return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`
+  private animationName = (customState = '', customPosition = ''): string => {
+    return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`
   }
 
   @Watch('position')
   positionChange (_newValue: string, oldValue: string): void {
     window.clearTimeout(this.animationDeelay)
-    this.host.classList.remove(this.animationName(null, oldValue))
+    this.host.classList.remove(this.animationName('', oldValue))
     this.host.classList.remove(this.animationName('intro', oldValue))
     this.host.classList.remove(this.animationName('outro', oldValue))
   }
@@ -99,7 +96,7 @@ export class MdsModal {
    */
   @Event({ bubbles: true, composed: true, eventName: 'mdsModalClose' }) closeEvent: EventEmitter<void>
 
-  private closeModal = (e:Event = null): void => {
+  private closeModal = (e:Event): void => {
     if ((e.target as HTMLElement)?.localName !== 'mds-modal') {
       return
     }
@@ -123,10 +120,8 @@ export class MdsModal {
     return (
       <Host aria-modal={clsx(this.opened ? 'true' : 'false' )} class={clsx(this.stateOpened && this.animationName('opened'))} onClick={(e: Event) => { this.closeModal(e) }}>
         { this.window
-          ?
-          <slot name="window"/>
-          :
-          <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} role="dialog">
+          ? <slot name="window"/>
+          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} role="dialog" part="window">
             { this.top &&
               <slot name="top"/>
             }

package/src/components/mds-modal/readme.md

@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property   | Attribute  | Description                                          | Type                                                 | Default     |
-| ---------- | ---------- | ---------------------------------------------------- | ---------------------------------------------------- | ----------- |
-| `opened`   | `opened`   | Specifies if the modal is opened or not              | `boolean`                                            | `undefined` |
-| `position` | `position` | Specifies the animation position of the modal window | `"bottom" \| "center" \| "left" \| "right" \| "top"` | `null`      |
+| Property   | Attribute  | Description                                          | Type                                                              | Default    |
+| ---------- | ---------- | ---------------------------------------------------- | ----------------------------------------------------------------- | ---------- |
+| `opened`   | `opened`   | Specifies if the modal is opened or not              | `boolean`                                                         | `false`    |
+| `position` | `position` | Specifies the animation position of the modal window | `"bottom" \| "center" \| "left" \| "right" \| "top" \| undefined` | `'center'` |
 
 
 ## Events
@@ -20,6 +20,13 @@
 | `mdsModalClose` | Emits when a modal is closed | `CustomEvent<void>` |
 
 
+## Shadow Parts
+
+| Part       | Description |
+| ---------- | ----------- |
+| `"window"` |             |
+
+
 ## CSS Custom Properties
 
 | Name                            | Description                                                                                                                                        |