@ons/design-system 56.0.0 → 56.0.2

package/components/modal/_macro.njk

@@ -5,6 +5,7 @@
         role="dialog"
         aria-labelledby="ons-modal-title"
         {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
+        {% if params.enableGA == true %}data-enable-ga='true'{% endif %}
     >
         <div class="ons-modal__content">
             <h2 id="ons-modal-title" class="ons-modal__title">

package/components/modal/modal.js

@@ -8,8 +8,11 @@ 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.lastFocusedEl = null;
     this.dialogCSSSupported = true;
+    this.modalType = this.component.classList.contains('ons-js-timeout-modal') ? 'Timeout' : 'Generic';
+
     this.initialise();
   }
 
@@ -26,6 +29,10 @@ export default class Modal {
     if (this.closeButton) {
       this.closeButton.addEventListener('click', this.closeDialog.bind(this));
     }
+
+    if (this.modalType !== 'Timeout') {
+      window.addEventListener('keydown', this.escToClose.bind(this));
+    }
   }
 
   dialogSupported() {
@@ -60,6 +67,16 @@ export default class Modal {
       } else {
         this.component.showModal();
       }
+
+      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`);
+      }
     }
   }
 
@@ -96,6 +113,22 @@ export default class Modal {
 
       this.component.close();
       this.setFocusOnLastFocusedEl(this.lastFocusedEl);
+
+      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`);
+      }
+    }
+  }
+
+  escToClose(event) {
+    if (this.isDialogOpen() && event.keyCode === 27) {
+      this.closeDialog(event);
     }
   }
 }

package/components/modal/modal.spec.js

@@ -55,5 +55,81 @@ describe('script: modal', () => {
         expect(activeElementId).toBe('launcher');
       });
     });
+
+    describe('when the `esc` key is pressed', () => {
+      beforeEach(async () => {
+        await page.focus('.ons-js-modal-btn');
+        await page.keyboard.press('Enter');
+        await page.keyboard.press('Escape');
+      });
+
+      it('closes the modal', async () => {
+        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        expect(modalIsVisible).toBe(false);
+      });
+    });
+  });
+
+  describe('when GA tracking is enabled', () => {
+    beforeEach(async () => {
+      const component = renderComponent('modal', { ...EXAMPLE_MODAL, enableGA: true });
+      const template = `
+        <div class="ons-page">
+          <button id="launcher" data-modal-id="dialog">Launcher</button> 
+          ${component}
+        </div>
+    `;
+      await setTestPage('/test', template);
+    });
+
+    describe('when the modal is launched by a click event', () => {
+      beforeEach(async () => {
+        await page.focus('#launcher');
+        await page.keyboard.press('Enter');
+      });
+
+      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 opened');
+        expect(gaAction).toBe('Modal opened by click event');
+        expect(gaCategory).toBe('Generic modal');
+      });
+    });
+
+    describe('when the modal is closed by a click event', () => {
+      beforeEach(async () => {
+        await page.focus('#launcher');
+        await page.keyboard.press('Enter');
+        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('Generic modal closed');
+        expect(gaAction).toBe('Modal closed by click event');
+        expect(gaCategory).toBe('Generic modal');
+      });
+    });
+
+    describe('when the modal is closed by `escape` keypress event', () => {
+      beforeEach(async () => {
+        await page.focus('#launcher');
+        await page.keyboard.press('Enter');
+        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('Generic modal closed');
+        expect(gaAction).toBe('Modal closed by keydown event');
+        expect(gaCategory).toBe('Generic modal');
+      });
+    });
   });
 });

package/components/summary/_macro.njk

@@ -20,37 +20,30 @@
                     {% if group.groupTitle %}
                         <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
                     {% endif %}
