@ons/design-system 60.0.3 → 61.0.1

package/css/print.css

@@ -1 +1 @@
-html{--ons-color-black: #222}.ons-btn,.ons-navigation-search,.ons-summary__actions,.ons-footer,.ons-cookies-banner,.ons-language-links,.ons-breadcrumb{display:none !important}a::after{content:" (" attr(href) ") "}.ons-header__main,.ons-header__bottom{background:transparent}.ons-header__title{color:var(--ons-color-black)}.ons-header .ons-header__svg-logo{fill:var(--ons-color-black)}.ons-navigation--main,.ons-navigation--sub{border-top:1px solid var(--ons-color-text-link);display:block !important;padding:1rem 0 .5rem}.ons-navigation--main .ons-navigation__item,.ons-navigation--sub .ons-navigation__item{display:inline-block}.ons-navigation--main .ons-navigation__item--active,.ons-navigation--sub .ons-navigation__item--active{border:0}.ons-navigation--main .ons-navigation__link,.ons-navigation--main .ons-navigation__link:hover,.ons-navigation--sub .ons-navigation__link,.ons-navigation--sub .ons-navigation__link:hover{color:var(--ons-color-text-link)}.ons-collapsible--initialised .ons-collapsible__icon{display:none}.ons-collapsible--initialised .ons-collapsible__title{color:var(--ons-color-black);margin-bottom:1rem;margin-left:-1.5rem;text-decoration:none}.ons-collapsible--initialised .ons-collapsible__content{display:block}.ons-hero{-webkit-print-color-adjust:exact;color-adjust:exact}
+html{--ons-color-black: #222}.ons-btn,.ons-navigation-search,.ons-summary__actions,.ons-footer,.ons-cookies-banner,.ons-language-links,.ons-breadcrumb{display:none !important}a::after{content:" (" attr(href) ") "}.ons-header__main,.ons-header__bottom{background:transparent}.ons-header__title{color:var(--ons-color-black)}.ons-header .ons-header__svg-logo{fill:var(--ons-color-black)}.ons-navigation--main,.ons-navigation--sub{border-top:1px solid var(--ons-color-text-link);display:block !important;padding:1rem 0 .5rem}.ons-navigation--main .ons-navigation__item,.ons-navigation--sub .ons-navigation__item{display:inline-block}.ons-navigation--main .ons-navigation__item--active,.ons-navigation--sub .ons-navigation__item--active{border:0}.ons-navigation--main .ons-navigation__link,.ons-navigation--main .ons-navigation__link:hover,.ons-navigation--sub .ons-navigation__link,.ons-navigation--sub .ons-navigation__link:hover{color:var(--ons-color-text-link)}.ons-details--initialised .ons-details__icon{display:none}.ons-details--initialised .ons-details__title{color:var(--ons-color-black);margin-bottom:1rem;margin-left:-1.5rem;text-decoration:none}.ons-details--initialised .ons-details__content{display:block}.ons-hero{-webkit-print-color-adjust:exact;color-adjust:exact}

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/main.js

@@ -7,7 +7,7 @@ import '../components/password/password.dom';
 import '../components/tabs/tabs.dom';
 import '../components/table-of-contents/toc.dom';
 import '../components/accordion/accordion.dom';
-import '../components/collapsible/collapsible.dom';
+import '../components/details/details.dom';
 import '../components/table/scrollable-table.dom';
 import '../components/table/sortable-table.dom';
 import '../components/navigation/navigation.dom';
@@ -26,3 +26,4 @@ import '../components/download-resources/download-resources';
 import '../components/modal/modal.dom';
 import '../components/timeout-modal/timeout-modal.dom';
 import '../components/timeout-panel/timeout-panel.dom';
+import '../components/video/video.dom';

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": "60.0.3",
+  "version": "61.0.1",
   "main": "index.js",
   "license": "MIT",
   "author": {
@@ -11,6 +11,7 @@
     "start": "gulp start",
     "watch": "gulp watch",
     "test": "gulp build-assets-for-testing && TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
+    "test:no-build": "TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
     "test:with-log": "yarn test --no-color 2>test.log",
     "test:start-server": "TEST_PORT=3020 gulp start-dev-server",
     "build": "yarn && yarn tidy-clean && NODE_ENV=production gulp build",