@ons/design-system 70.0.6 → 70.0.8

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

@@ -7,164 +7,164 @@ import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TABLE_OF_CONTENTS_SKIP_LINK = {
-  title: 'Contents',
-  skipLink: {
-    url: '#the-content',
-    text: 'Skip to guide content',
-  },
-  itemsList: [],
+    title: 'Contents',
+    skipLink: {
+        url: '#the-content',
+        text: 'Skip to guide content',
+    },
+    itemsList: [],
 };
 
 const EXAMPLE_TABLE_OF_CONTENTS_SINGLE = {
-  title: 'Contents',
-  itemsList: [
-    {
-      url: '#overview',
-      text: 'Overview',
-    },
-    {
-      url: '#who-should-take-part-and-why',
-      text: 'Who should take part and why',
-    },
-  ],
+    title: 'Contents',
+    itemsList: [
+        {
+            url: '#overview',
+            text: 'Overview',
+        },
+        {
+            url: '#who-should-take-part-and-why',
+            text: 'Who should take part and why',
+        },
+    ],
 };
 
 const EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE = {
-  title: 'Contents',
-  lists: [
-    {
-      listHeading: 'Household questions',
-      listHeadingHidden: 'help topics',
-      itemsList: [
+    title: 'Contents',
+    lists: [
         {
-          url: '#household1',
-          text: 'Household and who lives here',
+            listHeading: 'Household questions',
+            listHeadingHidden: 'help topics',
+            itemsList: [
+                {
+                    url: '#household1',
+                    text: 'Household and who lives here',
+                },
+            ],
         },
-      ],
-    },
-    {
-      listHeading: 'Individual questions',
-      listHeadingHidden: 'help topics',
-      itemsList: [
         {
-          url: '#individual1',
-          text: 'Name, date of birth and marital status',
+            listHeading: 'Individual questions',
+            listHeadingHidden: 'help topics',
+            itemsList: [
+                {
+                    url: '#individual1',
+                    text: 'Name, date of birth and marital status',
+                },
+            ],
         },
-      ],
-    },
-  ],
+    ],
 };
 
 describe('macro: table-of-contents', () => {
-  it('renders a default aria label', () => {
-    const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
+    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');
-  });
-
-  it('renders the provided `ariaLabel`', () => {
-    const $ = cheerio.load(
-      renderComponent('table-of-contents', {
-        ...EXAMPLE_TABLE_OF_CONTENTS_SINGLE,
-        ariaLabel: 'Contents',
-      }),
-    );
-
-    expect($('.ons-toc').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');
-  });
-
-  describe('skip to content when `skipLink` is provided', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SKIP_LINK));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
+        expect($('.ons-toc').attr('aria-label')).toBe('Table of contents');
     });
 
-    it('outputs `skip-to-content` component', () => {
-      const faker = templateFaker();
-      const skipToContentSpy = faker.spy('skip-to-content');
+    it('renders the provided `ariaLabel`', () => {
+        const $ = cheerio.load(
+            renderComponent('table-of-contents', {
+                ...EXAMPLE_TABLE_OF_CONTENTS_SINGLE,
+                ariaLabel: 'Contents',
+            }),
+        );
 
-      faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SKIP_LINK);
-
-      expect(skipToContentSpy.occurrences[0]).toEqual({
-        url: '#the-content',
-        text: 'Skip to guide content',
-      });
+        expect($('.ons-toc').attr('aria-label')).toBe('Contents');
     });
-  });
 
-  describe('single list', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
+    it('renders title as heading element', () => {
+        const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
+        expect($('.ons-toc__title').text().trim()).toBe('Contents');
     });
 
-    it('outputs `lists` component', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+    describe('skip to content when `skipLink` is provided', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SKIP_LINK));
 
-      faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE);
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-      expect(listsSpy.occurrences[0]).toEqual({
-        element: 'ol',
-        classes: 'ons-u-mb-m',
-        variants: 'dashed',
-        itemsList: EXAMPLE_TABLE_OF_CONTENTS_SINGLE.itemsList,
-      });
-    });
-  });
+        it('outputs `skip-to-content` component', () => {
+            const faker = templateFaker();
+            const skipToContentSpy = faker.spy('skip-to-content');
 
-  describe('multiple lists', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE));
+            faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SKIP_LINK);
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
+            expect(skipToContentSpy.occurrences[0]).toEqual({
+                url: '#the-content',
+                text: 'Skip to guide content',
+            });
+        });
     });
 
-    it('renders a heading for each list', () => {
-      const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE));
+    describe('single list', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
 
-      $('.ons-u-vh').remove();
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-      const headings = mapAll($('h3'), (node) => $(node).text().trim());
-      expect(headings).toEqual(['Household questions:', 'Individual questions:']);
-    });
+        it('outputs `lists` component', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-    it('renders visually hidden heading for each list', () => {
-      const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE));
+            faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE);
 
