@ons/design-system 57.0.1 → 58.0.1

package/components/table-of-contents/_toc.scss

@@ -1,12 +1,12 @@
 .ons-toc {
   &-container {
-    border-bottom: 1px solid $color-grey-15;
+    border-bottom: 1px solid var(--ons-color-grey-15);
     margin-bottom: 2rem;
     padding-bottom: 1rem;
   }
 
   &__link-active {
-    color: $color-text-link-hover;
-    text-decoration: underline solid $color-text-link-hover 2px;
+    color: var(--ons-color-text-link-hover);
+    text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
   }
 }

package/components/table-of-contents/toc.dom.js

@@ -4,11 +4,9 @@ async function toc() {
   const toc = [...document.querySelectorAll('.ons-js-toc-container')];
 
   if (toc.length) {
-    if ('IntersectionObserver' in window) {
-      const Toc = (await import('./toc')).default;
+    const Toc = (await import('./toc')).default;
 
-      toc.forEach(component => new Toc(component));
-    }
+    toc.forEach(component => new Toc(component));
   }
 }
 

package/components/tabs/_macro.njk

@@ -1,14 +1,27 @@
 {% macro onsTabs(params) %}
-    <section class="ons-tabs">
-        <h2 class="ons-tabs__title">{{params.title}}</h2>
+    {% set classes = 'ons-tabs' %}
+
+    {% set variantClasses %}
+        {% for variant in params.variants %}
+            {% set classes = classes ~ ' ons-tabs--' ~ variant %}
+        {% endfor %}
+    {% endset %}
+
+    <section class="{{ classes }}"
+        {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}
+    >
+        {% set titleTag = params.titleTag | default("h2") %}
+        <{{ 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 %}
-                <li id="tabId{{loop.index}}Item" class="ons-tab__list-item"><a href="#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>
+                <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 %}
         </ul>
+
         {% for tab in params.tabs %}
-            <section id="tabId{{loop.index}}" class="ons-tabs__panel">
-                {{tab.content | safe}}
+            <section id="{{ tab.id if tab.id else 'tabId' ~ loop.index }}" class="ons-tabs__panel">
+                {{ tab.content | safe }}
             </section>
         {% endfor %}
     </section>

package/components/tabs/_macro.spec.js

