@ons/design-system 55.2.0 → 56.0.1

package/components/summary/_summary.scss

@@ -8,6 +8,9 @@ $hub-row-spacing: 1.3rem;
   &__items {
     border-collapse: collapse;
     border-spacing: 0;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
     width: 100%;
 
     + .ons-summary__group-title {
@@ -15,6 +18,11 @@ $hub-row-spacing: 1.3rem;
     }
   }
 
+  &__row {
+    display: flex;
+    margin: 0;
+  }
+
   &__item {
     line-height: 1.4;
 
@@ -28,6 +36,10 @@ $hub-row-spacing: 1.3rem;
 
       border-width: 2px;
       font-weight: 700;
+
+      .ons-summary__values {
+        padding-top: 23px;
+      }
     }
 
     &--error {
@@ -39,12 +51,17 @@ $hub-row-spacing: 1.3rem;
   &__row-title {
     padding: $summary-row-spacing 0;
     text-align: left;
+
+    &--no-group-title {
+      padding-top: 0;
+    }
   }
 
   &__item-title,
   &__values,
   &__actions {
     hyphens: manual;
+    margin: 0;
     overflow-wrap: break-word;
     padding: 0 0 $summary-row-spacing;
     vertical-align: top;
@@ -90,12 +107,13 @@ $hub-row-spacing: 1.3rem;
   }
 
   &__item--error & {
-    &__row-title {
+    &__row-title--error {
       color: $color-errors;
       font-weight: 700;
       padding: $summary-row-spacing $summary-col-spacing;
     }
 
+    &__row-title,
     &__item-title,
     &__values,
     &__actions {
@@ -106,7 +124,8 @@ $hub-row-spacing: 1.3rem;
         padding-left: math.div($summary-col-spacing, 2);
         padding-right: math.div($summary-col-spacing, 2);
 
-        &:first-child {
+        &:first-child,
+        & {
           padding-left: $summary-col-spacing;
         }
 
@@ -137,7 +156,7 @@ $hub-row-spacing: 1.3rem;
   }
 
   // Breakpoints
-  @include mq(xxs, s, none, '<') {
+  @include mq(xxs, m, none, '<') {
     &__item-title,
     &__values,
     &__actions {
@@ -149,12 +168,17 @@ $hub-row-spacing: 1.3rem;
         display: none;
       }
     }
+
+    &__row {
+      flex-direction: column;
+    }
   }
 
-  @include mq(s) {
+  @include mq(m) {
     &__item-title,
     &__values,
     &__actions {
+      flex: 2;
       padding-top: $summary-row-spacing;
       vertical-align: top;
 
@@ -164,14 +188,17 @@ $hub-row-spacing: 1.3rem;
     }
 
     &__actions {
-      text-align: right;
+      display: flex;
+      justify-content: right;
     }
 
-    &__row--has-values & {
-      &__item-title,
-      &__values {
-        width: 50%;
-      }
+    &__item-title,
+    &__values {
+      flex: 6.19;
+    }
+
+    &__item-title--2 {
+      flex: 4.5;
     }
 
     &--hub & {
@@ -180,6 +207,10 @@ $hub-row-spacing: 1.3rem;
       &__actions {
         padding-top: $hub-row-spacing;
       }
+
+      &__actions {
+        flex: 6;
+      }
     }
   }
 }

package/components/timeout-modal/_macro.njk

@@ -4,6 +4,7 @@
             "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,

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

@@ -73,7 +73,7 @@ export default class TimeoutModal {
       time = false;
     }
     if (this.modal.isDialogOpen()) {
-      this.modal.closeDialog();
+      this.modal.closeDialog(event);
     }
     await this.timeout.restartTimeout(time);
     this.startTimeout();

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

@@ -223,4 +223,72 @@ describe('script: timeout modal', () => {
       });
     });
   });
+
+  describe('when GA tracking is enabled', () => {
+    beforeEach(async () => {
+      const component = renderComponent('timeout-modal', {
+        ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+        showModalTimeInSeconds: 59,
+        enableGA: true,
+      });
+
+      const template = `
+          <div class="ons-page">
+            ${component}
+          </div>
+        `;
+
+      await setTestPage('/test', template);
+    });
+
+    describe('when the modal is open', () => {
+      beforeEach(async () => {
+        await page.waitForSelector('.ons-modal');
+        await page.waitForTimeout(1000);
+      });
+
+      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 opened');
+        expect(gaAction).toBe('Modal opened by timed event');
+        expect(gaCategory).toBe('Timeout modal');
+      });
+    });
+
+    describe('when the modal is closed by a click event', () => {
+      beforeEach(async () => {
+        await page.waitForSelector('.ons-modal');
+        await page.waitForTimeout(1000);
+        await page.click('.ons-js-modal-btn');
+      });
+
+      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 click event');
+        expect(gaCategory).toBe('Timeout modal');
+      });
+    });
+
+    describe('when the modal is closed by `escape` keypress event', () => {
+      beforeEach(async () => {
+        await page.waitForSelector('.ons-modal');
+        await page.waitForTimeout(1000);
+        await page.keyboard.press('Escape');
+      });
+
+      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 keydown event');
+        expect(gaCategory).toBe('Timeout modal');
+      });
+    });
+  });
 });