@ons/design-system 63.0.0 → 65.0.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/breadcrumbs/_breadcrumbs.scss

@@ -1,6 +1,6 @@
 $breadcrumb-chevron-height: 0.65rem;
 
-.ons-breadcrumb {
+.ons-breadcrumbs {
   align-items: center;
   display: flex;
   padding: 1rem 0;
@@ -20,7 +20,7 @@ $breadcrumb-chevron-height: 0.65rem;
       display: none;
     }
 
-    .ons-svg-icon {
+    .ons-icon {
       height: $breadcrumb-chevron-height;
       margin: 0 0.2rem;
       vertical-align: middle;
@@ -30,7 +30,7 @@ $breadcrumb-chevron-height: 0.65rem;
     &:nth-last-child(1) {
       // small screen last child
       direction: rtl;
-      .ons-svg-icon {
+      .ons-icon {
         margin-left: -0.13rem;
         transform: rotate(180deg);
       }
@@ -46,7 +46,7 @@ $breadcrumb-chevron-height: 0.65rem;
       &:nth-last-child(1) {
         // last child
         direction: ltr;
-        .ons-svg-icon {
+        .ons-icon {
           display: none;
         }
       }
@@ -54,13 +54,13 @@ $breadcrumb-chevron-height: 0.65rem;
       &:first-child:nth-last-child(1) {
         //first and last child
         direction: rtl;
-        .ons-svg-icon {
+        .ons-icon {
           display: inline-block;
           vertical-align: middle;
         }
       }
 
-      &:not(:last-child).ons-svg-icon {
+      &:not(:last-child).ons-icon {
         //not last child
         margin: 0;
 

package/components/breadcrumbs/_macro.njk

@@ -1,11 +1,11 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
 
 {% macro onsBreadcrumbs(params) %}
-    <nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>
-        <ol class="ons-breadcrumb__items ons-u-fs-s">
+    <nav class="ons-breadcrumbs{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>
+        <ol class="ons-breadcrumbs__items ons-u-fs-s">
             {% for item in params.itemsList %}
-                <li class="ons-breadcrumb__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
-                    <a class="ons-breadcrumb__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
+                <li class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
+                    <a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
                     {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                     >{{ item.text }}</a>
                     {{

package/components/breadcrumbs/_macro.spec.js

@@ -58,62 +58,62 @@ describe('macro: breadcrumbs', () => {
   it('has additionally provided style classes', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb').hasClass('extra-class')).toBe(true);
-    expect($('.ons-breadcrumb').hasClass('another-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
   });
 
   it('has a default `aria-label` of "Breadcrumbs"', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
 
-    expect($('.ons-breadcrumb').attr('aria-label')).toBe('Breadcrumbs');
+    expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
   });
 
   it('has the provided `ariaLabel` for `aria-label`', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb').attr('aria-label')).toBe('Breadcrumbs label');
+    expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
   });
 
   it('has the provided `id`', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb').attr('id')).toBe('example-breadcrumbs');
+    expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
   });
 
   it('has additionally provided style classes on `item` element', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb__item:first').hasClass('item-extra-class')).toBe(true);
-    expect($('.ons-breadcrumb__item:first').hasClass('item-another-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
   });
 
   it('has additionally provided style classes on `link` element', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumb__link:first').hasClass('link-extra-class')).toBe(true);
-    expect($('.ons-breadcrumb__link:first').hasClass('link-another-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
+    expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
   });
 
   it('has provided `url` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const urls = mapAll($('.ons-breadcrumb__link'), node => node.attr('href'));
+    const urls = mapAll($('.ons-breadcrumbs__link'), node => node.attr('href'));
     expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
   });
 
   it('has provided `text` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const labels = mapAll($('.ons-breadcrumb__link'), node => node.text().trim());
+    const labels = mapAll($('.ons-breadcrumbs__link'), node => node.text().trim());
     expect(labels).toEqual(['Home', 'Guide']);
   });
 
   it('has provided `attributes` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const testValuesA = mapAll($('.ons-breadcrumb__link'), node => node.attr('data-a'));
+    const testValuesA = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-a'));
     expect(testValuesA).toEqual(['123', '789']);
-    const testValuesB = mapAll($('.ons-breadcrumb__link'), node => node.attr('data-b'));
+    const testValuesB = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-b'));
     expect(testValuesB).toEqual(['456', 'ABC']);
   });
 

package/components/button/_button.scss

@@ -31,7 +31,7 @@ $button-shadow-size: 3px;
   }
 
   &--search {
-    .ons-svg-icon {
+    .ons-icon {
       @include mq(s, l) {
         margin-right: 0.5rem;
       }
@@ -49,7 +49,7 @@ $button-shadow-size: 3px;
     pointer-events: none;
     position: relative;
 
-    .ons-svg-icon {
+    .ons-icon {
       fill: var(--ons-color-text-inverse);
       height: 18px;
       margin-top: -$button-shadow-size;
@@ -76,7 +76,7 @@ $button-shadow-size: 3px;
     box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-text-link-focus);
     color: var(--ons-color-text-link-focus);
 
-    .ons-svg-icon {
+    .ons-icon {
       fill: var(--ons-color-text-link-focus);
     }
   }
@@ -93,7 +93,7 @@ $button-shadow-size: 3px;
       box-shadow: none;
       color: var(--ons-color-text-inverse);
 
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse);
       }
     }
@@ -112,7 +112,7 @@ $button-shadow-size: 3px;
   &--small & {
     &__inner {
       padding: 0.5em 0.7em;
-      .ons-svg-icon {
+      .ons-icon {
         height: 16px;
         width: 16px;
       }
@@ -141,7 +141,7 @@ $button-shadow-size: 3px;
       color: var(--ons-color-text);
       font-weight: $font-weight-regular;
 
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text);
       }
     }
@@ -177,7 +177,7 @@ $button-shadow-size: 3px;
     outline: inherit;
 
     &__inner {
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text);
       }
     }
@@ -196,7 +196,7 @@ $button-shadow-size: 3px;
       color: var(--ons-color-text-link);
       font-weight: $font-weight-regular;
       padding: 0;
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-link);
       }
     }
@@ -205,7 +205,7 @@ $button-shadow-size: 3px;
   &--text-link-inverse & {
     &__inner {
       color: var(--ons-color-text-inverse-link);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse-link);
       }
     }
@@ -217,7 +217,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: none;
       color: var(--ons-color-text-link-hover);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-link-hover);
       }
     }
@@ -228,7 +228,7 @@ $button-shadow-size: 3px;
   &--text-link-inverse.active & {
     &__inner {
       color: var(--ons-color-text-inverse-link-hover);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse-link-hover);
       }
     }
@@ -247,7 +247,7 @@ $button-shadow-size: 3px;
       background-color: var(--ons-color-focus);
       box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus) !important;
       color: var(--ons-color-text-link-focus);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-link-focus);
       }
     }
