@ons/design-system 65.2.0 → 65.2.2

package/components/autosuggest/autosuggest.ui.js

@@ -64,6 +64,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.language = context.getAttribute('data-lang');
     this.allowMultiple = context.getAttribute('data-allow-multiple') || false;
     this.listboxId = this.listbox.getAttribute('id');
     this.resultLimit = resultLimit || 10;
@@ -104,7 +105,7 @@ export default class AutosuggestUI {
   }
 
   get lang() {
-    return document.documentElement.getAttribute('lang').toLowerCase();
+    return !this.language ? document.documentElement.getAttribute('lang').toLowerCase() : this.language.toLowerCase();
   }
 
   initialiseUI() {
@@ -261,7 +262,7 @@ export default class AutosuggestUI {
   getSuggestions(force, groupResults) {
     if (!this.settingResult) {
       if (this.allowMultiple === 'true' && this.allSelections.length) {
-        const newQuery = this.input.value.split(', ').find(item => !this.allSelections.includes(item));
+        const newQuery = this.input.value.split(', ').find((item) => !this.allSelections.includes(item));
         this.query = newQuery ? newQuery : this.input.value;
       } else {
         this.query = this.input.value;
@@ -276,7 +277,7 @@ export default class AutosuggestUI {
         if (this.sanitisedQuery.length >= this.minChars) {
           this.fetchSuggestions(this.sanitisedQuery, this.data, groupResults)
             .then(this.handleResults.bind(this))
-            .catch(error => {
+            .catch((error) => {
               if (error.name !== 'AbortError') {
                 console.log('error:', error);
                 this.handleNoResults(500);
@@ -292,7 +293,7 @@ export default class AutosuggestUI {
   async fetchSuggestions(sanitisedQuery, data) {
     this.abortFetch();
     const results = await runFuse(sanitisedQuery, data, this.lang, this.resultLimit);
-    results.forEach(result => {
+    results.forEach((result) => {
       result.sanitisedText = sanitiseAutosuggestText(result[this.lang], this.sanitisedQueryReplaceChars);
     });
     return {
@@ -520,14 +521,14 @@ export default class AutosuggestUI {
   }
 
   storeExistingSelections(value) {
-    this.currentSelections = this.input.value.split(', ').filter(items => this.allSelections.includes(items));
+    this.currentSelections = this.input.value.split(', ').filter((items) => this.allSelections.includes(items));
     this.allSelections = [];
     if (this.currentSelections.length) {
       this.allSelections = this.currentSelections;
     }
     this.allSelections.push(value);
 
-    this.allSelections = this.allSelections.filter(function(value, index, array) {
+    this.allSelections = this.allSelections.filter(function (value, index, array) {
       return array.indexOf(value) == index;
     });
 
@@ -535,12 +536,7 @@ export default class AutosuggestUI {
   }
 
   emboldenMatch(string, query) {
-    let reg = new RegExp(
-      this.escapeRegExp(query)
-        .split(' ')
-        .join('[\\s,]*'),
-      'gi',
-    );
+    let reg = new RegExp(this.escapeRegExp(query).split(' ').join('[\\s,]*'), 'gi');
 
     return string.replace(reg, '<strong>$&</strong>');
   }

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

@@ -4,10 +4,10 @@
     <div class="ons-grid__col ons-col-8@m">
 
         {{ onsAutosuggest({
-            "id": "country-of-birth",
+            "id": "country-of-birth-autosuggest-multiple",
             "label": {
                 "text": "Passport",
-                "id": "country-of-birth-label",
+                "id": "country-of-birth-label-multiple",
                 "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one."
             },
             "autocomplete": "off",
@@ -23,7 +23,8 @@
             "allowMultiple": true,
             "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",
+            "language": "en"
         }) }}
 
     </div>

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

@@ -4,7 +4,7 @@
     <div class="ons-grid__col ons-col-8@m">
 
         {{ onsAutosuggest({
-            "id": "country-of-birth",
+            "id": "country-of-birth-autosuggest",
             "label": {
                 "text": "Current name of country",
                 "description": "Enter your own answer or select from suggestions",

package/components/back-link/example-back-link.njk

@@ -6,7 +6,7 @@
         "itemsList": [
             {
                 "url": '/',
-                "id": "back",
+                "id": "backlink",
                 "text": 'Back',
                 "attributes": {
                     "data-attribute": "Example attribute"

package/components/breadcrumbs/_macro.njk

@@ -5,7 +5,7 @@
         <ol class="ons-breadcrumbs__items ons-u-fs-s">
             {% for item in params.itemsList %}
                 <li class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
-                    <a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
+                    <a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href={% if not isDesignSystemExample %}"{{ item.url }}"{% else %}"#0"{% endif %}{% if item.id %} id="{{ item.id }}"{% endif %}
                     {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                     >{{ item.text }}</a>
                     {{

package/components/breadcrumbs/_macro.spec.js

@@ -97,23 +97,23 @@ describe('macro: breadcrumbs', () => {
   it('has provided `url` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const urls = mapAll($('.ons-breadcrumbs__link'), node => node.attr('href'));
+    const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
     expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
   });
 
   it('has provided `text` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const labels = mapAll($('.ons-breadcrumbs__link'), node => node.text().trim());
+    const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
     expect(labels).toEqual(['Home', 'Guide']);
   });
 
   it('has provided `attributes` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const testValuesA = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-a'));
+    const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
     expect(testValuesA).toEqual(['123', '789']);
-    const testValuesB = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-b'));
+    const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
     expect(testValuesB).toEqual(['456', 'ABC']);
   });
 
@@ -123,7 +123,7 @@ describe('macro: breadcrumbs', () => {
 
     faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
 
-    const iconTypes = iconsSpy.occurrences.map(occurrence => occurrence.iconType);
+    const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
     expect(iconTypes).toEqual(['chevron', 'chevron']);
   });
 });

package/components/card/example-card-set-with-images.njk

@@ -5,7 +5,7 @@
 
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title1',
+                "id": 'card-with-image-1',
                 "textId": 'text1',
                 "title": 'About the census',
                 "url": '#0',
@@ -16,7 +16,7 @@
 
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title2',
+                "id": 'card-with-image-2',
                 "textId": 'text2',
                 "title": 'Working on the census',
                 "url": '#0',
@@ -27,7 +27,7 @@
 
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title3',
+                "id": 'card-with-image-3',
                 "textId": 'text3',
                 "title": 'Your data and security',
                 "url": '#0',

package/components/card/example-card-set-with-lists.njk

@@ -5,7 +5,7 @@
        
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title1',
+                "id": 'card-with-list-1',
                 "textId": 'text1',
                 "title": 'About the census',
                 "url": '#0',
@@ -25,7 +25,7 @@
 
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title2',
+                "id": 'card-with-list-2',
                 "textId": 'text2',
                 "title": 'Working on the census',
                 "url": '#0',
@@ -45,7 +45,7 @@
 
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title3',
+                "id": 'card-with-list-3',
                 "textId": 'text3',
                 "title": 'Your data and security',
                 "url": '#0',

package/components/card/example-card-set.njk

@@ -5,7 +5,7 @@
        
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title1',
+                "id": 'card-set-1',
                 "textId": 'text1',
                 "title": 'About the census',
                 "url": '#0',
@@ -15,7 +15,7 @@
 
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title2',
+                "id": 'card-set-2',
                 "textId": 'text2',
                 "title": 'Working on the census',
                 "url": '#0',
@@ -25,7 +25,7 @@
 
         <div class="ons-grid__col ons-col-4@m">
             {{ onsCard({
-                "id": 'title3',
+                "id": 'card-set-3',
                 "textId": 'text3',
                 "title": 'Your data and security',
                 "url": '#0',

package/components/card/example-card.njk

@@ -1,7 +1,7 @@
 {% from "components/card/_macro.njk" import onsCard %}
 
 {{ onsCard({
-    "id": 'title',
+    "id": 'card-example',
     "textId": 'text',
     "title": 'Your data and security',
     "url": '#0',

package/components/checkboxes/example-checkboxes-disabled.njk

@@ -8,21 +8,21 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "data",
+                    "id": "data-checkbox-disabled",
                     "label": {
                         "text": "Data (309)"
                     },
                     "value": "data"
                 },
                 {
-                    "id": "publications",
+                    "id": "publications-checkbox-disabled",
                     "label": {
                         "text": "Publications (137)"
                     },
                     "value": "publications"
                 },
                 {
-                    "id": "areas",
+                    "id": "areas-checkbox-disabled",
                     "label": {
                         "text": "Areas (0)"
                     },

package/components/checkboxes/example-checkboxes-error.njk

@@ -8,42 +8,42 @@
         "dontWrap": true,
         "checkboxes": [
             {
-                "id": "gluten-free",
+                "id": "gluten-free-checkbox-error",
                 "label": {
                     "text": "Gluten free"
                 },
                 "value": "gluten-free"
             },
             {
-                "id": "lactose-intolerant",
+                "id": "lactose-intolerant-checkbox-error",
                 "label": {
                     "text": "Lactose intolerant"
                 },
                 "value": "lactose-intolerant"
             },
             {
-                "id": "vegan",
+                "id": "vegan-checkbox-error",
                 "label": {
                     "text": "Vegan"
                 },
                 "value": "vegan"
             },
             {
-                "id": "vegetarian",
+                "id": "vegetarian-checkbox-error",
                 "label": {
                     "text": "Vegetarian"
                 },
                 "value": "vegetarian"
             },
             {
-                "id": "other-checkbox",
+                "id": "other-checkbox-error",
                 "label": {
                     "text": "Other"
                 },
                 "checked": true,
                 "value": "other",
                 "other": {
-                    "id": "other-textbox",
+                    "id": "other-textbox-checbox-error",
                     "name": "other-answer",
                     "label": {
                         "text": "Enter dietary requirements"
@@ -53,7 +53,7 @@
         ],
         "error": {
             "classes": "test",
-            "id": "dietary-error",
+            "id": "dietary-error-checkbox",
             "text": "Enter your dietary requirements"
         }
     })

package/components/checkboxes/example-checkboxes-with-descriptions.njk

@@ -13,14 +13,14 @@
             "name": "central-heating",
             "checkboxes": [
                 {
-                    "id": "none",
+                    "id": "none-checkbox-with-description",
                     "label": {
                         "text": "No central heating"
                     },
                     "name": "none"
                 },
                 {
-                    "id": "mains-gas",
+                    "id": "mains-gas-checkbox-with-description",
                     "label": {
                         "text": "Gas",
                         "description": "Including tank or bottled gas"
@@ -28,7 +28,7 @@
                     "name": "mains-gas"
                 },
                 {
-                    "id": "electric",
+                    "id": "electric-checkbox-with-description",
                     "label": {
                         "text": "Electric",
                         "description": "Including storage headers"
@@ -36,14 +36,14 @@
                     "name": "electric"
                 },
                 {
-                    "id": "oil",
+                    "id": "oil-checkbox-with-description",
                     "label": {
                         "text": "Oil"
                     },
                     "name": "oil"
                 },
                 {
-                    "id": "wood",
+                    "id": "wood-checkbox-with-description",
                     "label": {
                         "text": "Wood",
                         "description": "For example, logs, waste wood or pellets"
@@ -51,7 +51,7 @@
                     "name": "wood"
                 },
                 {
-                    "id": "solid-fuel",
+                    "id": "solid-fuel-checkbox-with-description",
                     "label": {
                         "text": "Solid fuel",
                         "description": "For example, coal"
@@ -59,7 +59,7 @@
                     "name": "solid-fuel"
                 },
                 {
-                    "id": "renewable",
+                    "id": "renewable-checkbox-with-description",
                     "label": {
                         "text": "Renewable energy",
                         "description": "For example, solar thermal or heat pumps"

package/components/checkboxes/example-checkboxes-with-hidden-label.njk

@@ -40,7 +40,7 @@
                         <td class="ons-table__cell">
                             {{
                                 onsCheckbox({
-                                    "id": "surveys-view",
+                                    "id": "surveys-view-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "View surveys"
@@ -54,7 +54,7 @@
                         <td class="ons-table__cell" colspan="2">
                             {{
                                 onsCheckbox({
-                                    "id": "surveys-edit",
+                                    "id": "surveys-edit-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "Edit surveys"
@@ -71,7 +71,7 @@
                         <td class="ons-table__cell">
                             {{
                                 onsCheckbox({
-                                    "id": "reporting-units-view",
+                                    "id": "reporting-units-view-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "View reporting units"
@@ -85,7 +85,7 @@
                         <td class="ons-table__cell" colspan="2">
                             {{
                                 onsCheckbox({
-                                    "id": "reporting-units-edit",
+                                    "id": "reporting-units-edit-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "Edit reporting units"
@@ -102,7 +102,7 @@
                         <td class="ons-table__cell">
                             {{
                                 onsCheckbox({
-                                    "id": "respondents-view",
+                                    "id": "respondents-view-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "View respondents"
@@ -116,7 +116,7 @@
                         <td class="ons-table__cell">
                             {{
                                 onsCheckbox({
-                                    "id": "respondents-edit",
+                                    "id": "respondents-edit-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "Edit respondents"
@@ -129,7 +129,7 @@
                         <td class="ons-table__cell">
                             {{
                                 onsCheckbox({
-                                    "id": "respondents-delete",
+                                    "id": "respondents-delete-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "Delete respondents"
@@ -146,7 +146,7 @@
                         <td class="ons-table__cell">
                             {{
                                 onsCheckbox({
-                                    "id": "messages-view",
+                                    "id": "messages-view-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "View messages"
@@ -160,7 +160,7 @@
                         <td class="ons-table__cell" colspan="2">
                             {{
                                 onsCheckbox({
-                                    "id": "messages-edit",
+                                    "id": "messages-edit-example-checkbox-with-hidden-label",
                                     "hideLabel": true,
                                     "label": {
                                         "text": "Edit messages"

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk

@@ -8,7 +8,7 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "data",
+                    "id": "data-example-checkbox-with-revealed-checkboxes-expanded",
                     "label": {
                         "text": "Data (309)"
                     },
@@ -22,21 +22,21 @@
                         "name": "name",
                         "checkboxes": [
                             {
-                                "id": "datasets",
+                                "id": "datasets-example-checkbox-with-revealed-checkboxes-expanded",
                                 "label": {
                                     "text": "Datasets (100)"
                                 },
                                 "value": "datasets"
                             },
                             {
-                                "id": "timeseries",
+                                "id": "timeseries-example-checkbox-with-revealed-checkboxes-expanded",
                                 "label": {
                                     "text": "Timeseries (20)"
                                 },
                                 "value": "timeseries"
                             },
                             {
-                                "id": "requested",
+                                "id": "requested-example-checkbox-with-revealed-checkboxes-expanded",
                                 "label": {
                                     "text": "User requested data (17)"
                                 },
@@ -46,7 +46,7 @@
                     }
                 },
                 {
-                    "id": "publications",
+                    "id": "publications-example-checkbox-with-revealed-checkboxes-expanded",
                     "label": {
                         "text": "Publications (137)"
                     },
@@ -60,14 +60,14 @@
                         "name": "name",
                         "checkboxes": [
                             {
-                                "id": "press-release",
+                                "id": "press-release-example-checkbox-with-revealed-checkboxes-expanded",
                                 "label": {
                                     "text": "Press release (100)"
                                 },
                                 "value": "pressrelease"
                             },
                             {
-                                "id": "bulletin",
+                                "id": "bulletin-example-checkbox-with-revealed-checkboxes-expanded",
                                 "label": {
                                     "text": "Bulletin (20)"
                                 },
@@ -77,7 +77,7 @@
                     }
                 },
                 {
-                    "id": "areas",
+                    "id": "areas-example-checkbox-with-revealed-checkboxes-expanded",
                     "label": {
                         "text": "Areas (0)"
                     },

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk

@@ -8,7 +8,7 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "data",
+                    "id": "data-example-with-revealed-checkboxes",
                     "label": {
                         "text": "Data (309)"
                     },
@@ -21,21 +21,21 @@
                         "name": "name",
                         "checkboxes": [
                             {
-                                "id": "datasets",
+                                "id": "datasets-example-with-revealed-checkboxes",
                                 "label": {
                                     "text": "Datasets (100)"
                                 },
                                 "value": "datasets"
                             },
                             {
-                                "id": "timeseries",
+                                "id": "timeseries-example-with-revealed-checkboxes",
                                 "label": {
                                     "text": "Timeseries (20)"
                                 },
                                 "value": "timeseries"
                             },
                             {
-                                "id": "requested",
+                                "id": "requested-example-with-revealed-checkboxes",
                                 "label": {
                                     "text": "User requested data (17)"
                                 },
@@ -45,7 +45,7 @@
                     }
                 },
                 {
-                    "id": "publications",
+                    "id": "publications-example-with-revealed-checkboxes",
                     "label": {
                         "text": "Publications (137)"
                     },
@@ -58,14 +58,14 @@
                         "name": "name",
                         "checkboxes": [
                             {
-                                "id": "press-release",
+                                "id": "press-release-example-with-revealed-checkboxes",
                                 "label": {
                                     "text": "Press release (100)"
                                 },
                                 "value": "pressrelease"
                             },
                             {
-                                "id": "bulletin",
+                                "id": "bulletin-example-with-revealed-checkboxes",
                                 "label": {
                                     "text": "Bulletin (20)"
                                 },
@@ -75,7 +75,7 @@
                     }
                 },
                 {
-                    "id": "areas",
+                    "id": "areas-example-with-revealed-checkboxes",
                     "label": {
                         "text": "Areas (0)"
                     },