@ons/design-system 70.0.7 → 70.0.9

package/components/table-of-contents/example-table-of-contents-sticky.njk

@@ -29,14 +29,20 @@
                         }
                     ]
                 })
-            }}
+            -}}
         </div>
         <div class="ons-grid__col ons-col-7@m ons-push-1@m">
             <section id="section1">
                 <h2>What is the census?</h2>
-                <p>The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales.</p>
+                <p>
+                    The census is a survey that happens every 10 years and gives us a picture of all the people and households in England
+                    and Wales.
+                </p>
 
-                <p>Your answers to the census questions will help organisations make decisions on planning and funding public services in your area, including transport, education and healthcare.</p>
+                <p>
+                    Your answers to the census questions will help organisations make decisions on planning and funding public services in
+                    your area, including transport, education and healthcare.
+                </p>
             </section>
             <section id="section2">
                 <h2>The online census has now closed</h2>
@@ -46,30 +52,61 @@
             </section>
             <section id="section3">
                 <h2>What happens after Census Day</h2>
-                <p>Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>, help to improve the quality and accuracy of the census results.</p>
+                <p>
+                    Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>, help
+                    to improve the quality and accuracy of the census results.
+                </p>
 
-                <p>Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can publish the initial Census 2021 findings one year after the census and the main releases two years after the census.</p>
+                <p>
+                    Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can
+                    publish the initial Census 2021 findings one year after the census and the main releases two years after the census.
+                </p>
 
-                <p>To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs consultation.</p>
+                <p>
+                    To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs
+                    consultation.
+                </p>
             </section>
             <section id="section4">
                 <h2>The census in Northern Ireland and Scotland</h2>
                 <p>The Office for National Statistics (ONS) runs the census in England and Wales.</p>
 
-                <p>If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out about the census for Northern Ireland.</p>
+                <p>
+                    If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out about
+                    the census for Northern Ireland.
+                </p>
 
-                <p>If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the census for Scotland.</p>
+                <p>
+                    If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the
+                    census for Scotland.
+                </p>
             </section>
             <section id="section5">
                 <h2>The last census</h2>
-                <p>The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety of ways.</p>
+                <p>
+                    The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety of
+                    ways.
+                </p>
 
-                <p>For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn more about dementia.</p>
+                <p>
+                    For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also
+                    essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn more
+                    about dementia.
+                </p>
 
-                <p>To read more about the benefits that information from the 2011 Census helped to create, visit the Office for National Statistics (ONS) website.</p>
-                <p>The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS) started six to eight weeks after Census Day.</p>
+                <p>
+                    To read more about the benefits that information from the 2011 Census helped to create, visit the Office for National
+                    Statistics (ONS) website.
+                </p>
+                <p>
+                    The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS)
+                    started six to eight weeks after Census Day.
+                </p>
 
-                <p>The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.</p>
+                <p>
+                    The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar
+                    questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.
+                </p>
 
                 <p>The CCS has now closed.</p>
             </section>

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();
+    });
 });

package/components/tabs/_macro.njk

@@ -7,21 +7,27 @@
         {% endfor %}
     {% endset %}
 
-    <section class="{{ classes }}"
-        {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}
-    >
+    <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{% if params.titleClasses %} {{ params.titleClasses }}{% endif %}">{{ params.title }}</{{ titleTag }}>
+        {% set openingTag = "<" + titleTag %}
+        {% set closingTag = "</" + titleTag + ">" %}
+        {{ openingTag | safe }}
+        class="ons-tabs__title ons-u-fs-r--b
+        ons-u-mt-no{{ ' ' + params.titleClasses if params.titleClasses else '' }}">{{ params.title }}{{ closingTag | safe }}
         <div>
             <ul class="ons-tabs__list">
+                <!-- prettier-ignore-start -->
                 {%- for tab in params.tabs -%}
-                    <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower}}" class="ons-tab"{% if tab.attributes %}{% for attribute, value in (tab.attributes.items() if tab.attributes is mapping and tab.attributes.items else tab.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}>{{ tab.title }}{% if tab.hiddenSpan %}<span class='ons-u-vh'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
+                    <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tab"{% if tab.attributes %}{% for attribute, value in (tab.attributes.items() if tab.attributes is mapping and tab.attributes.items else tab.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>{{ tab.title }}{% if tab.hiddenSpan %}<span class="ons-u-vh">{{ tab.hiddenSpan }}</span>{% endif %}</a></li>
                 {%- endfor -%}
+                <!-- prettier-ignore-end -->
             </ul>
         </div>
         {% for tab in params.tabs %}
             <section id="{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tabs__panel">
