@ons/design-system 52.0.0 → 53.0.2

package/components/icons/_macro.spec.js

@@ -32,9 +32,8 @@ describe('macro: icons', () => {
     'ons-logo-cy',
     'ons-logo-stacked-en',
     'ons-logo-stacked-cy',
-    'nisra-logo-en',
-    'nisra-logo-en-mobile',
-    'nisra-logo-black-en',
+    'nisra-logo',
+    'nisra-logo-mobile',
     'ni-finance-logo',
     'ni-finance-logo-mobile',
     'crest',
@@ -104,13 +103,14 @@ describe('macro: icons', () => {
     ['ons-logo-cy', 'Logo Swyddfa Ystadegau Gwladol'],
     ['ons-logo-stacked-en', 'Office for National Statistics logo'],
     ['ons-logo-stacked-cy', 'Logo Swyddfa Ystadegau Gwladol'],
-    ['nisra-logo-en', 'Nisra logo'],
-    ['nisra-logo-en-mobile', 'Nisra logo'],
-    ['nisra-logo-black-en', 'Nisra logo'],
+    ['nisra-logo', 'Nisra logo'],
+    ['nisra-logo-mobile', 'Nisra logo'],
     ['ni-finance-logo', 'Northern Ireland Department of Finance logo'],
     ['ni-finance-logo-mobile', 'Northern Ireland Department of Finance logo'],
     ['crest', 'Royal coat of arms of the United Kingdom'],
     ['ogl', 'Open Government License logo'],
+    ['hm-gov-logo-en', 'HM Government logo'],
+    ['hm-gov-logo-cy', 'Logo Llywodraeth EM'],
   ])('icon type: %s', (iconType, expectedAltText) => {
     it(`has default alt text '${expectedAltText}'`, () => {
       const $ = cheerio.load(renderComponent('icons', { iconType }));

package/components/input/_input.scss

@@ -128,6 +128,7 @@
 
 .ons-input-search {
   @extend .ons-input--block;
+  @extend .ons-input--ghost;
 
   &--icon {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z'/%3E%3C/svg%3E");
@@ -147,4 +148,11 @@
       box-shadow: 0 0 0 3px $color-focus;
     }
   }
+
+  &--dark {
+    border: 2px solid $color-black;
+    &.ons-input-search--icon {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z'/%3E%3C/svg%3E");
+    }
+  }
 }

package/components/language-selector/_macro.njk

@@ -5,7 +5,7 @@
     <ul class="ons-language-links{% if languageNumber and languageNumber != 2 %} ons-u-d-no@xxs@m{% endif %}">
         {% for language in alternativeLanguages %}
             <li class="ons-language-links__item">
-                <a href="{{ language.url }}" lang="{{ language.ISOCode }}" {% if language.attributes is defined and language.attributes %}{% for attribute, value in (language.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>{{ language.text }}</a>
+                <a href="{{ language.url }}" lang="{{ language.ISOCode }}" {% if language.attributes is defined and language.attributes %}{% for attribute, value in (language.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>{% if language.abbrText %}<span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@xxs@s">{{ language.text }}</span>{% else %}{{ language.text }}{% endif %}</a>
             </li>
         {% endfor %}
     </ul>

package/components/language-selector/_macro.spec.js

@@ -11,12 +11,14 @@ const EXAMPLE_WITH_TWO_LANGUAGES = {
       url: '/english',
       ISOCode: 'en',
       text: 'English',
+      abbrText: 'EN',
       current: true,
     },
     {
       url: '/cymraeg',
       ISOCode: 'cy',
       text: 'Cymraeg',
+      abbrText: 'CY',
       current: false,
       attributes: {
         a: 123,
@@ -68,7 +70,7 @@ describe('macro: language-selector', () => {
     it('does not show the current language', () => {
       const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      expect($('.ons-language-links__item a').text()).toBe('Cymraeg');
+      expect($('.ons-language-links__item a span:last-child').text()).toBe('Cymraeg');
     });
 
     it('has the expected hyperlink URL', async () => {
@@ -96,6 +98,12 @@ describe('macro: language-selector', () => {
 
       expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(false);
     });
+
+    it('has the `abbrText` rendered', () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+
+      expect($('.ons-language-links__item a span:first-child').text()).toBe('CY');
+    });
   });
 
   describe('mode: with three languages', () => {

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-navigation--main 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 {{ 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 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 }}">
+            <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) }}">
+                        {% 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-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

@@ -83,20 +83,20 @@ const SITE_SEARCH_AUTOSUGGEST = {
 describe('macro: navigation', () => {
   describe('level: container', () => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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', { ...PARAMS, fullWidth: true }));
+      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', { ...PARAMS, wide: true }));
+      const $ = cheerio.load(renderComponent('navigation', { navigation: { ...PARAMS, wide: true } }));
 
       expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
     });
@@ -106,9 +106,11 @@ describe('macro: navigation', () => {
       const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true });
 
       faker.renderComponent('navigation', {
-        ...PARAMS,
-        siteSearchAutosuggest: {
-          ...SITE_SEARCH_AUTOSUGGEST,
+        navigation: {
+          ...PARAMS,
+          siteSearchAutosuggest: {
+            ...SITE_SEARCH_AUTOSUGGEST,
+          },
         },
       });
 
@@ -118,11 +120,11 @@ describe('macro: navigation', () => {
         autocomplete: 'off',
         id: 'ons-site-search',
         containerClasses: 'ons-autosuggest-input--header',
-        classes: 'ons-input--ghost ons-input-search ons-input-search--icon',
+        classes: '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',
+          classes: 'ons-u-pl-m ons-label--white',
         },
       });
     });
@@ -130,33 +132,33 @@ describe('macro: navigation', () => {
 
   describe('level: main navigation', () => {
     it('has the provided `id` attribute', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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(
@@ -165,7 +167,7 @@ describe('macro: navigation', () => {
     });
 
     it('has the provided id for each list item', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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(
@@ -174,7 +176,7 @@ describe('macro: navigation', () => {
     });
 
     it('has the active class on the correct item', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
       expect(
         $('.ons-navigation--main .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
@@ -187,7 +189,7 @@ describe('macro: navigation', () => {
       const faker = templateFaker();
       const buttonSpy = faker.spy('button', { suppressOutput: true });
 
-      faker.renderComponent('navigation', PARAMS);
+      faker.renderComponent('navigation', { navigation: PARAMS });
 
       expect(buttonSpy.occurrences).toContainEqual({
         text: 'Main nav item 2',
@@ -203,33 +205,33 @@ describe('macro: navigation', () => {
     });
 
     it('has the provided `id` attribute', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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(
@@ -238,7 +240,7 @@ describe('macro: navigation', () => {
     });
 
     it('has the provided id for each list item', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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(
@@ -247,7 +249,7 @@ describe('macro: navigation', () => {
     });
 
     it('has the active class on the correct item', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
       expect(
         $('.ons-navigation--sub .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
@@ -257,19 +259,19 @@ describe('macro: navigation', () => {
 
   describe('level: sub navigation mobile', () => {
     it('has the provided `id` attribute', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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'),
@@ -279,7 +281,7 @@ describe('macro: navigation', () => {
     });
 
     it('has the correct link text for each list item', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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'),
@@ -289,7 +291,7 @@ describe('macro: navigation', () => {
     });
 
     it('has the active class on the correct item', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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'),
@@ -297,27 +299,27 @@ describe('macro: navigation', () => {
     });
 
     it('has the correct text for the child section title', () => {
-      const $ = cheerio.load(renderComponent('navigation', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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', PARAMS));
+      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'),

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/related-content/_macro.njk

@@ -1,23 +1,23 @@
 {% macro onsRelatedContent(params) %}
 
-{% from "components/lists/_macro.njk" import onsList %}
-
-{% if params is defined and params and params.classes is defined and params.classes %}
-  {% set classes = ' ' + params.classes %}
-{% endif %}
+  {% if params is defined and params and params.classes is defined and params.classes %}
+    {% set classes = ' ' + params.classes %}
+  {% endif %}
 
   <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
 
     <div class="ons-related-content__body">
-
       {% if params.rows is defined and params.rows %}
-
         {% for row in params.rows %}
-          <div class="ons-related-content__section">
-            {% if row.title %}
-              <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="{{ row.id }}">{{ row.title }}</h2>
-            {% endif %}
+          {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
+          {% call onsRelatedContentSection(
+            {
+              "title": row.title,
+              "id": row.id
+            }
+          ) %}            
             <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
+              {% from "components/lists/_macro.njk" import onsList %}
               {{
                 onsList({
                   "variants": 'bare',
@@ -28,19 +28,11 @@
                 })
               }}
             </nav>
-          </div>
+          {% endcall %}
         {% endfor %}
-
       {% else %}
-
-        <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</h2>
-
-        <div class="ons-related-content__body">
-          {{ (params.body if params else "") | safe }}{{ caller() if caller }}
-        </div>
-
+        {{ caller() if caller }}
       {% endif %}
-
     </div>
 
   </aside>