@ons/design-system 70.0.16 → 72.0.0

package/components/language-selector/_macro.spec.js

@@ -9,14 +9,14 @@ const EXAMPLE_WITH_TWO_LANGUAGES = {
     languages: [
         {
             url: '/english',
-            ISOCode: 'en',
+            isoCode: 'en',
             text: 'English',
             abbrText: 'EN',
             current: true,
         },
         {
             url: '/cymraeg',
-            ISOCode: 'cy',
+            isoCode: 'cy',
             text: 'Cymraeg',
             abbrText: 'CY',
             current: false,
@@ -32,19 +32,19 @@ const EXAMPLE_WITH_THREE_LANGUAGES = {
     languages: [
         {
             url: '/english',
-            ISOCode: 'en',
+            isoCode: 'en',
             text: 'English',
             current: false,
         },
         {
             url: '/cymraeg',
-            ISOCode: 'cy',
+            isoCode: 'cy',
             text: 'Cymraeg',
             current: true,
         },
         {
             url: '/polski',
-            ISOCode: 'pl',
+            isoCode: 'pl',
             text: 'Polski',
             current: false,
         },
@@ -96,7 +96,7 @@ describe('macro: language-selector', () => {
         it('does not have a visibility class applied', () => {
             const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-            expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(false);
+            expect($('.ons-language-links').hasClass('ons-u-d-no@2xs@m')).toBe(false);
         });
 
         it('has the `abbrText` rendered', () => {
@@ -131,7 +131,7 @@ describe('macro: language-selector', () => {
         it('has the visibility class applied', () => {
             const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
 
-            expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(true);
+            expect($('.ons-language-links').hasClass('ons-u-d-no@2xs@m')).toBe(true);
         });
     });
 });

package/components/list/_list.scss

@@ -6,9 +6,6 @@
         &:first-child {
             margin-top: 0.5rem;
         }
-        &:last-child {
-            margin-bottom: -0.5;
-        }
     }
 
     &--spacious {
@@ -80,8 +77,7 @@
     &--icons {
         margin-bottom: 0;
         .ons-list__item {
-            margin-top: 0;
-            margin-bottom: 0.5rem;
+            margin: 0 0 0.5rem;
         }
     }
 

package/components/list/_macro.njk

@@ -21,17 +21,18 @@
         {% set listEl = 'ul' %}
     {% endif %}
 
-    {# Remove "and not params.itemsList[0].url" in future update #}
-    {% if listLength < 2 and not params.attributes and not params.itemsList[0].url %}
-        {% set attributes = params.itemsList[0].attributes %}
+    {% if listLength < 2 and not params.attributes %}
+        {% set attributes = [params.itemsList[0].attributes] %}
+    {% elif listLength < 2 and params.attributes and params.itemsList[0].attributes and listEl == 'p' %}
+        {% set attributes = [params.attributes, params.itemsList[0].attributes] %}
     {% else %}
-        {% set attributes = params.attributes %}
+        {% set attributes = [params.attributes] %}
     {% endif %}
     {% set openingTag = "<" + listEl %}
     {% set closingTag = "</" + listEl + ">" %}
 
     {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %}
-    class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes or params.itemsList[0].attributes %}{% for attribute, value in (attributes.items() if attributes is mapping and attributes.items else attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+    class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes or params.itemsList[0].attributes %}{% for attributeList in attributes %}{% for attribute, value in (attributeList.items() if attributeList is mapping and attributeList.items else attributeList) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endfor %}{% endif %}>
     {%- for item in params.itemsList -%}
         {% set sublistClasses = item.listClasses if item.listClasses %}
         {%
@@ -78,15 +79,14 @@
                     {{
                         onsExternalLink({
                             "url": item.url,
-                            "linkText": itemText
+                            "text": itemText
                         })
                     }}
                 {%- else -%}
-                    {# Remove setting attributes on link in future update #}
                     <a
                         href="{{ item.url }}"
                         class="ons-list__link{{ ' ons-js-inpagelink' if item.variants == 'inPageLink' }}{{ ' ' + item.classes if item.classes else '' }}"
-                        {% if item.target %}target="{{ item.target }}"{% endif %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+                        {% if item.target %}target="{{ item.target }}"{% endif %}
                     >
                         {%- if item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
                         {%- if item.target == "_blank" -%}
@@ -124,11 +124,10 @@
         {% endset %}
 
         {% if listLength > 1 or listEl == 'ul' %}
-            {# Remove if not item.url in future update #}
             <li
                 class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}"
                 {% if item.current %}aria-current="true"{% endif %}
-                {% if not item.url %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}{% endif %}
+                {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
             >
                 {{- listItem | safe -}}
             </li>

package/components/list/_macro.spec.js

@@ -178,7 +178,19 @@ describe('macro: list', () => {
             const $ = cheerio.load(
                 renderComponent('list', {
                     element: 'ol',
-                    itemsList: [{ text: 'Only item' }],
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                    itemsList: [
+                        {
+                            text: 'Only item',
+                            attributes: {
+                                c: 789,
+                                d: 123,
+                            },
+                        },
+                    ],
                 }),
             );
 
@@ -193,6 +205,16 @@ describe('macro: list', () => {
             it('does not output any <li> elements', () => {
                 expect($('.ons-list li').length).toBe(0);
             });
+
+            it('has additionally provided list `attributes`', () => {
+                expect($('.ons-list').attr('a')).toBe('123');
+                expect($('.ons-list').attr('b')).toBe('456');
+            });
+
+            it('has additionally provided list item `attributes`', () => {
+                expect($('.ons-list--p').attr('c')).toBe('789');
+                expect($('.ons-list--p').attr('d')).toBe('123');
+            });
         });
 
         it('has additionally provided `attributes`', () => {
@@ -247,6 +269,25 @@ describe('macro: list', () => {
 
                 expect($('a').length).toBe(0);
             });
+
+            it('has additionally provided `attributes`', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                attributes: {
+                                    a: 123,
+                                    b: 456,
+                                },
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__item').attr('a')).toBe('123');
+                expect($('.ons-list__item').attr('b')).toBe('456');
+            });
         });
 
         describe('content with an internal link', () => {
@@ -380,7 +421,7 @@ describe('macro: list', () => {
                 expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
             });
 
-            it('has additionally provided `attributes`', () => {
+            it('list item has additionally provided `attributes`', () => {
                 const $ = cheerio.load(
                     renderComponent('list', {
                         itemsList: [
@@ -396,8 +437,8 @@ describe('macro: list', () => {
                     }),
                 );
 
-                expect($('.ons-list__link').attr('a')).toBe('123');
-                expect($('.ons-list__link').attr('b')).toBe('456');
+                expect($('.ons-list__item').attr('a')).toBe('123');
+                expect($('.ons-list__item').attr('b')).toBe('456');
             });
 
             it('renders visually hidden prefix', () => {
@@ -451,7 +492,7 @@ describe('macro: list', () => {
 
                 expect(externalLinkSpy.occurrences[0]).toEqual({
                     url: 'https://example.com/external-link',
-                    linkText: expectedItemText,
+                    text: expectedItemText,
                 });
             });
 
@@ -603,12 +644,12 @@ describe('macro: list', () => {
                 itemsList: [{ text: 'First item' }, { text: 'Second item', iconType: 'print' }, { text: 'Third item' }],
                 iconPosition,
                 iconType: 'check',
-                iconSize: 'xxl',
+                iconSize: '2xl',
             });
 
-            expect(iconsSpy.occurrences[0]).toEqual({ iconType: 'check', iconSize: 'xxl' });
-            expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'print', iconSize: 'xxl' });
-            expect(iconsSpy.occurrences[2]).toEqual({ iconType: 'check', iconSize: 'xxl' });
+            expect(iconsSpy.occurrences[0]).toEqual({ iconType: 'check', iconSize: '2xl' });
+            expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'print', iconSize: '2xl' });
+            expect(iconsSpy.occurrences[2]).toEqual({ iconType: 'check', iconSize: '2xl' });
         });
 
         it('renders the icon before the item text', () => {

package/components/list/example-inline-list-with-social-icon-prefix.njk

@@ -3,7 +3,7 @@
     onsList({
         "variants": 'inline',
         "iconPosition": 'before',
-        "iconSize": 'xxl',
+        "iconSize": '2xl',
         "itemsList": [
             {
                 "url": '#0',

package/components/message/_macro.njk

@@ -21,15 +21,15 @@
                     </dd>
                 </div>
             </dl>
-            {% if params.unreadLink %}
+            {% if params.unreadLinkUrl %}
                 <a
                     class="ons-message__unread-link"
                     {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %}
-                    href="{{ params.unreadLink }}"
+                    href="{{ params.unreadLinkUrl }}"
                     >{{ params.unreadLinkText }}</a
                 >
             {% endif %}
         </div>
-        <div class="ons-message__body" {% if params.messageID %}id="{{ params.messageID }}"{% endif %}>{{ caller() }}</div>
+        <div class="ons-message__body" {% if params.messageId %}id="{{ params.messageId }}"{% endif %}>{{ caller() }}</div>
     </div>
 {%- endmacro -%}

package/components/message/_macro.spec.js

@@ -15,13 +15,13 @@ const EXAMPLE_MESSAGE_MINIMAL = {
 
 const EXAMPLE_MESSAGE = {
     ...EXAMPLE_MESSAGE_MINIMAL,
-    unreadLink: 'https://example.com/message/1',
+    unreadLinkUrl: 'https://example.com/message/1',
     unreadLinkText: 'Unread message',
     id: 'message1',
     fromId: 'from1',
     sentId: 'sent1',
     unreadLinkId: 'unreadLink1',
-    messageID: 'messageBody1',
+    messageId: 'messageBody1',
 };
 
 describe('macro: message', () => {
@@ -92,7 +92,7 @@ describe('macro: message', () => {
         expect($('.ons-message__timestamp .ons-message__value').attr('id')).toBe('sent1');
     });
 
-    it('has the provided `unreadLink`', () => {
+    it('has the provided `unreadLinkUrl`', () => {
         const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
 
         expect($('.ons-message__unread-link').attr('href')).toBe('https://example.com/message/1');

package/components/message-list/_macro.njk

@@ -3,7 +3,7 @@
         {% for message in params.messages %}
             <li class="ons-message-item" aria-labelledby="{{ message.id }}">
                 <h3 class="ons-message-item__subject" id="{{ message.id }}">
-                    <a href="{{ message.url }}" class="ons-u-fs-r--b">{{ message.subject }}</a>
+                    <a href="{{ message.subject.url }}" class="ons-u-fs-r--b">{{ message.subject.text }}</a>
                     {% if message.unread %}<span class="ons-message-item__unread ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
                 </h3>
                 <dl class="ons-message-item__metadata" aria-label="{{ params.ariaLabelMetaData | default("Message metadata") }}">
@@ -20,7 +20,7 @@
                     {{ message.body | safe }}
                 </div>
                 <div class="ons-message-item__link ons-u-vh">
-                    <a href="{{ message.url }}">{{ params.hiddenReadLabel }}: {{ message.subject }}</a>
+                    <a href="{{ message.subject.url }}">{{ params.hiddenReadLabel }}: {{ message.subject.text }}</a>
                 </div>
             </li>
         {% endfor %}

package/components/message-list/_macro.spec.js

@@ -14,16 +14,20 @@ const EXAMPLE_MESSAGE_LIST_MINIMAL = {
         {
             id: 'message1',
             unread: true,
-            url: 'https://example.com/message/1',
-            subject: 'Example message subject',
+            subject: {
+                url: 'https://example.com/message/1',
+                text: 'Example message subject',
+            },
             fromText: 'Example Sender 1',
             dateText: 'Tue 4 Jul 2020 at 7:47',
             body: 'An example message.',
         },
         {
             id: 'message2',
-            url: 'https://example.com/message/2',
-            subject: 'Another example message subject',
+            subject: {
+                url: 'https://example.com/message/2',
+                text: 'Another example message subject',
+            },
             fromText: 'Example Sender 2',
             dateText: 'Mon 1 Oct 2019 at 9:52',
             body: 'Another example message.',

package/components/message-list/_message-list.scss

@@ -12,7 +12,7 @@
     }
 
     &__subject {
-        margin: 0 0 0.2rem;
+        margin: 0 0 0.25rem;
     }
 
     &__metadata {
@@ -20,7 +20,7 @@
 
         &-term,
         &-value {
-            margin: 0 0 0.3rem;
+            margin: 0 0 0.25rem;
         }
     }
 }

package/components/navigation/_macro.njk

@@ -3,12 +3,12 @@
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
     <div class="ons-navigation-wrapper{{ ' ons-navigation-wrapper--neutral' if params.variants == 'neutral' }}">
         <div
-            class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
+            class="ons-container ons-container--gutterless@2xs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
         >
             {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
-                    {% set autosuggestLabelClasses = "ons-u-pl-l" %}
+                    {% set autosuggestLabelClasses = "ons-u-pl-xl" %}
                     {% if params.variants == "neutral" %}
                         {% set autosuggestClasses = autosuggestClasses + ' ons-input-search--dark' %}
                     {% else %}
@@ -77,13 +77,13 @@
     {% if params.navigation.subNavigation %}
         {% if not params.navigation.subNavigation.removeHorizontalSubNav %}
             <nav
-                class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
+                class="ons-navigation ons-navigation--sub ons-u-d-no@2xs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
                 id="{{ params.navigation.subNavigation.id }}"
                 aria-label="{{ params.navigation.subNavigation.ariaLabel | default('Section menu') }}"
                 data-analytics="header-section-navigation"
             >
                 <div
-                    class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
+                    class="ons-container ons-container--gutterless@2xs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
                 >
                     <ul class="ons-navigation__list ons-navigation__list">
                         {% for item in params.navigation.subNavigation.itemsList %}
@@ -123,20 +123,20 @@
                 })
             }}
             <nav
-                class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs"
+                class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs"
                 id="{{ params.navigation.subNavigation.id }}--mobile"
                 aria-hidden="true"
                 aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}"
                 data-analytics="header-section-navigation"
             >
                 <div
-                    class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}"
+                    class="ons-container ons-container--gutterless@2xs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}"
                 >
                     <ul class="ons-navigation__list ons-navigation__list--parent">
                         <li
-                            class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewURL == params.navigation.subNavigation.currentPath) }}"
+                            class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewUrl == params.navigation.subNavigation.currentPath) }}"
                         >
-                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}"
+                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewUrl }}"
                                 >{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a
                             >
                         </li>
@@ -162,7 +162,7 @@
                                             <h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>
                                         {% endif %}
                                         <ul
-                                            class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs"
+                                            class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-2xs"
                                         >
                                             {% for child in section.children %}
                                                 <li

package/components/navigation/_macro.spec.js

@@ -29,7 +29,7 @@ const PARAMS = {
     ],
     subNavigation: {
         id: 'sub-nav',
-        overviewURL: '#overview',
+        overviewUrl: '#overview',
         overviewText: 'Overview',
         ariaLabel: 'Section menu',
         itemsList: [
@@ -138,7 +138,7 @@ describe('macro: navigation', () => {
                     classes: 'ons-input-search ons-input-search--icon',
                     label: {
                         id: 'ons-site-search-label',
-                        classes: 'ons-u-pl-l ons-label--white',
+                        classes: 'ons-u-pl-xl ons-label--white',
                     },
                 },
             });

package/components/navigation/_navigation.scss

@@ -3,7 +3,6 @@
 
     &-wrapper {
         background: var(--ons-color-header);
-        margin-top: -0.03rem;
 
         &--neutral {
             background: var(--ons-color-header-neutral);
@@ -42,8 +41,7 @@
         }
 
         &-header {
-            font-size: 1rem;
-            margin: 0.75rem 0 0.6rem;
+            margin: 0.75rem 0 0.5rem;
             padding: 0 0 0 1rem;
         }
     }
@@ -51,7 +49,6 @@
     &__item {
         border-left: 4px solid transparent;
         display: block;
-        margin: 0 0 0.2rem;
         &--active,
         &:hover {
             border-color: var(--ons-color-white);
@@ -72,7 +69,7 @@
             border-left: 0;
             display: inline-block;
             margin: 0 0 0 1rem;
-            padding: 0 0 0.3rem;
+            padding: 0 0 0.25rem;
             position: relative;
             text-align: center;
 
@@ -123,7 +120,6 @@
 
         @include mq(l) {
             display: inline-block;
-            font-size: 1rem;
             margin: 0;
             padding: 0;
         }

package/components/navigation/navigation.dom.js

@@ -3,7 +3,7 @@ import domready from '../../js/domready';
 domready(async () => {
     const toggleNavigationBtn = document.querySelector('.ons-js-navigation-button');
     const navigationEl = document.querySelector('.ons-js-navigation');
-    const navigationHideClass = 'ons-u-d-no@xxs@l';
+    const navigationHideClass = 'ons-u-d-no@2xs@l';
     const toggleSubNavigationBtn = document.querySelector('.ons-js-sub-navigation-button');
     const subNavigationEl = document.querySelector('.ons-js-secondary-nav');
     const subNavigationHideClass = 'ons-u-d-no';

package/components/navigation/navigation.spec.js

@@ -49,7 +49,7 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION = {
         ],
         subNavigation: {
             id: 'sub-nav',
-            overviewURL: '#overview',
+            overviewUrl: '#overview',
             overviewText: 'Overview',
             ariaLabel: 'Section menu',
             currentPath: '#1',
@@ -108,7 +108,7 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED = {
         ],
         subNavigation: {
             id: 'sub-nav-hidden',
-            overviewURL: '#overview',
+            overviewUrl: '#overview',
             overviewText: 'Overview',
             ariaLabel: 'Section menu',
             currentPath: '#1',
@@ -212,7 +212,7 @@ describe('script: navigation', () => {
 
                 it('has the hide class removed from the navigation list', async () => {
                     const hasClass = await page.$eval(navEl, (node) =>
-                        node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
+                        node.classList.contains('ons-u-d-no@2xs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
                     );
                     expect(hasClass).toBe(false);
                 });
@@ -284,7 +284,7 @@ describe('script: navigation', () => {
 
                 it('has the hide class removed from the navigation list', async () => {
                     const hasClass = await page.$eval(navEl, (node) =>
-                        node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
+                        node.classList.contains('ons-u-d-no@2xs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
                     );
                     expect(hasClass).toBe(false);
                 });

package/components/pagination/_macro.njk

@@ -26,7 +26,7 @@
                         {{-
                             onsIcon({
                                 "iconType": 'arrow-previous',
-                                "classes": 'ons-u-mr-xs',
+                                "classes": 'ons-u-mr-2xs',
                                 "iconSize": 'm'
                             })
                         -}}
@@ -93,7 +93,7 @@
                         {{-
                             onsIcon({
                                 "iconType": 'arrow-next',
-                                "classes": 'ons-u-ml-xs',
+                                "classes": 'ons-u-ml-2xs',
                                 "iconSize": 'm'
                             })
                         -}}

package/components/pagination/_pagination.scss

@@ -3,7 +3,7 @@ $pagination-item-width: 2.5rem;
 
 .ons-pagination {
     &__position {
-        margin: 0 0 0.4rem;
+        margin: 0 0 0.5rem;
     }
 
     &__items {
@@ -27,12 +27,6 @@ $pagination-item-width: 2.5rem;
         }
     }
 
-    &__items > & {
-        &__item--current {
-            margin: 0 0 0 $pagination-item-padding;
-        }
-    }
-
     &__item,
     &__link {
         height: $pagination-item-width;

package/components/panel/_macro.njk

@@ -52,13 +52,14 @@
 
             {% if params.title %}
                 {% if params.variant == 'error' %}
-                    {% set defaultTitleTag = "h2" %}
+                    {% set defaultTitleTag = "h" ~ 2 %}
                 {% else %}
                     {% set defaultTitleTag = "div" %}
                 {% endif %}
-                {% set titleTag = params.titleTag | default(defaultTitleTag) %}
-                {% set openingTag = "<" + titleTag %}
-                {% set closingTag = "</" + titleTag + ">" %}
+                {% set headingLevel = "h" ~ params.headingLevel if params.headingLevel else undefined %}
+                {% set titleTag = headingLevel | default(defaultTitleTag) %}
+                {% set openingTag = "<" ~ titleTag %}
+                {% set closingTag = "</" ~ titleTag ~ ">" %}
                 <div class="ons-panel__header">
                     {{ openingTag | safe }} id="alert"{% if params.variant %}data-qa="{{ params.variant }}-header"{% endif %}
                     class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}{{ closingTag | safe }}

package/components/panel/_macro.spec.js

@@ -147,12 +147,12 @@ describe('macro: panel', () => {
             expect(titleTag).toBe('div');
         });
 
-        it('has the provided `titleTag`', () => {
+        it('has the provided `headingLevel`', () => {
             const $ = cheerio.load(
                 renderComponent('panel', {
                     ...EXAMPLE_PANEL_BASIC,
                     title: 'Panel title',
-                    titleTag: 'h3',
+                    headingLevel: 3,
                 }),
             );