-                    {% if group.headers and group.rows %}
-                        <table class="ons-summary__items">
-                            <thead class="ons-u-vh">
-                                <tr>
-                                    {% for header in group.headers %}
-                                        <th>{{ header }}</th>
-                                    {% endfor %}
-                                </tr>
-                            </thead>
+                    {% if group.rows %}
+                        <div class="ons-summary__items">
 
                             {% for row in (group.rows if group.rows is iterable else group.rows.items()) %}
                                 {% set itemClass = "" %}
                                 {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
                                 {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
 
-                                <tbody {% if row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
-                                    {% if row.errorMessage or (row.rowItems | length > 1 and row.rowTitle) %}
-                                        <tr class="ons-summary__row">
-                                            <th colspan="3" class="ons-summary__row-title ons-u-fs-r">{{ row.errorMessage or row.rowTitle }}</th>
-                                        </tr>
+                                <div {% if row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
+                                    {% if row.errorMessage %}
+                                        <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
+                                    {% endif %}
+                                    {% if row.rowItems | length > 1 and row.rowTitle %}
+                                        <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">{{ row.rowTitle }}</div>
                                     {% endif %}
 
                                     {% for rowItem in row.rowItems %}
-                                        <tr {% if rowItem.id %}id="{{ rowItem.id }}" {% endif %}class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}">
-                                            <td
-                                                class="ons-summary__item-title"
+                                        <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 %}"
                                                 {% 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 %}
                                                     {% from "components/icons/_macro.njk" import onsIcon %}
-                                                    <span class="ons-summary__item-title-icon {% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
+                                                    <span class="ons-summary__item-title-icon{% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
                                                         {{
                                                             onsIcon({
                                                                 "iconType": rowItem.iconType
@@ -59,17 +52,18 @@
                                                     </span>
                                                 {% endif %}
 
-                                                <div class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType else "" }}">{{ rowItem.rowTitle | default(row.rowTitle) | safe }}</div>
+                                                <div class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType else "" }}">
+                                                    {{- rowItem.rowTitle | default(row.rowTitle) | safe -}}
+                                                </div>
 
                                                 {# Render section status for mobile if is hub #}
                                                 {% if params.hub and rowItem.valueList %}
-                                                    <span class="ons-u-d-no@s ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
+                                                    <span class="ons-u-d-no@m ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
                                                 {% endif %}
-                                            </td>
+                                            </dt>
                                             {% if rowItem.valueList %}
-                                                <td
+                                                <dd
                                                     class="ons-summary__values"
-                                                    {% if rowItem.actions == null %} colspan="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 %}
@@ -93,10 +87,10 @@
                                                             {% endfor %}
                                                         </ul>
                                                     {% endif %}
-                                                </td>
+                                                </dd>
                                             {% endif %}
                                             {% if rowItem.actions %}
-                                                <td class="ons-summary__actions">
+                                                <dd class="ons-summary__actions">
                                                     {% for action in (rowItem.actions if rowItem.actions is iterable else rowItem.actions.items()) %}
                                                         {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                         <a
@@ -106,13 +100,13 @@
                                                             {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                                         >{{ action.text }}</a>
                                                     {% endfor %}
-                                                </td>
+                                                </dd>
                                             {% endif %}
-                                        </tr>
+                                        </dl>
                                     {% endfor %}
-                                </tbody>
+                                </div>
                             {% endfor %}
-                        </table>
+                        </div>
                     {% elif group.placeholderText %}
                         <span class="ons-summary__placeholder">{{ group.placeholderText }}</span>
                     {% endif %}

package/components/summary/_macro.spec.js

@@ -203,36 +203,28 @@ describe('macro: summary', () => {
     });
 
     describe('part: row', () => {
-      it('has the `headers` values displayed in th elements', () => {
-        const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
-
-        expect($('.ons-summary__items thead tr th:nth-child(1)').text()).toBe('Header 1');
-        expect($('.ons-summary__items thead tr th:nth-child(2)').text()).toBe('Header 2');
-        expect($('.ons-summary__items thead tr th:nth-child(3)').text()).toBe('Header 3');
-      });
-
       it('has the correct row class when `error` is `true`', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2)').hasClass('ons-summary__item--error')).toBe(true);
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(2)').hasClass('ons-summary__item--error')).toBe(true);
       });
 
       it('has the correct row class when `total` is `true`', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(4)').hasClass('ons-summary__item--total')).toBe(true);
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(4)').hasClass('ons-summary__item--total')).toBe(true);
       });
 
       it('displays the `rowTitle` text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(3) .ons-summary__row-title').text()).toBe('row title 3');
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__row-title').text()).toBe('row title 3');
       });
 
       it('overrides the `rowTitle` with the `errorMessage` if provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__row-title').text()).toBe('there are errors');
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row-title--error').text()).toBe('there are errors');
       });
 
       it('has the correct row `id` for each row', () => {
@@ -262,7 +254,7 @@ describe('macro: summary', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items tbody:nth-of-type(1) .ons-summary__item--text')
+          $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text')
             .text()
             .trim(),
         ).toBe('row title 1');
@@ -289,12 +281,6 @@ describe('macro: summary', () => {
         expect($('.ons-summary__item--text').hasClass('ons-summary__item-title--text')).toBe(true);
       });
 
-      it('has a colspan attribute on the values td if there are no `actions`', () => {
-        const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
-
-        expect($('.ons-summary__items tbody:nth-of-type(1) .ons-summary__values').attr('colspan')).toBe('2');
-      });
-
       it('has custom `attributes`', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
@@ -308,7 +294,7 @@ describe('macro: summary', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items tbody:nth-of-type(1) tr .ons-summary__values .ons-summary__text')
+          $('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values .ons-summary__text')
             .text()
             .trim(),
         ).toBe('row value 1');
@@ -318,7 +304,7 @@ describe('macro: summary', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items tbody:nth-of-type(1) tr .ons-summary__values ul li')
+          $('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values ul li')
             .text()
             .trim(),
         ).toBe('other value');
@@ -327,7 +313,7 @@ describe('macro: summary', () => {
       it('wraps the `valueList` in a ul if multiple values provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(3) .ons-summary__values ul').length).toBe(1);
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__values ul').length).toBe(1);
       });
     });
 