@@ -6,6 +6,22 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TABS = {
+  title: 'Example tabs',
+  tabs: [
+    {
+      id: 'first-tab',
+      title: 'Tab 1',
+      content: 'Example content...',
+    },
+    {
+      id: 'second-tab',
+      title: 'Tab 2',
+      content: 'Some nested <strong>strong element</strong>...',
+    },
+  ],
+};
+
+const EXAMPLE_TABS_WITHOUT_TAB_IDS = {
   title: 'Example tabs',
   tabs: [
     {
@@ -27,6 +43,18 @@ describe('macro: tabs', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('has the provided variant classes', () => {
+    const $ = cheerio.load(
+      renderComponent('tabs', {
+        ...EXAMPLE_TABS,
+        variants: ['details', 'example-variant'],
+      }),
+    );
+
+    expect($('.ons-tabs').hasClass('ons-tabs--details')).toBe(true);
+    expect($('.ons-tabs').hasClass('ons-tabs--example-variant')).toBe(true);
+  });
+
   it('has the provided `title`', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
@@ -37,6 +65,32 @@ describe('macro: tabs', () => {
     ).toBe('Example tabs');
   });
 
+  it('has title with provided tag override', () => {
+    const $ = cheerio.load(
+      renderComponent('tabs', {
+        ...EXAMPLE_TABS,
+        titleTag: 'h4',
+      }),
+    );
+
+    const titleTag = $('.ons-tabs__title')[0].tagName;
+    expect(titleTag).toBe('h4');
+  });
+
+  it('has the provided tab id attributes', () => {
+    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+
+    expect($('.ons-tabs__panel:first').attr('id')).toBe('first-tab');
+    expect($('.ons-tabs__panel:last').attr('id')).toBe('second-tab');
+  });
+
+  it('has default tab id attribute values when identifiers are not provided', () => {
+    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITHOUT_TAB_IDS));
+
+    expect($('.ons-tabs__panel:first').attr('id')).toBe('tabId1');
+    expect($('.ons-tabs__panel:last').attr('id')).toBe('tabId2');
+  });
+
   it('has expected label text in tab links', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 

package/components/tabs/_tabs.scss

@@ -18,9 +18,9 @@
       position: relative;
 
       &::after {
-        background: $color-borders;
+        background: var(--ons-color-borders);
         bottom: 0;
-        box-shadow: 0 1px 0 0 $color-page-light;
+        box-shadow: 0 1px 0 0 var(--ons-color-page-light);
         content: '';
         height: 1px;
         left: 0;
@@ -43,10 +43,10 @@
 }
 
 .ons-tab--row {
-  background: $color-button-secondary;
-  border: 1px solid $color-button-secondary;
+  background: var(--ons-color-button-secondary);
+  border: 1px solid var(--ons-color-button-secondary);
   border-radius: 3px 3px 0 0;
-  color: $color-text;
+  color: var(--ons-color-text);
   display: inline-block;
   height: 2.55rem;
   line-height: 2.3rem;
@@ -57,42 +57,42 @@
   text-decoration: underline;
 
   &:hover {
-    background-color: darken($color-button-secondary, 5%);
-    border-color: darken($color-button-secondary, 5%);
-    color: $color-text;
-    text-decoration: underline solid $color-text 2px;
+    background-color: var(--ons-color-button-secondary-hover);
+    border-color: var(--ons-color-button-secondary-hover);
+    color: var(--ons-color-text);
+    text-decoration: underline solid var(--ons-color-text) 2px;
   }
 
   &:focus {
-    background-color: $color-focus;
-    border-bottom: 1px solid $color-borders;
-    box-shadow: inset 0 0 0 9px $color-button-secondary,
-      inset 17px 0 0 0 $color-button-secondary,
-      inset -17px 0 0 0 $color-button-secondary,
-      inset 0 -13px 0 0 $color-text-link-focus;
-    color: $color-text-link-focus;
+    background-color: var(--ons-color-focus);
+    border-bottom: 1px solid var(--ons-color-borders);
+    box-shadow: inset 0 0 0 9px var(--ons-color-button-secondary),
+      inset 17px 0 0 0 var(--ons-color-button-secondary),
+      inset -17px 0 0 0 var(--ons-color-button-secondary),
+      inset 0 -13px 0 0 var(--ons-color-text-link-focus);
+    color: var(--ons-color-text-link-focus);
 
     // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     outline: 3px solid transparent;
     outline-offset: 1px;
-    text-decoration: underline solid $color-text 2px;
+    text-decoration: underline solid var(--ons-color-text) 2px;
   }
 
   // Tab when selected
   &[aria-selected='true'] {
-    background-color: $color-page-light;
+    background-color: var(--ons-color-page-light);
     border-bottom: none;
-    border-color: $color-borders;
+    border-color: var(--ons-color-borders);
     border-radius: 3px 3px 0 0;
     text-decoration: none;
     z-index: 1;
 
     &:focus {
-      background-color: $color-focus;
-      box-shadow: inset 0 0 0 9px $color-page-light,
-        inset 17px 0 0 0 $color-page-light,
-        inset -17px 0 0 0 $color-page-light,
-        inset 0 -13px 0 0 $color-text-link-focus;
+      background-color: var(--ons-color-focus);
+      box-shadow: inset 0 0 0 9px var(--ons-color-page-light),
+        inset 17px 0 0 0 var(--ons-color-page-light),
+        inset -17px 0 0 0 var(--ons-color-page-light),
+        inset 0 -13px 0 0 var(--ons-color-text-link-focus);
       text-decoration: none;
     }
   }
@@ -109,8 +109,40 @@
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
+    box-shadow: 0 0 0 3px var(--ons-color-page-light), 0 0 0 5px var(--ons-color-text-link-focus), 0 0 0 8px var(--ons-color-focus);
     outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     z-index: 1;
   }
 }
+
+.ons-tabs--details {
+  border-top: 1px solid var(--ons-color-borders);
+  margin: 0;
+
+  .ons-tab {
+    border-radius: 0;
+    border-top: none;
+  }
+
+  .ons-tab__list-item:first-child .ons-tab {
+    border-left: none;
+  }
+
+  .ons-tabs__title {
+    padding: 1rem 1rem 0;
+  }
+
+  .ons-tabs__list {
+    padding: 0 1rem;
+  }
+
+  .ons-tabs__list--row {
+    margin-bottom: -1px;
+    padding: 0;
+  }
+
+  .ons-tabs__panel {
+    margin-top: 1px;
+    padding: 1rem;
+  }
+}

package/components/tabs/tabs.js

@@ -30,6 +30,8 @@ export default class Tabs {
     this.jsTabItemAsRowClass = 'ons-tab__list-item--row';
     this.jsTabAsListClass = 'ons-tab--row';
 
+    this.noInitialActiveTab = this.component.getAttribute('data-no-initial-active-tab');
+
     if (matchMediaUtil.hasMatchMedia()) {
       this.setupViewportChecks();
     } else {
@@ -39,10 +41,10 @@ export default class Tabs {
 
   // Set up checks for responsive functionality
   // The tabs will display as tabs for >40rem viewports
-  // Tabs will display as a TOC list and show full content for <40rem viewports
-  // Aria tags are added only for >40rem viewports
+  // Tabs will display as a TOC list and show full content for <740px viewports
+  // Aria tags are added only for >740px viewports
   setupViewportChecks() {
-    this.viewport = matchMediaUtil('(min-width: 40rem)');
+    this.viewport = matchMediaUtil('(min-width: 740px)');
     this.viewport.addListener(this.checkViewport.bind(this));
     this.checkViewport();
   }
@@ -79,8 +81,12 @@ export default class Tabs {
       this.hideTab(tab);
     });
 
-    const activeTab = this.getTab(window.location.hash) || this.tabs[0];
-    this.showTab(activeTab);
+    if (!this.noInitialActiveTab) {
+      const activeTab = this.getTab(window.location.hash) || this.tabs[0];
+      this.showTab(activeTab);
+    }
+
+    this.ensureTabIndexExists();
 
     this.component.boundOnHashChange = this.onHashChange.bind(this);
     window.addEventListener('hashchange', this.component.boundOnHashChange, true);
@@ -124,9 +130,10 @@ export default class Tabs {
       return;
     }
 
-    const previousTab = this.getCurrentTab();
-
-    this.hideTab(previousTab);
+    const currentTab = this.getCurrentTab();
+    if (!!currentTab) {
+      this.hideTab(currentTab);
+    }
     this.showTab(tabWithHash);
     tabWithHash.focus();
   }
@@ -177,9 +184,24 @@ export default class Tabs {
     e.preventDefault();
     const newTab = e.target;
     const currentTab = this.getCurrentTab();
-    this.hideTab(currentTab);
-    this.showTab(newTab);
-    this.createHash(newTab);
+
+    if (!!currentTab) {
+      this.hideTab(currentTab);
+    }
+
+    if (!this.noInitialActiveTab || newTab !== currentTab) {
+      this.showTab(newTab);
+      this.createHash(newTab);
+    }
+
+    this.ensureTabIndexExists();
+  }
+
+  ensureTabIndexExists() {
+    // Ensure that at least the first tab has a tab index when all tabs are hidden.
+    if (!this.tabs.find(tab => tab.getAttribute('tabindex') === '0')) {
+      this.tabs[0].setAttribute('tabindex', '0');
+    }
   }
 
   createHash(tab) {
@@ -220,7 +242,8 @@ export default class Tabs {
   }
 
   getPanel(tab) {
-    const panel = this.component.querySelector(this.getHref(tab));
+    const panelSelector = this.getHref(tab).replace(/\./g, '\\.');
+    const panel = this.component.querySelector(panelSelector);
     return panel;
   }
 

package/components/tabs/tabs.spec.js

@@ -7,20 +7,28 @@ const EXAMPLE_TABS = {
   title: 'Example tabs',
   tabs: [
     {
+      id: 'tab.id.1',
       title: 'Tab 1',
       content: 'First content...',
     },
     {
+      id: 'tab.id.2',
       title: 'Tab 2',
       content: 'Second content...',
     },
     {
+      id: 'tab.id.3',
       title: 'Tab 3',
       content: 'Third content...',
     },
   ],
 };
 
+const EXAMPLE_TABS_WITH_NO_INITIAL_ACTIVE_TAB = {
+  ...EXAMPLE_TABS,
+  noInitialActiveTab: true,
+};
+
 describe('script: tabs', () => {
   afterEach(async () => {
     // Clear viewport size and browser emulation after each test.
@@ -47,7 +55,7 @@ describe('script: tabs', () => {
     it('has "aria-controls" assigned to each tab with the corresponding panel id', async () => {
       const ariaControlsValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('aria-controls')));
 
-      expect(ariaControlsValues).toEqual(['tabId1', 'tabId2', 'tabId3']);
+      expect(ariaControlsValues).toEqual(['tab.id.1', 'tab.id.2', 'tab.id.3']);
     });
 
     it('has "aria-selected" assigned to the first tab', async () => {
@@ -78,7 +86,7 @@ describe('script: tabs', () => {
 
     describe('when a tab is clicked', () => {
       beforeEach(async () => {
-        await page.focus('#tabId2Item a');
+        await page.focus('a[href="#tab.id.2"]');
         await page.keyboard.press('Enter');
       });
 
@@ -89,13 +97,13 @@ describe('script: tabs', () => {
       });
 
       it('has the "aria-selected" attribute', async () => {
-        const ariaSelectedValue = await page.$eval('#tabId2Item a', node => node.getAttribute('aria-selected'));
+        const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
 
         expect(ariaSelectedValue).toBe('true');
       });
 
       it('has the "ons-tab--selected" class assigned', async () => {
-        const hasClass = await page.$eval('#tabId2Item a', node => node.classList.contains('ons-tab--selected'));
+        const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
 
         expect(hasClass).toBe(true);
       });
@@ -111,21 +119,21 @@ describe('script: tabs', () => {
 
     describe('when the right arrow key is pressed', () => {
       it('focuses the next tab', async () => {
-        await page.focus('#tabId2Item a');
+        await page.focus('a[href="#tab.id.2"]');
         await page.keyboard.press('ArrowRight');
 
-        const activeElementId = await page.evaluate(() => document.activeElement.parentElement.id);
-        expect(activeElementId).toBe('tabId3Item');
+        const activeElement = await page.evaluate(() => document.activeElement.innerText);
+        expect(activeElement).toBe('Tab 3');
       });
     });
 
     describe('when the left arrow key is pressed', () => {
       it('focuses the previous tab', async () => {
-        await page.focus('#tabId2Item a');
+        await page.focus('a[href="#tab.id.2"]');
         await page.keyboard.press('ArrowLeft');
 
-        const activeElementId = await page.evaluate(() => document.activeElement.parentElement.id);
-        expect(activeElementId).toBe('tabId1Item');
+        const activeElement = await page.evaluate(() => document.activeElement.innerText);
+        expect(activeElement).toBe('Tab 1');
       });
     });
   });
@@ -159,4 +167,90 @@ describe('script: tabs', () => {
       expect(hiddenPanelCount).toBe(0);
     });
   });
+
+  describe('when `data-no-initial-active-tab` is not present', () => {
+    beforeEach(async () => {
+      await setViewport(page, { width: 1650, height: 1050 });
+      await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS_WITH_NO_INITIAL_ACTIVE_TAB));
+    });
+
+    it('does not assign "aria-selected" to the first tab', async () => {
+      const ariaSelectedValue = await page.$eval('.ons-tab', node => node.getAttribute('aria-selected'));
+
+      expect(ariaSelectedValue).not.toBe('true');
+    });
+
+    it('does not assign the "ons-tab--selected" class to the first tab', async () => {
+      const hasClass = await page.$eval('.ons-tab', node => node.classList.contains('ons-tab--selected'));
+
+      expect(hasClass).toBe(false);
+    });
+
+    describe('when a tab is clicked', () => {
+      beforeEach(async () => {
+        await page.focus('a[href="#tab.id.1"]');
+        await page.keyboard.press('Enter');
+      });
+
+      it('is assigned a "tabindex" value', async () => {
+        const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+
+        expect(tabIndexValues).toEqual(['0', '-1', '-1']);
+      });
+
+      it('has the "aria-selected" attribute', async () => {
+        const ariaSelectedValue = await page.$eval('a[href="#tab.id.1"]', node => node.getAttribute('aria-selected'));
+
+        expect(ariaSelectedValue).toBe('true');
+      });
+
+      it('has the "ons-tab--selected" class assigned', async () => {
+        const hasClass = await page.$eval('a[href="#tab.id.1"]', node => node.classList.contains('ons-tab--selected'));
+
+        expect(hasClass).toBe(true);
+      });
+
+      it('shows the corresponding panel', async () => {
+        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
+          nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+        );
+
+        expect(panelHiddenStates).toEqual([false, true, true]);
+      });
+    });
+
+    describe('when a tab is clicked twice', () => {
+      beforeEach(async () => {
+        await page.focus('a[href="#tab.id.2"]');
+        await page.keyboard.press('Enter');
+        await page.keyboard.press('Enter');
+      });
+
+      it('is assigned a "tabindex" value', async () => {
+        const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+
+        expect(tabIndexValues).toEqual(['0', '-1', '-1']);
+      });
+
+      it('does not have the "aria-selected" attribute', async () => {
+        const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
+
+        expect(ariaSelectedValue).not.toBe('true');
+      });
+
+      it('does not have the "ons-tab--selected" class assigned', async () => {
+        const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
+
+        expect(hasClass).toBe(false);
+      });
+
+      it('hides the corresponding panel', async () => {
+        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
+          nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+        );
+
+        expect(panelHiddenStates).toEqual([true, true, true]);
+      });
+    });
+  });
 });

package/components/text-indent/_text-indent.scss

@@ -1,5 +1,5 @@
 .ons-text-indent {
-  border-left: 4px solid $color-borders-indent;
+  border-left: 4px solid var(--ons-color-borders-indent);
   margin: 0 0 1rem;
   padding: 0 0 0 1.3em;
 }

package/components/timeline/_timeline.scss

@@ -3,7 +3,7 @@
   position: relative;
 
   &::before {
-    border-left: 4px solid $color-black;
+    border-left: 4px solid var(--ons-color-black);
     content: '';
     height: 100%;
     left: 0;
@@ -17,7 +17,7 @@
   position: relative;
 
   &::before {
-    background-color: $color-black;
+    background-color: var(--ons-color-black);
     content: '';
     height: 4px;
     left: -1.5rem;

package/components/upload/_upload.scss

@@ -1,17 +1,17 @@
 .ons-input--upload {
-  background: $color-white;
-  border: 1px solid $color-input-border;
+  background: var(--ons-color-white);
+  border: 1px solid var(--ons-color-input-border);
   border-radius: $input-radius;
   font-size: 1rem;
   padding: 0;
   width: 100%;
   &::-webkit-file-upload-button {
-    background: $color-button-secondary;
+    background: var(--ons-color-button-secondary);
     border: 0;
     border-bottom-right-radius: 0;
-    border-right: 1px solid $color-input-border;
+    border-right: 1px solid var(--ons-color-input-border);
     border-top-right-radius: 0;
-    color: $color-text;
+    color: var(--ons-color-text);
     font-size: 1rem;
     outline: none;
     padding: 0.5rem 1rem;
@@ -20,7 +20,7 @@
   &:hover {
     cursor: pointer;
     &::-webkit-file-upload-button {
-      border-right-color: $color-text-link-hover;
+      border-right-color: var(--ons-color-text-link-hover);
       cursor: pointer;
     }
   }