@madgex/design-system 1.40.1 → 1.42.0

package/__tests__/unit/src/components/modal.spec.js

@@ -0,0 +1,86 @@
+import modals from '../../../../src/components/modal/modal';
+
+if (window.document) {
+  window.document.createRange = () => ({
+    setStart: () => {},
+    setEnd: () => {},
+    commonAncestorContainer: {
+      nodeName: 'BODY',
+      ownerDocument: document,
+    },
+  });
+}
+
+document.body.innerHTML = `
+<div id="site-container">
+  <button id="modal-trigger" class="js-mds-modal-trigger" data-modal-id="test-modal">Open Modal</button>
+</div>
+<div class="mds-modal" role="dialog" id="test-modal" aria-labelledby="modal-label" data-site-container="site-container">
+  <div class="mds-modal__inner">
+    <h1 id="modal-label">Hello!</h1>
+    <button id="close-button" type="button" class="js-mds-modal-close">Close</button>
+  </div>
+</div>`;
+const modalActiveClass = 'mds-modal--active';
+const trigger = document.getElementById('modal-trigger');
+const modal = document.getElementById('test-modal');
+const closeButton = document.getElementById('close-button');
+const siteContainer = document.getElementById('site-container');
+
+beforeEach(() => {
+  trigger.focus();
+  modal.classList.remove(modalActiveClass);
+  siteContainer.removeAttribute('aria-hidden');
+  modals.init();
+});
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('modal - clicking on trigger', () => {
+  it('add active class to modal, move focus to focusable element in modal and aria-hidden="true" to site container', () => {
+    expect.assertions(3);
+    trigger.click();
+    expect(modal.classList.contains(modalActiveClass)).toBe(true);
+    expect(document.activeElement).toEqual(closeButton);
+    expect(siteContainer.getAttribute('aria-hidden')).toBe('true');
+  });
+});
+
+describe('modal - close modal', () => {
+  it('close modal if clicking outside of "modal__inner"', () => {
+    expect.assertions(3);
+    trigger.click(); // opening modal first
+    modal.click();
+    expect(modal.classList.contains(modalActiveClass)).toBe(false);
+    expect(document.activeElement).toEqual(trigger);
+    expect(siteContainer.getAttribute('aria-hidden')).toBe(null);
+  });
+  it('close modal if using escape key', () => {
+    expect.assertions(3);
+    trigger.click();
+    modal.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(modal.classList.contains(modalActiveClass)).toBe(false);
+    expect(document.activeElement).toEqual(trigger);
+    expect(siteContainer.getAttribute('aria-hidden')).toBe(null);
+  });
+  it('close modal if using close button', () => {
+    expect.assertions(3);
+    trigger.click();
+    closeButton.click();
+    expect(modal.classList.contains(modalActiveClass)).toBe(false);
+    expect(document.activeElement).toEqual(trigger);
+    expect(siteContainer.getAttribute('aria-hidden')).toBe(null);
+  });
+});
+
+describe('modal - trap focus', () => {
+  it('tab or shift tab keeps you focused on the close button inside the modal', () => {
+    expect.assertions(2);
+    trigger.click(); // opening modal first
+    modal.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+    expect(document.activeElement).toEqual(closeButton);
+    modal.dispatchEvent(new KeyboardEvent('keydown', { shiftKey: true, key: 'Tab' }));
+    expect(document.activeElement).toEqual(closeButton);
+  });
+});

package/coverage/cobertura-coverage.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" ?>
 <!DOCTYPE coverage SYSTEM "http://cobertura.sourceforge.net/xml/coverage-04.dtd">
-<coverage lines-valid="354" lines-covered="143" line-rate="0.40399999999999997" branches-valid="97" branches-covered="31" branch-rate="0.3196" timestamp="1584639015032" complexity="0" version="0.1">
+<coverage lines-valid="404" lines-covered="192" line-rate="0.4752" branches-valid="113" branches-covered="44" branch-rate="0.38939999999999997" timestamp="1585051813265" complexity="0" version="0.1">
   <sources>
     <source>/var/lib/jenkins/jobs/madgex-design-system/branches/master/workspace</source>
   </sources>
@@ -352,6 +352,115 @@
         </class>
       </classes>
     </package>
