@ons/design-system 62.2.3 → 63.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/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/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',
         }),

package/components/{images → image}/_macro.spec.js

@@ -16,16 +16,16 @@ const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
   },
 };
 
-describe('macro: images', () => {
+describe('macro: image', () => {
   it('outputs a `figure` element', () => {
-    const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+    const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
     expect($('.ons-figure')[0].tagName).toBe('figure');
   });
 
   it('outputs a `figurecaption` element when `caption` is provided', () => {
     const $ = cheerio.load(
-      renderComponent('images', {
+      renderComponent('image', {
         ...EXAMPLE_IMAGE_URL_MINIMAL,
         caption: 'Example image caption',
       }),
@@ -36,7 +36,7 @@ describe('macro: images', () => {
 
   it('outputs a `figurecaption` element with provided `caption` text', () => {
     const $ = cheerio.load(
-      renderComponent('images', {
+      renderComponent('image', {
         ...EXAMPLE_IMAGE_URL_MINIMAL,
         caption: 'Example image caption',
       }),
@@ -51,27 +51,27 @@ describe('macro: images', () => {
 
   describe('mode: url', () => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
     it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       expect($('.ons-figure__image')[0].tagName).toBe('img');
     });
 
     it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       expect($('.ons-figure__image').attr('src')).toBe('example.png');
     });
 
     it('outputs an `img` element with the expected alt text', () => {
       const $ = cheerio.load(
-        renderComponent('images', {
+        renderComponent('image', {
           ...EXAMPLE_IMAGE_URL_MINIMAL,
           alt: 'Example alt text',
         }),
@@ -83,33 +83,33 @@ describe('macro: images', () => {
 
   describe('mode: image', () => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
     it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image')[0].tagName).toBe('img');
     });
 
     it('outputs an `img` element with the expected `srcset`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
     });
 
     it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image').attr('src')).toBe('example-small.png');
     });
 
     it('outputs an `img` element with the expected alt text', () => {
       const $ = cheerio.load(
-        renderComponent('images', {
+        renderComponent('image', {
           ...EXAMPLE_IMAGE_IMAGE_MINIMAL,
           alt: 'Example alt text',
         }),

package/components/{images/example-images-for-regular-screens.njk → image/example-image-for-regular-screens.njk}

@@ -1,4 +1,4 @@
-{% from "components/images/_macro.njk" import onsImage %}
+{% from "components/image/_macro.njk" import onsImage %}
 {{
     onsImage({
         "url": '/img/small/woman-in-purple-dress-shirt.jpg',

package/components/{images/example-images-for-retina-screens.njk → image/example-image-for-retina-screens.njk}

@@ -1,4 +1,4 @@
-{% from "components/images/_macro.njk" import onsImage %}
+{% from "components/image/_macro.njk" import onsImage %}
 {{
     onsImage({
         "image": {

package/components/{lists → list}/_macro.njk

@@ -21,7 +21,7 @@
         {% set listEl = 'ul' %}
     {% endif %}
         <{{listEl}} {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes %} {{ params.classes -}}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
-            {%- for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+            {%- for item in params.itemsList  -%}
                 {% if listLength > 1 or listEl == 'ul' %}
                 <li class="ons-list__item{% if item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current %} aria-current="true"{% endif %}>
                 {% endif %}
@@ -40,7 +40,7 @@
                             {%- if item.prefix -%}
                                 {{- item.prefix -}}.
                             {% elif params.iconPosition == 'before' %}
-                                {% from "components/icons/_macro.njk" import onsIcon %}
+                                {% from "components/icon/_macro.njk" import onsIcon %}
                                 {{
                                     onsIcon({
                                         "iconType": itemIconType,
@@ -75,7 +75,7 @@
                         {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
                             {{- loop.index -}}
                         {% elif params.iconPosition == 'after' %}
-                            {% from "components/icons/_macro.njk" import onsIcon %}
+                            {% from "components/icon/_macro.njk" import onsIcon %}
                             {{
                                 onsIcon({
                                     "iconType": itemIconType,