@ons/design-system 50.0.1 → 53.0.0

package/components/navigation/_macro.njk

@@ -1,40 +1,47 @@
 {% macro onsNavigation(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
-    <div class="ons-navigation-wrapper">
-        <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-            {% if params.siteSearchAutosuggest is defined and params.siteSearchAutosuggest and isPatternLib is defined and isPatternLib %}
+    <div class="ons-navigation-wrapper{% if params.variants == 'neutral' %} ons-navigation-wrapper--neutral{% endif %}">
+        <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
+            {% if params.navigation.siteSearchAutosuggest is defined and params.navigation.siteSearchAutosuggest and isPatternLib is defined and isPatternLib %}
                 <div class="ons-navigation-search ons-js-navigation-search">
+                    {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
+                    {% set autosuggestLabelClasses = "ons-u-pl-m" %}
+                    {% if params.variants == "neutral" %}
+                        {% set autosuggestClasses = autosuggestClasses + ' ons-input-search--dark' %}
+                    {% else %}
+                        {% set autosuggestLabelClasses = autosuggestLabelClasses + ' ons-label--white' %}
+                    {% endif %}
                     {{ onsAutosuggest({
                         "id": "ons-site-search",
                         "containerClasses": "ons-autosuggest-input--header",
-                        "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
+                        "classes": autosuggestClasses,
                         "label": {
-                            "text": params.siteSearchAutosuggest.label,
+                            "text": params.navigation.siteSearchAutosuggest.label,
                             "id": "ons-site-search-label",
-                            "classes": "ons-label--white ons-u-pl-m"
+                            "classes": autosuggestLabelClasses
                         },
                         "accessiblePlaceholder": true,
                         "autocomplete": "off",
-                        "instructions": params.siteSearchAutosuggest.instructions,
-                        "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
-                        "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
-                        "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
-                        "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
-                        "ariaNResults": params.siteSearchAutosuggest.ariaNResults,
-                        "ariaLimitedResults": params.siteSearchAutosuggest.ariaLimitedResults,
-                        "moreResults": params.siteSearchAutosuggest.moreResults,
-                        "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
-                        "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
-                        "noResults": params.siteSearchAutosuggest.noResults,
-                        "typeMore": params.siteSearchAutosuggest.typeMore
+                        "instructions": params.navigation.siteSearchAutosuggest.instructions,
+                        "ariaYouHaveSelected":params.navigation.siteSearchAutosuggest.ariaYouHaveSelected,
+                        "ariaMinChars": params.navigation.siteSearchAutosuggest.ariaMinChars,
+                        "ariaResultsLabel": params.navigation.siteSearchAutosuggest.ariaResultsLabel,
+                        "ariaOneResult": params.navigation.siteSearchAutosuggest.ariaOneResult,
+                        "ariaNResults": params.navigation.siteSearchAutosuggest.ariaNResults,
+                        "ariaLimitedResults": params.navigation.siteSearchAutosuggest.ariaLimitedResults,
+                        "moreResults": params.navigation.siteSearchAutosuggest.moreResults,
+                        "resultsTitle": params.navigation.siteSearchAutosuggest.resultsTitle,
+                        "autosuggestData": params.navigation.siteSearchAutosuggest.autosuggestData,
+                        "noResults": params.navigation.siteSearchAutosuggest.noResults,
+                        "typeMore": params.navigation.siteSearchAutosuggest.typeMore
                     }) }}
                 </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.navigation.id }}" aria-label="{{ params.navigation.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) }}">
+                    {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
+                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                             <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
@@ -42,45 +49,45 @@
             </nav>
         </div>
     </div>
-    {% if params.subNavigation is defined and params.subNavigation %}
-        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.subNavigation.classes if params.subNavigation.classes is defined and params.subNavigation.classes }}" id="{{ params.subNavigation.id }}" 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 }}">
+    {% if params.navigation.subNavigation is defined and params.navigation.subNavigation %}
+        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes is defined and params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.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.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.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) }}">
+                    {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
+                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.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 %}
                 </ul>
             </div>
         </nav>
-        <div class="ons-u-d-no@l{{ ' ' + params.subNavigation.classes if params.subNavigation.classes is defined and params.subNavigation.classes }}">
+        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes is defined and params.navigation.subNavigation.classes }}">
             {{ onsButton({
-                "text": params.currentPageTitle,
+                "text": params.navigation.currentPageTitle,
                 "classes": "ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown",
                 "buttonStyle": "mobile",
                 "attributes": {
                     "aria-label": "Toggle section navigation",
-                    "aria-controls": params.subNavigation.id,
+                    "aria-controls": params.navigation.subNavigation.id,
                     "aria-haspopup": "true",
                     "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">
-                <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">
+            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs" id="{{ params.navigation.subNavigation.id }}--mobile" aria-hidden="true" aria-label="{{ params.navigation.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.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
+                    <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>
+                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}">{{ params.navigation.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>
+                        {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
+                            <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
+                                <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) }}">
+                                                <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.subNavigation.currentPath) or (child.url != (params.navigation.subNavigation.sitsiteBasePatheBasePath | default('/')) and child.url in params.navigation.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>
                                                 </li>
                                             {% endfor %}

package/components/navigation/_macro.spec.js

@@ -0,0 +1,329 @@
+/** @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', { navigation: PARAMS }));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the correct container if `fullWidth`', () => {
+      const $ = cheerio.load(renderComponent('navigation', { 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', { 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', {
+        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-search ons-input-search--icon',
+        label: {
+          text: 'Search the design system',
+          id: 'ons-site-search-label',
+          classes: 'ons-u-pl-m ons-label--white',
+        },
+      });
+    });
+  });
+
+  describe('level: main navigation', () => {
+    it('has the provided `id` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
+
+      expect($('.ons-navigation--main').attr('id')).toBe('main-nav');
+    });
+
+    it('has the provided `aria-label` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { navigation: PARAMS }));
+
+      expect($('.ons-navigation--sub').attr('id')).toBe('sub-nav');
+    });
+
+    it('has the provided `aria-label` attribute', () => {
+      const $ = cheerio.load(renderComponent('navigation', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { 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', { 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.scss

@@ -18,6 +18,7 @@
     padding: 1rem;
 
     @include mq(l) {
+      background: none;
       bottom: 65px;
       padding: 0;
       position: absolute;
@@ -80,7 +81,7 @@
       .ons-navigation--sub & {
         &:hover,
         &--active {
-          border-color: $color-text-link;
+          border-color: $color-branded;
         }
       }
     }
@@ -89,8 +90,8 @@
   &__link {
     color: $color-white;
     display: block;
-    margin: 0 0.35rem;
-    padding: 0.1rem 0.55rem;
+    margin: 0 0.75rem;
+    padding: 0.1rem 0;
     text-decoration: none;
 
     &--section {
@@ -109,7 +110,7 @@
       color: $color-text-link;
       &:hover,
       &:focus {
-        color: $color-text-link;
+        color: $color-text-link-hover;
       }
     }
 
@@ -124,4 +125,19 @@
   &__item--active > &__link {
     font-weight: 700;
   }
+
+  &-wrapper {
+    &--neutral {
+      background: $color-header-light;
+      .ons-navigation__item {
+        &--active,
+        &:hover {
+          border-color: $color-branded;
+        }
+        .ons-navigation__link {
+          color: $color-branded-text;
+        }
+      }
+    }
+  }
 }

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