@ons/design-system 65.0.0 → 65.1.0

package/components/address-input/autosuggest.address.error.js

@@ -2,7 +2,7 @@ import inPageLinks from '../../js/inpagelink';
 
 const classAutosuggest = 'ons-js-address-autosuggest';
 const classErrorPanel = 'ons-js-autosuggest-error-panel';
-const classInputContainer = 'ons-autosuggest-input';
+const classInputContainer = 'ons-autosuggest';
 const classInput = 'ons-js-autosuggest-input';
 const classSearch = 'ons-js-address-input__search';
 

package/components/address-input/autosuggest.address.js

@@ -4,7 +4,7 @@ import AutosuggestUI from '../autosuggest/autosuggest.ui';
 import AddressError from './autosuggest.address.error';
 import AddressSetter from './autosuggest.address.setter';
 
-export const classInputContainer = 'ons-autosuggest-input';
+export const classInputContainer = 'ons-autosuggest';
 export const classNotEditable = 'ons-js-address-not-editable';
 export const classMandatory = 'ons-js-address-mandatory';
 export const classSearch = 'ons-js-address-input__search';
@@ -205,7 +205,7 @@ export default class AutosuggestAddress {
           (townName === postTown ? postTown : townName + ', ' + postTown) +
           ', ' +
           postcode +
-          ' (<span class="ons-autosuggest-input__group">' +
+          ' (<span class="ons-autosuggest__group">' +
           this.groupCount.replace(`{n}`, addressCount) +
           '</span>)',
         postcode,

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

@@ -241,7 +241,7 @@ describe('script: address-input', () => {
       await page.type('.ons-js-autosuggest-input', '2', { delay: 20 });
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('196 College Road, Birmingham, B44 8HF');
     });
 
@@ -267,7 +267,7 @@ describe('script: address-input', () => {
       });
 
       it('has expected suggestion entries', async () => {
-        const suggestions = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.map(node => node.textContent.trim()));
+        const suggestions = await page.$$eval('.ons-autosuggest__option', nodes => nodes.map(node => node.textContent.trim()));
         expect(suggestions).toEqual(['196 College Road, Birmingham, B44 8HF', '196 College Road, Whitchurch, Cardiff, CF14 2NZ']);
       });
     });
@@ -313,7 +313,7 @@ describe('script: address-input', () => {
       });
 
       it('has expected suggestion entries', async () => {
-        const suggestions = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.map(node => node.textContent.trim()));
+        const suggestions = await page.$$eval('.ons-autosuggest__option', nodes => nodes.map(node => node.textContent.trim()));
         expect(suggestions).toEqual(['1 Penlline Road, Whitchurch, Cardiff, CF14 2NZ', '2 Penlline Road, Whitchurch, Cardiff, CF14 2NZ']);
       });
 
