@ons/design-system 50.0.0 → 52.0.0

package/components/table/table.spec.js

@@ -0,0 +1,155 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+describe('script: table', () => {
+  describe('variant: scrollable', () => {
+    // Construct a table with 15 columns and 15 rows with long labels.
+    const params = {
+      variants: ['scrollable'],
+      ths: Array.from({ length: 15 }, (_, i) => ({ value: `Column ${i + 1}` })),
+      trs: [
+        {
+          tds: Array.from({ length: 15 }, (_, i) => ({ value: `Business Register and Employment Survey ${i + 1}` })),
+        },
+      ],
+    };
+
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('table', params));
+    });
+
+    it('should add shadow elements', async () => {
+      const leftShadowCount = await page.$$eval('.ons-table__left-shadow', nodes => nodes.length);
+      expect(leftShadowCount).not.toBe(0);
+      const rightShadowCount = await page.$$eval('.ons-table__right-shadow', nodes => nodes.length);
+      expect(rightShadowCount).not.toBe(0);
+    });
+
+    describe('When the table component is scrolled,', () => {
+      beforeEach(async () => {
+        await page.focus('.ons-table-scrollable__content');
+        await page.keyboard.press('ArrowRight');
+      });
+
+      it('should show both shadow elements', async () => {
+        await page.waitForTimeout(200);
+
+        const leftShadowVisibleCount = await page.$$eval('.ons-table__left-shadow.ons-visible', nodes => nodes.length);
+        expect(leftShadowVisibleCount).not.toBe(0);
+        const rightShadowVisibleCount = await page.$$eval('.ons-table__right-shadow.ons-visible', nodes => nodes.length);
+        expect(rightShadowVisibleCount).not.toBe(0);
+      });
+    });
+  });
+
+  describe('variant: sortable', () => {
+    const params = {
+      variants: ['sortable'],
+      sortBy: 'Sort by',
+      ariaAsc: 'ascending',
+      ariaDesc: 'descending',
+      ths: [
+        { value: 'Column 1', ariaSort: 'none' },
+        { value: 'Column 2', ariaSort: 'none' },
+        { value: 'Column 3', ariaSort: 'none' },
+        { value: 'Column 4', ariaSort: 'none' },
+      ],
+      trs: [
+        {
+          tds: [
+            { value: 'A', dataSort: '1' },
+            { value: 'A', dataSort: '4' },
+            { value: 'A', dataSort: '0' },
+            { value: 'A', dataSort: '2' },
+          ],
+        },
+        {
+          tds: [
+            { value: 'B', dataSort: '2' },
+            { value: 'B', dataSort: '4' },
+            { value: 'B', dataSort: '0' },
+            { value: 'B', dataSort: '2' },
+          ],
+        },
+        {
+          tds: [
+            { value: 'C', dataSort: '3' },
+            { value: 'C', dataSort: '4' },
+            { value: 'C', dataSort: '0' },
+            { value: 'C', dataSort: '2' },
+          ],
+        },
+      ],
+    };
+
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('table', params));
+    });
+
+    it('should create a button element in each TH', async () => {
+      const buttonCount = await page.$$eval('.ons-table__header .ons-table__sort-button', nodes => nodes.length);
+      expect(buttonCount).toBe(4);
+    });
+
+    it('should create a status element with aria attributes', async () => {
+      const ariaLiveAttribute = await page.$eval('.ons-sortable-table-status', node => node.getAttribute('aria-live'));
+      expect(ariaLiveAttribute).toBe('polite');
+      const roleAttribute = await page.$eval('.ons-sortable-table-status', node => node.getAttribute('role'));
+      expect(roleAttribute).toBe('status');
+      const ariaAtomicAttribute = await page.$eval('.ons-sortable-table-status', node => node.getAttribute('aria-atomic'));
+      expect(ariaAtomicAttribute).toBe('true');
+    });
+
+    describe('Each sort button element', () => {
+      it('should contain an aria-label attribute', async () => {
+        const ariaLabelValues = await page.$$eval('.ons-table__sort-button', nodes => nodes.map(node => node.getAttribute('aria-label')));
+        expect(ariaLabelValues).toEqual(['Sort by Column 1', 'Sort by Column 2', 'Sort by Column 3', 'Sort by Column 4']);
+      });
+
+      it('should contain a data-index attribute', async () => {
+        const dataIndexValues = await page.$$eval('.ons-table__sort-button', nodes => nodes.map(node => node.getAttribute('data-index')));
+        expect(dataIndexValues).toEqual(['0', '1', '2', '3']);
+      });
+    });
+
+    describe('When a sort button is clicked', () => {
+      beforeEach(async () => {
+        await page.click('.ons-table__header:nth-child(1) .ons-table__sort-button');
+      });
+
+      it('should update aria-sort value for each column header', async () => {
+        const ariaSortValues = await page.$$eval('.ons-table__header', nodes => nodes.map(node => node.getAttribute('aria-sort')));
+        expect(ariaSortValues).toEqual(['descending', 'none', 'none', 'none']);
+      });
+
+      it('should sort the column into descending order', async () => {
+        const firstColumnValues = await page.$$eval('.ons-table__row .ons-table__cell:first-child', nodes =>
+          nodes.map(node => node.textContent.trim()),
+        );
+        expect(firstColumnValues).toEqual(['C', 'B', 'A']);
+      });
+
+      it('should update the aria-live status', async () => {
+        const statusText = await page.$eval('.ons-sortable-table-status', node => node.textContent);
+        expect(statusText).toBe('Sort by Column 1 (descending)');
+      });
+
+      describe('When a sort button is clicked again', () => {
+        beforeEach(async () => {
+          await page.click('.ons-table__header:nth-child(1) .ons-table__sort-button');
+        });
+
+        it('should update aria-sort value for each column header', async () => {
+          const ariaSortValues = await page.$$eval('.ons-table__header', nodes => nodes.map(node => node.getAttribute('aria-sort')));
+          expect(ariaSortValues).toEqual(['ascending', 'none', 'none', 'none']);
+        });
+
+        it('should sort the column into ascending order', async () => {
+          const firstColumnValues = await page.$$eval('.ons-table__row .ons-table__cell:first-child', nodes =>
+            nodes.map(node => node.textContent.trim()),
+          );
+          expect(firstColumnValues).toEqual(['A', 'B', 'C']);
+        });
+      });
+    });
+  });
+});

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

