@ons/design-system 61.0.4 → 62.0.1

package/components/header/_macro.njk

@@ -159,13 +159,11 @@
                             {% endif %}
                             </li>
                         {% endfor %}
-                        {% if params.language %}
-                            <div class="ons-u-d-no@xs">
-                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
-                                {{ onsLanguageSelector(params.language) }}
-                            </div>
-                        {% endif %}
                     </ul>
+                    {% if params.language %}
+                        {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                        {{ onsLanguageSelector(params.language) }}
+                    {% endif %}
                 </nav>
             {% endif %}
         </div>

package/components/modal/_macro.njk

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

@@ -1,5 +1,4 @@
 import dialogPolyfill from 'dialog-polyfill';
-import initAnalytics from '../../js/analytics';
 
 const overLayClass = 'ons-modal-overlay';
 const ie11Class = 'ons-modal-ie11';
@@ -9,7 +8,6 @@ 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';
@@ -34,10 +32,6 @@ export default class Modal {
     if (this.modalType !== 'Timeout') {
       window.addEventListener('keydown', this.escToClose.bind(this));
     }
-
-    if (this.setGAAttributes) {
-      this.component.setAttribute('data-ga', `visible`);
-    }
   }
 
   dialogSupported() {
@@ -72,17 +66,6 @@ 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`);
-        initAnalytics();
-      }
     }
   }
 
@@ -119,17 +102,6 @@ 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`);
-        initAnalytics();
-      }
     }
   }
 

package/components/modal/modal.spec.js

@@ -69,67 +69,4 @@ describe('script: modal', () => {
       });
     });
   });
-
-  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/related-content/_macro.njk

@@ -5,36 +5,32 @@
   {% endif %}
 
   <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
