@maggioli-design-system/mds-modal 5.2.1 → 5.4.0

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

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop, Watch } from '@stencil/core'
-import { ModalPositionType, ModalAnimationStateType } from './meta/types'
+import { ModalPositionType, ModalAnimationStateType, ModalOverflowType } from './meta/types'
 import { cssDurationToMilliseconds } from '@common/unit'
 
 /**
@@ -20,6 +20,7 @@ export class MdsModal {
   private animationDelayTimeout: NodeJS.Timeout
   private window = false
   private top = false
+  private bodyOverflow: string
   private bottom = false
   private cssTransitionDuration: string
 
@@ -40,6 +41,11 @@ export class MdsModal {
    */
   @Prop({ reflect: true, mutable: true }) animating?: ModalAnimationStateType = 'none'
 
+  /**
+   * Specifies if the component prevents the body from scrolling when modal window is opened
+   */
+  @Prop({ reflect: true }) readonly overflow: ModalOverflowType = 'auto'
+
   /**
    * Emits when a modal is closed
    */
@@ -69,6 +75,25 @@ export class MdsModal {
     clearTimeout(this.animationDelayTimeout)
   }
 
+  private disableOverflow = (): void => {
+    if (document) {
+      if (document.body.style.overflow) {
+        this.bodyOverflow = document.body.style.overflow
+      }
+      document.body.style.overflow = 'hidden'
+    }
+  }
+
+  private enableOverflow = (): void => {
+    if (document) {
+      if (this.bodyOverflow) {
+        document.body.style.overflow = this.bodyOverflow
+      } else {
+        document.body.style.removeProperty('overflow')
+      }
+    }
+  }
+
   private animateOpenWindow = (): void => {
     this.animating = 'intro'
     clearTimeout(this.animationDelayTimeout)
@@ -86,6 +111,10 @@ export class MdsModal {
     this.top = this.host.querySelector('[slot="top"]') !== null
     this.window = this.host.querySelector('[slot="window"]') !== null
 
+    if (this.overflow === 'auto' && this.opened) {
+      this.disableOverflow()
+    }
+
     if (this.window) {
       this.host.querySelector('[slot="window"]')?.setAttribute('role', 'dialog')
     }
@@ -112,9 +141,15 @@ export class MdsModal {
   @Watch('opened')
   handleOpenProp (newValue: boolean): void {
     if (newValue) {
+      if (this.overflow === 'auto') {
+        this.disableOverflow()
+      }
       this.animateOpenWindow()
       return
     }
+    if (this.overflow === 'auto') {
+      this.enableOverflow()
+    }
     this.animateCloseWindow()
   }
 

package/src/components/mds-modal/meta/dictionary.ts

@@ -10,6 +10,12 @@ const modalPositionDictionary = [
   'top-right',
 ]
 
+const modalOverflowDictionary = [
+  'auto',
+  'manual',
+]
+
 export {
+  modalOverflowDictionary,
   modalPositionDictionary,
 }

package/src/components/mds-modal/meta/types.ts

@@ -13,3 +13,7 @@ export type ModalAnimationStateType =
   | 'intro'
   | 'none'
   | 'outro'
+
+export type ModalOverflowType =
+  | 'auto'
+  | 'manual'

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

@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property    | Attribute   | Description                                           | Type                                                                                                                              | Default    |
-| ----------- | ----------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `animating` | `animating` | Specifies if the component is animating itself or not | `"intro" \| "none" \| "outro" \| undefined`                                                                                       | `'none'`   |
-| `opened`    | `opened`    | Specifies if the modal is opened or not               | `boolean`                                                                                                                         | `false`    |
-| `position`  | `position`  | Specifies the animation position of the modal window  | `"bottom" \| "bottom-left" \| "bottom-right" \| "center" \| "left" \| "right" \| "top" \| "top-left" \| "top-right" \| undefined` | `'center'` |
+| Property    | Attribute   | Description                                                                             | Type                                                                                                                              | Default    |
+| ----------- | ----------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `animating` | `animating` | Specifies if the component is animating itself or not                                   | `"intro" \| "none" \| "outro" \| undefined`                                                                                       | `'none'`   |
+| `opened`    | `opened`    | Specifies if the modal is opened or not                                                 | `boolean`                                                                                                                         | `false`    |
+| `overflow`  | `overflow`  | Specifies if the component prevents the body from scrolling when modal window is opened | `"auto" \| "manual"`                                                                                                              | `'auto'`   |
+| `position`  | `position`  | Specifies the animation position of the modal window                                    | `"bottom" \| "bottom-left" \| "bottom-right" \| "center" \| "left" \| "right" \| "top" \| "top-left" \| "top-right" \| undefined` | `'center'` |
 
 
 ## Events
@@ -41,17 +42,18 @@
 
 ## CSS Custom Properties
 
-| Name                            | Description                                                                                                                                        |
-| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--mds-modal-close-icon-color`  | Set the color of the close icon button to the top left.                                                                                            |
-| `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
-| `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
-| `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
-| `--mds-modal-window-distance`   | Set the distance between the modal window and the screen bounds                                                                                    |
-| `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
-| `--mds-modal-window-radius`     | Set the border radius of the window                                                                                                                |
-| `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
-| `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
+| Name                                 | Description                                                                                                                                        |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--mds-modal-close-icon-color`       | Set the color of the close icon button to the top left.                                                                                            |
+| `--mds-modal-custom-window-distance` | Set the distance between the slotted modal window and the screen bounds                                                                            |
+| `--mds-modal-overlay-color`          | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
+| `--mds-modal-overlay-opacity`        | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
+| `--mds-modal-window-background`      | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-distance`        | Set the distance between the modal window and the screen bounds                                                                                    |
+| `--mds-modal-window-overflow`        | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-radius`          | Set the border radius of the window                                                                                                                |
+| `--mds-modal-window-shadow`          | Set the box shadow of the window                                                                                                                   |
+| `--mds-modal-z-index`                | Set the z-index of the window when the component is opened                                                                                         |
 
 
 ----------------------------------------------

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

@@ -1,7 +1,7 @@
 
 import { h } from '@stencil/core'
 import { useState } from 'react'
-import { modalPositionDictionary } from '../meta/dictionary'
+import { modalPositionDictionary, modalOverflowDictionary } from '../meta/dictionary'
 
 export default {
   title: 'UI / Modal',
@@ -10,6 +10,12 @@ export default {
       description: 'Specifies if the modal is opened or not',
       type: { name: 'boolean' },
     },
+    overflow: {
+      description: 'Specifies if the component prevents the body from scrolling when modal window is opened',
+      control: { type: 'select' },
+      options: modalOverflowDictionary,
+      type: { name: 'string' },
+    },
     position: {
       control: { type: 'select' },
       description: 'Specifies the animation position of the modal window',
@@ -27,7 +33,7 @@ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com
 const Template = args =>
   <mds-modal {...args}>
     <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]">
-      <mds-img class="w-1600" src="/logo-gruppo-maggioli-512w.webp"/>
+      <mds-img class="w-1600" src="./logo-gruppo-maggioli-512w.webp"/>
       <div class="text-tone-neutral-02">
         <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
         <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
@@ -40,7 +46,7 @@ const Template = args =>
     </div>
     <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09 max-w-[400px]">
       <mds-author class="flex-grow">
-        <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="/avatar-01-200x200.jpeg"/>
+        <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="./avatar-01-200x200.jpeg"/>
         <mds-text typography="h6">{ fullName }</mds-text>
         <mds-text typography="caption" class="text-tone-neutral-04">{ email }</mds-text>
       </mds-author>
@@ -48,6 +54,41 @@ const Template = args =>
     </footer>
   </mds-modal>
 
+const TemplateOverflow = args =>
+  <div>
+    <div class="grid">
+      {Array(40).fill(null).map((_value, index) => (
+        <div key={index} class="h-[100px] flex items-start justify-center text-center border-0 border-t border-solid border-t-tone-neutral-07">
+          <mds-text class="px-200 py-100 rounded-b-lg bg-tone-neutral-10 border-t-0 border border-solid border-tone-neutral-07" typography="snippet" tag="div">
+            { index === 0 ? '0px' : index + '00px' }
+          </mds-text>
+        </div>
+      ))}
+    </div>
+    <mds-modal {...args}>
+      <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]">
+        <mds-img class="w-1600" src="./logo-gruppo-maggioli-512w.webp"/>
+        <div class="text-tone-neutral-02">
+          <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
+          <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
+        </div>
+      </header>
+      <div class="p-800 max-w-[400px]">
+        <mds-text>
+          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’re future-proofing our components as more brands adopt NewsKit.
+        </mds-text>
+      </div>
+      <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09 max-w-[400px]">
+        <mds-author class="flex-grow">
+          <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="./avatar-01-200x200.jpeg"/>
+          <mds-text typography="h6">{ fullName }</mds-text>
+          <mds-text typography="caption" class="text-tone-neutral-04">{ email }</mds-text>
+        </mds-author>
+        <mds-button icon="mdi/dots-vertical" variant="light"></mds-button>
+      </footer>
+    </mds-modal>
+  </div>
+
 const CustomTemplate = args =>
   <mds-modal {...args}>
     <mds-banner slot="window" class="max-w-xl mx-6" deletable headline="Action required">
@@ -80,15 +121,28 @@ const InteractiveTemplate = () => {
 export const Default = Template.bind({})
 Default.args = {
   position: 'right',
+  opened: true,
+}
+
+export const BodyOverflowDisabled = TemplateOverflow.bind({})
+BodyOverflowDisabled.args = {
+  overflow: 'auto',
+  opened: true,
+  position: 'right',
 }
 
 export const DefaultWindowCustomized = Template.bind({})
 DefaultWindowCustomized.args = {
   position: 'right',
+  opened: true,
   style: { '--mds-modal-window-distance': '1rem', '--mds-modal-window-radius': '1rem' },
 }
 export const CustomWindowElement = CustomTemplate.bind({})
+CustomWindowElement.args = {
+  opened: true,
+}
 export const Interactive = InteractiveTemplate.bind({})
+
 export const ARIATest = CustomTemplate.bind({})
 ARIATest.args = {
   opened: true,

package/src/components.d.ts

@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ModalAnimationStateType, ModalPositionType } from "./components/mds-modal/meta/types";
-export { ModalAnimationStateType, ModalPositionType } from "./components/mds-modal/meta/types";
+import { ModalAnimationStateType, ModalOverflowType, ModalPositionType } from "./components/mds-modal/meta/types";
+export { ModalAnimationStateType, ModalOverflowType, ModalPositionType } from "./components/mds-modal/meta/types";
 export namespace Components {
     interface MdsModal {
         /**
@@ -17,6 +17,10 @@ export namespace Components {
           * Specifies if the modal is opened or not
          */
         "opened": boolean;
+        /**
+          * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        "overflow": ModalOverflowType;
         /**
           * Specifies the animation position of the modal window
          */
@@ -68,6 +72,10 @@ declare namespace LocalJSX {
           * Specifies if the modal is opened or not
          */
         "opened"?: boolean;
+        /**
+          * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        "overflow"?: ModalOverflowType;
         /**
           * Specifies the animation position of the modal window
          */

package/src/dictionary/keyboard.ts

@@ -0,0 +1,87 @@
+const keyboardKeyNameDictionary = [
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  'a',
+  'alt',
+  'altleft',
+  'altright',
+  'arrowdown',
+  'arrowleft',
+  'arrowright',
+  'arrowup',
+  'b',
+  'backspace',
+  'c',
+  'capslock',
+  'command',
+  'commandleft',
+  'commandright',
+  'control',
+  'controlleft',
+  'controlright',
+  'd',
+  'delete',
+  'e',
+  'end',
+  'enter',
+  'escape',
+  'f',
+  'f1',
+  'f10',
+  'f11',
+  'f12',
+  'f2',
+  'f3',
+  'f4',
+  'f5',
+  'f6',
+  'f7',
+  'f8',
+  'f9',
+  'g',
+  'h',
+  'home',
+  'i',
+  'j',
+  'k',
+  'l',
+  'm',
+  'n',
+  'o',
+  'option',
+  'optionleft',
+  'optionright',
+  'p',
+  'pagedown',
+  'pageup',
+  'q',
+  'r',
+  's',
+  'shift',
+  'shiftleft',
+  'shiftright',
+  'space',
+  't',
+  'tab',
+  'u',
+  'v',
+  'w',
+  'windows',
+  'windowsleft',
+  'windowsright',
+  'x',
+  'y',
+  'z',
+]
+
+export {
+  keyboardKeyNameDictionary,
+}

package/src/dictionary/tree.ts

@@ -0,0 +1,21 @@
+const treeActionsDictionary = [
+  'auto',
+  'visible',
+]
+
+const treeAppearanceDictionary = [
+  'depth',
+  'none',
+]
+
+const treeIconDictionary = [
+  'folder',
+  'chevron',
+]
+
+export {
+  treeActionsDictionary,
+  treeAppearanceDictionary,
+  treeIconDictionary,
+}
+

package/src/fixtures/icons.json

@@ -1,5 +1,6 @@
 [
     "mdi/alien",
+    "mdi/apple-keyboard-shift",
     "mdi/barley",
     "mdi/baseball",
     "mdi/crown",
@@ -7,9 +8,15 @@
     "mdi/dots-vertical",
     "mdi/email",
     "mdi/file-document-remove-outline",
+    "mdi/file-download-outline",
+    "mdi/file-upload-outline",
+    "mdi/folder-open",
+    "mdi/handshake",
     "mdi/harddisk",
+    "mdi/keyboard-space",
     "mdi/license",
     "mdi/map-marker",
+    "mdi/npm",
     "mdi/replay",
     "mdi/vector-curve",
     "mgg/abitazione-principale",
@@ -44,6 +51,7 @@
     "mgg/ai-status-processing",
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anagrafe-nazionale",
     "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
@@ -68,6 +76,7 @@
     "mgg/cancelled-sheet",
     "mgg/car-license",
     "mgg/card-stamping",
+    "mgg/cash-register-settings",
     "mgg/check-small",
     "mgg/checklist",
     "mgg/checklist-settings",
@@ -164,7 +173,9 @@
     "mgg/home-hammer",
     "mgg/home-link",
     "mgg/home-number",
+    "mgg/inad",
     "mgg/inagibile",
+    "mgg/inps",
     "mgg/input-calendar-costs",
     "mgg/input-calendar-period",
     "mgg/input-calendar-time",
@@ -237,7 +248,9 @@
     "mgg/places-park",
     "mgg/places-park-alt",
     "mgg/places-store-access-denied",
+    "mgg/pos",
     "mgg/property-owner",
+    "mgg/registro-imprese",
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",
@@ -332,34 +345,52 @@
     "mi/baseline/check-box",
     "mi/baseline/check-box-outline-blank",
     "mi/baseline/check-circle",
+    "mi/baseline/chevron-right",
     "mi/baseline/close",
     "mi/baseline/contrast",
     "mi/baseline/css",
     "mi/baseline/dark-mode",
     "mi/baseline/delete",
     "mi/baseline/description",
+    "mi/baseline/desk",
     "mi/baseline/directions-run",
     "mi/baseline/directions-walk",
     "mi/baseline/done",
     "mi/baseline/downhill-skiing",
+    "mi/baseline/draw",
     "mi/baseline/eco",
     "mi/baseline/email",
     "mi/baseline/error",
     "mi/baseline/explore",
+    "mi/baseline/favorite",
+    "mi/baseline/favorite-border",
     "mi/baseline/file-download-done",
+    "mi/baseline/folder",
     "mi/baseline/folder-zip",
     "mi/baseline/horizontal-rule",
     "mi/baseline/indeterminate-check-box",
     "mi/baseline/info",
     "mi/baseline/insert-drive-file",
+    "mi/baseline/keyboard",
     "mi/baseline/keyboard-arrow-down",
+    "mi/baseline/keyboard-arrow-left",
+    "mi/baseline/keyboard-arrow-right",
     "mi/baseline/keyboard-arrow-up",
+    "mi/baseline/keyboard-capslock",
+    "mi/baseline/keyboard-command-key",
+    "mi/baseline/keyboard-option-key",
+    "mi/baseline/keyboard-return",
+    "mi/baseline/keyboard-tab",
     "mi/baseline/light-mode",
     "mi/baseline/local-activity",
+    "mi/baseline/location-city",
     "mi/baseline/lock-open",
     "mi/baseline/login",
     "mi/baseline/logout",
+    "mi/baseline/meeting-room",
+    "mi/baseline/more-vert",
     "mi/baseline/navigate-next",
+    "mi/baseline/north",
     "mi/baseline/panorama",
     "mi/baseline/person",
     "mi/baseline/pets",
@@ -370,13 +401,17 @@
     "mi/baseline/route",
     "mi/baseline/send",
     "mi/baseline/settings",
+    "mi/baseline/south",
     "mi/baseline/sports",
     "mi/baseline/sports-soccer",
     "mi/baseline/stadium",
     "mi/baseline/terminal",
     "mi/baseline/timer",
     "mi/baseline/tv",
+    "mi/baseline/unfold-less",
     "mi/baseline/unfold-more",
+    "mi/baseline/vertical-align-bottom",
+    "mi/baseline/vertical-align-top",
     "mi/baseline/videocam",
     "mi/baseline/visibility",
     "mi/baseline/visibility-off",
@@ -385,6 +420,7 @@
     "mi/baseline/web",
     "mi/baseline/wysiwyg",
     "mi/outline/auto-awesome",
+    "mi/outline/backspace",
     "mi/outline/circle",
     "mi/outline/dark-mode",
     "mi/outline/help-outline",
@@ -393,5 +429,6 @@
     "mi/round/email",
     "mi/round/menu",
     "mi/round/more-vert",
-    "mi/round/person"
+    "mi/round/person",
+    "mi/sharp/window"
 ]

package/src/fixtures/iconsauce.json

@@ -31,6 +31,7 @@
     "mgg/ai-status-processing",
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anagrafe-nazionale",
     "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
@@ -55,6 +56,7 @@
     "mgg/cancelled-sheet",
     "mgg/car-license",
     "mgg/card-stamping",
+    "mgg/cash-register-settings",
     "mgg/check-small",
     "mgg/checklist-settings",
     "mgg/checklist",
@@ -151,7 +153,9 @@
     "mgg/home-hammer",
     "mgg/home-link",
     "mgg/home-number",
+    "mgg/inad",
     "mgg/inagibile",
+    "mgg/inps",
     "mgg/input-calendar-costs",
     "mgg/input-calendar-period",
     "mgg/input-calendar-time",
@@ -224,7 +228,9 @@
     "mgg/places-park-alt",
     "mgg/places-park",
     "mgg/places-store-access-denied",
+    "mgg/pos",
     "mgg/property-owner",
+    "mgg/registro-imprese",
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",