@ons/design-system 65.0.0 → 65.2.0

package/components/access-code/access-code.scss

@@ -6,17 +6,17 @@
     text-transform: uppercase;
     width: 15.1em;
 
-    @media all and (min-width: 375px) {
+    @media all and (width >= 375px) {
       font-size: 20px !important;
       width: 15.1em !important;
     }
 
-    @media all and (max-width: 374px) {
+    @media all and (width <= 374px) {
       letter-spacing: 0;
       max-width: 12.6em !important;
     }
 
-    @media all and (max-width: 299px) {
+    @media all and (width <= 299px) {
       max-width: 100%;
     }
 

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 {
@@ -51,24 +51,24 @@
       border-bottom: 1px solid var(--ons-color-input-border);
     }
 
-    &:not(&--no-results):not(&--more-results):hover,
+    &:not(&--no-results, &--more-results):hover,
     &--focused:not(&--no-results) {
       background: var(--ons-color-text-link-hover);
       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);
       }
     }
 
-    &:active:not(&--no-results):not(&--more-results) {
+    &:active:not(&--no-results, &--more-results) {
       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);
       }
     }
@@ -126,9 +126,9 @@
   }
 
   &--header {
-    .ons-autosuggest-input__results {
+    .ons-autosuggest__results {
       border: none;
-      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.6);
+      box-shadow: 0 0 5px 0 rgb(34 34 34 / 60%);
       left: 0;
       position: absolute;
       z-index: 10;

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,37 @@
     >
 
         {% 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{% if params.width %} ons-input--w-{{ params.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-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 %}
+            {{ 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>
 {% 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.');
       });