@ons/design-system 66.0.1 → 67.0.0

package/components/details/details.spec.js

@@ -1,4 +1,4 @@
-import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_DETAILS_BASIC = {
   id: 'details-id',
@@ -6,6 +6,22 @@ const EXAMPLE_DETAILS_BASIC = {
   content: 'Content for details',
 };
 
+const EXAMPLE_PAGE = `
+      ${renderComponent('details', {
+        id: 'details-id',
+        title: 'Title for details',
+        content: 'Content for details',
+      })}
+
+      ${renderComponent('details', {
+        id: 'details-id-2',
+        title: 'Title for details',
+        content: 'Content for details',
+      })}
+  `;
+
+const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
+
 describe('script: details', () => {
   it('begins open when specified', async () => {
     await setTestPage(
@@ -16,8 +32,8 @@ describe('script: details', () => {
       }),
     );
 
-    const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
-    expect(openAttribute).toBe(true);
+    const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+    expect(detailsOpenClass).toBe(true);
   });
 
   describe('when the details heading is clicked to open the details', () => {
@@ -26,18 +42,34 @@ describe('script: details', () => {
       await page.click('.ons-js-details-heading');
     });
 
-    it('sets the `open` attribute', async () => {
-      const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
-      expect(openAttribute).toBe(true);
+    it('sets the `open` attribute and adds the correct class', async () => {
+      const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+
+      expect(detailsOpenClass).toBe(true);
     });
 
     it('sets the `ga` attributes', async () => {
-      const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', element => element.getAttribute('data-ga-action'));
+      const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', (element) => element.getAttribute('data-ga-action'));
 
       expect(gaHeadingAttribute).toBe('Open panel');
     });
   });
 
+  describe('when there is more than one details component and a details heading is clicked to open the details', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', RENDERED_EXAMPLE_PAGE);
+      await page.click('#details-id > .ons-js-details-heading');
+    });
+
+    it('sets the `open` attribute and open class on the right component', async () => {
+      const detailsOpenClass = await page.$eval('#details-id', (node) => node.classList.contains('ons-details--open'));
+      const detailsOpenClass2 = await page.$eval('#details-id-2', (node) => node.classList.contains('ons-details--open'));
+
+      expect(detailsOpenClass).toBe(true);
+      expect(detailsOpenClass2).toBe(false);
+    });
+  });
+
   describe('when the details heading is focused', () => {
     beforeEach(async () => {
       await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC));
@@ -50,8 +82,8 @@ describe('script: details', () => {
       });
 
       it('opens the details content', async () => {
-        const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
-        expect(openAttribute).toBe(true);
+        const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+        expect(detailsOpenClass).toBe(true);
       });
     });
 
@@ -61,8 +93,8 @@ describe('script: details', () => {
       });
 
       it('opens the details content', async () => {
-        const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
-        expect(openAttribute).toBe(true);
+        const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+        expect(detailsOpenClass).toBe(true);
       });
     });
   });

package/components/details/example-details-with-warning.njk

