@ons/design-system 61.0.0 → 61.0.1

package/components/access-code/_macro.njk

@@ -28,9 +28,8 @@
 
     {% if not params.error %}
         {% call onsPanel({
-                "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes)
-            })
-        %}
+            "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes)
+        }) %}
             {{ content | safe }}
         {% endcall %}
     {% else %}
@@ -39,11 +38,10 @@
 
     {% if params.securityMessage %}
         {% call onsPanel({
-                "type": "bare",
-                "iconType": "lock",
-                "classes": "ons-u-mb-s"
-            })
-        %}
+            "type": "bare",
+            "iconType": "lock",
+            "classes": "ons-u-mb-s"
+        }) %}
             {{ params.securityMessage }}
         {% endcall %}
     {% endif %}

package/components/modal/modal.js

@@ -1,4 +1,5 @@
 import dialogPolyfill from 'dialog-polyfill';
+import initAnalytics from '../../js/analytics';
 
 const overLayClass = 'ons-modal-overlay';
 const ie11Class = 'ons-modal-ie11';
@@ -8,7 +9,7 @@ export default class Modal {
     this.component = component;
     this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
     this.closeButton = component.querySelector('.ons-js-modal-btn');
-    this.setGaAttributes = component.getAttribute('data-enable-ga');
+    this.setGAAttributes = component.getAttribute('data-enable-ga');
     this.lastFocusedEl = null;
     this.dialogCSSSupported = true;
     this.modalType = this.component.classList.contains('ons-js-timeout-modal') ? 'Timeout' : 'Generic';
@@ -33,9 +34,10 @@ export default class Modal {
     if (this.modalType !== 'Timeout') {
       window.addEventListener('keydown', this.escToClose.bind(this));
     }
-    this.component.setAttribute('data-ga-action', `Modal initialised`);
-    this.component.setAttribute('data-ga-label', `${this.modalType} modal initialised`);
-    this.component.setAttribute('data-ga-category', `${this.modalType} modal`);
+
+    if (this.setGAAttributes) {
+      this.component.setAttribute('data-ga', `visible`);
+    }
   }
 
   dialogSupported() {
@@ -71,13 +73,15 @@ export default class Modal {
         this.component.showModal();
       }
 
-      if (this.setGaAttributes) {
+      if (this.setGAAttributes) {
         if (event) {
           this.component.setAttribute('data-ga-action', `Modal opened by ${event.type} event`);
         } else {
           this.component.setAttribute('data-ga-action', 'Modal opened by timed event');
         }
         this.component.setAttribute('data-ga-label', `${this.modalType} modal opened`);
+        this.component.setAttribute('data-ga-category', `${this.modalType} modal`);
+        initAnalytics();
       }
     }
   }
@@ -116,13 +120,15 @@ export default class Modal {
       this.component.close();
       this.setFocusOnLastFocusedEl(this.lastFocusedEl);
 
-      if (this.setGaAttributes) {
+      if (this.setGAAttributes) {
         if (event) {
           this.component.setAttribute('data-ga-action', `Modal closed by ${event.type} event`);
         } else {
           this.component.setAttribute('data-ga-action', 'Modal closed by timed event');
         }
         this.component.setAttribute('data-ga-label', `${this.modalType} modal closed`);
+        this.component.setAttribute('data-ga-category', `${this.modalType} modal`);
+        initAnalytics();
       }
     }
   }

package/components/modal/modal.spec.js

@@ -82,17 +82,6 @@ describe('script: modal', () => {
       await setTestPage('/test', template);
     });
 
-    describe('when the page has been loaded but the modal has not been opened yet', () => {
-      it('has the correct attributes set on the modal', async () => {
-        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
-        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
-        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
-        expect(gaLabel).toBe('Generic modal initialised');
-        expect(gaAction).toBe('Modal initialised');
-        expect(gaCategory).toBe('Generic modal');
-      });
-    });
-
     describe('when the modal is launched by a click event', () => {
       beforeEach(async () => {
         await page.focus('#launcher');

package/components/timeout-modal/_macro.njk

@@ -1,26 +1,25 @@
 {% from "components/modal/_macro.njk" import onsModal %}
 {% macro onsTimeoutModal(params) %}
     {% call onsModal({
-            "title": params.title,
-            "btnText": params.btnText,
-            "classes": "ons-js-timeout-modal",
-            "enableGA": params.enableGA,
-            "attributes": {
-                "data-redirect-url": params.redirectUrl,
-                "data-server-session-expires-at": params.sessionExpiresAt,
-                "data-show-modal-time": params.showModalTimeInSeconds,
-                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
-                "data-countdown-text": params.countdownText,
-                "data-countdown-expired-text": params.countdownExpiredText,
-                "data-minutes-text-singular": params.minutesTextSingular,
-                "data-minutes-text-plural": params.minutesTextPlural,
-                "data-seconds-text-singular": params.secondsTextSingular,
-                "data-seconds-text-plural": params.secondsTextPlural,
-                "data-full-stop": params.endWithFullStop,
-                "aria-describedby": "timeout-time-remaining"
-            }
-        })
-    %}
+        "title": params.title,
+        "btnText": params.btnText,
+        "classes": "ons-js-timeout-modal",
+        "enableGA": params.enableGA,
+        "attributes": {
+            "data-redirect-url": params.redirectUrl,
+            "data-server-session-expires-at": params.sessionExpiresAt,
+            "data-show-modal-time": params.showModalTimeInSeconds,
+            "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+            "data-countdown-text": params.countdownText,
+            "data-countdown-expired-text": params.countdownExpiredText,
+            "data-minutes-text-singular": params.minutesTextSingular,
+            "data-minutes-text-plural": params.minutesTextPlural,
+            "data-seconds-text-singular": params.secondsTextSingular,
+            "data-seconds-text-plural": params.secondsTextPlural,
+            "data-full-stop": params.endWithFullStop,
+            "aria-describedby": "timeout-time-remaining"
+        }
+    }) %}
         <p>{{ params.textFirstLine }}</p>
         <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
         <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>

package/components/timeout-modal/timeout-modal.spec.js

@@ -167,6 +167,7 @@ describe('script: timeout modal', () => {
           ...EXAMPLE_TIMEOUT_MODAL_BASIC,
           showModalTimeInSeconds: 1,
           sessionExpiresAt: expiryTimeInISOFormat,
+          enableGA: true,
         });
 
         const template = `
@@ -186,6 +187,15 @@ describe('script: timeout modal', () => {
         await page.waitForTimeout(2000);
         expect(page.url()).toContain('#!');
       });
+
+      it('and GA tracking is enabled it has the correct attributes set on the modal', async () => {
+        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
+        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
+        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
+        expect(gaLabel).toBe('Timeout modal closed');
+        expect(gaAction).toBe('Modal closed by timed event');
+        expect(gaCategory).toBe('Timeout modal');
+      });
     });
   });
 
@@ -233,23 +243,17 @@ describe('script: timeout modal', () => {
       });
 
       const template = `
-          <div class="ons-page">
-            ${component}
-          </div>
-        `;
+        <div class="ons-page">
+          ${component}
+        </div>
+      `;
 
       await setTestPage('/test', template);
     });
 
