@ons/design-system 50.0.0 → 52.0.0

package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js

@@ -0,0 +1,131 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS = {
+  id: 'feedback',
+  name: 'feedback',
+  width: '30',
+  legend: 'What do you think of this service?',
+  label: {
+    text: 'Enter your feedback',
+    description: 'For example describe any difficulties you experienced in the use of this service',
+  },
+  charCheckLimit: {
+    limit: 200,
+    charCountSingular: 'You have {x} character remaining',
+    charCountPlural: 'You have {x} characters remaining',
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear your feedback',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'feedback-exclusive-option',
+        name: 'no-feedback',
+        value: 'no-feedback',
+        label: {
+          text: 'I dont want to provide feedback',
+        },
+      },
+    ],
+  },
+};
+
+const FAKE_TEXTAREA_INPUT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+describe('script: mutually-exclusive', () => {
+  describe('textarea', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('textarea', EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS));
+    });
+
+    describe('Given the user populated the textarea', () => {
+      beforeEach(async () => {
+        await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#feedback-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#feedback-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the textarea should be cleared', async () => {
+          const textareaValue = await page.$eval('#feedback', node => node.value);
+          expect(textareaValue).toBe('');
+        });
+
+        it('then the characters remaining readout should be reset', async () => {
+          const limitText = await page.$eval('#feedback-lim-remaining', node => node.textContent);
+          expect(limitText).toBe('You have 200 characters remaining');
+        });
+
+        it('then the aria alert should tell the user that the textarea has been cleared', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('Enter your feedback cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusiveOption', () => {
+      beforeEach(async () => {
+        await page.click('#feedback-exclusive-option');
+      });
+
+      describe('when the user populates the textarea', () => {
+        beforeEach(async () => {
+          await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+        });
+
+        it('then the exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#feedback-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(false);
+        });
+
+        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('I dont want to provide feedback deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the textarea or checked the exclusive option', () => {
+      describe('when the user populates the textarea', () => {
+        beforeEach(async () => {
+          await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#feedback-exclusive-option');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
+});

package/components/navigation/_macro.njk

@@ -31,7 +31,7 @@
                     }) }}
                 </div>
             {% endif %}
-            <nav class="ons-navigation ons-js-navigation" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
+            <nav class="ons-navigation ons-navigation--main ons-js-navigation" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                 <ul class="ons-navigation__list">
                     {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.currentPath) or (item.url != (params.siteBasePath | default('/')) and item.url in params.currentPath) }}">
@@ -47,7 +47,7 @@
             <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in (params.subNavigation.itemsList if params.subNavigation.itemsList is iterable else params.subNavigation.itemsList.items()) %}
-                        <li class="ons-navigation__item ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.subNavigation.currentPath) or (item.url != (params.subNavigation.siteBasePath | default('/')) and item.url in params.subNavigation.currentPath) }}">
+                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.subNavigation.currentPath) or (item.url != (params.subNavigation.siteBasePath | default('/')) and item.url in params.subNavigation.currentPath) }}">
                             <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
@@ -66,19 +66,19 @@
                     "aria-expanded": "false"
                 }
             }) }}
-            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no proto-ons-js-secondary-nav ons-u-mt-xs" id="{{ params.subNavigation.id }}" aria-label="{{ params.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs" id="{{ params.subNavigation.id }}--mobile" aria-hidden="true" aria-label="{{ params.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
                 <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-                    <ul class="ons-navigation__list">
+                    <ul class="ons-navigation__list ons-navigation__list--parent">
                         <li class="ons-navigation__item">
                             <a class="ons-navigation__link" href="{{ params.subNavigation.overviewURL }}">{{ params.subNavigation.overviewText | default('Overview') }}</a>
                         </li>
                         {% for item in (params.subNavigation.itemsList if params.subNavigation.itemsList is iterable else params.subNavigation.itemsList.items()) %}
                             <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.subNavigation.currentPath) or (item.url != (params.subNavigation.siteBasePath | default('/')) and item.url in params.subNavigation.currentPath) }}">
-                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
                                 {% if item.sections %}
                                     {% for section in item.sections %}
                                         {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
-                                        <ul class="ons-navigation__list ons-list--dashed ons-u-ml-s ons-u-mt-xs">
+                                        <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
                                             {% for child in section.children %}
                                                 <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.subNavigation.currentPath) or (child.url != (params.subNavigation.sitsiteBasePatheBasePath | default('/')) and child.url in params.subNavigation.currentPath) }}">
                                                     <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>

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');