+    <package name="components.modal" line-rate="1" branch-rate="0.8125">
+      <classes>
+        <class name="modal.js" filename="src/components/modal/modal.js" line-rate="1" branch-rate="0.8125">
+          <methods>
+            <method name="(anonymous_0)" hits="5" signature="()V">
+              <lines>
+                <line number="10" hits="5"/>
+              </lines>
+            </method>
+            <method name="(anonymous_1)" hits="1" signature="()V">
+              <lines>
+                <line number="15" hits="1"/>
+              </lines>
+            </method>
+            <method name="(anonymous_2)" hits="5" signature="()V">
+              <lines>
+                <line number="34" hits="5"/>
+              </lines>
+            </method>
+            <method name="(anonymous_3)" hits="2" signature="()V">
+              <lines>
+                <line number="38" hits="2"/>
+              </lines>
+            </method>
+            <method name="(anonymous_4)" hits="3" signature="()V">
+              <lines>
+                <line number="43" hits="3"/>
+              </lines>
+            </method>
+            <method name="(anonymous_5)" hits="1" signature="()V">
+              <lines>
+                <line number="49" hits="1"/>
+              </lines>
+            </method>
+            <method name="(anonymous_6)" hits="1" signature="()V">
+              <lines>
+                <line number="50" hits="1"/>
+              </lines>
+            </method>
+            <method name="(anonymous_7)" hits="5" signature="()V">
+              <lines>
+                <line number="58" hits="5"/>
+              </lines>
+            </method>
+            <method name="(anonymous_8)" hits="3" signature="()V">
+              <lines>
+                <line number="64" hits="3"/>
+              </lines>
+            </method>
+            <method name="(anonymous_9)" hits="3" signature="()V">
+              <lines>
+                <line number="69" hits="3"/>
+              </lines>
+            </method>
+          </methods>
+          <lines>
+            <line number="1" hits="1" branch="false"/>
+            <line number="3" hits="1" branch="false"/>
+            <line number="4" hits="1" branch="false"/>
+            <line number="5" hits="1" branch="false"/>
+            <line number="6" hits="1" branch="false"/>
+            <line number="9" hits="1" branch="false"/>
+            <line number="11" hits="5" branch="false"/>
+            <line number="12" hits="5" branch="true" condition-coverage="50% (1/2)"/>
+            <line number="13" hits="5" branch="false"/>
+            <line number="15" hits="5" branch="false"/>
+            <line number="16" hits="1" branch="false"/>
+            <line number="17" hits="1" branch="false"/>
+            <line number="18" hits="1" branch="false"/>
+            <line number="21" hits="1" branch="false"/>
+            <line number="22" hits="1" branch="false"/>
+            <line number="26" hits="1" branch="false"/>
+            <line number="27" hits="1" branch="false"/>
+            <line number="29" hits="1" branch="false"/>
+            <line number="31" hits="1" branch="false"/>
+            <line number="32" hits="1" branch="false"/>
+            <line number="34" hits="1" branch="false"/>
+            <line number="35" hits="5" branch="false"/>
+            <line number="36" hits="5" branch="false"/>
+            <line number="38" hits="1" branch="false"/>
+            <line number="39" hits="2" branch="true" condition-coverage="100% (2/2)"/>
+            <line number="40" hits="1" branch="false"/>
+            <line number="43" hits="1" branch="false"/>
+            <line number="44" hits="3" branch="false"/>
+            <line number="45" hits="3" branch="true" condition-coverage="100% (4/4)"/>
+            <line number="46" hits="1" branch="false"/>
+            <line number="49" hits="1" branch="false"/>
+            <line number="50" hits="1" branch="false"/>
+            <line number="51" hits="1" branch="false"/>
+            <line number="52" hits="1" branch="false"/>
+            <line number="59" hits="5" branch="false"/>
+            <line number="60" hits="5" branch="false"/>
+            <line number="61" hits="5" branch="false"/>
+            <line number="62" hits="5" branch="false"/>
+            <line number="65" hits="3" branch="false"/>
+            <line number="66" hits="3" branch="false"/>
+            <line number="67" hits="3" branch="false"/>
+            <line number="70" hits="3" branch="true" condition-coverage="100% (2/2)"/>
+            <line number="71" hits="2" branch="true" condition-coverage="100% (2/2)"/>
+            <line number="72" hits="1" branch="true" condition-coverage="50% (1/2)"/>
+            <line number="73" hits="1" branch="false"/>
+            <line number="74" hits="1" branch="false"/>
+            <line number="76" hits="1" branch="true" condition-coverage="50% (1/2)"/>
+            <line number="77" hits="1" branch="false"/>
+            <line number="78" hits="1" branch="false"/>
+          </lines>
+        </class>
+      </classes>
+    </package>
     <package name="components.notification" line-rate="0.9286" branch-rate="1">
       <classes>
         <class name="notification.js" filename="src/components/notification/notification.js" line-rate="0.9286" branch-rate="1">
