@ons/design-system 62.2.4 → 64.0.0

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/input/_input.scss

@@ -137,6 +137,12 @@
   }
 }
 
+.ons-input_search-button {
+  display: flex;
+  flex-flow: row nowrap !important;
+  gap: 0.5rem;
+}
+
 .ons-input-search {
   @extend .ons-input--block;
   @extend .ons-input--ghost;

package/components/input/_macro.njk

@@ -1,9 +1,9 @@
 {% macro onsInput(params) %}
     {% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
     {% from "components/char-check-limit/_macro.njk" import onsCharLimit %}
-    {% from "components/search/_macro.njk" import onsSearch %}
     {% from "components/field/_macro.njk" import onsField %}
     {% from "components/label/_macro.njk" import onsLabel %}
+    {% from "components/button/_macro.njk" import onsButton %}
 
     {% if params.type == "number" %}
         {# Type must be "text" or Firefox and Safari will set a blank value to the server if non numeric characters are entered -
@@ -40,7 +40,7 @@
             {% if inputmode %}inputmode="{{ inputmode }}"{% endif %}
             {% if params.autocomplete %}autocomplete="{{ params.autocomplete }}"{% endif %}
             {% if params.accessiblePlaceholder %}placeholder="{{ params.label.text }}"{% endif %}
-            {% if params.charCheckLimit %}data-char-check-ref="{{ params.id }}-check-remaining" data-char-check-num="{{ params.charCheckLimit.limit }}" aria-describedby="{{ params.id }}-check-remaining"{% endif %}
+            {% if params.charCheckLimit %}data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}" aria-describedby="{{ params.id }}-check"{% endif %}
             {% if params.charCheckLimit and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% 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 %}
             {% if params.label and params.label.description %}{% if params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
@@ -100,21 +100,28 @@
                 </span>
             {% endif %}
         {% elif params.searchButton %}
-            <span class="ons-grid--flex ons-search">
-                {% call onsSearch({
-                    "accessiblePlaceholder": params.accessiblePlaceholder,
-                    "searchButton": {
+            <span class="ons-grid--flex ons-input_search-button">
+                {{ input | safe }}
+                {%- set buttonLabel -%}
+                    {%- if params.searchButton.visuallyHideButtonText == true -%}
+                        <span class="ons-u-vh">{{ params.searchButton.text }}</span>
+                    {%- else -%}
+                        {{ params.searchButton.text }}
+                    {%- endif -%}
+                {%- endset -%}
+                {{
+                    onsButton({
                         "type": params.searchButton.type,
+                        "html": buttonLabel,
                         "text": params.searchButton.text,
-                        "visuallyHideButtonText": params.searchButton.visuallyHideButtonText,
                         "id": params.searchButton.id,
+                        "variants": 'small',
+                        "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                         "attributes": params.searchButton.attributes,
-                        "classes": params.searchButton.classes,
-                        "iconType": params.searchButton.iconType
-                    }
-                }) %}
-                    {{ input | safe }}
-                {% endcall %}
+                        "iconType": params.searchButton.iconType,
+                        "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before'
+                    })
+                }}
             </span>
         {% else %}
             {{ input | safe }}

package/components/input/_macro.spec.js

@@ -535,26 +535,6 @@ describe('macro: input', () => {
   });
 
   describe('search', () => {
-    it('renders `search` component', () => {
-      const faker = templateFaker();
-      const searchSpy = faker.spy('search');
-
-      faker.renderComponent('input', EXAMPLE_WITH_SEARCH);
-
-      expect(searchSpy.occurrences[0]).toEqual({
-        accessiblePlaceholder: true,
-        searchButton: {
-          type: 'button',
-          text: 'Search for address',
-          id: 'search-for-address',
-          attributes: { a: 42 },
-          classes: 'extra-search-button-class',
-          iconType: 'search',
-          visuallyHideButtonText: true,
-        },
-      });
-    });
-
     it.each('outputs `type` attribute of "search"', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_WITH_SEARCH));
 
@@ -621,7 +601,7 @@ describe('macro: input', () => {
     it('has data attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input').attr('data-char-check-ref')).toBe('example-id-check-remaining');
+      expect($('.ons-input').attr('data-char-check-ref')).toBe('example-id-check');
     });
 
     it('has data attribute which defines limit for character check', () => {
@@ -633,7 +613,7 @@ describe('macro: input', () => {
     it('has `aria-describedby` attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input').attr('aria-describedby')).toBe('example-id-check-remaining');
+      expect($('.ons-input').attr('aria-describedby')).toBe('example-id-check');
     });
 
     it('renders character limit component', () => {

package/components/{search/example-search-with-character-check.njk → input/example-input-search-with-character-check.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -20,4 +19,4 @@
             "charCountOverLimitPlural": "{x} characters too many"
         }
     })
-}}
+}}