@@ -353,7 +353,7 @@ describe('script: address-input', () => {
       });
 
       it('has expected suggestion entries', async () => {
-        const suggestions = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.map(node => node.textContent.trim()));
+        const suggestions = await page.$$eval('.ons-autosuggest__option', nodes => nodes.map(node => node.textContent.trim()));
         expect(suggestions).toEqual([
           'Penlline Road, Whitchurch, Cardiff, CF14 2AA (41 addresses)',
           '197 College Road, Whitchurch, Cardiff, CF14 2AB',
@@ -376,7 +376,7 @@ describe('script: address-input', () => {
         });
 
         it('has expected suggestion entries', async () => {
-          const suggestions = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.map(node => node.textContent.trim()));
+          const suggestions = await page.$$eval('.ons-autosuggest__option', nodes => nodes.map(node => node.textContent.trim()));
           expect(suggestions).toEqual(['197 College Road, Whitchurch, Cardiff, CF14 2AB']);
         });
 

package/components/autosuggest/_autosuggest.scss

@@ -1,4 +1,4 @@
-.ons-autosuggest-input {
+.ons-autosuggest {
   position: relative;
 
   &__combobox {
@@ -57,8 +57,8 @@
       border-color: var(--ons-color-text-link-hover);
       color: var(--ons-color-white);
 
-      .ons-autosuggest-input__group,
-      .ons-autosuggest-input__category {
+      .ons-autosuggest__group,
+      .ons-autosuggest__category {
         color: var(--ons-color-white);
       }
     }
@@ -67,8 +67,8 @@
       background: var(--ons-color-focus);
       color: var(--ons-color-text-link-focus);
 
-      .ons-autosuggest-input__group,
-      .ons-autosuggest-input__category {
+      .ons-autosuggest__group,
+      .ons-autosuggest__category {
         color: var(--ons-color-text-link-focus);
       }
     }
@@ -91,6 +91,11 @@
     }
   }
 
+  &__wrapper {
+    max-width: max-content;
+    width: 100%;
+  }
+
   &__panel.ons-panel--warn {
     background: none;
     border: 0;
@@ -126,7 +131,7 @@
   }
 
   &--header {
-    .ons-autosuggest-input__results {
+    .ons-autosuggest__results {
       border: none;
       box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.6);
       left: 0;

package/components/autosuggest/_macro.njk

@@ -3,7 +3,7 @@
 {% macro onsAutosuggest(params) %}
     <div
         id="{{ params.id }}-container"
-        class="{% if not params.externalInitialiser %}ons-js-autosuggest {% endif %}{% if params.isEditable == false %}ons-js-address-not-editable{% endif %}{% if params.mandatory == true %} ons-js-address-mandatory{% endif %} {% if params.containerClasses %} {{ params.containerClasses }}{% endif %} ons-autosuggest-input"
+        class="{% if not params.externalInitialiser %}ons-js-autosuggest {% endif %}{% if params.isEditable == false %}ons-js-address-not-editable{% endif %}{% if params.mandatory == true %} ons-js-address-mandatory{% endif %} {% if params.containerClasses %} {{ params.containerClasses }}{% endif %} ons-autosuggest"
         data-instructions="{{ params.instructions }}"
         data-aria-you-have-selected="{{ params.ariaYouHaveSelected }}"
         data-min-chars="{{ params.minChars }}"
@@ -36,38 +36,39 @@
     >
 
         {% set autosuggestResults %}
-            <div class="ons-autosuggest-input__results ons-js-autosuggest-results">
-                <div id="{{ params.resultsTitleId }}" class="ons-autosuggest-input__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
-                <ul class="ons-autosuggest-input__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
+            <div class="ons-autosuggest__results ons-js-autosuggest-results">
+                <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-input__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
-            <div class="ons-autosuggest-input__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></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 %}
+        <div class="ons-autosuggest__wrapper">
+            {{ 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
+            }) }}
 
-        {{ 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 %}
+            {% if not params.mutuallyExclusive %}
+                {{ autosuggestResults | safe }}
+            {% endif %}
+         </div>
     </div>
 {% endmacro %}

package/components/autosuggest/_macro.spec.js

@@ -41,13 +41,13 @@ describe('macro: autosuggest', () => {
   it('has expected id on container element', () => {
     const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-    expect($('.ons-autosuggest-input').attr('id')).toBe('country-of-birth-container');
+    expect($('.ons-autosuggest').attr('id')).toBe('country-of-birth-container');
   });
 
   it('has the provided data attributes', () => {
     const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-    const $element = $('.ons-autosuggest-input');
+    const $element = $('.ons-autosuggest');
     expect($element.attr('data-allow-multiple')).toBeUndefined();
     expect($element.attr('data-min-chars')).toBe('2');
     expect($element.attr('data-aria-limited-results')).toBe('Type more characters to improve your search');
@@ -71,13 +71,13 @@ describe('macro: autosuggest', () => {
       }),
     );
 
-    expect($('.ons-autosuggest-input').attr('data-allow-multiple')).toBe('true');
+    expect($('.ons-autosuggest').attr('data-allow-multiple')).toBe('true');
   });
 
   it('has a special class that indicates the component should initialise itself', () => {
     const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-    expect($('.ons-autosuggest-input').hasClass('ons-js-autosuggest')).toBe(true);
+    expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true);
   });
 
   it('does not have a special class when the component has an external initialiser', () => {
@@ -88,7 +88,7 @@ describe('macro: autosuggest', () => {
       }),
     );
 
-    expect($('.ons-autosuggest-input').hasClass('ons-js-autosuggest')).toBe(false);
+    expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(false);
   });
 
   it('has special class to indicate that component is not editable', () => {
@@ -99,7 +99,7 @@ describe('macro: autosuggest', () => {
       }),
     );
 
-    expect($('.ons-autosuggest-input').hasClass('ons-js-address-not-editable')).toBe(true);
+    expect($('.ons-autosuggest').hasClass('ons-js-address-not-editable')).toBe(true);
   });
 
   it('has special class to indicate that component input is mandatory', () => {
@@ -110,7 +110,7 @@ describe('macro: autosuggest', () => {
       }),
     );
 
-    expect($('.ons-autosuggest-input').hasClass('ons-js-address-mandatory')).toBe(true);
+    expect($('.ons-autosuggest').hasClass('ons-js-address-mandatory')).toBe(true);
   });
 
   it('has additionally provided container style classes', () => {
@@ -121,8 +121,8 @@ describe('macro: autosuggest', () => {
       }),
     );
 
-    expect($('.ons-autosuggest-input').hasClass('extra-class')).toBe(true);
-    expect($('.ons-autosuggest-input').hasClass('another-extra-class')).toBe(true);
+    expect($('.ons-autosuggest').hasClass('extra-class')).toBe(true);
+    expect($('.ons-autosuggest').hasClass('another-extra-class')).toBe(true);
   });
 
   describe('input', () => {
@@ -168,7 +168,7 @@ describe('macro: autosuggest', () => {
     it('is rendered `mutallyExclusive` parameter is not defined', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect($('.ons-autosuggest-input__results').length).toBe(1);
+      expect($('.ons-autosuggest__results').length).toBe(1);
     });
 
     it('is not rendered when `mutallyExclusive` parameter is defined', () => {
@@ -179,20 +179,20 @@ describe('macro: autosuggest', () => {
         }),
       );
 
-      expect($('.ons-autosuggest-input__results').length).toBe(0);
+      expect($('.ons-autosuggest__results').length).toBe(0);
     });
 
     it('renders div with the provided title identifier', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect($('.ons-autosuggest-input__results-title').attr('id')).toBe('country-of-birth-suggestions');
+      expect($('.ons-autosuggest__results-title').attr('id')).toBe('country-of-birth-suggestions');
     });
 
     it('renders div with the provided title text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
       expect(
-        $('.ons-autosuggest-input__results-title')
+        $('.ons-autosuggest__results-title')
           .text()
           .trim(),
       ).toBe('Suggestions');
@@ -201,32 +201,32 @@ describe('macro: autosuggest', () => {
     it('renders list with a generated identifier', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect($('.ons-autosuggest-input__listbox').attr('id')).toBe('country-of-birth-listbox');
+      expect($('.ons-autosuggest__listbox').attr('id')).toBe('country-of-birth-listbox');
     });
 
     it('renders an accessible list', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect($('.ons-autosuggest-input__listbox').attr('title')).toBe('Suggestions');
+      expect($('.ons-autosuggest__listbox').attr('title')).toBe('Suggestions');
     });
 
     it('renders instructions with a generated identifier', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect($('.ons-autosuggest-input__instructions').attr('id')).toBe('country-of-birth-instructions');
+      expect($('.ons-autosuggest__instructions').attr('id')).toBe('country-of-birth-instructions');
     });
 
     it('adds aria-atomic=true value to status container', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect($('.ons-autosuggest-input__status').attr('aria-atomic')).toBe('true');
+      expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true');
     });
 
     it('renders instructions text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
       expect(
-        $('.ons-autosuggest-input__instructions')
+        $('.ons-autosuggest__instructions')
           .text()
           .trim(),
       ).toBe('Use up and down keys to navigate.');

package/components/autosuggest/autosuggest.spec.js

@@ -88,7 +88,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -99,7 +99,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States Virgin Islands');
     });
 