@@ -1,8 +1,7 @@
 {% from "components/details/_macro.njk" import onsDetails %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{%
-    call onsDetails({
+{% call onsDetails({
         "id": "details-example-with-warning",
         "title": "Need to answer separately from your household?"
     })

package/components/footer/_macro.njk

@@ -179,7 +179,7 @@
                 {% endif %}
                 {% if params.copyrightDeclaration %}
                     <!-- Copyright -->
-                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">                                
+                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">
                         <div class="ons-grid__col">
                             <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
                         </div>

package/components/header/_macro.njk

@@ -88,7 +88,7 @@
                                 <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                     <nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                         <ul class="ons-header-service-nav__list">
-                                            {% for item in params.serviceLinks.itemsList %}                                                
+                                            {% for item in params.serviceLinks.itemsList %}
                                                 <li class="ons-header-service-nav__item">
                                                 {% if item.iconType %}
                                                     {{
@@ -139,7 +139,7 @@
             {% if params.serviceLinks %}
                 <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                     <ul class="ons-header-service-nav__list">
-                        {% for item in params.serviceLinks.itemsList %}                                                
+                        {% for item in params.serviceLinks.itemsList %}
                             <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                             {% if item.iconType %}
                                 {{

package/components/header/_macro.spec.js

@@ -161,6 +161,45 @@ const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = {
   },
 };
 
+const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#home',
+    itemsList: [
+      {
+        title: 'Home',
+        url: '#home',
+      },
+      {
+        title: 'Guidance',
+        url: '#0',
+      },
+    ],
+    toggleNavigationButton: {
+      text: 'Menu',
+      ariaLabel: 'Toggle main menu',
+    },
+  },
+  siteSearchAutosuggest: {
+    label: 'label',
+    instructions: 'Use up and down keys to navigate.',
+    ariaYouHaveSelected: 'You have selected',
+    ariaMinChars: 'Enter 3 or more characters for suggestions.',
+    minChars: 3,
+    ariaResultsLabel: 'Country suggestions',
+    ariaOneResult: 'There is one suggestion available.',
+    ariaNResults: 'There are {n} suggestions available.',
+    ariaLimitedResults: 'Type more characters to improve your search',
+    moreResults: 'Continue entering to improve suggestions',
+    resultsTitle: 'Suggestions',
+    resultsTitleId: 'country-of-birth-suggestions',
+    noResults: 'No suggestions found.',
+    typeMore: 'Continue entering to get suggestions',
+    language: 'en-gb',
+  },
+};
+
 describe('macro: header', () => {
   describe('mode: basic', () => {
     it('passes jest-axe checks', async () => {
@@ -453,21 +492,21 @@ describe('macro: header', () => {
     it('has the text for each list item', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LIST_ITEMS));
 
-      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), node => node.text().trim());
+      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), (node) => node.text().trim());
       expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']);
     });
 
     it('has the link text for each list item', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
-      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), node => node.text().trim());
+      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.text().trim());
       expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']);
     });
 
     it('has the link href for each list item', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
-      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), node => node.attr('href'));
+      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.attr('href'));
       expect(values).toEqual(['#1', '#2', '#3']);
     });
 
@@ -486,14 +525,14 @@ describe('macro: header', () => {
     it('has the link text for each list item for mobile', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
-      const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), node => node.text().trim());
+      const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.text().trim());
       expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']);
     });
 
     it('has the link href for each list item for mobile', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
-      const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), node => node.attr('href'));
+      const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.attr('href'));
       expect(values).toEqual(['#1', '#2', '#3']);
     });
 
@@ -742,3 +781,87 @@ describe('macro: header', () => {
     });
   });
 });
+
+describe('mode: with site search autosuggest', () => {
+  it('renders the search with expected parameters', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('autosuggest');
+
+    faker.renderComponent('header', EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST);
+
+    expect(buttonSpy.occurrences[0]).toEqual({
+      ariaLimitedResults: 'Type more characters to improve your search',
+      minChars: 3,
+      language: 'en-gb',
+      ariaMinChars: 'Enter 3 or more characters for suggestions.',
+      ariaNResults: 'There are {n} suggestions available.',
+      ariaOneResult: 'There is one suggestion available.',
+      ariaResultsLabel: 'Country suggestions',
+      ariaYouHaveSelected: 'You have selected',
+      containerClasses: 'ons-autosuggest--header',
+      id: 'ons-site-search',
+      input: {
+        accessiblePlaceholder: true,
+        autocomplete: 'off',
+        classes: 'ons-input-search ons-input-search--icon',
+        label: {
+          classes: 'ons-u-pl-m ons-label--white',
+          id: 'ons-site-search-label',
+          text: 'label',
+        },
+      },
+      instructions: 'Use up and down keys to navigate.',
+      moreResults: 'Continue entering to improve suggestions',
+      noResults: 'No suggestions found.',
+      resultsTitle: 'Suggestions',
+      typeMore: 'Continue entering to get suggestions',
+    });
+  });
+
+  describe('when the user inputs text', () => {
+    let $; // Initialize a Cheerio instance
+
+    const mockData = [
+      { en: 'England' },
+      { en: 'Wales' },
+      { en: 'Scotland' },
+      { en: 'United States of America' },
+      { en: 'United States Virgin Islands' },
+      { en: 'Åland Islands' },
+    ];
+
+    beforeEach(() => {
+      $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
+          autosuggestData: mockData,
+        }),
+      );
+    });
+
+    it('does not show suggestions when input length < minimum characters', () => {
+      $('.ons-js-autosuggest-input').val('En');
+
+      setTimeout(() => {
+        const suggestionCount = $('.ons-autosuggest__option').length;
+        expect(suggestionCount).toBe(0);
+      }, 20);
+    });
+
+    it('shows suggestions when input length >= minimum characters', () => {
+      $('.ons-js-autosuggest-input').val('Eng');
+
+      setTimeout(() => {
+        const suggestionCount = $('.ons-autosuggest__option').length;
+        expect(suggestionCount).toBe(1);
+      }, 20);
+    });
+
+    it('gets the language if set', () => {
+      $('.ons-js-autosuggest-input').val('Eng');
+
+      const autosuggestElement = $('.ons-js-autosuggest').attr('data-lang');
+      expect(autosuggestElement).toBe('en-gb');
+    });
+  });
+});