package/components/{search/example-search-with-placeholder.njk → input/example-input-search-with-placeholder.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -13,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/{search/example-search.njk → input/example-input-search.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -13,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

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,

package/components/{lists → list}/_macro.spec.js

@@ -22,11 +22,11 @@ const EXAMPLE_ITEM_NAVIGATION_TITLE = {
   navigationTitle: 'Nav friendly title',
 };
 
-describe('macro: lists', () => {
+describe('macro: list', () => {
   describe('list element', () => {
     it('has `id` attribute when provided', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           id: 'example-id',
         }),
@@ -37,7 +37,7 @@ describe('macro: lists', () => {
 
     it('has additionally provided style classes', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           classes: 'extra-class another-extra-class',
         }),
@@ -49,7 +49,7 @@ describe('macro: lists', () => {
 
     it('has provided variant style class when one variant is provided', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           variants: 'dashed',
         }),
@@ -60,7 +60,7 @@ describe('macro: lists', () => {
 
     it('has provided variant style classes when multiple variants are provided', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           variants: ['dashed', 'inline'],
         }),
@@ -72,7 +72,7 @@ describe('macro: lists', () => {
 
     it('assumes the "bare" variant with a prefix modifier class when the first list item has a prefix', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [{ text: 'Item text', prefix: 'Abc' }],
         }),
       );
@@ -83,7 +83,7 @@ describe('macro: lists', () => {
 
     it('assumes the "bare" variant with a suffix modifier class when the first list item has a suffix', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [{ text: 'Item text', suffix: 'Abc' }],
         }),
       );
@@ -94,7 +94,7 @@ describe('macro: lists', () => {
 
     it('assumes the "bare" variant with a icons modifier class when the first list item has an icon', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           iconPosition: 'before',
           iconType: 'check',
@@ -106,14 +106,14 @@ describe('macro: lists', () => {
     });
 
     it('renders a <ul> element by default', () => {
-      const $ = cheerio.load(renderComponent('lists', EXAMPLE_LIST_TEXT_ITEMS));
+      const $ = cheerio.load(renderComponent('list', EXAMPLE_LIST_TEXT_ITEMS));
 
       expect($('.ons-list')[0].tagName).toBe('ul');
     });
 
     it('renders a custom element when a custom `element` is provided', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           element: 'div',
         }),
@@ -124,7 +124,7 @@ describe('macro: lists', () => {
 
     it('renders a <ol> element when specified', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           element: 'ol',
         }),
@@ -135,7 +135,7 @@ describe('macro: lists', () => {
 
     it('has the expected quantity of <li> elements when a <ol> element is specified', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           element: 'ol',
         }),
@@ -146,7 +146,7 @@ describe('macro: lists', () => {
 
     describe('when <ol> is specified but there is only one list item', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           element: 'ol',
           itemsList: [{ text: 'Only item' }],
         }),
@@ -167,7 +167,7 @@ describe('macro: lists', () => {
 
     it('has additionally provided `attributes`', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           attributes: {
             a: 123,
@@ -189,7 +189,7 @@ describe('macro: lists', () => {
     describe('content without link', () => {
       it('passes jest-axe checks', async () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [item],
           }),
         );
@@ -200,7 +200,7 @@ describe('macro: lists', () => {
 
       it('renders the expected list item text', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [item],
           }),
         );
@@ -210,7 +210,7 @@ describe('macro: lists', () => {
 
       it('does not render a hyperlink element', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [item],
           }),
         );
@@ -222,7 +222,7 @@ describe('macro: lists', () => {
     describe('content with an internal link', () => {
       it('passes jest-axe checks', async () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -238,7 +238,7 @@ describe('macro: lists', () => {
 
       it('renders a hyperlink element', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -254,7 +254,7 @@ describe('macro: lists', () => {
 
       it('does not render a hyperlink element for current item', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -270,7 +270,7 @@ describe('macro: lists', () => {
 
       it('supports the `inPageLink` variant', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -286,7 +286,7 @@ describe('macro: lists', () => {
 
       it('has additionally provided style classes', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -303,7 +303,7 @@ describe('macro: lists', () => {
 
       it('has the provided `target` attribute', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -319,7 +319,7 @@ describe('macro: lists', () => {
 
       it('renders visually hidden screen reader message when target is "_blank"', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -336,7 +336,7 @@ describe('macro: lists', () => {
 
       it('renders a default visually hidden screen reader message when target is "_blank"', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -352,7 +352,7 @@ describe('macro: lists', () => {
 
       it('has additionally provided `attributes`', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -372,7 +372,7 @@ describe('macro: lists', () => {
 
       it('renders visually hidden prefix', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -390,7 +390,7 @@ describe('macro: lists', () => {
     describe('content with an external link', () => {
       it('passes jest-axe checks', async () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -409,7 +409,7 @@ describe('macro: lists', () => {
         const faker = templateFaker();
         const externalLinkSpy = faker.spy('external-link');
 
-        faker.renderComponent('lists', {
+        faker.renderComponent('list', {
           itemsList: [
             {
               ...item,
@@ -429,7 +429,7 @@ describe('macro: lists', () => {
         const faker = templateFaker();
         const externalLinkSpy = faker.spy('external-link');
 
-        faker.renderComponent('lists', {
+        faker.renderComponent('list', {
           itemsList: [
             {
               ...item,
@@ -448,7 +448,7 @@ describe('macro: lists', () => {
   describe('prefix', () => {
     it('renders item `prefix` content', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [
             {
               prefix: '[PREFIX]',
@@ -467,7 +467,7 @@ describe('macro: lists', () => {
 
     it('marks `prefix` content as visually hidden when list element is not <ol>', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [
             {
               prefix: '[PREFIX]',
@@ -482,7 +482,7 @@ describe('macro: lists', () => {
 
     it('does not mark `prefix` content as visually hidden when list element is <ol>', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           element: 'ol',
           itemsList: [
             {
@@ -504,7 +504,7 @@ describe('macro: lists', () => {
   describe('suffix', () => {
     it('renders item `suffix` content', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [
             {
               suffix: '[SUFFIX]',
@@ -523,7 +523,7 @@ describe('macro: lists', () => {
 
     it('marks `suffix` content as visually hidden when list element is not <ol>', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [
             {
               suffix: '[SUFFIX]',
@@ -538,7 +538,7 @@ describe('macro: lists', () => {
 
     it('does not mark `suffix` content as visually hidden when list element is <ol>', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           element: 'ol',
           itemsList: [
             {
@@ -560,9 +560,9 @@ describe('macro: lists', () => {
   describe('icons', () => {
     it.each([['before'], ['after']])('renders default icon on list items when icon is positioned %s', iconPosition => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
-      faker.renderComponent('lists', {
+      faker.renderComponent('list', {
         ...EXAMPLE_LIST_TEXT_ITEMS,
         iconPosition,
         iconType: 'check',
@@ -575,9 +575,9 @@ describe('macro: lists', () => {
 
     it.each([['before'], ['after']])('renders a custom icon on specific list items when icon is positioned %s', iconPosition => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
-      faker.renderComponent('lists', {
+      faker.renderComponent('list', {
         itemsList: [{ text: 'First item' }, { text: 'Second item', iconType: 'print' }, { text: 'Third item' }],
         iconPosition,
         iconType: 'check',
@@ -591,7 +591,7 @@ describe('macro: lists', () => {
 
     it('renders the icon before the item text', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [{ text: '<span id="first">First item</span>' }, { text: '<span id="second">Second item</span>' }],
           iconPosition: 'before',
           iconType: 'check',
@@ -604,7 +604,7 @@ describe('macro: lists', () => {
 
     it('renders the icon after the item text', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [{ text: '<span id="first">First item</span>' }, { text: '<span id="second">Second item</span>' }],
           iconPosition: 'after',
           iconType: 'check',

package/components/message/_macro.njk

@@ -1,7 +1,7 @@
 {%- macro onsMessage(params) -%}
   <div class="ons-message ons-message--{{ params.type }}">
     <div class="ons-message__head">
-      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %} {% if params.name %} name="{{ params.name }}"{% endif %}>
+      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %}>
         <div class="ons-message__sender">
           <dt class="ons-message__term ons-u-fw-b">{{ params.fromLabel }}:</dt>
           <dd class="ons-message__value ons-u-fw-b" {% if params.fromId %} id="{{ params.fromId }}"{% endif %} {% if params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
@@ -15,7 +15,7 @@
           <a class="ons-message__unread-link" {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
       {% endif %}
     </div>
-    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %} {% if params.messageName %} name="{{ params.messageName }}"{% endif %}>
+    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %}>
       {{ caller() }}
     </div>
   </div>