@ons/design-system 50.0.1 → 51.0.0

package/components/navigation/_macro.spec.js

@@ -0,0 +1,327 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+import { mapAll } from '../../tests/helpers/cheerio';
+
+const PARAMS = {
+  id: 'main-nav',
+  ariaLabel: 'Main menu',
+  currentPath: '#1',
+  currentPageTitle: 'Main nav item 2',
+  itemsList: [
+    {
+      title: 'Main nav item 1',
+      url: '#0',
+      classes: 'custom-class-main-item-1',
+      id: 'main-item-1',
+    },
+    {
+      title: 'Main nav item 2',
+      url: '#1',
+      classes: 'custom-class-main-item-2',
+      id: 'main-item-2',
+    },
+  ],
+  subNavigation: {
+    id: 'sub-nav',
+    overviewURL: '#overview',
+    overviewText: 'Overview',
+    ariaLabel: 'Section menu',
+    currentPath: '#1',
+    itemsList: [
+      {
+        title: 'Sub nav item 1',
+        url: '#0',
+        classes: 'custom-class-sub-item-1',
+        id: 'sub-item-1',
+      },
+      {
+        title: 'Sub nav item 2',
+        url: '#1',
+        classes: 'custom-class-sub-item-2',
+        id: 'sub-item-2',
+        sections: [
+          {
+            sectionTitle: 'Section 1',
+            children: [
+              {
+                title: 'Child item 1',
+                url: '#0',
+              },
+              {
+                title: 'Child item 2',
+                url: '#1',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+const SITE_SEARCH_AUTOSUGGEST = {
+  label: 'Search the design system',
+  instructions:
+    "Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.",
+  ariaYouHaveSelected: 'You have selected',
+  ariaMinChars: 'Enter 3 or more characters for results.',
+  ariaResultsLabel: 'Search results',
+  ariaOneResult: 'There is one result available.',
+  ariaNResults: 'There are {n} results available.',
+  ariaLimitedResults: 'Results have been limited to 10 results. Type more characters to improve your search',
+  moreResults: 'Continue entering to improve results',
+  resultsTitle: 'Search results',
+  autosuggestData: '/search-index.json',
+  noResults: 'No results found',
+  typeMore: 'Continue entering to get results',
+};
+
+describe('macro: navigation', () => {
+  describe('level: container', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the correct container if `fullWidth`', () => {
+      const $ = cheerio.load(renderComponent('navigation', { ...PARAMS, fullWidth: true }));
+
+      expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+    });
+
+    it('has the correct container if `wide`', () => {
+      const $ = cheerio.load(renderComponent('navigation', { ...PARAMS, wide: true }));
+
+      expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('has the search autosuggest with correct output', () => {
+      const faker = templateFaker();
+      const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true });
+
+      faker.renderComponent('navigation', {
+        ...PARAMS,
+        siteSearchAutosuggest: {
+          ...SITE_SEARCH_AUTOSUGGEST,
+        },
+      });
+
+      expect(autosuggestSpy.occurrences[0]).toEqual({
+        ...SITE_SEARCH_AUTOSUGGEST,
+        accessiblePlaceholder: true,
+        autocomplete: 'off',
+        id: 'ons-site-search',
+        containerClasses: 'ons-autosuggest-input--header',
+        classes: 'ons-input--ghost ons-input-search ons-input-search--icon',
+        label: {
+          text: 'Search the design system',
+          id: 'ons-site-search-label',
+          classes: 'ons-label--white ons-u-pl-m',
+        },
+      });
+    });
+  });
+
+  describe('level: main navigation', () => {
+    it('has the provided `id` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--main').attr('id')).toBe('main-nav');
+    });
+
+    it('has the provided `aria-label` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--main').attr('aria-label')).toBe('Main menu');
+    });
+
+    it('has the correct link href for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('href'));
+      expect(values).toEqual(['#0', '#1']);
+    });
+
+    it('has the correct link text for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.text().trim());
+      expect(values).toEqual(['Main nav item 1', 'Main nav item 2']);
+    });
+
+    it('has the provided custom class for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--main .ons-navigation__list > .ons-navigation__item').hasClass('custom-class-main-item-1')).toBe(true);
+      expect($('.ons-navigation--main .ons-navigation__list .ons-navigation__item:last-child').hasClass('custom-class-main-item-2')).toBe(
+        true,
+      );
+    });
+
+    it('has the provided id for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--main .ons-navigation__list > .ons-navigation__item .ons-navigation__link').attr('id')).toBe('main-item-1');
+      expect($('.ons-navigation--main .ons-navigation__list .ons-navigation__item:last-child .ons-navigation__link').attr('id')).toBe(
+        'main-item-2',
+      );
+    });
+
+    it('has the active class on the correct item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect(
+        $('.ons-navigation--main .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
+      ).toBe(true);
+    });
+  });
+
+  describe('level: sub navigation', () => {
+    it('renders a button with expected parameters', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button', { suppressOutput: true });
+
+      faker.renderComponent('navigation', PARAMS);
+
+      expect(buttonSpy.occurrences).toContainEqual({
+        text: 'Main nav item 2',
+        classes: 'ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown',
+        buttonStyle: 'mobile',
+        attributes: {
+          'aria-label': 'Toggle section navigation',
+          'aria-controls': 'sub-nav',
+          'aria-haspopup': 'true',
+          'aria-expanded': 'false',
+        },
+      });
+    });
+
+    it('has the provided `id` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--sub').attr('id')).toBe('sub-nav');
+    });
+
+    it('has the provided `aria-label` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--sub').attr('aria-label')).toBe('Section menu');
+    });
+
+    it('has the correct link href for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('href'));
+      expect(values).toEqual(['#0', '#1']);
+    });
+
+    it('has the correct link text for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.text().trim());
+      expect(values).toEqual(['Sub nav item 1', 'Sub nav item 2']);
+    });
+
+    it('has the provided custom class for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--sub .ons-navigation__list > .ons-navigation__item').hasClass('custom-class-sub-item-1')).toBe(true);
+      expect($('.ons-navigation--sub .ons-navigation__list .ons-navigation__item:last-child').hasClass('custom-class-sub-item-2')).toBe(
+        true,
+      );
+    });
+
+    it('has the provided id for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--sub .ons-navigation__list > .ons-navigation__item .ons-navigation__link').attr('id')).toBe('sub-item-1');
+      expect($('.ons-navigation--sub .ons-navigation__list .ons-navigation__item:last-child .ons-navigation__link').attr('id')).toBe(
+        'sub-item-2',
+      );
+    });
+
+    it('has the active class on the correct item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect(
+        $('.ons-navigation--sub .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
+      ).toBe(true);
+    });
+  });
+
+  describe('level: sub navigation mobile', () => {
+    it('has the provided `id` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--sub-mobile').attr('id')).toBe('sub-nav--mobile');
+    });
+
+    it('has the provided `aria-label` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation--sub-mobile').attr('aria-label')).toBe('Section menu');
+    });
+
+    it('has the correct link href for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const values = mapAll(
+        $('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
+        node => node.attr('href'),
+      );
+      expect(values).toEqual(['#overview', '#0', '#1']);
+    });
+
+    it('has the correct link text for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const values = mapAll(
+        $('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
+        node => node.text().trim(),
+      );
+      expect(values).toEqual(['Overview', 'Sub nav item 1', 'Sub nav item 2']);
+    });
+
+    it('has the active class on the correct item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect(
+        $('.ons-navigation--sub-mobile .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
+      ).toBe(true);
+    });
+
+    it('has the correct text for the child section title', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect($('.ons-navigation__list-header').text()).toBe('Section 1');
+    });
+
+    it('has the correct link href for each child list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const values = mapAll($('.ons-navigation__list--child > li a'), node => node.attr('href'));
+      expect(values).toEqual(['#0', '#1']);
+    });
+
+    it('has the correct link text for each child list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      const values = mapAll($('.ons-navigation__list--child > li a'), node => node.text().trim());
+      expect(values).toEqual(['Child item 1', 'Child item 2']);
+    });
+
+    it('has the active class on the correct child item', () => {
+      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+
+      expect(
+        $('.ons-navigation--sub-mobile .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
+      ).toBe(true);
+    });
+  });
+});