package/components/header/example-header-external-with-navigation-and-search.njk

@@ -0,0 +1,57 @@
+---
+"fullWidth": true
+---
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "title": 'Design system',
+        "titleUrl": '#0',
+        "navigation": {
+            "id": 'main-nav',
+            "ariaLabel": 'Main menu',
+            "currentPath": '#home',
+            "itemsList": [
+                {
+                    "text": 'Home',
+                    "url": '#home'
+                },
+                {
+                    "text": 'Guidance',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Foundations',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Components',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Patterns',
+                    "url": '#0'
+                }
+            ],
+            "toggleNavigationButton": {
+                "text": 'Menu',
+                "ariaLabel": 'Toggle main menu'
+            }
+        },
+           'siteSearchAutosuggest': {
+            "autosuggestData":  "/examples/data/country-of-birth.json",
+            "label": "search",
+            "instructions": "instructions",
+            "ariaYouHaveSelected": "ariaYouHaveSelected",
+            "ariaMinChars": "ariaMinChars",
+            "ariaResultsLabel": "ariaResultsLabel",
+            "ariaOneResult": "ariaOneResult",
+            "ariaNResults": "ariaNResults",
+            "ariaLimitedResults": "ariaLimitedResults",
+            "moreResults": "moreResults",
+            "resultsTitle": "resultsTitle",
+            "noResults": "noResults",
+            "typeMore": "typeMore"
+        }
+    })
+}}

package/components/icon/_macro.njk

@@ -72,9 +72,10 @@
             <path d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z"/>
         </svg>
     {% elif params.iconType == "twitter" %}