-                {% if tab.showTitle %}<h2 id="{{ tab.title|trim|replace(' ','-')|lower + '-content-title' }}" class="ons-u-vh">{{ tab.title }}</h2>{% endif %}
+                {% if tab.showTitle %}
+                    <h2 id="{{ tab.title|trim|replace(' ','-')|lower + '-content-title' }}" class="ons-u-vh">{{ tab.title }}</h2>
+                {% endif %}
                 {{ tab.content | safe }}
             </section>
         {% endfor %}

package/components/tabs/_macro.spec.js

@@ -6,122 +6,122 @@ 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...',
-      hiddenSpan: 'for Example',
-    },
-    {
-      id: 'second-tab',
-      title: 'Tab 2',
-      content: 'Some nested <strong>strong element</strong>...',
-    },
-  ],
+    title: 'Example tabs',
+    tabs: [
+        {
+            id: 'first-tab',
+            title: 'Tab 1',
+            content: 'Example content...',
+            hiddenSpan: 'for Example',
+        },
+        {
+            id: 'second-tab',
+            title: 'Tab 2',
+            content: 'Some nested <strong>strong element</strong>...',
+        },
+    ],
 };
 
 const EXAMPLE_TABS_WITH_SHOWTITLE = {
-  title: 'Example tabs',
-  tabs: [
-    {
-      id: 'first-tab',
-      title: 'Tab 1',
-      showTitle: true,
-      content: 'Example content...',
-    },
-    {
-      id: 'second-tab',
-      title: 'Tab 2',
-      content: 'Some nested <strong>strong element</strong>...',
-    },
-  ],
+    title: 'Example tabs',
+    tabs: [
+        {
+            id: 'first-tab',
+            title: 'Tab 1',
+            showTitle: true,
+            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: [
-    {
-      title: 'Tab 1',
-      content: 'Example content...',
-    },
-    {
-      title: 'Tab 2',
-      content: 'Some nested <strong>strong element</strong>...',
-    },
-  ],
+    title: 'Example tabs',
+    tabs: [
+        {
+            title: 'Tab 1',
+            content: 'Example content...',
+        },
+        {
+            title: 'Tab 2',
+            content: 'Some nested <strong>strong element</strong>...',
+        },
+    ],
 };
 
 describe('macro: tabs', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided variant classes', () => {
-    const $ = cheerio.load(
-      renderComponent('tabs', {
-        ...EXAMPLE_TABS,
-        variants: ['details', 'example-variant'],
-      }),
-    );
+    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);
-  });
+        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));
+    it('has the provided `title`', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect($('.ons-tabs__title').text().trim()).toBe('Example tabs');
-  });
+        expect($('.ons-tabs__title').text().trim()).toBe('Example tabs');
+    });
 
-  it('has title with provided tag override', () => {
-    const $ = cheerio.load(
-      renderComponent('tabs', {
-        ...EXAMPLE_TABS,
-        titleTag: 'h4',
-      }),
-    );
+    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');
-  });
+        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));
+    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');
-  });
+        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));
+    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('tab-1');
-    expect($('.ons-tabs__panel:last').attr('id')).toBe('tab-2');
-  });
+        expect($('.ons-tabs__panel:first').attr('id')).toBe('tab-1');
+        expect($('.ons-tabs__panel:last').attr('id')).toBe('tab-2');
+    });
 
-  it('has expected label text in tab links and visually hidden span in tab 1', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+    it('has expected label text in tab links and visually hidden span in tab 1', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-vh">for Example</span>');
-    expect($('.ons-tab:last').text().trim()).toBe('Tab 2');
-  });
+        expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-vh">for Example</span>');
+        expect($('.ons-tab:last').text().trim()).toBe('Tab 2');
+    });
 
-  it('has expected content in tab panels', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+    it('has expected content in tab panels', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect($('.ons-tabs__panel:first').html().trim()).toBe('Example content...');
-    expect($('.ons-tabs__panel:last').html().trim()).toBe('Some nested <strong>strong element</strong>...');
-  });
+        expect($('.ons-tabs__panel:first').html().trim()).toBe('Example content...');
+        expect($('.ons-tabs__panel:last').html().trim()).toBe('Some nested <strong>strong element</strong>...');
+    });
 
-  it('displays a h2 when showTitle set to true', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITH_SHOWTITLE));
+    it('displays a h2 when showTitle set to true', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITH_SHOWTITLE));
 
-    expect($('.ons-tabs__panel:first').find('h2').length).toBe(1);
-  });
+        expect($('.ons-tabs__panel:first').find('h2').length).toBe(1);
+    });
 });