package/components/navigation/navigation.dom.js

@@ -5,7 +5,7 @@ domready(async () => {
   const navigationEl = document.querySelector('.ons-js-navigation');
   const navigationHideClass = 'ons-u-d-no@xxs@l';
   const toggleSubNavigationBtn = document.querySelector('.ons-js-sub-navigation-button');
-  const subNavigationEl = document.querySelector('.proto-ons-js-secondary-nav');
+  const subNavigationEl = document.querySelector('.ons-js-secondary-nav');
   const subNavigationHideClass = 'ons-u-d-no';
   const toggleSearchBtn = document.querySelector('.ons-js-toggle-search');
   const searchEl = document.querySelector('.ons-js-navigation-search');

package/components/navigation/navigation.spec.js

@@ -0,0 +1,232 @@
+import { setViewport } from '../../tests/helpers/puppeteer';
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_NAVIGATION = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#0',
+    itemsList: [
+      {
+        title: 'Main nav item 1',
+        url: '#0',
+        classes: 'custom-class-main-item-1',
+        id: 'main-item-1',
+      },
+      {
+        title: 'Main nav item 2',
+        url: '#1',
+        classes: 'custom-class-main-item-2',
+        id: 'main-item-2',
+      },
+    ],
+    toggleNavigationButton: {
+      text: 'Menu',
+      ariaLabel: 'Toggle main navigation',
+    },
+  },
+};
+
+const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#1',
+    currentPageTitle: 'Main nav item 2',
+    itemsList: [
+      {
+        title: 'Main nav item 1',
+        url: '#0',
+        classes: 'custom-class-main-item-1',
+        id: 'main-item-1',
+      },
+      {
+        title: 'Main nav item 2',
+        url: '#1',
+        classes: 'custom-class-main-item-2',
+        id: 'main-item-2',
+      },
+    ],
+    subNavigation: {
+      id: 'sub-nav',
+      overviewURL: '#overview',
+      overviewText: 'Overview',
+      ariaLabel: 'Section menu',
+      currentPath: '#1',
+      itemsList: [
+        {
+          title: 'Sub nav item 1',
+          url: '#0',
+          classes: 'custom-class-sub-item-1',
+          id: 'sub-item-1',
+        },
+        {
+          title: 'Sub nav item 2',
+          url: '#1',
+          classes: 'custom-class-sub-item-2',
+          id: 'sub-item-2',
+          sections: [
+            {
+              sectionTitle: 'Section 1',
+              children: [
+                {
+                  title: 'Child item 1',
+                  url: '#0',
+                },
+                {
+                  title: 'Child item 2',
+                  url: '#1',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+describe('script: navigation', () => {
+  afterEach(async () => {
+    // Clear viewport size and browser emulation after each test.
+    await jestPuppeteer.resetPage();
+  });
+
+  describe.each([
+    ['main', EXAMPLE_NAVIGATION, '.ons-navigation--main', '.ons-js-navigation-button', false],
+    ['sub', EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION, '.ons-navigation--sub-mobile', '.ons-js-sub-navigation-button', true],
+  ])('level: %s navigation', (_, params, navEl, buttonEl, ariaStatus) => {
+    describe('when the component initialises', () => {
+      beforeEach(async () => {
+        await setTestPage('/test', renderComponent('header', params));
+      });
+
+      it('has removed the display class from the menu toggle button', async () => {
+        const hasClass = await page.$eval(buttonEl, node => node.classList.contains('ons-u-d-no'));
+        expect(hasClass).toBe(false);
+      });
+    });
+
+    describe('when the viewport is large', () => {
+      beforeEach(async () => {
+        await setViewport(page, { width: 1650, height: 1050 });
+        await setTestPage('/test', renderComponent('header', params));
+      });
+
+      it('has the correct aria hidden attribute on the navigation list', async () => {
+        const nav = await page.$(navEl);
+        const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null);
+        expect(hasAriaAttribute).toBe(ariaStatus);
+      });
+
+      it('has aria-expanded set as `false` on the navigation toggle button', async () => {
+        const button = await page.$(buttonEl);
+        const ariaExpandedIsFalse = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false');
+        expect(ariaExpandedIsFalse).toBe(true);
+      });
+    });
+
+    describe('when the viewport is small', () => {
+      beforeEach(async () => {
+        await setViewport(page, { width: 600, height: 1050 });
+        await setTestPage('/test', renderComponent('header', params));
+      });
+
+      it('has aria-hidden set as `true` on the navigation list', async () => {
+        const nav = await page.$(navEl);
+        const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true');
+        expect(hasAriaAttribute).toBe(true);
+      });
+
+      describe('when the toggle button is clicked to open the navigation list', () => {
+        beforeEach(async () => {
+          await page.focus(buttonEl);
+          await page.keyboard.press('Enter');
+        });
+
+        it('has aria-hidden set as `false` on the navigation list', async () => {
+          const nav = await page.$(navEl);
+          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'false');
+          expect(hasAriaAttribute).toBe(true);
+        });
+
+        it('has the hide class removed from the navigation list', async () => {
+          const hasClass = await page.$eval(navEl, node =>
+            node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
+          );
+          expect(hasClass).toBe(false);
+        });
+
+        it('has aria-expanded set as `true` on the navigation toggle button', async () => {
+          const button = await page.$(buttonEl);
+          const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'true');
+          expect(ariaExpandedIsTrue).toBe(true);
+        });
+
+        it('has the correct class applied to the navigation toggle button', async () => {
+          const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active'));
+          expect(hasClass).toBe(true);
+        });
+      });
+
+      describe('when the toggle button is clicked to close the navigation list', () => {
+        beforeEach(async () => {
+          await page.focus(buttonEl);
+          await page.keyboard.press('Enter');
+          await page.waitForTimeout(100);
+          await page.keyboard.press('Enter');
+          await page.waitForTimeout(100);
+        });
+
+        it('has aria-hidden set as `true` on the navigation list', async () => {
+          const nav = await page.$(navEl);
+          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true');
+          expect(hasAriaAttribute).toBe(true);
+        });
+
+        it('has aria-expanded set as `false` on the navigation toggle button', async () => {
+          const button = await page.$(buttonEl);
+          const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false');
+          expect(ariaExpandedIsTrue).toBe(true);
+        });
+
+        it('has the active class removed from the navigation toggle button', async () => {
+          const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active'));
+          expect(hasClass).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe.each([['main', EXAMPLE_NAVIGATION, '.ons-navigation--main', '.ons-js-navigation-button']])(
+    'level: %s navigation',
+    (_, params, navEl, buttonEl) => {
+      describe('when the viewport is small and manually made wider', () => {
+        beforeEach(async () => {
+          await setViewport(page, { width: 600, height: 1050 });
+          await setTestPage('/test', renderComponent('header', params));
+          await setViewport(page, { width: 1200, height: 1050 });
+        });
+
+        it('has the aria-hidden attribute removed from the navigation list', async () => {
+          const nav = await page.$(navEl);
+          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null);
+          expect(hasAriaAttribute).toBe(false);
+        });
+
+        it('has aria-expanded removed from the navigation toggle button', async () => {
+          const button = await page.$(buttonEl);
+          const hasAriaExpanded = await button.evaluate(node => node.getAttribute('aria-expanded') !== null);
+          expect(hasAriaExpanded).toBe(false);
+        });
+
+        it('has the hide class removed from the navigation list', async () => {
+          const hasClass = await page.$eval(navEl, node =>
+            node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
+          );
+          expect(hasClass).toBe(false);
+        });
+      });
+    },
+  );
+});

package/components/pagination/_macro.njk

@@ -25,7 +25,7 @@
   {% endif %}
 
 
-  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator is defined and params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" arial-label="Pagination ({{ position }})">
+  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator is defined and params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
       <div class="ons-pagination__position">{{ position }}</div>
       <ul class="ons-pagination__items">
           {% if currentPageIndex != 1 %}