-        <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-            <path d="M24.04,12.95c0,0.17,0,0.33,0,0.5c0.01,4.01-2.17,7.71-5.69,9.64c-3.52,1.93-7.81,1.78-11.19-0.38c0.31,0.04,0.61,0.05,0.92,0.05c1.73,0,3.42-0.58,4.78-1.65c-1.65-0.04-3.09-1.11-3.6-2.68c0.25,0.05,0.51,0.07,0.76,0.07c0.34,0,0.68-0.05,1.01-0.14C9.23,18,7.93,16.4,7.95,14.55v-0.05c0.54,0.29,1.13,0.46,1.74,0.48c-1.66-1.12-2.2-3.33-1.23-5.08c1.96,2.41,4.85,3.87,7.95,4.03c-0.07-0.29-0.1-0.58-0.1-0.88c0-1.58,0.97-3,2.44-3.59c1.47-0.58,3.15-0.21,4.23,0.94c0.86-0.17,1.69-0.49,2.45-0.94c-0.28,0.9-0.88,1.65-1.69,2.13c0.76-0.09,1.51-0.29,2.21-0.6C25.43,11.76,24.79,12.42,24.04,12.95zM16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>
-        </svg>
+        <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0 90.01 90.01" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+	        <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01"/>
+	        <path d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z"/>
+	    </svg>
     {% elif params.iconType == "instagram" %}
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-instagram" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
             <path d="M21.34,9.46c0.66,0,1.2,0.54,1.2,1.2c0,0.66-0.54,1.2-1.2,1.2c-0.66,0-1.2-0.54-1.2-1.2C20.14,10,20.68,9.46,21.34,9.46z M16,12.67c-1.84,0-3.33,1.49-3.33,3.33c0,1.84,1.49,3.33,3.33,3.33c1.84,0,3.33-1.49,3.33-3.33C19.33,14.16,17.84,12.67,16,12.67z M16,10.86c2.84,0,5.14,2.3,5.14,5.14c0,2.84-2.3,5.14-5.14,5.14c-2.84,0-5.14-2.3-5.14-5.14C10.86,13.16,13.16,10.86,16,10.86z M16.56,7.8h-1.11c-2.17,0-2.51,0.01-3.49,0.06c-0.97,0.04-1.5,0.21-1.86,0.34C9.64,8.39,9.3,8.6,8.95,8.95C8.6,9.3,8.39,9.64,8.2,10.1c-0.14,0.35-0.3,0.88-0.34,1.86c-0.04,0.98-0.06,1.32-0.06,3.49v1.11c0,2.17,0.01,2.51,0.06,3.49c0.04,0.97,0.21,1.5,0.34,1.86c0.18,0.47,0.4,0.8,0.75,1.15c0.35,0.35,0.68,0.57,1.15,0.75c0.35,0.14,0.88,0.3,1.86,0.34c0.94,0.04,1.29,0.06,3.23,0.06h1.61c1.94,0,2.3-0.02,3.23-0.06c0.97-0.04,1.5-0.21,1.86-0.34c0.47-0.18,0.8-0.4,1.15-0.75c0.35-0.35,0.57-0.68,0.75-1.15c0.14-0.35,0.3-0.88,0.34-1.86c0.04-0.94,0.06-1.29,0.06-3.23v-1.61c0-1.94-0.02-2.3-0.06-3.23c-0.04-0.97-0.21-1.5-0.34-1.86c-0.18-0.47-0.4-0.8-0.75-1.15C22.7,8.6,22.36,8.39,21.9,8.2c-0.35-0.14-0.88-0.3-1.86-0.34C19.06,7.82,18.72,7.8,16.56,7.8z M17.03,6c1.8,0,2.18,0.02,3.1,0.06c1.06,0.05,1.79,0.22,2.43,0.46c0.66,0.26,1.22,0.6,1.77,1.15c0.56,0.56,0.9,1.11,1.15,1.77c0.25,0.64,0.42,1.36,0.46,2.43c0.05,0.99,0.06,1.35,0.06,3.58v1.09c0,2.22-0.01,2.59-0.06,3.58c-0.05,1.06-0.22,1.79-0.46,2.43c-0.26,0.66-0.6,1.22-1.15,1.77c-0.56,0.56-1.11,0.9-1.77,1.15c-0.64,0.25-1.36,0.42-2.43,0.46C19.13,25.99,18.77,26,16.55,26h-1.09c-2.22,0-2.59-0.01-3.58-0.06c-1.06-0.05-1.79-0.22-2.43-0.46c-0.66-0.26-1.22-0.6-1.77-1.15c-0.56-0.56-0.9-1.11-1.15-1.77c-0.25-0.64-0.42-1.36-0.46-2.43C6.02,19.21,6,18.83,6,17.03v-2.06c0-1.8,0.02-2.18,0.06-3.1c0.05-1.06,0.22-1.79,0.46-2.43c0.26-0.66,0.6-1.22,1.15-1.77c0.56-0.56,1.11-0.9,1.77-1.15c0.64-0.25,1.36-0.42,2.43-0.46C12.79,6.02,13.17,6,14.97,6H17.03z M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>

package/components/label/_macro.njk

@@ -1,8 +1,8 @@
 {% macro onsLabel(params) %}
     {% if params.id %}
-        {% set descriptionID = params.id ~ "-description-hint" %}  
+        {% set descriptionID = params.id ~ "-description-hint" %}
     {% else %}
-        {% set descriptionID = "description-hint" %}  
+        {% set descriptionID = "description-hint" %}
     {% endif %}
 
     {% if params.inputType == "checkbox" or params.inputType == "radio" %}

package/components/list/_list.scss

@@ -77,6 +77,7 @@
   &--icons {
     margin-bottom: 0;
     .ons-list__item {
+      margin-top: 0;
       margin-bottom: 0.5rem;
     }
   }
@@ -99,7 +100,6 @@
     .ons-list__item {
       display: inline-block;
       margin: 0 1rem 0 0;
-      vertical-align: top;
     }
   }
 

package/components/navigation/_macro.njk

@@ -27,6 +27,7 @@
                         },
                         "instructions": params.siteSearchAutosuggest.instructions,
                         "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
+                        "minChars": params.siteSearchAutosuggest.minChars,
                         "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
                         "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
                         "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
@@ -36,7 +37,8 @@
                         "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
                         "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
                         "noResults": params.siteSearchAutosuggest.noResults,
-                        "typeMore": params.siteSearchAutosuggest.typeMore
+                        "typeMore": params.siteSearchAutosuggest.typeMore,
+                        "language": params.siteSearchAutosuggest.language
                     }) }}
                 </div>
             {% endif %}

