From 4108db8e9b17cdc2f50e1e5a97884827d2412f23 Mon Sep 17 00:00:00 2001
From: rmccar <42928680+rmccar@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:31:22 +0000
Subject: [PATCH] Rename table of contents files (#3424)

---
 src/components/back-to-top/back-to-top.dom.js      |  8 ++++----
 src/components/back-to-top/back-to-top.js          |  2 +-
 src/components/table-of-contents/_macro-options.md | 14 +++++++-------
 src/components/table-of-contents/_macro.njk        |  6 +++---
 src/components/table-of-contents/_macro.spec.js    |  6 +++---
 .../{_toc.scss => _table-of-contents.scss}         |  2 +-
 .../table-of-contents/table-of-contents.dom.js     | 13 +++++++++++++
 .../{toc.js => table-of-contents.js}               |  8 ++++----
 .../{toc.spec.js => table-of-contents.spec.js}     |  4 ++--
 src/components/table-of-contents/toc.dom.js        | 13 -------------
 src/components/tabs/_macro-options.md              |  2 +-
 src/components/tabs/tabs.js                        |  6 +++---
 src/js/main.js                                     |  2 +-
 src/scss/main.scss                                 |  2 +-
 14 files changed, 44 insertions(+), 44 deletions(-)
 rename src/components/table-of-contents/{_toc.scss => _table-of-contents.scss} (92%)
 create mode 100644 src/components/table-of-contents/table-of-contents.dom.js
 rename src/components/table-of-contents/{toc.js => table-of-contents.js} (73%)
 rename src/components/table-of-contents/{toc.spec.js => table-of-contents.spec.js} (97%)
 delete mode 100644 src/components/table-of-contents/toc.dom.js

diff --git a/src/components/back-to-top/back-to-top.dom.js b/src/components/back-to-top/back-to-top.dom.js
index c01aa4fefb..a05b722487 100644
--- a/src/components/back-to-top/back-to-top.dom.js
+++ b/src/components/back-to-top/back-to-top.dom.js
@@ -1,11 +1,11 @@
 import domready from '../../js/domready';
 
 async function backToTop() {
-    const bttElement = [...document.querySelectorAll('.ons-js-back-to-top')];
+    const backToTop = [...document.querySelectorAll('.ons-js-back-to-top')];
 
-    if (bttElement) {
-        const Btt = (await import('./back-to-top')).default;
-        bttElement.forEach((btn) => new Btt(btn));
+    if (backToTop) {
+        const BackToTop = (await import('./back-to-top')).default;
+        backToTop.forEach((btn) => new BackToTop(btn));
     }
 }
 
diff --git a/src/components/back-to-top/back-to-top.js b/src/components/back-to-top/back-to-top.js
index 96c15f6303..97d465df73 100644
--- a/src/components/back-to-top/back-to-top.js
+++ b/src/components/back-to-top/back-to-top.js
@@ -1,4 +1,4 @@
-export default class backToTop {
+export default class BackToTop {
     constructor(component) {
         this.component = component;
         this.content = this.component.previousElementSibling;
diff --git a/src/components/table-of-contents/_macro-options.md b/src/components/table-of-contents/_macro-options.md
index b2b39dcd4f..117c03a6ee 100644
--- a/src/components/table-of-contents/_macro-options.md
+++ b/src/components/table-of-contents/_macro-options.md
@@ -1,10 +1,10 @@
-| Name      | Type                                                     | Required                      | Description                                                                                                                                                                                                |
-| --------- | -------------------------------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| title     | string                                                   | true                          | A title for the component, for example, “Contents”                                                                                                                                                         |
-| ariaLabel | string                                                   | false                         | Descriptive landmark ARIA label to give a screen reader user greater understanding of its purpose. Defaults to “Table of contents”.                                                                        |
-| skipLink  | `Skip to content` [_(ref)_](/components/skip-to-content) | false                         | Settings for the skip to content link that allows users to avoid reading out the Table of Contents (ToC) on each page. Required for any ToC repeated on multiple pages, such as a [guide](/patterns/guide) |
-| lists     | array`<list>`                                            | true (unless `itemsList` set) | An array of [lists](#lists) for the component                                                                                                                                                              |
-| itemsList | array`<itemsList>`                                       | true (unless `lists` set)     | An array of [list items](#itemslist) for the component                                                                                                                                                     |
+| Name      | Type                                                     | Required                      | Description                                                                                                                                                                                                        |
+| --------- | -------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| title     | string                                                   | true                          | A title for the component, for example, “Contents”                                                                                                                                                                 |
+| ariaLabel | string                                                   | false                         | Descriptive landmark ARIA label to give a screen reader user greater understanding of its purpose. Defaults to “Table of contents”.                                                                                |
+| skipLink  | `Skip to content` [_(ref)_](/components/skip-to-content) | false                         | Settings for the skip to content link that allows users to avoid reading out the table of contents on each page. Required for any table of contents repeated on multiple pages, such as a [guide](/patterns/guide) |
+| lists     | array`<list>`                                            | true (unless `itemsList` set) | An array of [lists](#lists) for the component                                                                                                                                                                      |
+| itemsList | array`<itemsList>`                                       | true (unless `lists` set)     | An array of [list items](#itemslist) for the component                                                                                                                                                             |
 
 ## List
 
diff --git a/src/components/table-of-contents/_macro.njk b/src/components/table-of-contents/_macro.njk
index 779ac6d16e..892d9ecf44 100644
--- a/src/components/table-of-contents/_macro.njk
+++ b/src/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 %}
diff --git a/src/components/table-of-contents/_macro.spec.js b/src/components/table-of-contents/_macro.spec.js
index d32ace2f31..a3399bd4db 100644
--- a/src/components/table-of-contents/_macro.spec.js
+++ b/src/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', () => {
diff --git a/src/components/table-of-contents/_toc.scss b/src/components/table-of-contents/_table-of-contents.scss
similarity index 92%
rename from src/components/table-of-contents/_toc.scss
rename to src/components/table-of-contents/_table-of-contents.scss
index 769963845d..bd47d2a321 100644
--- a/src/components/table-of-contents/_toc.scss
+++ b/src/components/table-of-contents/_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;
diff --git a/src/components/table-of-contents/table-of-contents.dom.js b/src/components/table-of-contents/table-of-contents.dom.js
new file mode 100644
index 0000000000..e4796fd558
--- /dev/null
+++ b/src/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);
diff --git a/src/components/table-of-contents/toc.js b/src/components/table-of-contents/table-of-contents.js
similarity index 73%
rename from src/components/table-of-contents/toc.js
rename to src/components/table-of-contents/table-of-contents.js
index db31d30ac7..027c890c86 100644
--- a/src/components/table-of-contents/toc.js
+++ b/src/components/table-of-contents/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');
             }
         }
     }
diff --git a/src/components/table-of-contents/toc.spec.js b/src/components/table-of-contents/table-of-contents.spec.js
similarity index 97%
rename from src/components/table-of-contents/toc.spec.js
rename to src/components/table-of-contents/table-of-contents.spec.js
index dd994c002b..2d81a291c3 100644
--- a/src/components/table-of-contents/toc.spec.js
+++ b/src/components/table-of-contents/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);
         });
diff --git a/src/components/table-of-contents/toc.dom.js b/src/components/table-of-contents/toc.dom.js
deleted file mode 100644
index 3e8b073bc2..0000000000
--- a/src/components/table-of-contents/toc.dom.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import domready from '../../js/domready';
-
-async function toc() {
-    const toc = [...document.querySelectorAll('.ons-js-toc-container')];
-
-    if (toc.length) {
-        const Toc = (await import('./toc')).default;
-
-        toc.forEach((component) => new Toc(component));
-    }
-}
-
-domready(toc);
diff --git a/src/components/tabs/_macro-options.md b/src/components/tabs/_macro-options.md
index 59e527582a..8e4a0e9fc2 100644
--- a/src/components/tabs/_macro-options.md
+++ b/src/components/tabs/_macro-options.md
@@ -13,7 +13,7 @@
 | ---------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
 | id         | string  | false    | Sets the HTML `id` of the tab                                                                                                                  |
 | title      | string  | true     | The title for the tab                                                                                                                          |
-| showTitle  | boolean | false    | Sets an optional `h2` which will be displayed only in toc view and visually hidden in tab view.                                                |
+| showTitle  | boolean | false    | Sets an optional `h2` which will be displayed only in table of contents view and visually hidden in tab view.                                  |
 | hiddenSpan | string  | false    | Sets a visually hidden span after the title to distinguish the tab from others if multiple tabs with same title are displayed in the same page |
 | content    | string  | true     | The contents of the tab. This can contain HTML.                                                                                                |
 | attributes | object  | false    | HTML attributes (for example, data attributes) to add to the details header element                                                            |
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 0f198d8bbb..503175a435 100644
--- a/src/components/tabs/tabs.js
+++ b/src/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');
diff --git a/src/js/main.js b/src/js/main.js
index 2346e92914..7466499222 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -6,7 +6,7 @@ import '../components/mutually-exclusive/mutually-exclusive.dom';
 import '../components/textarea/textarea.dom';
 import '../components/password/password.dom';
 import '../components/tabs/tabs.dom';
-import '../components/table-of-contents/toc.dom';
+import '../components/table-of-contents/table-of-contents.dom';
 import '../components/back-to-top/back-to-top.dom';
 import '../components/accordion/accordion.dom';
 import '../components/details/details.dom';
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 36fb82e9b6..23817eae39 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -51,7 +51,7 @@
 @import '../components/skip-to-content/skip';
 @import '../components/status/status';
 @import '../components/summary/summary';
-@import '../components/table-of-contents/toc';
+@import '../components/table-of-contents/table-of-contents';
 @import '../components/table/table';
 @import '../components/tabs/tabs';
 @import '../components/text-indent/text-indent';