@@ -259,7 +259,7 @@ $button-shadow-size: 3px;
       border: 2px solid rgba(255, 255, 255, 0.6);
       box-shadow: none;
       color: var(--ons-color-text-inverse);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse);
       }
     }
@@ -271,7 +271,7 @@ $button-shadow-size: 3px;
       border: 2px solid var(--ons-color-black);
       box-shadow: none;
       color: var(--ons-color-text);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text);
       }
     }
@@ -306,7 +306,7 @@ $button-shadow-size: 3px;
   &--dropdown:focus:hover & {
     &__inner {
       color: var(--ons-color-text);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text);
       }
     }
@@ -326,7 +326,7 @@ $button-shadow-size: 3px;
       background: rgba(0, 0, 0, 0.2);
       border-color: rgba(255, 255, 255, 0.6);
       color: var(--ons-color-text-inverse);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-inverse);
       }
     }
@@ -340,7 +340,7 @@ $button-shadow-size: 3px;
       background: var(--ons-color-black);
       border-color: var(--ons-color-black);
       color: var(--ons-color-white);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-white);
       }
     }
@@ -352,7 +352,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: var(--ons-color-focus);
       color: var(--ons-color-text-link-focus);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-text-link-focus);
       }
     }
@@ -364,7 +364,7 @@ $button-shadow-size: 3px;
     &__inner {
       border-color: var(--ons-color-text-link-focus);
       box-shadow: 0 0 0 1px var(--ons-color-text-link-focus);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-black);
       }
     }
