@ons/design-system 73.0.2 → 73.0.4

package/components/pagination/_macro.spec.js

@@ -75,7 +75,7 @@ describe('macro: pagination', () => {
 
         it('has a single list item', () => {
             expect($('li').length).toBe(1);
-            assertIsCurrentPage($('.ons-pagination__item'), '/page/1', 'Current page (Page 1 of 1)', '1');
+            assertIsCurrentPage($('.ons-pagination__item'), '/page/1', 'Page 1 of 1', '1');
         });
     });
 
@@ -103,9 +103,9 @@ describe('macro: pagination', () => {
 
         it('has a 3 list items ("1", "2", "Next page")', () => {
             expect($('li').length).toBe(3);
-            assertIsCurrentPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Current page (Page 1 of 2)', '1');
-            assertIsNextPage($('.ons-pagination__item:nth-child(2)'), '/page/2', 'Go to page 2', '2');
-            assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Go to the next page (2)', 'Next page');
+            assertIsCurrentPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Page 1 of 2', '1');
+            assertIsNextPage($('.ons-pagination__item:nth-child(2)'), '/page/2', 'Page 2', '2');
+            assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Next page (2)', 'Next page');
         });
     });
 
@@ -133,9 +133,9 @@ describe('macro: pagination', () => {
 
         it('has a 3 list items ("Previous page", "1", "2")', () => {
             expect($('li').length).toBe(3);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
-            assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 2)', '2');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Previous page (1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Page 1', '1');
+            assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Page 2 of 2', '2');
         });
     });
 
@@ -163,11 +163,11 @@ describe('macro: pagination', () => {
 
         it('has a 5 list items ("Previous page", "1", "2", "3", "Next page")', () => {
             expect($('li').length).toBe(5);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
-            assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 3)', '2');
-            assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
-            assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Go to the next page (3)', 'Next page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Previous page (1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Page 1', '1');
+            assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Page 2 of 3', '2');
+            assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Page 3', '3');
+            assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Next page (3)', 'Next page');
         });
     });
 
@@ -195,13 +195,13 @@ describe('macro: pagination', () => {
 
         it('has a 7 list items ("Previous page", "1", "2", "3", "4", "5", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
-            assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 5)', '2');
-            assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Go to the last page (5)', '5');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (3)', 'Next page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Previous page (1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Page 1', '1');
+            assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Page 2 of 5', '2');
+            assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Page 3', '3');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Page 4', '4');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Last page (5)', '5');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Next page (3)', 'Next page');
         });
     });
 
@@ -236,13 +236,13 @@ describe('macro: pagination', () => {
 
         it('has 7 list items ("Previous page", "1", "2", "3", "...", "6", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
-            assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 6)', '2');
-            assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Previous page (1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Page 1', '1');
+            assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Page 2 of 6', '2');
+            assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Page 3', '3');
             assertIsGap($('.ons-pagination__item:nth-child(5)'));
-            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to the last page (6)', '6');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (3)', 'Next page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Last page (6)', '6');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Next page (3)', 'Next page');
         });
     });
 
@@ -282,15 +282,15 @@ describe('macro: pagination', () => {
 
         it('has a 9 list items ("Previous page", "1", "...", "4", "5", "6", "...", "11", "Next page")', () => {
             expect($('li').length).toBe(9);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (4)', 'Previous page');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page', '1');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Previous page (4)', 'Previous page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'First page', '1');
             assertIsGap($('.ons-pagination__item:nth-child(3)'));
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/4', 'Go to page 4', '4');
-            assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/5', 'Current page (Page 5 of 11)', '5');
-            assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to page 6', '6');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/4', 'Page 4', '4');
+            assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/5', 'Page 5 of 11', '5');
+            assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Page 6', '6');
             assertIsGap($('.ons-pagination__item:nth-child(7)'));
-            assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to the last page (11)', '11');
-            assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Go to the next page (6)', 'Next page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Last page (11)', '11');
+            assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Next page (6)', 'Next page');
         });
     });
 
@@ -330,13 +330,13 @@ describe('macro: pagination', () => {
 
         it('has a 7 list items ("Previous page", "1", "...", "9", "10", "11", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (9)', 'Previous page');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page', '1');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Previous page (9)', 'Previous page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'First page', '1');
             assertIsGap($('.ons-pagination__item:nth-child(3)'));
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/9', 'Go to page 9', '9');
-            assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/10', 'Current page (Page 10 of 11)', '10');
-            assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/11', 'Go to page 11', '11');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Go to the next page (11)', 'Next page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/9', 'Page 9', '9');
+            assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/10', 'Page 10 of 11', '10');
+            assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/11', 'Page 11', '11');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Next page (11)', 'Next page');
         });
     });
 
