@ons/design-system 61.0.0 → 61.0.2

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/summary/_macro.njk

@@ -38,7 +38,7 @@
 
                                     {% for rowItem in row.rowItems %}
                                         <dl class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}"{% if rowItem.id %} id="{{ rowItem.id }}"{% endif %}>
-                                            <dt class="ons-summary__item-title{% if not rowItem.actions %} ons-summary__item-title--2{% endif %}"
+                                            <dt class="ons-summary__item-title"
                                                 {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                             >
                                                 {% if rowItem.iconType %}
@@ -63,7 +63,7 @@
                                             </dt>
                                             {% if rowItem.valueList %}
                                                 <dd
-                                                    class="ons-summary__values"
+                                                    class="ons-summary__values{% if not rowItem.actions %} ons-summary__values--2{% endif %}"
                                                     {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                                 >
                                                     {% if rowItem.valueList | length == 1 %}

package/components/summary/_summary.scss

@@ -178,7 +178,7 @@ $hub-row-spacing: 1.3rem;
     &__item-title,
     &__values,
     &__actions {
-      flex: 4;
+      flex: 5 1 33%;
       padding-top: $summary-row-spacing;
       vertical-align: top;
 
@@ -196,13 +196,8 @@ $hub-row-spacing: 1.3rem;
       align-self: flex-start;
     }
 
-    &__item-title,
-    &__values {
-      flex: 7.3;
-    }
-
-    &__item-title--2 {
-      flex: 4.5;
+    &__values--2 {
+      flex: 10.5 1 66%;
     }
 
     &--hub & {
@@ -211,10 +206,6 @@ $hub-row-spacing: 1.3rem;
       &__actions {
         padding-top: $hub-row-spacing;
       }
-
-      &__actions {
-        flex: 6;
-      }
     }
   }
 }

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', () => {