@@ -110,10 +110,10 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const ariaSelectedValue = await page.$eval('.ons-autosuggest-input__option--focused', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('aria-selected'));
       expect(ariaSelectedValue).toBe('true');
 
-      const selectedOptionId = await page.$eval('.ons-autosuggest-input__option--focused', node => node.getAttribute('id'));
+      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('id'));
       const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-activedescendant'));
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
@@ -135,7 +135,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest-input__option[aria-selected=true]', nodes => nodes.length);
+      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', nodes => nodes.length);
       expect(selectedSuggestionCount).toBe(1);
     });
 
@@ -147,7 +147,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States Virgin Islands');
     });
 
@@ -174,7 +174,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -186,7 +186,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -198,10 +198,10 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const ariaSelectedValue = await page.$eval('.ons-autosuggest-input__option--focused', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('aria-selected'));
       expect(ariaSelectedValue).toBe('true');
 
-      const selectedOptionId = await page.$eval('.ons-autosuggest-input__option--focused', node => node.getAttribute('id'));
+      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('id'));
       const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-activedescendant'));
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
@@ -214,7 +214,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest-input__option[aria-selected=true]', nodes => nodes.length);
+      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', nodes => nodes.length);
       expect(selectedSuggestionCount).toBe(1);
     });
 
@@ -225,7 +225,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowUp');
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest-input__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -264,15 +264,15 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('Tab');
 