package/components/related-content/_macro.njk

@@ -1,36 +1,34 @@
 {% macro onsRelatedContent(params) %}
 
-  {% if params.classes %}
-    {% set classes = ' ' + params.classes %}
-  {% endif %}
+    {% if params.classes %}
+        {% set classes = ' ' + params.classes %}
+    {% endif %}
 
-  <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
-    {% if params.rows %}
-      {% for row in params.rows %}
-        {% 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 }}">
+    <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
+        {% if params.rows %}
+            {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
             {% from "components/list/_macro.njk" import onsList %}
-            {{
-              onsList({
-                "variants": 'bare',
-                "iconType": row.iconType,
-                "iconPosition": row.iconPosition,
-                "iconSize": row.iconSize,
-                "itemsList": row.itemsList
-              })
-            }}
-          </nav>
-        {% endcall %}
-      {% endfor %}
-    {% else %}
-      {{ caller() if caller }}
-    {% endif %}
-  </aside>
+            {% for row in params.rows %}
+                {% call onsRelatedContentSection({
+                    "title": row.title,
+                    "id": row.id
+                }) %}
+                    <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
+                        {{
+                            onsList({
+                                "variants": 'bare',
+                                "iconType": row.iconType,
+                                "iconPosition": row.iconPosition,
+                                "iconSize": row.iconSize,
+                                "itemsList": row.itemsList
+                            })
+                        }}
+                    </nav>
+                {% endcall %}
+            {% endfor %}
+        {% else %}
+            {{ caller() if caller }}
+        {% endif %}
+    </aside>
 
 {% endmacro %}

package/components/section-navigation/_macro.njk

@@ -1,59 +1,60 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-  <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
-    {% if params.sections %}
-      {% for section in params.sections %}
-        <div class="ons-section-nav__sub">
-          {% if section.title %}
-            <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>{% endif %}
-              <ul class="ons-section-nav__list">
-                {% for item in section.itemsList %}
-                  {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
-                    {% set isCurrent = true %}
-                  {% else %}
-                    {% set isCurrent = false %}
-                  {% endif %}
-                  <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                    <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
-                      {% if item.anchors and isCurrent == true %}
-                          <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
-                              {% for anchor in item.anchors %}
-                                  <li class="ons-section-nav__item ons-list__item">
-                                      <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
-                                  </li>
-                              {% endfor %}
-                          </ul>
-                      {% endif %}
-                  </li>
-                {% endfor %}
-              </ul>
-        </div>
-      {% endfor %} 
-      {% else %} 
-        {% if params.title %}
-          <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
-        {% endif %}
+    <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
+    <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
+        {% if params.sections %}
+            {% for section in params.sections %}
+                <div class="ons-section-nav__sub">
+                    {% if section.title %}
+                        <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>
+                    {% endif %}
+                    <ul class="ons-section-nav__list">
+                        {% for item in section.itemsList %}
+                            {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                                {% set isCurrent = true %}
+                            {% else %}
+                                {% set isCurrent = false %}
+                            {% endif %}
+                            <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                                <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
+                                {% if item.anchors and isCurrent == true %}
+                                    <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                                        {% for anchor in item.anchors %}
+                                            <li class="ons-section-nav__item ons-list__item">
+                                                <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endif %}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            {% endfor %}
+        {% else %}
+            {% if params.title %}
+                <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
+            {% endif %}
             <ul class="ons-section-nav__list">
-              {% for item in params.itemsList %}
-                {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
-                  {% set isCurrent = true %}
-                {% else %}
-                  {% set isCurrent = false %}
-                {% endif %}
-                <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                  <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
-                    {% if item.anchors %}
-                        <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
-                            {% for anchor in item.anchors %}
-                                <li class="ons-section-nav__item ons-list__item">
-                                    <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
+                {% for item in params.itemsList %}
+                    {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                        {% set isCurrent = true %}
+                    {% else %}
+                        {% set isCurrent = false %}
                     {% endif %}
-                </li>
-              {% endfor %}
-            </ul>  
-    {% endif %}  
-  </nav>
+                    <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                        <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
+                        {% if item.anchors %}
+                            <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                                {% for anchor in item.anchors %}
+                                    <li class="ons-section-nav__item ons-list__item">
+                                        <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </nav>
 {% endmacro %}