@ons/design-system 64.0.0 → 65.1.0

package/components/access-code/_macro.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% macro onsUACInput(params) %}
+{% macro onsAccessCode(params) %}
     {% set groupSize = params.groupSize | default(4) %}
     {% set extraSpaces = (params.maxlength | default(16) / groupSize) - 1 %}
     {% set maxlength = params.maxlength | default(16) + extraSpaces %}
@@ -11,7 +11,7 @@
             "id": params.id,
             "type": params.type,
             "name": params.name,
-            "classes": "ons-uac__input ons-js-uac" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
+            "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
             "label": params.label,
             "attributes": {
                 "maxlength": maxlength,

package/components/access-code/_macro.spec.js

@@ -150,13 +150,13 @@ describe('macro: access-code', () => {
     const $ = cheerio.load(
       renderComponent('access-code', {
         error: {
-          id: 'uac-error',
+          id: 'access-code-error',
           text: 'Enter an access code',
         },
       }),
     );
 
-    expect($('#uac-error').length).toBe(1);
+    expect($('#access-code-error').length).toBe(1);
     expect($('.ons-panel__error > strong').text()).toBe('Enter an access code');
   });
 });

package/components/access-code/access-code.dom.js

@@ -0,0 +1,11 @@
+import domready from '../../js/domready';
+
+domready(async () => {
+  const accessCodeInputs = [...document.querySelectorAll('.ons-js-access-code')];
+
+  if (accessCodeInputs.length) {
+    const accessCode = (await import('./access-code')).default;
+
+    accessCodeInputs.forEach(element => new accessCode(element));
+  }
+});

package/components/access-code/{uac.js → access-code.js}

@@ -1,4 +1,4 @@
-export default class UAC {
+export default class AccessCode {
   constructor(context) {
     this.input = context;
     const groupSize = parseInt(context.getAttribute('data-group-size'), 10);

package/components/access-code/{uac.scss → access-code.scss}

@@ -1,4 +1,4 @@
-.ons-uac {
+.ons-access-code {
   &__input {
     font-family: $font-mono !important;
     font-weight: $font-weight-bold;

package/components/access-code/example-access-code-error.njk

@@ -3,7 +3,7 @@ title: "Example: Access code error"
 layout: ~
 ---
 {% extends "layout/_template.njk" %}
-{% from "components/access-code/_macro.njk" import onsUACInput %}
+{% from "components/access-code/_macro.njk" import onsAccessCode %}
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/details/_macro.njk" import onsDetails %}
@@ -27,7 +27,7 @@ layout: ~
                 "itemsList": [
                     {
                         "text": "Enter an access code",
-                        "url": "#uac-error",
+                        "url": "#access-code-error",
                         "variants": "inPageLink"
                     }
                 ]
@@ -37,9 +37,9 @@ layout: ~
 
     <h1 class="ons-u-mt-l">Start study</h1>
 
-    {{ onsUACInput({
-        "id": "uac",
-        "name": "uac",
+    {{ onsAccessCode({
+        "id": "access-code",
+        "name": "access-code",
         "postTextboxLinkText": "Where to find your access code",
         "postTextboxLinkUrl": "#0",
         "label": {
@@ -48,7 +48,7 @@ layout: ~
         },
         "securityMessage": "Your personal information is protected by law and will be kept confidential",
         "error": {
-            "id": "uac-error",
+            "id": "access-code-error",
             "text": "Enter an access code"
         }
     }) }}

package/components/access-code/example-access-code.njk

@@ -3,7 +3,7 @@ title: "Example: Access code"
 layout: ~
 ---
 {% extends "layout/_template.njk" %}
-{% from "components/access-code/_macro.njk" import onsUACInput %}
+{% from "components/access-code/_macro.njk" import onsAccessCode %}
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/details/_macro.njk" import onsDetails %}
@@ -17,9 +17,9 @@ layout: ~
 {% block main %}
     <h1 class="ons-u-mt-l">Start study</h1>
 
-    {{ onsUACInput({
-        "id": "uac",
-        "name": "uac",
+    {{ onsAccessCode({
+        "id": "access-code",
+        "name": "access-code",
         "postTextboxLinkText": "Where to find your access code",
         "postTextboxLinkUrl": "#0",
         "label": {

package/components/accordion/_macro.njk

@@ -15,9 +15,9 @@
                 onsButton({
                     "type": "button",
                     "text": params.allButton.open,
-                    "classes": "ons-js-accordion-all ons-u-mb-s ons-u-d-no",
+                    "classes": "ons-accordion__toggle-all ons-u-mb-s ons-u-d-no",
                     "variants": ["secondary", "small"],
-                    "innerClasses": "ons-js-accordion-all-inner",
+                    "innerClasses": "ons-accordion__toggle-all-inner",
                     "attributes": attributes
                 })
             }}

package/components/accordion/_macro.spec.js

@@ -162,7 +162,7 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('button.ons-js-accordion-all').length).toBe(1);
+      expect($('button.ons-accordion__toggle-all').length).toBe(1);
     });
 
     it('has additionally provided `attributes`', () => {
@@ -180,8 +180,8 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('button.ons-js-accordion-all').attr('a')).toBe('123');
-      expect($('button.ons-js-accordion-all').attr('b')).toBe('456');
+      expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
+      expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
     });
   });
 });

package/components/accordion/accordion.dom.js

@@ -1,7 +1,7 @@
 import domready from '../../js/domready';
 
 async function initialiseAccordions() {
-  const toggleAllButtons = [...document.querySelectorAll('.ons-js-accordion-all')];
+  const toggleAllButtons = [...document.querySelectorAll('.ons-accordion__toggle-all')];
 
   if (toggleAllButtons.length) {
     const detailsComponents = [...document.querySelectorAll('.ons-js-details')];

package/components/accordion/accordion.js

@@ -3,7 +3,7 @@ export default class Accordion {
     this.openDetailsEls = 0;
 
     this.button = button;
-    this.buttonInner = button.querySelector('.ons-js-accordion-all-inner');
+    this.buttonInner = button.querySelector('.ons-accordion__toggle-all-inner');
     this.group = button.getAttribute('data-group');
     this.detailsEls = detailsEls.filter(details => details.group === this.group);
     this.totalDetailsEls = this.detailsEls.length;

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.');