-
-    <div class="ons-related-content__body">
-      {% if params.rows %}
-        {% for row in params.rows %}
-          {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
-          {% call onsRelatedContentSection(
-            {
-              "title": row.title,
-              "id": row.id
-            }
-          ) %}            
-            <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
-              {% from "components/lists/_macro.njk" import onsList %}
-              {{
-                onsList({
-                  "variants": 'bare',
-                  "iconType": row.iconType,
-                  "iconPosition": row.iconPosition,
-                  "iconSize": row.iconSize,
-                  "itemsList": row.itemsList
-                })
-              }}
-            </nav>
-          {% endcall %}
-        {% endfor %}
-      {% else %}
-        {{ caller() if caller }}
-      {% endif %}
-    </div>
-
+    {% if params.rows %}
+      {% for row in params.rows %}
+        {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
+        {% call onsRelatedContentSection(
+          {
+            "title": row.title,
+            "id": row.id
+          }
+        ) %}            
+          <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
+            {% from "components/lists/_macro.njk" import onsList %}
+            {{
+              onsList({
+                "variants": 'bare',
+                "iconType": row.iconType,
+                "iconPosition": row.iconPosition,
+                "iconSize": row.iconSize,
+                "itemsList": row.itemsList
+              })
+            }}
+          </nav>
+        {% endcall %}
+      {% endfor %}
+    {% else %}
+      {{ caller() if caller }}
+    {% endif %}
   </aside>
 
 {% endmacro %}

package/components/related-content/_macro.spec.js

@@ -82,7 +82,7 @@ describe('macro: related-content', () => {
     it('calls with content', () => {
       const $ = cheerio.load(renderComponent('related-content', { EXAMPLE_RELATED_CONTENT_GENERAL }, 'Example content...'));
 
-      const content = $('.ons-related-content__body')
+      const content = $('.ons-related-content')
         .text()
         .trim();
       expect(content).toEqual(expect.stringContaining('Example content...'));

package/components/table/_macro.njk

@@ -16,7 +16,7 @@
                     <tr class="ons-table__row">
                         {% for th in params.ths %}
                         <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
-                            <span>{{- th.value -}}</span>
+                            <span class="ons-table__header-text">{{- th.value -}}</span>
                             {% if 'sortable' in variants %}
                                 {{
                                     onsIcon({

package/components/table/sortable-table.js

@@ -27,24 +27,24 @@ export default class TableSort {
 
   createHeadingButtons(heading, i) {
     const text = heading.textContent.trim();
-    heading.childNodes[1].remove();
-    heading.childNodes[2].classList.remove('ons-u-d-no');
+    heading.querySelector('.ons-table__header-text').remove();
+    heading.querySelector('.ons-svg-icon').classList.remove('ons-u-d-no');
     const button = document.createElement('button');
     button.setAttribute('aria-label', this.table.getAttribute('data-aria-sort') + ' ' + text);
     button.setAttribute('type', 'button');
     button.setAttribute('data-index', i);
     button.setAttribute('class', 'ons-table__sort-button');
     button.textContent = text;
-    button.addEventListener('click', this.sortButtonClicked.bind(this));
     let sortSprite = document.getElementById('sort-sprite-' + text.toLowerCase());
     const sortSpriteParent = sortSprite.parentNode;
     sortSpriteParent.replaceChild(button, sortSprite);
     button.appendChild(sortSprite);
+    button.addEventListener('click', this.sortButtonClicked.bind(this));
   }
 
   sortButtonClicked(event) {
-    const columnNumber = event.target.getAttribute('data-index');
-    const sortDirection = event.target.parentElement.getAttribute('aria-sort');
+    const columnNumber = event.target.closest('[data-index]').getAttribute('data-index');
+    const sortDirection = event.target.closest('[aria-sort]').getAttribute('aria-sort');
     let newSortDirection;
 
     if (sortDirection === 'none' || sortDirection === 'ascending') {
@@ -63,7 +63,7 @@ export default class TableSort {
     });
 
     this.removeButtonStates();
-    this.updateButtonState(event.target, newSortDirection);
+    this.updateButtonState(event.target.closest('[aria-sort]'), newSortDirection);
   }
 
   getTableRowsArray(tbody) {
@@ -109,6 +109,10 @@ export default class TableSort {
   }
 
   getCellValue(cell) {
+    if (!cell) {
+      return undefined;
+    }
+
     let cellValue = cell.getAttribute('data-sort-value') || cell.textContent;
     cellValue = parseFloat(cellValue) || cellValue;
 
@@ -130,7 +134,7 @@ export default class TableSort {
   }
 
   updateButtonState(button, direction) {
-    button.parentElement.setAttribute('aria-sort', direction);
+    button.setAttribute('aria-sort', direction);
     let message = this.options.statusMessage;
     message = message + ' ' + button.textContent.replace(/^\s+|\s+$/g, '');
     message = message + ' (' + direction + ')';

package/components/tabs/_macro.njk

@@ -14,9 +14,9 @@
         <{{ titleTag }} class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no">{{ params.title }}</{{ titleTag }}>
 
         <ul class="ons-tabs__list">
-            {% for tab in params.tabs %}
+            {%- for tab in params.tabs -%}
                 <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else 'tabId' ~ loop.index }}" class="ons-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: {{ tab.title }}" data-ga-label="Show: {{ tab.title }}">{{ tab.title }}</a></li>
-            {% endfor %}
+            {%- endfor -%}
         </ul>
 
         {% for tab in params.tabs %}

package/components/tabs/_tabs.scss

@@ -50,13 +50,13 @@
   display: inline-block;
   height: 2.55rem;
   line-height: 2.3rem;
-  margin: 0 0.1rem 0 0;
+  margin: 0 0.4rem 0 0;
   overflow: visible;
   padding: 0 1rem;
   position: relative;
   text-decoration: underline;
 
-  &:hover {
+  &:hover:not(:focus) {
     background-color: var(--ons-color-button-secondary-hover);
     border-color: var(--ons-color-button-secondary-hover);
     color: var(--ons-color-text);

package/components/timeout-modal/_macro.njk

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

@@ -167,7 +167,6 @@ describe('script: timeout modal', () => {
           ...EXAMPLE_TIMEOUT_MODAL_BASIC,
           showModalTimeInSeconds: 1,
           sessionExpiresAt: expiryTimeInISOFormat,
-          enableGA: true,
         });
 
         const template = `
@@ -187,15 +186,6 @@ 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,77 +223,4 @@ 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);
-    });
-
-    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', () => {
-      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');
-      });
-    });
-  });
 });

package/components/video/_video.scss

@@ -1,9 +1,11 @@
 .ons-video {
   @extend .ons-u-mb-m;
 
-  height: 0;
-  padding-bottom: 56.25%; /* 16:9 */
-  position: relative;
+  &--hasIframe {
+    height: 0;
+    padding-bottom: 56.25%; /* 16:9 */
+    position: relative;
+  }
 
   &__iframe {
     height: 100%;

package/components/video/video.js

@@ -25,6 +25,7 @@ export default class Video {
     const src = this.iframe.getAttribute('data-src');
     this.iframe.src = src;
     this.iframe.classList.remove('ons-u-d-no');
+    this.component.classList.add('ons-video--hasIframe');
     this.placeholder.classList.add('ons-u-d-no');
   }
 }

package/components/video/video.spec.js

@@ -47,6 +47,11 @@ describe('script: video', () => {
       const displayStyle = await page.$eval('.ons-js-video-iframe', node => window.getComputedStyle(node).getPropertyValue('display'));
       expect(displayStyle).toBe('block');
     }, 10000);
+
+    it('should add the correct modifier class', async () => {
+      const hasClass = await page.$eval('.ons-js-video', node => node.classList.contains('ons-video--hasIframe'));
+      expect(hasClass).toBe(true);
+    }, 10000);
   });
 
   describe('when cookies are accepted via banner', () => {
@@ -68,5 +73,10 @@ describe('script: video', () => {
       const displayStyle = await page.$eval('.ons-js-video-iframe', node => window.getComputedStyle(node).getPropertyValue('display'));
       expect(displayStyle).toBe('block');
     });
+
+    it('should add the correct modifier class', async () => {
+      const hasClass = await page.$eval('.ons-js-video', node => node.classList.contains('ons-video--hasIframe'));
+      expect(hasClass).toBe(true);
+    }, 10000);
   });
 });