@ons/design-system 62.2.4 → 64.0.0

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

@@ -20,7 +20,7 @@ layout: ~
         })
     %}
 
-        {% from "components/lists/_macro.njk" import onsList %}
+        {% from "components/list/_macro.njk" import onsList %}
         {{
             onsList({
                 "element": "ol",

package/components/accordion/_macro.njk

@@ -22,7 +22,7 @@
                 })
             }}
         {% endif %}
-        {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
+        {% for item in params.itemsList %}
             {{
                 onsDetails({
                     "isAccordion": true,

package/components/breadcrumbs/_macro.njk

@@ -1,9 +1,9 @@
-{% from "components/icons/_macro.njk" import onsIcon %}
+{% 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">
-            {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
+            {% 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 %}
                     {% 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 %}

package/components/breadcrumbs/_macro.spec.js

@@ -119,7 +119,7 @@ describe('macro: breadcrumbs', () => {
 
   it('has a "chevron" icon for each breadcrumb item', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
 

package/components/button/_macro.njk

@@ -1,4 +1,4 @@
-{% from "components/icons/_macro.njk" import onsIcon %}
+{% from "components/icon/_macro.njk" import onsIcon %}
 
 {% macro onsButton(params) %}
 

package/components/button/_macro.spec.js

@@ -60,7 +60,7 @@ describe('macro: button', () => {
 
   it('has `download` icon when `variants` contains "download"', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('button', {
       url: 'http://example.com',
@@ -84,7 +84,7 @@ describe('macro: button', () => {
 
   it('has `print` icon when `variants` contains "print"', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('button', {
       url: 'http://example.com',
@@ -108,7 +108,7 @@ describe('macro: button', () => {
 
   it('has `loader` icon when `variants` contains "loader"', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('button', {
       variants: 'loader',
@@ -119,7 +119,7 @@ describe('macro: button', () => {
 
   it('has `chevron` icon when `variants` contains "mobile"', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('button', {
       variants: 'mobile',
@@ -346,7 +346,7 @@ describe('macro: button', () => {
 
     it('has `arrow-next` icon by default', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('button', {
         url: 'http://example.com',
@@ -369,7 +369,7 @@ describe('macro: button', () => {
 
     it('has `external-link` icon when `newWindow` is `true`', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('button', {
         url: 'http://example.com',

package/components/card/_macro.njk

@@ -1,6 +1,6 @@
 {%- macro onsCard(params) -%}
 
-  {% from "components/lists/_macro.njk" import onsList %}
+  {% from "components/list/_macro.njk" import onsList %}
 
   {% set titleSize = params.titleSize | default('2') %}
 

package/components/card/_macro.spec.js

@@ -87,7 +87,7 @@ describe('macro: card', () => {
 
     it('renders the provided `itemsList` using the `list` component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('card', {
         ...EXAMPLE_CARD_WITHOUT_IMAGE,

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', () => {

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

@@ -59,12 +59,12 @@ describe('script: character-check', () => {
 
     describe('Given that the char check helper has initialised correctly', () => {
       it('the char check readout should be invisible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(true);
       });
 
       it('then the character limit readout should reflect the number of characters remaining', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('You have 11 characters remaining');
       });
     });
@@ -76,17 +76,17 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 10 characters remaining');
         });
 
         it('the char check readout should be visible', async () => {
-          const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(false);
         });
 
         it('then aria-live should be set to polite', async () => {
-          const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+          const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
           expect(ariaLiveAttribute).toBe('polite');
         });
       });
@@ -97,7 +97,7 @@ describe('script: character-check', () => {
         });
 
         it('the char check readout should be invisible', async () => {
-          const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(true);
         });
       });
@@ -108,7 +108,7 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 1 character remaining');
         });
       });
@@ -120,24 +120,24 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('1 number too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
         const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check-remaining', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -150,24 +150,24 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('2 numbers too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
         const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check-remaining', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -188,7 +188,7 @@ describe('script: character-check', () => {
       });
 
       it('then aria-live attribute should removed', async () => {
-        const hasAriaLiveAttribute = await page.$eval('#feedback-lim-remaining', element => element.hasAttribute('aria-live'));
+        const hasAriaLiveAttribute = await page.$eval('#feedback-lim', element => element.hasAttribute('aria-live'));
         expect(hasAriaLiveAttribute).toBe(false);
       });
     });

package/components/checkboxes/_macro.njk

@@ -5,7 +5,9 @@
     {% from "components/button/_macro.njk" import onsButton %}
 
     {% set fields %}
+    {% if params.checkboxesLabel is defined %}
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
+    {% endif %}    
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
             {% if checkbox.other %}
@@ -15,7 +17,7 @@
         {% if hasOther == false and params.autoSelect and params.autoSelect.selectAllText %}
             {% set btnClasses = ['small', 'secondary'] %}
             {% if params.borderlessParent == false %}
-                {% set btnClasses = ['small', 'secondary', 'ghost-dark'] %}
+                {% set btnClasses = ['small', 'secondary', 'ghost', 'ghost-dark'] %}
             {% endif %}
             {{
                 onsButton({

package/components/checkboxes/example-checkboxes-with-descriptions.njk

@@ -8,6 +8,7 @@
 }) %}
     {{
         onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
             "dontWrap": true,
             "name": "central-heating",
             "checkboxes": [

package/components/collapsible/_macro.spec.js

@@ -134,7 +134,7 @@ describe('macro: collapsible', () => {
 
   it('has `chevron` icon', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
     faker.renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC);
 
     expect(iconsSpy.occurrences[0].iconType).toBe('chevron');

package/components/content-pagination/_macro.njk

@@ -6,7 +6,7 @@
           <a href="{{ contentPaginationItem.url }}" class="ons-content-pagination__link" rel="{{ contentPaginationItem.rel }}">
             <span class="ons-content-pagination__link-title">
                 {% if contentPaginationItem.rel == 'prev' %}
-                  {% from "components/icons/_macro.njk" import onsIcon %}
+                  {% from "components/icon/_macro.njk" import onsIcon %}
                   {{
                       onsIcon({
                           "iconType": 'arrow-previous',
@@ -14,7 +14,7 @@
                       })
                   }}
                 {% else %}
-                  {% from "components/icons/_macro.njk" import onsIcon %}
+                  {% from "components/icon/_macro.njk" import onsIcon %}
                   {{
                       onsIcon({
                           "iconType": 'arrow-next',

package/components/content-pagination/_macro.spec.js

@@ -81,7 +81,7 @@ describe('macro: content-pagination', () => {
 
   it('renders the `arrow-previous` icon for the previous link entry', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_PREV_ONLY);
 
@@ -91,7 +91,7 @@ describe('macro: content-pagination', () => {
 
   it('renders the `arrow-next` icon for the next link entry', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NEXT_ONLY);
 

package/components/cookies-banner/_macro.njk

@@ -26,7 +26,7 @@
         {% set rejectedText =  'You have rejected all additional cookies.' %}
         {% set preferencesText =  'You can <a href="' + settingsLinkURL + '">change your cookie preferences</a> at any time.' %}
         {% set confirmationButtonText = 'Hide' %}
-        {% set confirmationButtonTextAria = 'this message' %}
+        {% set contextSuffix = 'this message' %}
     {% endif %}
 
     <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
@@ -78,7 +78,7 @@
                     onsButton({
                         "type": 'button',
                         "text": params.confirmationButtonText | default(confirmationButtonText),
-                        "buttonContext": params.confirmationButtonTextAria | default(confirmationButtonTextAria),
+                        "buttonContext": params.contextSuffix | default(contextSuffix),
                         "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
                     })
                 }}

package/components/cookies-banner/_macro.spec.js

@@ -16,7 +16,7 @@ const EXAMPLE_COOKIES_BANNER_PARAMS = {
   rejectButtonText: 'Reject additional cookies override',
   preferencesText: 'Text override',
   confirmationButtonText: 'Hide override',
-  confirmationButtonTextAria: 'the cookie message override',
+  contextSuffix: 'the cookie message override',
 };
 
 describe('macro: cookies-banner', () => {
@@ -112,7 +112,7 @@ describe('macro: cookies-banner', () => {
         expect(buttonSpy.occurrences[2].text).toBe('Hide override');
       });
 
-      it('has the correct `confirmationButtonTextAria` for `buttonContext`', () => {
+      it('has the correct `contextSuffix` for `buttonContext`', () => {
         const faker = templateFaker();
         const buttonSpy = faker.spy('button');
 

package/components/details/_macro.njk

@@ -14,7 +14,7 @@
                 {% set titleTag = params.titleTag | default("h2") %}
                 <{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
                 <span class="ons-details__icon">
-                    {% from "components/icons/_macro.njk" import onsIcon %}
+                    {% from "components/icon/_macro.njk" import onsIcon %}
                     {{
                         onsIcon({
                             "iconType": "chevron"

package/components/details/_macro.spec.js

@@ -134,7 +134,7 @@ describe('macro: details', () => {
 
   it('has `chevron` icon', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
     faker.renderComponent('details', EXAMPLE_DETAILS_BASIC);
 
     expect(iconsSpy.occurrences[0].iconType).toBe('chevron');

package/components/document-list/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsDocumentList(params) %}
     <ul{% if params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
-        {% for document in (params.documents if params.documents is iterable else params.documents.items()) %}
+        {% for document in params.documents %}
 
         <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
 

package/components/footer/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsFooter(params) %}
 
-    {% from "components/lists/_macro.njk" import onsList %}
-    {% from "components/icons/_macro.njk" import onsIcon %}
+    {% from "components/list/_macro.njk" import onsList %}
+    {% from "components/icon/_macro.njk" import onsIcon %}
 
     {% if params.lang %}
         {% set lang = params.lang %}

package/components/footer/_macro.spec.js

@@ -137,7 +137,7 @@ describe('macro: footer', () => {
 
     it('renders OGL icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('footer', params);
 
@@ -284,7 +284,7 @@ describe('macro: footer', () => {
 
     it('renders expected lists using list component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('footer', params);
 
@@ -312,7 +312,7 @@ describe('macro: footer', () => {
 
     it('renders expected lists using list component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('footer', params);
 
@@ -340,7 +340,7 @@ describe('macro: footer', () => {
 
     it('renders expected lists using list component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('footer', params);
 
@@ -379,7 +379,7 @@ describe('macro: footer', () => {
         };
         it('renders the expected icon', () => {
           const faker = templateFaker();
-          const iconsSpy = faker.spy('icons');
+          const iconsSpy = faker.spy('icon');
 
           faker.renderComponent('footer', params);
 
@@ -403,7 +403,7 @@ describe('macro: footer', () => {
         };
         it('renders the expected icon', () => {
           const faker = templateFaker();
-          const iconsSpy = faker.spy('icons');
+          const iconsSpy = faker.spy('icon');
 
           faker.renderComponent('footer', params);
 
@@ -544,7 +544,7 @@ describe('macro: footer', () => {
 
     it('renders crest icon when `crest` parameter is provided', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('footer', params);
 

package/components/header/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsHeader(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
-    {% from "components/icons/_macro.njk" import onsIcon %}
+    {% from "components/icon/_macro.njk" import onsIcon %}
     {% from "components/navigation/_macro.njk" import onsNavigation %}
     {% from "components/browser-banner/_macro.njk" import onsBrowserBanner %}
 
@@ -88,7 +88,7 @@
                                 <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                     <nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                         <ul class="ons-header-service-nav__list">
-                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
+                                            {% for item in params.serviceLinks.itemsList %}                                                
                                                 <li class="ons-header-service-nav__item">
                                                 {% if item.iconType %}
                                                     {{
@@ -139,7 +139,7 @@
             {% if params.serviceLinks %}
                 <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                     <ul class="ons-header-service-nav__list">
-                        {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
+                        {% for item in params.serviceLinks.itemsList %}                                                
                             <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                             {% if item.iconType %}
                                 {{

package/components/header/_macro.spec.js

@@ -214,7 +214,7 @@ describe('macro: header', () => {
 
     it('has the default masthead logo icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
@@ -223,7 +223,7 @@ describe('macro: header', () => {
 
     it('has the default masthead mobile logo icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
@@ -232,7 +232,7 @@ describe('macro: header', () => {
 
     it('has the default masthead logo icon alt text', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
@@ -241,7 +241,7 @@ describe('macro: header', () => {
 
     it('has the default masthead mobile logo icon alt text', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
@@ -549,7 +549,7 @@ describe('macro: header', () => {
 
     it('has the correct list item icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', {
         ...EXAMPLE_HEADER_BASIC,
@@ -736,7 +736,6 @@ describe('macro: header', () => {
           ...EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG,
         }),
       );
-      console.log($.html());
 
       const subNavContainer = $('.ons-navigation--sub .ons-container');
       expect($(subNavContainer).hasClass('ons-container--full-width')).toBe(true);

package/components/{icons → icon}/_macro.spec.js

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('macro: icons', () => {
+describe('macro: icon', () => {
   describe.each([
     'arrow-forward',
     'arrow-next',
@@ -35,21 +35,21 @@ describe('macro: icons', () => {
     'circle-lined',
   ])('icon type: %s', iconType => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('icons', { iconType }));
+      const $ = cheerio.load(renderComponent('icon', { iconType }));
 
       const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
     it('has an svg element', () => {
-      const $ = cheerio.load(renderComponent('icons', { iconType }));
+      const $ = cheerio.load(renderComponent('icon', { iconType }));
 
       expect($('svg').length).toBe(1);
     });
 
     it('has additionally provided style classes', () => {
       const $ = cheerio.load(
-        renderComponent('icons', {
+        renderComponent('icon', {
           iconType,
           classes: 'extra-class another-extra-class',
         }),
@@ -80,7 +80,7 @@ describe('macro: icons', () => {
   ])('icon type: %s', iconType => {
     it('has style variation class for provided icon size', () => {
       const $ = cheerio.load(
-        renderComponent('icons', {
+        renderComponent('icon', {
           iconType,
           iconSize: 'xxl',
         }),
@@ -99,7 +99,7 @@ describe('macro: icons', () => {
     ['ogl', 'Open Government License logo'],
   ])('icon type: %s', (iconType, expectedAltText) => {
     it(`has default alt text '${expectedAltText}'`, () => {
-      const $ = cheerio.load(renderComponent('icons', { iconType }));
+      const $ = cheerio.load(renderComponent('icon', { iconType }));
 
       expect(
         $('title')
@@ -110,7 +110,7 @@ describe('macro: icons', () => {
 
     it('has provided alt text', () => {
       const $ = cheerio.load(
-        renderComponent('icons', {
+        renderComponent('icon', {
           iconType,
           altText: 'Example alt text',
         }),