-      const headings = mapAll($('h3 .ons-u-vh'), (node) => node.text().trim());
-      expect(headings).toEqual(['help topics', 'help topics']);
+            expect(listsSpy.occurrences[0]).toEqual({
+                element: 'ol',
+                classes: 'ons-u-mb-m',
+                variants: 'dashed',
+                itemsList: EXAMPLE_TABLE_OF_CONTENTS_SINGLE.itemsList,
+            });
+        });
     });
 
-    it('outputs `lists` component for each list', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
-
-      faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE);
-
-      expect(listsSpy.occurrences[0]).toEqual({
-        element: 'ol',
-        classes: 'ons-u-mb-m',
-        variants: 'dashed',
-        itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[0].itemsList,
-      });
-      expect(listsSpy.occurrences[1]).toEqual({
-        element: 'ol',
-        classes: 'ons-u-mb-m',
-        variants: 'dashed',
-        itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[1].itemsList,
-      });
+    describe('multiple lists', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE));
+
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
+
+        it('renders a heading for each list', () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE));
+
+            $('.ons-u-vh').remove();
+
+            const headings = mapAll($('h3'), (node) => $(node).text().trim());
+            expect(headings).toEqual(['Household questions:', 'Individual questions:']);
+        });
+
+        it('renders visually hidden heading for each list', () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE));
+
+            const headings = mapAll($('h3 .ons-u-vh'), (node) => node.text().trim());
+            expect(headings).toEqual(['help topics', 'help topics']);
+        });
+
+        it('outputs `lists` component for each list', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
+
+            faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE);
+
+            expect(listsSpy.occurrences[0]).toEqual({
+                element: 'ol',
+                classes: 'ons-u-mb-m',
+                variants: 'dashed',
+                itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[0].itemsList,
+            });
+            expect(listsSpy.occurrences[1]).toEqual({
+                element: 'ol',
+                classes: 'ons-u-mb-m',
+                variants: 'dashed',
+                itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[1].itemsList,
+            });
+        });
     });
-  });
 });

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

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

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

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