-    describe('when the page has been loaded but the modal has not been opened yet', () => {
-      it('has the correct attributes set on the modal', async () => {
-        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
-        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
-        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
-        expect(gaLabel).toBe('Timeout modal initialised');
-        expect(gaAction).toBe('Modal initialised');
-        expect(gaCategory).toBe('Timeout modal');
-      });
+    it('has ga initialise attribute set', async () => {
+      const gaInitialise = await page.$eval('.ons-modal', node => node.getAttribute('data-ga'));
+      expect(gaInitialise).toBe('visible');
     });
 
     describe('when the modal is open', () => {

package/js/analytics.js

@@ -20,16 +20,12 @@ export const trackElement = el => {
   });
 };
 
-const isVisible = el => {
-  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
-};
-
 export default function initAnalytics() {
   let trackVisibleElements = [...document.querySelectorAll('[data-ga=visible]')];
 
   const interval = window.setInterval(() => {
     trackVisibleElements = trackVisibleElements.filter(element => {
-      return isVisible(element) ? trackElement(element) && false : true;
+      return element ? trackElement(element) && false : true;
     });
     if (trackVisibleElements.length === 0) {
       window.clearInterval(interval);

package/js/timeout.js

@@ -1,3 +1,4 @@
+import initAnalytics from './analytics';
 export default class Timeout {
   constructor(context, sessionExpiryEndpoint, initialExpiryTime, enableTimeoutReset, startOnLoad) {
     this.context = context;
@@ -8,6 +9,7 @@ export default class Timeout {
     this.countdown = context.querySelector('.ons-js-timeout-timer');
     this.accessibleCountdown = context.querySelector('.ons-js-timeout-timer-acc');
     this.timeOutRedirectUrl = context.getAttribute('data-redirect-url');
+    this.setGAAttributes = context.getAttribute('data-enable-ga');
 
     // Language dependent text strings
     this.minutesTextSingular = context.getAttribute('data-minutes-text-singular');
@@ -79,6 +81,11 @@ export default class Timeout {
       if (timerExpired) {
         $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.countdownExpiredText + '</span>';
         $this.accessibleCountdown.innerHTML = $this.countdownExpiredText;
+        if ($this.setGAAttributes && $this.context.classList.contains('ons-modal')) {
+          $this.context.setAttribute('data-ga-action', 'Modal closed by timed event');
+          $this.context.setAttribute('data-ga-label', `Timeout modal closed`);
+          initAnalytics();
+        }
         setTimeout($this.redirect.bind($this), 2000);
       } else {
         seconds--;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "61.0.0",
+  "version": "61.0.1",
   "main": "index.js",
   "license": "MIT",
   "author": {