@@ -761,15 +870,16 @@
           <methods>
             <method name="(anonymous_0)" hits="0" signature="()V">
               <lines>
-                <line number="15" hits="0"/>
+                <line number="16" hits="0"/>
               </lines>
             </method>
           </methods>
           <lines>
-            <line number="15" hits="0" branch="false"/>
             <line number="16" hits="0" branch="false"/>
             <line number="17" hits="0" branch="false"/>
             <line number="18" hits="0" branch="false"/>
+            <line number="19" hits="0" branch="false"/>
+            <line number="20" hits="0" branch="false"/>
           </lines>
         </class>
       </classes>

package/coverage/components/accordion/accordion.js.html

@@ -396,7 +396,7 @@ export default accordion;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Mar 19 2020 17:30:15 GMT+0000 (Greenwich Mean Time)
+                at Tue Mar 24 2020 12:10:13 GMT+0000 (Greenwich Mean Time)
             </div>
         </div>
         <script src="../../prettify.js"></script>

package/coverage/components/accordion/index.html

@@ -94,7 +94,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Mar 19 2020 17:30:15 GMT+0000 (Greenwich Mean Time)
+                at Tue Mar 24 2020 12:10:13 GMT+0000 (Greenwich Mean Time)
             </div>
         </div>
         <script src="../../prettify.js"></script>

package/coverage/components/inputs/combobox/combobox.js.html

@@ -123,7 +123,7 @@ import Combobox from './vue-components/Combobox.vue';
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Mar 19 2020 17:30:15 GMT+0000 (Greenwich Mean Time)
+                at Tue Mar 24 2020 12:10:13 GMT+0000 (Greenwich Mean Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

package/coverage/components/inputs/combobox/index.html

@@ -94,7 +94,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Mar 19 2020 17:30:15 GMT+0000 (Greenwich Mean Time)
+                at Tue Mar 24 2020 12:10:13 GMT+0000 (Greenwich Mean Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html

@@ -693,7 +693,7 @@ export default {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Mar 19 2020 17:30:15 GMT+0000 (Greenwich Mean Time)
+                at Tue Mar 24 2020 12:10:13 GMT+0000 (Greenwich Mean Time)
             </div>
         </div>
         <script src="../../../../prettify.js"></script>

package/coverage/components/inputs/combobox/vue-components/index.html

@@ -94,7 +94,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Mar 19 2020 17:30:15 GMT+0000 (Greenwich Mean Time)
+                at Tue Mar 24 2020 12:10:13 GMT+0000 (Greenwich Mean Time)
             </div>
         </div>
         <script src="../../../../prettify.js"></script>

package/coverage/components/modal/index.html

@@ -0,0 +1,110 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Code coverage report for components/modal</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+    
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../index.html">All files</a> components/modal</h1>
+        <div class='clearfix'>
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>49/49</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">81.25% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>13/16</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>10/10</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>49/49</span>
+            </div>
+        
+            
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+    </div>
+    <div class='status-line high'></div>
+    <div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file high" data-value="modal.js"><a href="modal.js.html">modal.js</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="49" class="abs high">49/49</td>
+	<td data-value="81.25" class="pct high">81.25%</td>
+	<td data-value="16" class="abs high">13/16</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="10" class="abs high">10/10</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="49" class="abs high">49/49</td>
+	</tr>
+
+</tbody>
+</table>
+</div>
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
+                at Tue Mar 24 2020 12:10:13 GMT+0000 (Greenwich Mean Time)
+            </div>
+        </div>
+        <script src="../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
+    </body>
+</html>
+