@madgex/design-system 1.43.0 → 1.43.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.43.0",
+  "version": "1.43.1",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/modal/README.md

@@ -1,4 +1,4 @@
-The trigger for the modal is not part of the "Modal macro". It will need to added separately. This way you can configure the trigger as you wish but it should have the class `js-mds-modal-trigger` and the attribute `data-modal-id` to link it to the modal to use.
+The trigger for the modal is not part of the "Modal macro". It will need to added separately. This way you can configure the trigger as you wish but it should have the attribute `data-modal-id`. It will be used to target the trigger and to link it to the modal to use.
 
 If you need to add a "close" button to the modal, you can do so by adding the class `jd-mds-modal-close`.
 

package/src/components/modal/modal.js

@@ -1,7 +1,7 @@
 const tokens = require('../../tokens/size.json');
 
 const breakpoint = parseInt(tokens.size.breakpoint.md.value, 10);
-const modalTriggerClassName = 'js-mds-modal-trigger';
+const modalTrigger = 'data-modal-id';
 const modalCloseButtonClassName = 'js-mds-modal-close';
 const modalActiveClass = 'mds-modal--active';
 let focusedElementBeforeModal;
@@ -10,10 +10,10 @@ const modals = {
   init: () => {
     const screenWidth = window.innerWidth;
     if (screenWidth > breakpoint) {
-      const triggersList = Array.from(document.querySelectorAll(`.${modalTriggerClassName}`));
+      const triggersList = Array.from(document.querySelectorAll(`[${modalTrigger}]`));
 
       triggersList.forEach((trigger) => {
-        const modalId = trigger.getAttribute('data-modal-id');
+        const modalId = trigger.getAttribute(modalTrigger);
         const modal = document.getElementById(modalId);
         const closeButtons = Array.from(modal.querySelectorAll(`.${modalCloseButtonClassName}`));
         // Ensure content outside of the modal dialog is inaccessible to all users while the modal dialog is active

package/src/components/modal/modal.njk

@@ -9,7 +9,7 @@
 <div id="site-container">
   <p>{{ MdsButton({
     text: 'Open Modal',
-    classes: 'mds-button--plain js-mds-modal-trigger',
+    classes: 'mds-button--plain',
     attributes: { 'data-modal-id': modalId }
   }) }}</p>