@@ -370,7 +370,7 @@ describe('macro: pagination', () => {
         it('renders the default previousAriaLabel and page number on the Previous link if not provided', () => {
             const prevItem = $default('.ons-pagination__item--previous');
             expect(prevItem.length).toBe(1);
-            expect(prevItem.find('a').attr('aria-label')).toBe('Go to the previous page (1)');
+            expect(prevItem.find('a').attr('aria-label')).toBe('Previous page (1)');
         });
         it('renders the custom nextAriaLabel and page number on the Next link', () => {
             const nextItem = $custom('.ons-pagination__item--next');
@@ -380,7 +380,7 @@ describe('macro: pagination', () => {
         it('renders the default nextAriaLabel and page number on the Next link if not provided', () => {
             const nextItem = $default('.ons-pagination__item--next');
             expect(nextItem.length).toBe(1);
-            expect(nextItem.find('a').attr('aria-label')).toBe('Go to the next page (3)');
+            expect(nextItem.find('a').attr('aria-label')).toBe('Next page (3)');
         });
     });
 
@@ -430,7 +430,7 @@ describe('macro: pagination', () => {
             const firstPageLink = $('.ons-pagination__item a').filter(function () {
                 return $(this).text().trim() === '1';
             });
-            expect(firstPageLink.attr('aria-label')).toBe('Go to the first page');
+            expect(firstPageLink.attr('aria-label')).toBe('First page');
         });
     });
 
@@ -454,7 +454,7 @@ describe('macro: pagination', () => {
                 }),
             );
             const currentPageLink = $('.ons-pagination__item--current a');
-            expect(currentPageLink.attr('aria-label')).toBe('Current page (Page 2 of 3)');
+            expect(currentPageLink.attr('aria-label')).toBe('Page 2 of 3');
         });
     });
 
@@ -482,7 +482,7 @@ describe('macro: pagination', () => {
             const lastPageLink = $('.ons-pagination__item a').filter(function () {
                 return $(this).text().trim() === '4';
             });
-            expect(lastPageLink.attr('aria-label')).toBe('Go to the last page (4)');
+            expect(lastPageLink.attr('aria-label')).toBe('Last page (4)');
         });
     });
 
@@ -510,7 +510,7 @@ describe('macro: pagination', () => {
             const page2Link = $('.ons-pagination__item a').filter(function () {
                 return $(this).text().trim() === '2';
             });
-            expect(page2Link.attr('aria-label')).toBe('Go to page 2');
+            expect(page2Link.attr('aria-label')).toBe('Page 2');
         });
     });
 });

package/components/panel/_macro.njk

@@ -69,8 +69,14 @@
                     <span class="ons-panel__assistive-text ons-u-vh"
                         >{{ params.assistiveTextPrefix | default("Important information: ") }}</span
                     >