@@ -374,7 +374,7 @@ $button-shadow-size: 3px;
     &__inner {
       position: relative;
       transition: color 0.3s ease-in-out;
-      .ons-svg-icon {
+      .ons-icon {
         height: 27px;
         left: 50%;
         margin: 0;
@@ -389,7 +389,7 @@ $button-shadow-size: 3px;
   }
 
   &--loader.ons-btn--small {
-    .ons-svg-icon {
+    .ons-icon {
       height: 24px;
       width: 24px;
     }
@@ -398,7 +398,7 @@ $button-shadow-size: 3px;
   &--loader.ons-is-loading & {
     &__inner {
       color: transparent;
-      .ons-svg-icon {
+      .ons-icon {
         margin-left: 0 !important;
         opacity: 1;
       }
@@ -423,14 +423,14 @@ $button-shadow-size: 3px;
 
   &--mobile[aria-expanded='true'],
   &--text-link[aria-expanded='true'] {
-    .ons-svg-icon {
+    .ons-icon {
       transform: rotate(270deg);
     }
   }
 
   &--mobile,
   &--text-link {
-    .ons-svg-icon {
+    .ons-icon {
       transform: rotate(90deg);
     }
 
@@ -479,7 +479,7 @@ $button-shadow-size: 3px;
       padding: 0.6rem 1rem;
       text-align: left;
 
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-branded-text);
         float: right;
         margin-top: 3px;
@@ -491,7 +491,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: var(--ons-color-branded-secondary);
       color: var(--ons-color-white);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-white);
       }
     }
@@ -502,7 +502,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: var(--ons-color-branded-secondary);
       color: var(--ons-color-white);
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-white);
       }
     }

package/components/button/_macro.spec.js

@@ -200,7 +200,7 @@ describe('macro: button', () => {
       }),
     );
 
-    expect($('.ons-svg-icon + .ons-btn__text').text()).toBe('Click me!');
+    expect($('.ons-icon + .ons-btn__text').text()).toBe('Click me!');
   });
 
   it('has custom icon after button text', () => {
@@ -213,7 +213,7 @@ describe('macro: button', () => {
     );
 
     expect(
-      $('.ons-btn__text + .ons-svg-icon')
+      $('.ons-btn__text + .ons-icon')
         .prev()
         .text(),
     ).toBe('Click me!');

package/components/call-to-action/_macro.njk

@@ -14,7 +14,7 @@
                         "text": params.button.text,
                         "url": params.button.url,
                         "variants": "small"
-                    })}}
+                    }) }}
                 </div>
             </div>
         </div>

package/components/char-check-limit/_macro.njk

@@ -6,7 +6,7 @@
         </span>
     {% endif %}
     <span
-        id="{{ params.id }}-remaining"
+        id="{{ params.id }}"
         class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-xs"
         data-charcount-singular="{{ params.charCountSingular }}"
         data-charcount-plural="{{ params.charCountPlural }}"

package/components/char-check-limit/_macro.spec.js

@@ -40,7 +40,7 @@ describe('macro: char-check-limit', () => {
   it('has the provided `id` attribute', () => {
     const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
 
-    expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit-remaining');
+    expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
   });
 
   it('has the provided data attributes', () => {