-      const suggestionCountSample1 = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCountSample1).toBe(2);
 
       await page.waitForTimeout(200);
-      const suggestionCountSample2 = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCountSample2).toBe(2);
 
       await page.waitForTimeout(320);
-      const suggestionCountSample3 = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCountSample3).toBe(0);
     });
 
@@ -294,7 +294,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('Tab');
       await page.waitForTimeout(320);
 
-      const hasClass = await page.$eval('.ons-autosuggest-input', node => node.classList.contains('ons-autosuggest-input--has-results'));
+      const hasClass = await page.$eval('.ons-autosuggest', node => node.classList.contains('ons-autosuggest--has-results'));
       expect(hasClass).toBe(false);
     });
 
@@ -316,7 +316,7 @@ describe('script: autosuggest', () => {
       await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
-      await page.click('.ons-autosuggest-input__option:nth-child(2)');
+      await page.click('.ons-autosuggest__option:nth-child(2)');
 
       const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
       expect(inputValue).toBe('United States Virgin Islands');
@@ -329,7 +329,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'En', { delay: 20 });
 
-      const suggestionCount = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCount).toBe(0);
     });
 
@@ -338,7 +338,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
 
-      const suggestionCount = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const suggestionCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(suggestionCount).toBe(1);
     });
   });
@@ -349,9 +349,9 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 });
       await page.keyboard.press('ArrowDown');
-      await page.hover('.ons-autosuggest-input__option:nth-child(2)');
+      await page.hover('.ons-autosuggest__option:nth-child(2)');
 
-      const focusedClassCount = await page.$$eval('.ons-autosuggest-input__option--focused', nodes => nodes.length);
+      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
       expect(focusedClassCount).toBe(0);
     });
   });
@@ -368,10 +368,10 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 });
       await page.keyboard.press('ArrowDown');
-      await page.hover('.ons-autosuggest-input__option:nth-child(2)');
+      await page.hover('.ons-autosuggest__option:nth-child(2)');
       await page.hover('#dummy');
 
-      const focusedClassCount = await page.$$eval('.ons-autosuggest-input__option--focused', nodes => nodes.length);
+      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
       expect(focusedClassCount).toBe(1);
     });
   });
@@ -384,7 +384,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.type('.ons-js-autosuggest-input', 'd', { delay: 20 });
 
-      const focusedNodeCount = await page.$$eval('.ons-autosuggest-input__option--focused', nodes => nodes.length);
+      const focusedNodeCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
       expect(focusedNodeCount).toBe(0);
     });
 
@@ -402,7 +402,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
 
-      const emboldened = await page.$$eval('.ons-autosuggest-input__option strong', nodes => nodes.map(node => node.textContent));
+      const emboldened = await page.$$eval('.ons-autosuggest__option strong', nodes => nodes.map(node => node.textContent));
       expect(emboldened).toEqual(['Unite', 'Unite']);
     });
 
@@ -411,9 +411,9 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'tland', { delay: 20 });
 
-      const matchCount = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+      const matchCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
       expect(matchCount).toBe(2);
-      const emboldened = await page.$$eval('.ons-autosuggest-input__option strong', nodes => nodes.map(node => node.textContent));
+      const emboldened = await page.$$eval('.ons-autosuggest__option strong', nodes => nodes.map(node => node.textContent));
       expect(emboldened).toEqual(['tland']);
     });
 
@@ -452,7 +452,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const noResultsContent = await page.$eval('.ons-autosuggest-input__option--no-results', node => node.textContent);
+        const noResultsContent = await page.$eval('.ons-autosuggest__option--no-results', node => node.textContent);
         expect(noResultsContent).toBe('No suggestions found.');
       });
 
