@ons/design-system 65.2.4 → 66.0.0

package/components/address-input/_macro.njk

@@ -110,17 +110,19 @@
                         onsAutosuggest({
                             "id": params.id + "-autosuggest",
                             "classes": "ons-address-input__autosuggest ons-u-mb-no",
-                            "width": "50",
-                            "label": {
-                                "text": params.label.text,
-                                "id": params.label.id,
-                                "classes": "ons-js-autosuggest-label"
+                            "input": {
+                                "width": "50",
+                                "label": {
+                                    "text": params.label.text,
+                                    "id": params.label.id,
+                                    "classes": "ons-js-autosuggest-label"
+                                },
+                                "value": params.value,
+                                "attributes": params.attributes,
+                                "error": params.error,
+                                "name": params.name,
+                                "mutuallyExclusive": params.mutuallyExclusive
                             },
-                            "value": params.value,
-                            "attributes": params.attributes,
-                            "error": params.error,
-                            "name": params.name,
-                            "mutuallyExclusive": params.mutuallyExclusive,
                             "externalInitialiser": true,
                             "APIDomain": params.APIDomain,
                             "APIDomainBearerToken": params.APIDomainBearerToken,

package/components/address-input/_macro.spec.js

@@ -352,17 +352,19 @@ describe('macro: address-input', () => {
       expect(autosuggestSpy.occurrences[0]).toEqual({
         id: 'address-input-example-id-autosuggest',
         classes: 'ons-address-input__autosuggest ons-u-mb-no',
-        width: '50',
-        label: {
-          text: '[params.label.text]',
-          id: '[params.label.id]',
-          classes: 'ons-js-autosuggest-label',
+        input: {
+          width: '50',
+          label: {
+            text: '[params.label.text]',
+            id: '[params.label.id]',
+            classes: 'ons-js-autosuggest-label',
+          },
+          value: '[params.value]',
+          attributes: '[params.attributes]',
+          error: '[params.error]',
+          name: '[params.name]',
+          mutuallyExclusive: '[params.mutuallyExclusive]',
         },
-        value: '[params.value]',
-        attributes: '[params.attributes]',
-        error: '[params.error]',
-        name: '[params.name]',
-        mutuallyExclusive: '[params.mutuallyExclusive]',
         externalInitialiser: true,
         APIDomain: '[params.APIDomain]',
         APIDomainBearerToken: '[params.APIDomainBearerToken]',

package/components/autosuggest/_macro.njk

@@ -37,37 +37,50 @@
     >
 
         {% set autosuggestResults %}
-            <div class="ons-autosuggest__results ons-js-autosuggest-results{% if params.width %} ons-input--w-{{ params.width }}{% else %} ons-input--w-20{% endif %}">
+            <div class="ons-autosuggest__results ons-js-autosuggest-results{% if params.input.width %} ons-input--w-{{ params.input.width }}{% else %} ons-input--w-20{% endif %}">
                 <div id="{{ params.resultsTitleId }}" class="ons-autosuggest__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
                 <ul class="ons-autosuggest__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
             </div>
             <div class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
             <div class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
         {% endset %}
-            {{ onsInput({
-                "id": params.id,
-                "classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
-                "width": params.width,
-                "label": {
-                    "text": params.label.text,
-                    "description": params.label.description,
-                    "id": params.label.id,
-                    "classes": params.label.classes
-                },
-                "autocomplete": params.autocomplete,
-                "legend": params.legend,
-                "legendClasses": params.legendClasses,
-                "value": params.value,
-                "attributes": params.attributes,
-                "error": params.error,
-                "mutuallyExclusive": params.mutuallyExclusive,
-                "accessiblePlaceholder": params.accessiblePlaceholder,
-                "name": params.name,
-                "autosuggestResults": autosuggestResults
-            }) }}
 
-            {% if not params.mutuallyExclusive %}
-                {{ autosuggestResults | safe }}
-            {% endif %}
+        {{ onsInput({
+            "id": params.id,
+            "type": params.input.type,
+            "classes": "ons-js-autosuggest-input " + (params.input.classes if params.input.classes else ''),
+            "width": params.input.width,
+            "label": params.input.label,
+            "autocomplete": params.input.autocomplete,
+            "legend": params.input.legend,
+            "legendClasses": params.input.legendClasses,
+            "legendIsQuestionTitle": params.input.legendIsQuestionTitle,
+            "value": params.input.value,
+            "attributes": params.input.attributes,
+            "error": params.input.error,
+            "mutuallyExclusive": params.input.mutuallyExclusive,
+            "accessiblePlaceholder": params.input.accessiblePlaceholder,
+            "name": params.input.name,
+            "autosuggestResults": autosuggestResults,
+            "min": params.input.min,
+            "max": params.input.max,
+            "minLength": params.input.minLength,
+            "maxLength": params.input.maxLength,
+            "prefix": params.input.prefix,
+            "suffix": params.input.suffix,
+            "fieldId": params.input.fieldId,
+            "fieldClasses": params.input.fieldClasses,
+            "dontWrap": params.input.dontWrap,
+            "charCheckLimit": params.input.charCheckLimit,
+            "searchButton": params.input.searchButton,
+            "postTextboxLinkText": params.input.postTextboxLinkText,
+            "postTextboxLinkUrl": params.input.postTextboxLinkUrl,
+            "listeners": params.input.listeners
+        }) }}
+
+        {% if not params.mutuallyExclusive %}
+            {{ autosuggestResults | safe }}
+        {% endif %}
+
     </div>
 {% endmacro %}

package/components/autosuggest/_macro.spec.js

@@ -7,13 +7,15 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_AUTOSUGGEST = {
   id: 'country-of-birth',
-  label: {
-    text: 'Current name of country',
-    description: 'Enter your own answer or select from suggestions',
-    id: 'country-of-birth-label',
-    classes: 'extra-label-class',
+  input: {
+    label: {
+      text: 'Current name of country',
+      description: 'Enter your own answer or select from suggestions',
+      id: 'country-of-birth-label',
+      classes: 'extra-label-class',
+    },
+    autocomplete: 'off',
   },
-  autocomplete: 'off',
   instructions: 'Use up and down keys to navigate.',
   ariaYouHaveSelected: 'You have selected',
   ariaMinChars: 'Enter 3 or more characters for suggestions.',
@@ -132,21 +134,67 @@ describe('macro: autosuggest', () => {
 
       faker.renderComponent('autosuggest', {
         ...EXAMPLE_AUTOSUGGEST,
-        classes: 'extra-class another-extra-class',
-        width: '7',
-        value: 'abc',
-        attributes: {
-          a: 42,
+        input: {
+          type: 'text',
+          classes: 'extra-class another-extra-class',
+          width: '7',
+          label: {
+            text: 'Current name of country',
+            description: 'Enter your own answer or select from suggestions',
+            id: 'country-of-birth-label',
+            classes: 'extra-label-class',
+          },
+          autocomplete: 'off',
+          legend: 'this is a legend',
+          legendClasses: 'legend-extra-class',
+          value: 'abc',
+          attributes: {
+            a: 42,
+          },
+          error: {
+            id: 'error-id',
+            text: 'An error occurred.',
+          },
+          mutuallyExclusive: null,
+          accessiblePlaceholder: true,
+          name: 'country-of-birth-test',
+          min: 1,
+          max: 10,
+          minLength: 1,
+          maxLength: 10,
+          prefix: {
+            title: 'Great British Pounds',
+            text: '£',
+            id: 'gbp-prefix',
+          },
+          suffix: {
+            title: 'Percentage of total',
+            text: '%',
+            id: 'percentage-suffix',
+          },
+          fieldId: 'field-id-test',
+          fieldClasses: 'field-class-test',
+          dontWrap: true,
+          charCheckLimit: {
+            limit: 200,
+            charCountSingular: 'You have {x} character remaining',
+            charCountPlural: 'You have {x} characters remaining',
+            charCountOverLimitSingular: '{x} character too many',
+            charCountOverLimitPlural: '{x} characters too many',
+          },
+          searchButton: {
+            text: 'Search',
+          },
+          postTextboxLinkText: 'Post textbox link text',
+          postTextboxLinkUrl: 'https://www.ons.gov.uk',
+          listeners: {
+            click: "function() { console.log('click'); }",
+          },
         },
-        error: {
-          id: 'error-id',
-          text: 'An error occurred.',
-        },
-        mutuallyExclusive: null,
-        accessiblePlaceholder: true,
       });
 
       expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth');
+      expect(inputSpy.occurrences[0]).toHaveProperty('type', 'text');
       expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class');
       expect(inputSpy.occurrences[0]).toHaveProperty('width', '7');
       expect(inputSpy.occurrences[0]).toHaveProperty('label.text', 'Current name of country');
@@ -154,13 +202,38 @@ describe('macro: autosuggest', () => {
       expect(inputSpy.occurrences[0]).toHaveProperty('label.id', 'country-of-birth-label');
       expect(inputSpy.occurrences[0]).toHaveProperty('label.classes', 'extra-label-class');
       expect(inputSpy.occurrences[0]).toHaveProperty('autocomplete', 'off');
+      expect(inputSpy.occurrences[0]).toHaveProperty('legend', 'this is a legend');
+      expect(inputSpy.occurrences[0]).toHaveProperty('legendClasses', 'legend-extra-class');
       expect(inputSpy.occurrences[0]).toHaveProperty('value', 'abc');
       expect(inputSpy.occurrences[0]).toHaveProperty('attributes.a', 42);
       expect(inputSpy.occurrences[0]).toHaveProperty('error.id', 'error-id');
       expect(inputSpy.occurrences[0]).toHaveProperty('error.text', 'An error occurred.');
       expect(inputSpy.occurrences[0]).toHaveProperty('mutuallyExclusive', null);
       expect(inputSpy.occurrences[0]).toHaveProperty('accessiblePlaceholder', true);
+      expect(inputSpy.occurrences[0]).toHaveProperty('name', 'country-of-birth-test');
       expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string');
+      expect(inputSpy.occurrences[0]).toHaveProperty('min', 1);
+      expect(inputSpy.occurrences[0]).toHaveProperty('max', 10);
+      expect(inputSpy.occurrences[0]).toHaveProperty('minLength', 1);
+      expect(inputSpy.occurrences[0]).toHaveProperty('maxLength', 10);
+      expect(inputSpy.occurrences[0]).toHaveProperty('prefix.title', 'Great British Pounds');
+      expect(inputSpy.occurrences[0]).toHaveProperty('prefix.text', '£');
+      expect(inputSpy.occurrences[0]).toHaveProperty('prefix.id', 'gbp-prefix');
+      expect(inputSpy.occurrences[0]).toHaveProperty('suffix.title', 'Percentage of total');
+      expect(inputSpy.occurrences[0]).toHaveProperty('suffix.text', '%');
+      expect(inputSpy.occurrences[0]).toHaveProperty('suffix.id', 'percentage-suffix');
+      expect(inputSpy.occurrences[0]).toHaveProperty('fieldId', 'field-id-test');
+      expect(inputSpy.occurrences[0]).toHaveProperty('fieldClasses', 'field-class-test');
+      expect(inputSpy.occurrences[0]).toHaveProperty('dontWrap', true);
+      expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.limit', 200);
+      expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountSingular', 'You have {x} character remaining');
+      expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountPlural', 'You have {x} characters remaining');
+      expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitSingular', '{x} character too many');
+      expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitPlural', '{x} characters too many');
+      expect(inputSpy.occurrences[0]).toHaveProperty('searchButton.text', 'Search');
+      expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkText', 'Post textbox link text');
+      expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkUrl', 'https://www.ons.gov.uk');
+      expect(inputSpy.occurrences[0]).toHaveProperty('listeners.click', "function() { console.log('click'); }");
     });
   });
 

package/components/autosuggest/autosuggest.spec.js

@@ -3,13 +3,15 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_AUTOSUGGEST = {
   id: 'country-of-birth',
-  label: {
-    text: 'Current name of country',
-    description: 'Enter your own answer or select from suggestions',
-    id: 'country-of-birth-label',
-    classes: 'extra-label-class',
+  input: {
+    label: {
+      text: 'Current name of country',
+      description: 'Enter your own answer or select from suggestions',
+      id: 'country-of-birth-label',
+      classes: 'extra-label-class',
+    },
+    autocomplete: 'off',
   },
-  autocomplete: 'off',
   instructions: 'Use up and down keys to navigate.',
   ariaYouHaveSelected: 'You have selected',
   ariaMinChars: 'Enter 3 or more characters for suggestions.',
@@ -597,12 +599,20 @@ describe('script: autosuggest', () => {
       });
 
       it('shows the API error message', async () => {
-        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length);
-        expect(listItemCount).toBe(1);
+        const resultsItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length);
+        expect(resultsItemCount).toBe(1);
         const warningText = await page.$eval('.ons-autosuggest__warning', (node) => node.textContent);
         expect(warningText.trim()).toBe('!Sorry, there is a problem.');
       });
 
+      it('the list and results element should be removed from the page', async () => {
+        const hasListBox = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('.ons-js-autosuggest-listbox'));
+        const hasResultsTitle = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('.ons-autosuggest__results-title'));
+
+        expect(hasListBox).toBe(false);
+        expect(hasResultsTitle).toBe(false);
+      });
+
       it('the input should be disabled', async () => {
         const hasDisabledAttribute = await page.$eval('.ons-js-autosuggest-input', (node) => node.hasAttribute('disabled'));
         expect(hasDisabledAttribute).toBe(true);

package/components/autosuggest/autosuggest.ui.js

@@ -43,6 +43,7 @@ export default class AutosuggestUI {
     this.input = context.querySelector(`.${baseClass}-input`);
     this.resultsContainer = context.querySelector(`.${baseClass}-results`);
     this.listbox = this.resultsContainer.querySelector(`.${baseClass}-listbox`);
+    this.resultsTitleContainer = this.resultsContainer.querySelector(`.ons-autosuggest__results-title`);
     this.instructions = context.querySelector(`.${baseClass}-instructions`);
     this.ariaStatus = context.querySelector(`.${baseClass}-aria-status`);
     this.form = context.closest('form');
@@ -376,7 +377,10 @@ export default class AutosuggestUI {
 
       if (this.resultLimit === 100 && this.foundResults > this.resultLimit) {
         let message = this.tooManyResults.replace('{n}', this.foundResults);
-        this.listbox.insertBefore(this.createWarningElement(message), this.listbox.firstChild);
+        this.resultsContainer.insertBefore(this.createWarningElement(message), this.resultsContainer.firstChild);
+        this.ariaStatus.setAttribute('aria-hidden', 'true');
+        this.listbox.remove();
+        this.resultsTitleContainer.remove();
       }
 
       this.setHighlightedResult(null);
@@ -414,9 +418,11 @@ export default class AutosuggestUI {
       this.input.value = '';
       this.label.classList.add('ons-u-lighter');
 
-      this.listbox.innerHTML = '';
-      this.listbox.insertBefore(this.createWarningElement(message), this.listbox.firstChild);
+      this.resultsContainer.insertBefore(this.createWarningElement(message), this.resultsContainer.firstChild);
+      this.ariaStatus.setAttribute('aria-hidden', 'true');
       this.setAriaStatus(ariaMessage);
+      this.listbox.remove();
+      this.resultsTitleContainer.remove();
     } else {
       message = this.noResults;
       this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;
@@ -497,13 +503,12 @@ export default class AutosuggestUI {
   }
 
   createWarningElement(content) {
-    const warningListElement = document.createElement('li');
+    const warningContainer = document.createElement('div');
     const warningElement = document.createElement('div');
     const warningSpanElement = document.createElement('span');
     const warningBodyElement = document.createElement('div');
 
-    warningListElement.setAttribute('aria-hidden', 'true');
-    warningListElement.className = 'ons-autosuggest__warning';
+    warningContainer.className = 'ons-autosuggest__warning';
     warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel';
 
     warningSpanElement.className = 'ons-panel__icon';
@@ -515,9 +520,9 @@ export default class AutosuggestUI {
 
     warningElement.appendChild(warningSpanElement);
     warningElement.appendChild(warningBodyElement);
-    warningListElement.appendChild(warningElement);
+    warningContainer.appendChild(warningElement);
 
-    return warningListElement;
+    return warningContainer;
   }
 
   storeExistingSelections(value) {

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

@@ -5,12 +5,14 @@
 
         {{ onsAutosuggest({
             "id": "country-of-birth-autosuggest-multiple",
-            "label": {
-                "text": "Passport",
-                "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."
+            "input": {
+                "label": {
+                    "text": "Passport",
+                    "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"
             },
-            "autocomplete": "off",
             "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
             "ariaYouHaveSelected": "You have selected",
             "ariaMinChars": "Enter 3 or more characters for suggestions.",

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

@@ -5,12 +5,14 @@
 
         {{ onsAutosuggest({
             "id": "country-of-birth-autosuggest",
-            "label": {
-                "text": "Current name of country",
-                "description": "Enter your own answer or select from suggestions",
-                "id": "country-of-birth-label"
+            "input": {
+                "label": {
+                    "text": "Current name of country",
+                    "description": "Enter your own answer or select from suggestions",
+                    "id": "country-of-birth-label"
+                },
+                "autocomplete": "off"
             },
-            "autocomplete": "off",
             "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
             "ariaYouHaveSelected": "You have selected",
             "ariaMinChars": "Enter 3 or more characters for suggestions.",

package/components/button/button.dom.js

@@ -6,7 +6,7 @@ async function submitButton() {
 
   if (buttons.length) {
     const SubmitButton = (await import('./button')).default;
-    buttons.forEach(button => {
+    buttons.forEach((button) => {
       if (button.classList.contains('ons-js-timer')) {
         submitType = 'timer';
       } else if (button.classList.contains('ons-js-loader')) {

package/components/card/_card.scss

@@ -5,15 +5,13 @@
   &__link {
     display: flex;
     flex-direction: column;
-  }
-
-  &__image--reorder {
-    order: 1;
-  }
+    margin-bottom: 1rem;
+    width: fit-content;
 
-  &__title--reorder {
-    order: 2;
-  }
+    & > .ons-card__title {
+      margin-bottom: 0;
+    }
+  } 
 
   &__link:hover {
     text-decoration-thickness: 3px;

package/components/card/_macro.njk

@@ -5,36 +5,18 @@
   {% set titleSize = params.titleSize | default('2') %}
 
   <div class="ons-card">
-
-    {%- if params.image -%}
-      {%- if params.url -%}
-        <a href="{{ params.url }}" class="ons-card__link">
-      {%- endif -%}
-          <h{{ titleSize }} class="ons-card__title ons-card__title--reorder {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
-              {{ params.title }}
-          </h{{ titleSize }}>
-          {% if params.image.smallSrc %}
-            <img class="ons-card__image ons-u-mb-s ons-card__image--reorder" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-          {% elif params.image == true or params.image.placeholderURL %}
-            <img class="ons-card__image ons-u-mb-s ons-card__image--reorder" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
-          {% endif %}
-      {%- if params.url -%}
-        </a>
+    <a href="{{ params.url }}" class="ons-card__link">
+      {%- if params.image -%}
+        {% if params.image.smallSrc %}
+          <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+        {% elif params.image == true or params.image.placeholderURL %}
+          <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+        {% endif %}
       {%- endif -%}
-
-    {%- else -%}
-
-      <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}">
-        {%- if params.url -%}
-          <a class="ons-card__link" href="{{ params.url }}">
-        {%- endif -%}
+      <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
           {{ params.title }}
-        {%- if params.url -%}
-          </a>
-        {%- endif -%}
       </h{{ titleSize }}>
-
-    {%- endif -%}
+    </a>
 
     <p id="{{ params.textId }}">{{ params.text }}</p>
 

package/components/skip-to-content/_skip.scss

@@ -26,7 +26,7 @@
     overflow: visible;
     padding: 1rem;
     position: static;
-    text-decoration: underline solid var(--ons-color-text-link-focus) 2px;
+    text-decoration: underline solid var(--ons-color-text-link-focus) 4px;
     white-space: inherit;
     width: auto;
   }