@@ -1,39 +1,39 @@
 export default class Toc {
-  constructor(component) {
-    this.component = component;
-    this.sections = [...this.component.querySelectorAll('section[id]')];
-    this.refreshIntervalId = setInterval(() => this.setCurrent(), 100);
-    this.setCurrent();
-  }
+    constructor(component) {
+        this.component = component;
+        this.sections = [...this.component.querySelectorAll('section[id]')];
+        this.refreshIntervalId = setInterval(() => this.setCurrent(), 100);
+        this.setCurrent();
+    }
 
-  setCurrent() {
-    let activeSection = this.sections[0];
-    for (let section of this.sections) {
-      const top = section.getBoundingClientRect().top;
-      if (top > 100) {
-        break;
-      }
+    setCurrent() {
+        let activeSection = this.sections[0];
+        for (let section of this.sections) {
+            const top = section.getBoundingClientRect().top;
+            if (top > 100) {
+                break;
+            }
 
-      activeSection = section;
+            activeSection = section;
 
-      if (top >= 0 && top <= 100) {
-        break;
-      }
-    }
+            if (top >= 0 && top <= 100) {
+                break;
+            }
+        }
 
-    if (activeSection === this.activeSection) {
-      return;
-    }
+        if (activeSection === this.activeSection) {
+            return;
+        }
 
-    this.activeSection = activeSection;
+        this.activeSection = activeSection;
 
-    for (let section of this.sections) {
-      const tocItem = document.querySelector(`.ons-toc .ons-list__link[href="#${section.id}"]`);
-      if (section === activeSection) {
-        tocItem.classList.add('ons-toc__link-active');
-      } else {
-        tocItem.classList.remove('ons-toc__link-active');
-      }
+        for (let section of this.sections) {
+            const tocItem = document.querySelector(`.ons-toc .ons-list__link[href="#${section.id}"]`);
+            if (section === activeSection) {
+                tocItem.classList.add('ons-toc__link-active');
+            } else {
+                tocItem.classList.remove('ons-toc__link-active');
+            }
+        }
     }
-  }
 }

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

@@ -1,31 +1,31 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 describe('script: table-of-contents', () => {
-  beforeEach(async () => {
-    await setTestPage(
-      '/test',
-      /* eslint-disable indent */
-      `
+    beforeEach(async () => {
+        await setTestPage(
+            '/test',
+            /* eslint-disable indent */
+            `
       <div class="ons-page__container ons-container">
         <div class="ons-grid ons-js-toc-container">
           <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
             ${renderComponent('table-of-contents', {
-              title: 'Contents',
-              ariaLabel: 'Sections in this page',
-              itemsList: [
-                {
-                  url: '#section1',
-                  text: 'First section',
-                },
-                {
-                  url: '#section2',
-                  text: 'Second section',
-                },
-                {
-                  url: '#section3',
-                  text: 'Third section',
-                },
-              ],
+                title: 'Contents',
+                ariaLabel: 'Sections in this page',
+                itemsList: [
+                    {
+                        url: '#section1',
+                        text: 'First section',
+                    },
+                    {
+                        url: '#section2',
+                        text: 'Second section',
+                    },
+                    {
+                        url: '#section3',
+                        text: 'Third section',
+                    },
+                ],
             })}
           </div>
           <div class="ons-grid__col ons-col-7@m ons-push-1@m">
@@ -45,57 +45,57 @@ describe('script: table-of-contents', () => {
         </div>
       </div>
       `,
-      /* eslint-enable indent */
-    );
-  });
-
-  it.each([
-    ['section1', 'First section'],
-    ['section2', 'Second section'],
-    ['section3', 'Third section'],
-  ])('marks "%s" as the current section', async (sectionId, sectionTitle) => {
-    await page.$eval(`#${sectionId}`, (node) => node.scrollIntoView());
-    await page.waitForTimeout(250);
-
-    const activeSection = await page.$eval('.ons-toc__link-active', (node) => node.innerText.trim());
-    expect(activeSection).toBe(sectionTitle);
-  });
+            /* eslint-enable indent */
+        );
+    });
+
+    it.each([
+        ['section1', 'First section'],
+        ['section2', 'Second section'],
+        ['section3', 'Third section'],
+    ])('marks "%s" as the current section', async (sectionId, sectionTitle) => {
+        await page.$eval(`#${sectionId}`, (node) => node.scrollIntoView());
+        await page.waitForTimeout(250);
+
+        const activeSection = await page.$eval('.ons-toc__link-active', (node) => node.innerText.trim());
+        expect(activeSection).toBe(sectionTitle);
+    });
 });
 
 describe('script: table-of-contents-fixed-position', () => {
-  beforeEach(async () => {
-    await setTestPage(
-      '/test',
-      /* eslint-disable indent */
-      `
+    beforeEach(async () => {
+        await setTestPage(
+            '/test',
+            /* eslint-disable indent */
+            `
         <div class="ons-page__container ons-container">
           <div class="ons-grid ons-js-toc-container">
             <div id="sticky-container" class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
               ${renderComponent('table-of-contents', {
-                title: 'Contents',
-                ariaLabel: 'Sections in this page',
-                itemsList: [
-                  {
-                    url: '#section1',
-                    text: 'What is the census?',
-                  },
-                  {
-                    url: '#section2',
-                    text: 'The online census has now closed',
-                  },
-                  {
-                    url: '#section3',
-                    text: 'What happens after Census Day',
-                  },
-                  {
-                    url: '#section4',
-                    text: 'The census in Northern Ireland and Scotland',
-                  },
-                  {
-                    url: '#section5',
-                    text: 'The last census',
-                  },
-                ],
+                  title: 'Contents',
+                  ariaLabel: 'Sections in this page',
+                  itemsList: [
+                      {
+                          url: '#section1',
+                          text: 'What is the census?',
+                      },
+                      {
+                          url: '#section2',
+                          text: 'The online census has now closed',
+                      },
+                      {
+                          url: '#section3',
+                          text: 'What happens after Census Day',
+                      },
+                      {
+                          url: '#section4',
+                          text: 'The census in Northern Ireland and Scotland',
+                      },
+                      {
+                          url: '#section5',
+                          text: 'The last census',
+                      },
+                  ],
               })}
             </div>
             <div class="ons-grid__col ons-col-7@m ons-push-1@m">
@@ -144,32 +144,32 @@ describe('script: table-of-contents-fixed-position', () => {
           </div>
         </div>
       `,
-      /* eslint-enable indent */
-      'main',
-    );
-  });
-
-  it('when the "ons-grid__col--sticky" class is used, then the ToC stays in a fixed position while scrolling', async () => {
-    await page.evaluate(() => {
-      window.scrollTo(0, 1000);
+            /* eslint-enable indent */
+            'main',
+        );
     });
 
-    await page.waitForTimeout(250);
-    const leftColumn = await page.$('#sticky-container');
-    const boundingBox = await leftColumn.boundingBox();
+    it('when the "ons-grid__col--sticky" class is used, then the ToC stays in a fixed position while scrolling', async () => {
+        await page.evaluate(() => {
+            window.scrollTo(0, 1000);
+        });
+
+        await page.waitForTimeout(250);
+        const leftColumn = await page.$('#sticky-container');
+        const boundingBox = await leftColumn.boundingBox();
 
-    const viewport = await page.evaluate(() => ({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    }));
+        const viewport = await page.evaluate(() => ({
+            width: window.innerWidth,
+            height: window.innerHeight,
+        }));
 
-    const isInViewport =
-      boundingBox &&
-      boundingBox.x < viewport.width &&
-      boundingBox.y < viewport.height &&
-      boundingBox.x + boundingBox.width > 0 &&
-      boundingBox.y + boundingBox.height > 0;
+        const isInViewport =
+            boundingBox &&
+            boundingBox.x < viewport.width &&
+            boundingBox.y < viewport.height &&
+            boundingBox.x + boundingBox.width > 0 &&
+            boundingBox.y + boundingBox.height > 0;
 
-    expect(isInViewport).toBeTruthy();
-  });
+        expect(isInViewport).toBeTruthy();
+    });
 });