@ons/design-system 72.0.1 → 72.1.1

package/components/autosuggest/autosuggest.ui.js

@@ -37,6 +37,7 @@ export default class AutosuggestUI {
         errorAPI,
         errorAPILinkText,
         typeMore,
+        customResultsThreshold,
     }) {
         // DOM Elements
         this.context = context;
@@ -65,6 +66,7 @@ export default class AutosuggestUI {
         this.errorAPI = errorAPI || context.getAttribute('data-error-api');
         this.errorAPILinkText = errorAPILinkText || context.getAttribute('data-error-api-link-text');
         this.typeMore = typeMore || context.getAttribute('data-type-more');
+        this.customResultsThreshold = customResultsThreshold || context.getAttribute('data-result-threshold');
         this.language = context.getAttribute('data-lang');
         this.allowMultiple = context.getAttribute('data-allow-multiple') || false;
         this.listboxId = this.listbox.getAttribute('id');
@@ -293,9 +295,30 @@ export default class AutosuggestUI {
 
     async fetchSuggestions(sanitisedQuery, data) {
         this.abortFetch();
-        const results = await runFuse(sanitisedQuery, data, this.lang, this.resultLimit);
+
+        const threshold =
+            this.customResultsThreshold != null && this.customResultsThreshold >= 0 && this.customResultsThreshold <= 1
+                ? this.customResultsThreshold
+                : 0.2;
+
+        let distance;
+        if (threshold >= 0.6) {
+            distance = 500;
+        } else if (threshold >= 0.4) {
+            distance = 300;
+        } else {
+            distance = 100;
+        }
+
+        const results = await runFuse(sanitisedQuery, data, this.lang, threshold, distance);
+
         results.forEach((result) => {
-            result.sanitisedText = sanitiseAutosuggestText(result[this.lang], this.sanitisedQueryReplaceChars);
+            const resultItem = result.item ?? result;
+
+            result.sanitisedText = sanitiseAutosuggestText(
+                resultItem[this.lang] ?? resultItem['formattedAddress'],
+                this.sanitisedQueryReplaceChars,
+            );
         });
         return {
             status: this.responseStatus,
@@ -345,16 +368,18 @@ export default class AutosuggestUI {
             this.listbox.innerHTML = '';
             if (this.results) {
                 this.resultOptions = this.results.map((result, index) => {
-                    let innerHTML = this.emboldenMatch(result[this.lang], this.query);
+                    const resultItem = result.item ?? result;
+
+                    let innerHTML = this.emboldenMatch(resultItem[this.lang] ?? resultItem['formattedAddress'], this.query);
 
                     const listElement = document.createElement('li');
                     listElement.className = classAutosuggestOption;
                     listElement.setAttribute('id', `${this.listboxId}__option--${index}`);
                     listElement.setAttribute('role', 'option');
-                    if (result.category) {
+                    if (resultItem.category) {
                         innerHTML =
                             innerHTML +
-                            `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
+                            `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${resultItem.category}</span>`;
                     }
                     listElement.innerHTML = innerHTML;
                     listElement.addEventListener('click', () => {
@@ -485,16 +510,19 @@ export default class AutosuggestUI {
         if (this.results.length) {
             this.settingResult = true;
             const result = this.results[index || this.highlightedResultIndex || 0];
+            const resultItem = result.item ?? result;
+            const resultValue = resultItem[this.lang] ?? resultItem['formattedAddress'];
+
             this.resultSelected = true;
 
             if (this.allowMultiple === 'true') {
-                let value = this.storeExistingSelections(result[this.lang]);
+                let value = this.storeExistingSelections(resultValue);
                 result.displayText = value;
-            } else if (result.url) {
-                result.displayText = result[this.lang];
-                window.location = result.url;
+            } else if (resultItem.url) {
+                result.displayText = resultValue;
+                window.location = resultItem.url;
             } else {
-                result.displayText = result[this.lang];
+                result.displayText = resultValue;
             }
             this.onSelect(result).then(() => (this.settingResult = false));
 
@@ -511,6 +539,7 @@ export default class AutosuggestUI {
         const warningSpanElement = document.createElement('span');
         const warningBodyElement = document.createElement('div');
 
+        warningContainer.id = this.listbox.getAttribute('id');
         warningContainer.className = 'ons-autosuggest__warning';
         warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel';
 

package/components/autosuggest/example-autosuggest-country.njk

@@ -24,7 +24,8 @@
                 "resultsTitleId": "country-of-birth-suggestions",
                 "autosuggestData": "/examples/data/country-of-birth.json",
                 "noResults": "No suggestions found. You can enter your own answer",
-                "typeMore": "Continue entering to get suggestions"
+                "typeMore": "Continue entering to get suggestions",
+                "resultsThreshold": 0.2
             })
         }}
     </div>

package/components/autosuggest/fuse-config.js

@@ -1,14 +1,19 @@
 import Fuse from 'fuse.js';
 
-export default function runFuse(query, data, searchFields) {
+export default function runFuse(query, data, searchFields, threshold, distance) {
     const options = {
         shouldSort: true,
-        threshold: 0.2,
+        threshold: threshold,
+        distance: distance,
         keys: [
             {
                 name: searchFields,
                 weight: 0.9,
             },
+            {
+                name: 'formattedAddress',
+                weight: 0.9,
+            },
             {
                 name: 'tags',
                 weight: 0.1,

package/components/back-to-top/back-to-top.dom.js

@@ -1,11 +1,11 @@
 import domready from '../../js/domready';
 
 async function backToTop() {
-    const bttElement = [...document.querySelectorAll('.ons-js-back-to-top')];
+    const backToTop = [...document.querySelectorAll('.ons-js-back-to-top')];
 
-    if (bttElement) {
-        const Btt = (await import('./back-to-top')).default;
-        bttElement.forEach((btn) => new Btt(btn));
+    if (backToTop) {
+        const BackToTop = (await import('./back-to-top')).default;
+        backToTop.forEach((btn) => new BackToTop(btn));
     }
 }
 

package/components/back-to-top/back-to-top.js

@@ -1,4 +1,4 @@
-export default class backToTop {
+export default class BackToTop {
     constructor(component) {
         this.component = component;
         this.content = this.component.previousElementSibling;

package/components/browser-banner/_macro.spec.js

@@ -10,22 +10,22 @@ describe('FOR: Macro: Browser-banner', () => {
         describe('WHEN: params are at default state', () => {
             const $ = cheerio.load(renderComponent('browser-banner', {}));
 
-            it('THEN: passes jest-axe checks', async () => {
+            test('THEN: passes jest-axe checks', async () => {
                 const results = await axe($.html());
                 expect(results).toHaveNoViolations();
             });
 
-            it('THEN: has the english default bannerLeadingText', () => {
+            test('THEN: has the english default bannerLeadingText', () => {
                 const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
                 expect(bannerLeadingText).toBe('This website no longer supports your browser.');
             });
 
-            it('THEN: has the english default bannerCTA', () => {
+            test('THEN: has the english default bannerCTA', () => {
                 const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
                 expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
             });
 
-            it('THEN: has the english default bannerLinkUrl', () => {
+            test('THEN: has the english default bannerLinkUrl', () => {
                 expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
             });
         });
@@ -33,17 +33,17 @@ describe('FOR: Macro: Browser-banner', () => {
         describe('WHEN: params are at default and language is set to welsh', () => {
             const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
 
-            it('THEN: has the welsh default bannerLeadingText', () => {
+            test('THEN: has the welsh default bannerLeadingText', () => {
                 const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
                 expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
             });
 
-            it('THEN: has the welsh default bannerCTA', () => {
+            test('THEN: has the welsh default bannerCTA', () => {
                 const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
                 expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
             });
 
-            it('THEN: has the welsh default bannerLinkUrl', () => {
+            test('THEN: has the welsh default bannerLinkUrl', () => {
                 expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
             });
         });
@@ -51,7 +51,7 @@ describe('FOR: Macro: Browser-banner', () => {
 
     describe('GIVEN: Params: wide', () => {
         describe('WHEN: wide is set to true', () => {
-            it('THEN: has container--wide class', () => {
+            test('THEN: has container--wide class', () => {
                 const $ = cheerio.load(
                     renderComponent('browser-banner', {
                         ...{},
@@ -64,7 +64,7 @@ describe('FOR: Macro: Browser-banner', () => {
         });
 
         describe('WHEN: wide is not set', () => {
-            it('THEN: does not have container--wide class', () => {
+            test('THEN: does not have container--wide class', () => {
                 const $ = cheerio.load(
                     renderComponent('browser-banner', {
                         ...{},
@@ -78,7 +78,7 @@ describe('FOR: Macro: Browser-banner', () => {
 
     describe('GIVEN: Params: fullWidth', () => {
         describe('WHEN: fullWidth is set to true', () => {
-            it('THEN: has container--full-width class', () => {
+            test('THEN: has container--full-width class', () => {
                 const $ = cheerio.load(
                     renderComponent('browser-banner', {
                         ...{},
@@ -91,7 +91,7 @@ describe('FOR: Macro: Browser-banner', () => {
         });
 
         describe('WHEN: fullWidth is not set', () => {
-            it('THEN: does not have container--full-width class', () => {
+            test('THEN: does not have container--full-width class', () => {
                 const $ = cheerio.load(
                     renderComponent('browser-banner', {
                         ...{},

package/components/button/_macro.njk

@@ -11,7 +11,7 @@
             {# Default icon position before label #}
             {% set iconPosition = "before" %}
         {% endif %}
-    {% elif params.iconType is not defined and params.noIcon is not defined %}
+    {% elif params.iconType is not defined and params.noIcon != true %}
         {% if params.url and params.newWindow %}
             {# CTA link opening in new tab #}
             {% set iconType = "external-link" %}