@@ -335,43 +321,55 @@ describe('macro: summary', () => {
       it('has a spacer element if multiple actions are provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__spacer').length).toBe(1);
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__spacer').length).toBe(1);
       });
 
       it('has the correct `url` for each action provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('href')).toBe(
-          '#1',
-        );
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr('href')).toBe('#2');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('href'),
+        ).toBe('#1');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr('href'),
+        ).toBe('#2');
       });
 
       it('has the action `text` for each action provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text()).toBe(
-          'Action 1',
-        );
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text()).toBe('Action 2');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text(),
+        ).toBe('Action 1');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text(),
+        ).toBe('Action 2');
       });
 
       it('has the `aria-label` provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('aria-label'),
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr(
+            'aria-label',
+          ),
         ).toBe('action aria label 1');
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr('aria-label')).toBe(
-          'action aria label 2',
-        );
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr(
+            'aria-label',
+          ),
+        ).toBe('action aria label 2');
       });
 
       it('has custom `attributes`', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('a')).toBe('abc');
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('b')).toBe('def');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('a'),
+        ).toBe('abc');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('b'),
+        ).toBe('def');
       });
     });
   });
@@ -423,7 +421,9 @@ describe('macro: summary', () => {
         }),
       );
 
-      expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__item-title span').text()).toBe(' — row value 2');
+      expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row .ons-summary__item-title span').text()).toBe(
+        ' — row value 2',
+      );
     });
   });
 

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 {
@@ -40,11 +52,16 @@ $hub-row-spacing: 1.3rem;
     padding: $summary-row-spacing 0;
     text-align: left;
   }
+  // reduces the gap between row title and summary title when there is no group title
+  &__title + &__group &__row-title--no-group-title {
+    padding-top: 0.5rem;
+  }
 
   &__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');
+      });
+    });
+  });
 });