@@ -1,43 +1,43 @@
 {% macro onsTableOfContents(params) %}
-  {% from "components/lists/_macro.njk" import onsList %}
-  {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
+{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 
-  <aside class="ons-toc-container" role="complementary">
+<aside class="ons-toc-container" role="complementary">
     {% if params.skipLink is defined and params.skipLink %}
-      {{
-        onsSkipToContent({
-          "url": params.skipLink.url,
-          "text": params.skipLink.text
-        })
-      }}
+		{{
+		onsSkipToContent({
+			"url": params.skipLink.url,
+			"text": params.skipLink.text
+		})
+		}}
     {% 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>
-      {% if params.lists is defined and params.lists %}
-        {% for list in params.lists %}
-          {% if list.listHeading is defined and list.listHeading %}
-            <h3 class="ons-u-fs-r ons-u-mb-xs">{{ list.listHeading }}<span class="ons-u-vh"> {{ list.listHeadingHidden }}</span>:</h3>
-          {% endif %}
-          {{
-              onsList({
-                  "element": 'ol',
-                  "classes": 'ons-u-mb-m',
-                  "variants": 'dashed',
-                  "itemsList": list.itemsList
-              })
-          }}
-        {% endfor %}
-      {% elif params.itemsList is defined and params.itemsList %}
-        {{
-            onsList({
-                "element": 'ol',
-                "classes": 'ons-u-mb-m',
-                "variants": 'dashed',
-                "itemsList": params.itemsList
-            })
-        }}
-      {% endif %}
+      	<h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
+		{% if params.lists is defined and params.lists %}
+			{% for list in params.lists %}
+			{% if list.listHeading is defined and list.listHeading %}
+				<h3 class="ons-u-fs-r ons-u-mb-xs">{{ list.listHeading }}<span class="ons-u-vh"> {{ list.listHeadingHidden }}</span>:</h3>
+			{% endif %}
+			{{
+				onsList({
+					"element": 'ol',
+					"classes": 'ons-u-mb-m',
+					"variants": 'dashed',
+					"itemsList": list.itemsList
+				})
+			}}
+			{% endfor %}
+		{% elif params.itemsList is defined and params.itemsList %}
+			{{
+				onsList({
+					"element": 'ol',
+					"classes": 'ons-u-mb-m',
+					"variants": 'dashed',
+					"itemsList": params.itemsList
+				})
+			}}
+		{% endif %}
     </nav>
-  </aside>
+</aside>
 {% endmacro %}

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

@@ -0,0 +1,178 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+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: [],
+};
+
+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',
+    },
+  ],
+};
+
+const EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE = {
+  title: 'Contents',
+  lists: [
+    {
+      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',
+        },
+      ],
+    },
+  ],
+};
+
+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');
+  });
+
+  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();
+    });
+
+    it('outputs `skip-to-content` component', () => {
+      const faker = templateFaker();
+      const skipToContentSpy = faker.spy('skip-to-content');
+
+      faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SKIP_LINK);
+
+      expect(skipToContentSpy.occurrences[0]).toEqual({
+        url: '#the-content',
+        text: 'Skip to guide content',
+      });
+    });
+  });
+
+  describe('single list', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('outputs `lists` component', () => {
+      const faker = templateFaker();
+      const listsSpy = faker.spy('lists');
+
+      faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE);
+
+      expect(listsSpy.occurrences[0]).toEqual({
+        element: 'ol',
+        classes: 'ons-u-mb-m',
+        variants: 'dashed',
+        itemsList: EXAMPLE_TABLE_OF_CONTENTS_SINGLE.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('lists');
+
+      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.js

@@ -1,35 +1,39 @@
 export default class Toc {
   constructor(component) {
     this.component = component;
-    this.page = this.component.closest('html');
-    this.headings = this.component.querySelectorAll('section[id]');
-    this.observerOptions = {
-      root: null,
-      rootMargin: '0px 0px -70% 0px',
-      threshold: [0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
-    };
-
-    this.observe = new IntersectionObserver(this.setCurrent, this.observerOptions);
-    this.addIntersectionObserver();
+    this.sections = [...this.component.querySelectorAll('section[id]')];
+    this.refreshIntervalId = setInterval(() => this.setCurrent(), 100);
+    this.setCurrent();
   }
 
-  addIntersectionObserver() {
-    this.headings.forEach(heading => {
-      this.observe.observe(heading);
-    });
-  }
+  setCurrent() {
+    let activeSection = this.sections[0];
+    for (let section of this.sections) {
+      const top = section.getBoundingClientRect().top;
+      if (top > 100) {
+        break;
+      }
+
+      activeSection = section;
+
+      if (top >= 0 && top <= 100) {
+        break;
+      }
+    }
+
+    if (activeSection === this.activeSection) {
+      return;
+    }
+
+    this.activeSection = activeSection;
 
-  setCurrent(event) {
-    event.map(element => {
-      const position = element.boundingClientRect;
-      const link = document.querySelector(`.ons-toc li a[href="#${element.target.id}"]`);
-      if (link) {
-        link.classList[element.isIntersecting === true && position.top < 70 && position.top > -100 ? 'add' : '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 {
-        console.warn(`element ".ons-toc li a[href="#${element.target.id}"]" is missing`);
+        tocItem.classList.remove('ons-toc__link-active');
       }
-    });
+    }
   }
 }

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

@@ -0,0 +1,61 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+describe('script: table-of-contents', () => {
+  beforeEach(async () => {
+    await setTestPage(
+      '/test',
+      `
+      <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',
+                },
+              ],
+            })}
+          </div>
+          <div class="ons-grid__col ons-col-7@m ons-push-1@m">
+            <section id="section1">
+              <h2>First section</h2>
+              <p>${'<br/>'.repeat(20)}</p>
+            </section>
+            <section id="section2">
+              <h2>Second section</h2>
+              <p>${'<br/>'.repeat(10)}</p>
+            </section>
+            <section id="section3">
+              <h2>Third section</h2>
+              <p>${'<br/>'.repeat(50)}</p>
+            </section>
+          </div>
+        </div>
+      </div>
+      `,
+    );
+  });
+
+  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);
+  });
+});

package/components/tabs/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsTabs(params) %}
-    <section role="region" class="ons-tabs">
+    <section class="ons-tabs">
         <h2 class="ons-tabs__title">{{params.title}}</h2>
         <ul class="ons-tabs__list">
             {% for tab in params.tabs %}

package/components/tabs/_macro.spec.js

@@ -0,0 +1,79 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TABS = {
+  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));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `title`', () => {
+    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+
+    expect(
+      $('.ons-tabs__title')
+        .text()
+        .trim(),
+    ).toBe('Example tabs');
+  });
+
+  it('has expected label text in tab links', () => {
+    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+
+    expect(
+      $('.ons-tab:first')
+        .text()
+        .trim(),
+    ).toBe('Tab 1');
+    expect(
+      $('.ons-tab:last')
+        .text()
+        .trim(),
+    ).toBe('Tab 2');
+  });
+
+  it('has Google Analytics integration on tab links', () => {
+    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+
+    const tabItem = $('.ons-tab');
+    expect(tabItem.attr('data-ga')).toBe('click');
+    expect(tabItem.attr('data-ga-category')).toBe('tabs');
+    expect(tabItem.attr('data-ga-action')).toBe('Show: Tab 1');
+    expect(tabItem.attr('data-ga-label')).toBe('Show: Tab 1');
+  });
+
+  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>...');
+  });
+});