@@ -496,7 +496,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const matchCount = await page.$$eval('.ons-autosuggest-input__option', nodes => nodes.length);
+        const matchCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
         expect(matchCount).toBe(0);
       });
 
@@ -534,7 +534,7 @@ describe('script: autosuggest', () => {
       it('shows the type more message', async () => {
         const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', nodes => nodes.length);
         expect(listItemCount).toBe(1);
-        const noResultsText = await page.$eval('.ons-autosuggest-input__option--no-results', node => node.innerText);
+        const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', node => node.innerText);
         expect(noResultsText.trim()).toBe('Continue entering to get suggestions');
       });
     });
@@ -565,7 +565,7 @@ 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 warningText = await page.$eval('.ons-autosuggest-input__warning', node => node.textContent);
+        const warningText = await page.$eval('.ons-autosuggest__warning', node => node.textContent);
         expect(warningText.trim()).toBe('!Sorry, there is a problem.');
       });
 

package/components/autosuggest/autosuggest.ui.js

@@ -4,12 +4,12 @@ import runFuse from './fuse-config';
 
 export const baseClass = 'ons-js-autosuggest';
 
-export const classAutosuggestOption = 'ons-autosuggest-input__option';
+export const classAutosuggestOption = 'ons-autosuggest__option';
 export const classAutosuggestOptionFocused = `${classAutosuggestOption}--focused`;
 export const classAutosuggestOptionNoResults = `${classAutosuggestOption}--no-results`;
 export const classAutosuggestOptionMoreResults = `${classAutosuggestOption}--more-results ons-u-fs-s`;
-export const classAutosuggestHasResults = 'ons-autosuggest-input--has-results';
-export const classAutosuggestResultsTitle = 'ons-autosuggest-input__results-title';
+export const classAutosuggestHasResults = 'ons-autosuggest--has-results';
+export const classAutosuggestResultsTitle = 'ons-autosuggest__results-title';
 
 export default class AutosuggestUI {
   constructor({
@@ -117,7 +117,7 @@ export default class AutosuggestUI {
     this.input.setAttribute('autocomplete', this.input.getAttribute('autocomplete') || 'off');
     this.input.setAttribute('role', 'combobox');
 
-    this.context.classList.add('ons-autosuggest-input--initialised');
+    this.context.classList.add('ons-autosuggest--initialised');
 
     this.bindEventListeners();
   }
@@ -350,8 +350,7 @@ export default class AutosuggestUI {
           listElement.setAttribute('id', `${this.listboxId}__option--${index}`);
           listElement.setAttribute('role', 'option');
           if (result.category) {
-            innerHTML =
-              innerHTML + `<span class="ons-autosuggest-input__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
+            innerHTML = innerHTML + `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
           }
           listElement.innerHTML = innerHTML;
           listElement.addEventListener('click', () => {
@@ -434,7 +433,7 @@ export default class AutosuggestUI {
           option.classList.add(classAutosuggestOptionFocused);
           option.setAttribute('aria-selected', true);
           this.input.setAttribute('aria-activedescendant', option.getAttribute('id'));
-          const groupedResult = option.querySelector('.ons-autosuggest-input__group');
+          const groupedResult = option.querySelector('.ons-autosuggest__group');
           const optionText = option.innerHTML.replace('<strong>', '').replace('</strong>', '');
           if (groupedResult) {
             let groupedAriaMsg = this.ariaGroupedResults.replace('{n}', groupedResult.innerHTML);
@@ -503,8 +502,8 @@ export default class AutosuggestUI {
     const warningBodyElement = document.createElement('div');
 
     warningListElement.setAttribute('aria-hidden', 'true');
-    warningListElement.className = 'ons-autosuggest-input__warning';
-    warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest-input__panel';
+    warningListElement.className = 'ons-autosuggest__warning';
+    warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel';
 
     warningSpanElement.className = 'ons-panel__icon';
     warningSpanElement.setAttribute('aria-hidden', 'true');

package/components/card/_card.scss

@@ -1,6 +1,20 @@
 .ons-card {
   margin: 0 0 2rem;
   width: 100%;
+
+  &__link {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__image--reorder {
+    order: 1;
+  }
+
+  &__title--reorder {
+    order: 2;
+  }
+
   &__link:hover {
     text-decoration-thickness: 3px;
   }