Merge branch 'main' into refactor-feedback-component-test-file

ONSdigital · Nov 21, 2024 · 96e1a46 · 96e1a46
2 parents 57affb8 + 4108db8
commit 96e1a46
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 → ...table-of-contents/_table-of-contents.scss b/src/components/table-of-contents/_toc.scss → ...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
@@ -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 → ...ts/table-of-contents/table-of-contents.js b/src/components/table-of-contents/toc.js → ...ts/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 → ...ble-of-contents/table-of-contents.spec.js b/src/components/table-of-contents/toc.spec.js → ...ble-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
diff --git 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
@@ -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
@@ -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
@@ -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';