-                {% elif params.variant == 'error' or params.variant == 'success' %}
-                    {% set defaultText = "Completed" if params.variant == "success" else "Error" %}
+                {% elif params.variant == 'error' or params.variant == 'success' or params.variant == 'pending' %}
+                    {% if params.variant == "success" %}
+                        {% set defaultText = "Completed" %}
+                    {% elif params.variant == "pending" %}
+                        {% set defaultText = "Pending" %}
+                    {% else %}
+                        {% set defaultText = "Error" %}
+                    {% endif %}
                     <span {% if params.variant == "success" %}id="alert"{% endif %}class="ons-panel__assistive-text ons-u-vh"
                         >{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span
                     >

package/components/panel/_macro.spec.js

@@ -15,6 +15,7 @@ describe('macro: panel', () => {
         ['info', 'Important information:'],
         ['bare', 'Important information:'],
         ['error', 'Error:'],
+        ['pending', 'Pending:'],
         ['warn', 'Warning:'],
         ['warn-branded', 'Warning:'],
         ['branded', 'Important information:'],
@@ -134,17 +135,22 @@ describe('macro: panel', () => {
         });
     });
 
-    describe('mode: info', () => {
+    describe.each([
+        ['info', 'div'],
+        ['', 'div'],
+        ['pending', 'div'],
+    ])('mode: %s', (panelVariant, tagEl) => {
         it('has the default title tag', () => {
             const $ = cheerio.load(
                 renderComponent('panel', {
                     ...EXAMPLE_PANEL_BASIC,
                     title: 'Panel title',
+                    variant: panelVariant,
                 }),
             );
 
             const titleTag = $('.ons-panel__title')[0].tagName;
-            expect(titleTag).toBe('div');
+            expect(titleTag).toBe(tagEl);
         });
 
         it('has the provided `headingLevel`', () => {
@@ -152,6 +158,7 @@ describe('macro: panel', () => {
                 renderComponent('panel', {
                     ...EXAMPLE_PANEL_BASIC,
                     title: 'Panel title',
+                    variant: panelVariant,
                     headingLevel: 3,
                 }),
             );
@@ -165,6 +172,7 @@ describe('macro: panel', () => {
                 renderComponent('panel', {
                     ...EXAMPLE_PANEL_BASIC,
                     title: 'Panel title',
+                    variant: panelVariant,
                 }),
             );
 
@@ -216,6 +224,20 @@ describe('macro: panel', () => {
             expect(titleTag).toBe(tagEl);
         });
 
+        it('has the provided `headingLevel`', () => {
+            const $ = cheerio.load(
+                renderComponent('panel', {
+                    ...EXAMPLE_PANEL_BASIC,
+                    title: 'Panel title',
+                    variant: panelVariant,
+                    headingLevel: 3,
+                }),
+            );
+
+            const titleTag = $('.ons-panel__title')[0].tagName;
+            expect(titleTag).toBe('h3');
+        });
+
         it('has aria-labelledby attribute set with default value', () => {
             const $ = cheerio.load(
                 renderComponent('panel', {

package/components/panel/_panel.scss

@@ -247,6 +247,7 @@
     &--bare,
     &--success,
     &--warn,
+    &--pending,
     &--warn-branded,
     &--announcement {
         .ons-panel__icon {
@@ -257,6 +258,7 @@
 
 @include panel-variant(error, var(--ons-color-errors), var(--ons-color-errors-tint));
 @include panel-variant(success, var(--ons-color-success), var(--ons-color-success-tint));
+@include panel-variant(pending, var(--ons-color-pending), var(--ons-color-pending-tint));
 @include panel-variant(info, var(--ons-color-info), var(--ons-color-info-tint));
 @include panel-variant(branded, var(--ons-color-branded), var(--ons-color-branded-tint));
 @include panel-variant(warn, transparent, transparent);

package/components/panel/example-panel-with-pending.njk

@@ -0,0 +1,9 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{{
+    onsPanel({
+        "variant": 'pending',
+        "id": 'pending-id',
+        "body": 'Information is being processed'
+    })
+}}

package/components/radios/_macro.njk

@@ -140,7 +140,8 @@
                                                 "limit": radio.other.charCheckLimit.limit,
                                                 "charCountSingular": radio.other.charCheckLimit.charCountSingular,
                                                 "charCountPlural": radio.other.charCheckLimit.charCountPlural
-                                            }
+                                            },
+                                            "attributes": radio.other.attributes
                                         })
                                     }}
                                 {% endif %}

package/components/radios/_macro.spec.js

@@ -129,6 +129,15 @@ const EXAMPLE_RADIO_ITEM_TEXTAREA_WITH_PRESET_VALUE = {
         id: 'other-textarea-input',
         name: 'other-answer',
         value: 'other answer',
+        attributes: { a: 42 },
+        label: {
+            text: 'Example radio with Text area',
+        },
+        charCheckLimit: {
+            limit: 200,
+            charCountSingular: 'You have {x} character remaining',
+            charCountPlural: 'You have {x} characters remaining',
+        },
     },
 };
 
@@ -558,6 +567,33 @@ describe('macro: radios', () => {
 
             expect($('.ons-input--textarea').text()).toBe('other answer');
         });
+
+        it('renders other "textarea" component for item', () => {
+            const faker = templateFaker();
+            const textareaSpy = faker.spy('textarea');
+
+            faker.renderComponent('radios', {
+                ...EXAMPLE_RADIOS_MINIMAL,
+                radios: [EXAMPLE_RADIO_ITEM_TEXTAREA_WITH_PRESET_VALUE],
+            });
+
+            expect(textareaSpy.occurrences).toContainEqual({
+                id: 'other-textarea-input',
+                name: 'other-answer',
+                value: 'other answer',
+                attributes: { a: 42 },
+                label: {
+                    id: 'other-textarea-input-label',
+                    text: 'Example radio with Text area',
+                    classes: 'ons-u-fw-n',
+                },
+                charCheckLimit: {
+                    limit: 200,
+                    charCountSingular: 'You have {x} character remaining',
+                    charCountPlural: 'You have {x} characters remaining',
+                },
+            });
+        });
     });
 
     describe('clear radios button', () => {

package/components/related-content/example-related-content-social-media.njk

@@ -12,8 +12,8 @@
                 "itemsList": [
                     {
                         "url": '#0',
-                        "text": 'Twitter',
-                        "iconType": 'twitter',
+                        "text": 'X',
+                        "iconType": 'x',
                         "rel": 'noreferrer external'
                     },
                     {

package/components/share-page/_macro.njk

@@ -21,13 +21,13 @@
             }
         %}
     {% endif %}
-    {% if params.twitter and params.twitter == true %}
+    {% if params.x and params.x == true %}
         {%
-            set twitter =
+            set x =
             {
-                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageUrl|urlencode,
-                "text": 'Twitter',
-                "iconType": 'twitter',
+                "url": 'https://x.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageUrl|urlencode,
+                "text": 'X',
+                "iconType": 'x',
                 "rel": 'noreferrer external',
                 "target": '_blank'
             }
@@ -38,7 +38,7 @@
             "variants": 'inline',
             "iconPosition": 'before',
             "iconSize": params.iconSize | default("2xl"),
-            "itemsList": [facebook, twitter]
+            "itemsList": [facebook, x]
         })
     }}
 {% endmacro %}

package/components/share-page/_macro.spec.js

@@ -10,7 +10,7 @@ const EXAMPLE_SHARE_PAGE = {
     pageTitle: 'An example page',
     pageUrl: 'https://example.com/an-example-page',
     facebook: true,
-    twitter: true,
+    x: true,
 };
 
 describe('macro: share-page', () => {
@@ -50,16 +50,16 @@ describe('macro: share-page', () => {
         expect(listsSpy.occurrences[0].iconSize).toBe('xl');
     });
 
-    describe('Share on Twitter', () => {
+    describe('Share on X', () => {
         it('has a link with the expected url', () => {
             const faker = templateFaker();
             const listsSpy = faker.spy('list');
 
             faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-            const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
-            expect(twitterItem.url).toBe(
-                'https://twitter.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
+            const xItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'X');
+            expect(xItem.url).toBe(
+                'https://x.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
             );
         });
 
@@ -69,10 +69,10 @@ describe('macro: share-page', () => {
 
             faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-            const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
-            expect(twitterItem.rel).toContain('noreferrer');
-            expect(twitterItem.rel).toContain('external');
-            expect(twitterItem.target).toBe('_blank');
+            const xItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'X');
+            expect(xItem.rel).toContain('noreferrer');
+            expect(xItem.rel).toContain('external');
+            expect(xItem.target).toBe('_blank');
         });
     });
 

package/components/share-page/example-share-page.njk

@@ -6,6 +6,6 @@
         "pageTitle": 'A page to share',
         "pageUrl": 'https://example.com/a-page-to-share',
         "facebook": true,
-        "twitter": true
+        "x": true
     })
 }}

package/components/table/_macro.njk

@@ -2,22 +2,6 @@
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/icon/_macro.njk" import onsIcon %}
     {% set variants = params.variants if params.variants %}
-    {% set hasRowSpan = false %}
-    {% for row in params.thList %}
-        {% for th in row.ths %}
-            {% if th.rowspan %}
-                {% set hasRowSpan = true %}
-            {% endif %}
-        {% endfor %}
-    {% endfor %}
-
-    {% for row in params.trs %}
-        {% for td in row.tds %}
-            {% if td.rowspan %}
-                {% set hasRowSpan = true %}
-            {% endif %}
-        {% endfor %}
-    {% endfor %}
 
     <div class="ons-table-scrollable ons-table-scrollable--on">
         <div
@@ -26,15 +10,16 @@
             role="region"
             aria-label="{{ params.caption }}. {{ params.ariaLabel | default('Scrollable table') }}"
         >
+            {# Uses multiple loops to set the rowspan class so that it can work in both nunjucks and jinja2 environments due to the scoping rules of each language #}
             <table
                 {% if params.id %}id="{{ params.id }}"{% endif %}
-                class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if hasRowSpan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
+                class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% for row in params.thList %}{% for th in row.ths %}{% if th.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% for row in params.trs %}{% for td in row.tds %}{% if td.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
                 {% if params.sortBy and 'sortable' in variants %}
                     data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"
                 {% endif %}
             >
                 {% if params.caption %}
-                    <caption class="ons-table__caption{{ " ons-u-vh" if params.hideCaption }}">
+                    <caption class="ons-table__caption{{ ' ons-u-vh' if params.hideCaption }}">
                         {{ params.caption }}
                     </caption>
                 {% endif %}
@@ -43,7 +28,7 @@
                     {% if params.thList %}
                         {% set thGroups = params.thList %}
                     {% else %}
-                        {% set thGroups = [ { ths: params.ths } ] %}
+                        {% set thGroups = [ { "ths": params.ths } ] %}
                     {% endif %}
                     {% for headerCols in thGroups %}
                         <tr class="ons-table__row">