@ons/design-system 66.0.2 → 67.0.0

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/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/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 %}

package/components/video/_macro.njk

@@ -2,20 +2,20 @@
 {%- macro onsVideo(params) -%}
 
     {% set linkContents %}
-      {% if params.image.smallSrc %}
-        <img class="ons-video__img ons-u-mb-xs" {% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-      {% endif %}            
-      <span class="ons-video__link-text ons-u-mt-xs">{{ params.linkText }}</span>
+        {% if params.image.smallSrc %}
+            <img class="ons-video__img ons-u-mb-xs" {% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+        {% endif %}
+        <span class="ons-video__link-text ons-u-mt-xs">{{ params.linkText }}</span>
     {% endset %}
 
     <div class="ons-video ons-js-video">
-      {{
-          onsExternalLink({
-              "url": params.videoLinkURL,
-              "classes": "ons-video__link ons-js-video-placeholder ons-u-db",
-              "linkText": linkContents
-          })
-      }}
+        {{
+            onsExternalLink({
+                "url": params.videoLinkURL,
+                "classes": "ons-video__link ons-js-video-placeholder ons-u-db",
+                "linkText": linkContents
+            })
+        }}
         <iframe data-src="{{ params.videoEmbedUrl }}" title="{{ params.title }}" class="ons-video__iframe ons-js-video-iframe ons-u-d-no" src="about:blank" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
 {%- endmacro -%}