@ons/design-system 72.1.0 → 72.1.1

package/components/section-navigation/_macro.njk

@@ -31,9 +31,12 @@
                                 class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-section-nav__item--active' if isCurrent == true }}"
                             >
                                 {% if isCurrent == true %}
-                                    {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
-                                    class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
-                                    aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                                    <a
+                                        class="ons-section-nav__link ons-section-nav__item-header"
+                                        href="{{ item.url }}"
+                                        aria-current="location"
+                                        >{{ item.text }}</a
+                                    >
                                 {% else %}
                                     <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.text }}</a>
                                 {% endif %}
@@ -71,9 +74,9 @@
                         class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{% if isCurrent == true %}{{ ' ' }}ons-section-nav__item--active{% endif %}"
                     >
                         {% if isCurrent == true %}
-                            {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
-                            class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
-                            aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                            <a class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location"
+                                >{{ item.text }}</a
+                            >
                         {% else %}
                             <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.text }}</a>
                         {% endif %}

package/components/table-of-contents/_macro.njk

@@ -2,7 +2,7 @@
     {% from "components/list/_macro.njk" import onsList %}
     {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 
-    <aside class="ons-toc-container" role="complementary">
+    <aside class="ons-table-of-contents-container" role="complementary">
         {% if params.skipLink %}
             {{
                 onsSkipToContent({
@@ -12,8 +12,8 @@
             }}
         {% endif %}
 
-        <nav class="ons-toc" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
-            <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
+        <nav class="ons-table-of-contents" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
+            <h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
             {% if params.lists %}
                 {% for list in params.lists %}
                     {% if list.listHeading %}

package/components/table-of-contents/_macro.spec.js

@@ -59,7 +59,7 @@ describe('macro: table-of-contents', () => {
     it('renders a default aria label', () => {
         const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
 
-        expect($('.ons-toc').attr('aria-label')).toBe('Table of contents');
+        expect($('.ons-table-of-contents').attr('aria-label')).toBe('Table of contents');
     });
 
     it('renders the provided `ariaLabel`', () => {
@@ -70,13 +70,13 @@ describe('macro: table-of-contents', () => {
             }),
         );
 
-        expect($('.ons-toc').attr('aria-label')).toBe('Contents');
+        expect($('.ons-table-of-contents').attr('aria-label')).toBe('Contents');
     });
 
     it('renders title as heading element', () => {
         const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
 
-        expect($('.ons-toc__title').text().trim()).toBe('Contents');
+        expect($('.ons-table-of-contents__title').text().trim()).toBe('Contents');
     });
 
     describe('skip to content when `skipLink` is provided', () => {

package/components/table-of-contents/{_toc.scss → _table-of-contents.scss}

@@ -1,4 +1,4 @@
-.ons-toc {
+.ons-table-of-contents {
     &-container {
         border-bottom: 1px solid var(--ons-color-grey-15);
         margin-bottom: 2rem;

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

@@ -0,0 +1,13 @@
+import domready from '../../js/domready';
+
+async function tableOfContents() {
+    const tableOfContents = [...document.querySelectorAll('.ons-js-toc-container')];
+
+    if (tableOfContents.length) {
+        const TableOfContents = (await import('./table-of-contents')).default;
+
+        tableOfContents.forEach((component) => new TableOfContents(component));
+    }
+}
+
+domready(tableOfContents);

package/components/table-of-contents/{toc.js → table-of-contents.js}

@@ -1,4 +1,4 @@
-export default class Toc {
+export default class TableOfContents {
     constructor(component) {
         this.component = component;
         this.sections = [...this.component.querySelectorAll('section[id]')];
@@ -28,11 +28,11 @@ export default class Toc {
         this.activeSection = activeSection;
 
         for (let section of this.sections) {
-            const tocItem = document.querySelector(`.ons-toc .ons-list__link[href="#${section.id}"]`);
+            const tocItem = document.querySelector(`.ons-table-of-contents .ons-list__link[href="#${section.id}"]`);
             if (section === activeSection) {
-                tocItem.classList.add('ons-toc__link-active');
+                tocItem.classList.add('ons-table-of-contents__link-active');
             } else {
-                tocItem.classList.remove('ons-toc__link-active');
+                tocItem.classList.remove('ons-table-of-contents__link-active');
             }
         }
     }

package/components/table-of-contents/{toc.spec.js → table-of-contents.spec.js}

@@ -59,7 +59,7 @@ describe('script: table-of-contents', () => {
         await page.$eval(`#${sectionId}`, (node) => node.scrollIntoView());
         await setTimeout(250);
 
-        const activeSection = await page.$eval('.ons-toc__link-active', (node) => node.innerText.trim());
+        const activeSection = await page.$eval('.ons-table-of-contents__link-active', (node) => node.innerText.trim());
         expect(activeSection).toBe(sectionTitle);
     });
 });
@@ -151,7 +151,7 @@ describe('script: table-of-contents-fixed-position', () => {
         );
     });
 
-    it('when the "ons-grid__col--sticky" class is used, then the ToC stays in a fixed position while scrolling', async () => {
+    it('when the "ons-grid__col--sticky" class is used, then the table of contents stays in a fixed position while scrolling', async () => {
         await page.evaluate(() => {
             window.scrollTo(0, 1000);
         });

package/components/tabs/_tabs.scss

@@ -43,11 +43,10 @@
     border-radius: 3px 3px 0 0;
     color: var(--ons-color-text);
     display: inline-block;
-    height: 2.55rem;
-    line-height: 2.25rem;
+    height: 2.5rem;
     margin: 0 0.5rem 0 0;
     overflow: visible;
-    padding: 0 1rem;
+    padding: 0.25rem 1rem 0.25rem;
     position: relative;
     text-decoration: underline;
 
@@ -62,10 +61,10 @@
         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);
+            inset 0 0 0 5px var(--ons-color-button-secondary),
+            inset 15px 0 0 0 var(--ons-color-button-secondary),
+            inset -14px 0 0 0 var(--ons-color-button-secondary),
+            inset 0 -9px 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
@@ -88,10 +87,10 @@
         &: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);
+                inset 0 0 0 5px var(--ons-color-page-light),
+                inset 15px 0 0 0 var(--ons-color-page-light),
+                inset -14px 0 0 0 var(--ons-color-page-light),
+                inset 0 -9px 0 0 var(--ons-color-text-link-focus);
             text-decoration: none;
         }
     }

package/components/tabs/tabs.js

@@ -40,8 +40,8 @@ export default class Tabs {
 
     // Set up checks for responsive functionality
     // The tabs will display as tabs up until this.breakpoint is reached
-    // Tabs will display as a TOC list and show full content for <this.breakpoint viewports
-    // Aria tags are added only in toc view
+    // Tabs will then display as a table of contents list and show full content for this.breakpoint viewports
+    // Aria tags are added only in table of contents view
     setupViewportChecks() {
         const breakpoint = () => {
             let finalBreakpoint = 0;
@@ -183,7 +183,7 @@ export default class Tabs {
         panel.classList.add(this.jsHiddenClass);
     }
 
-    // Remove aria tags for TOC view
+    // Remove aria tags for table of contents view
     unsetAttributes(tab) {
         tab.removeAttribute('id');
         tab.removeAttribute('role');

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

@@ -216,7 +216,7 @@ describe('script: timeout modal', () => {
             it('closes the modal', async () => {
                 const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
 
-                await setTimeout(50);
+                await setTimeout(100);
 
                 expect(modalIsVisible).toBe(false);
             });