@ons/design-system 73.0.1 → 73.0.3

package/README.md

@@ -1,7 +1,9 @@
 # ONS Design System
 
 [![GitHub release](https://img.shields.io/github/release/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/releases)
-[![Tests](https://github.com/ONSdigital/design-system/actions/workflows/tests.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/tests.yml)
+[![Macro and script tests](https://github.com/ONSdigital/design-system/actions/workflows/macro-and-script-tests.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/macro-and-script-tests.yml)
+[![Visual regression tests](https://github.com/ONSdigital/design-system/actions/workflows/visual-regression-tests.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/visual-regression-tests.yml)
+[![Lighthouse tests](https://github.com/ONSdigital/design-system/actions/workflows/lighthouse-ci.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/lighthouse-ci.yml)
 [![GitHub pull requests](https://img.shields.io/github/issues-pr-raw/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/pulls)
 [![Github last commit](https://img.shields.io/github/last-commit/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/commits)
 [![Github contributors](https://img.shields.io/github/contributors/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/graphs/contributors)

package/components/button/example-button-new-window.njk

@@ -2,7 +2,7 @@
 {{
     onsButton({
         "text": 'Web chat',
-        "url": '/patterns/send-a-web-form/examples/form/',
+        "url": '/patterns/send-a-web-form/example-form',
         "newWindow": true,
         "newWindowDescription": 'opens in a new window',
         "attributes": {

package/components/icon/_macro.njk

@@ -649,6 +649,7 @@
             viewBox="0 0 115 96"
             focusable="false"
             role="img"
+            aria-hidden="true"
         >
             <title id="{{ params.altTextId | default ('crest-alt') }}">
                 {{ params.altText | default ('Royal coat of arms of the United Kingdom') }}
@@ -835,7 +836,15 @@
             />
         </svg>
     {%- elif params.iconType == "census-logo" -%}
-        <svg xmlns="http://www.w3.org/2000/svg" class="ons-icon--logo{{ iconClasses }}" width="152" height="16" viewBox="0 0 171 18">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="ons-icon--logo{{ iconClasses }}"
+            width="152"
+            height="16"
+            viewBox="0 0 171 18"
+            aria-hidden="true"
+            focusable="false"
+        >
             <title id="{{ params.altTextId | default ('census-logo-alt') }}">{{ params.altText | default ('Census 2021 Logo') }}</title>
             <path
                 d="M22.9246 6.96226H31.8567C31.0755 5.26415 29.3774 4.09245 27.3906 4.09245C25.4038 4.09245 23.7057 5.26415 22.9246 6.96226ZM27.3906 18C22.4321 18 18.3906 13.9585 18.3906 9C18.3906 4.04151 22.4321 0 27.3906 0C32.3491 0 36.3906 4.04151 36.3906 9C36.3906 10.1208 35.4736 11.0377 34.3529 11.0377H22.9246C23.7057 12.7358 25.4038 13.9076 27.3906 13.9076C28.5114 13.9076 29.4284 14.8245 29.4284 15.9453C29.4284 17.083 28.5114 18 27.3906 18Z"

package/components/image/_image.scss

@@ -9,8 +9,9 @@
     }
 
     &__caption {
+        @extend .ons-u-fs-s;
+
         display: block;
-        font-size: 0.8rem;
         padding: 0.5rem 0 0;
     }
 }

package/components/pagination/_macro.njk

@@ -7,8 +7,8 @@
     {% set firstPage = params.pages | first %}
     {% set prevPageIndex = currentPageIndex - 1 %}
     {% set nextPageIndex = currentPageIndex + 1 %}
-    {% set prevPageAriaLabel = (params.previousAriaLabel or 'Go to the previous page') %}
-    {% set nextPageAriaLabel = (params.nextAriaLabel or 'Go to the next page') %}
+    {% set prevPageAriaLabel = (params.previousAriaLabel or 'Previous page') %}
+    {% set nextPageAriaLabel = (params.nextAriaLabel or 'Next page') %}
 
     <nav
         class="ons-pagination{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-pagination--no-indicator' if params.hideRangeIndicator }}"
@@ -41,7 +41,7 @@
                     <a
                         href="{{ firstPage.url }}"
                         class="ons-pagination__link"
-                        aria-label="{{ params.firstAriaLabel | default('Go to the first page') }}"
+                        aria-label="{{ params.firstAriaLabel | default('First page') }}"
                         >1</a
                     >
                 </li>
@@ -63,9 +63,10 @@
                             href="{{ page.url }}"
                             class="ons-pagination__link"
                             {%- if loop.index == currentPageIndex -%}
-                                aria-current="true" aria-label="{{ params.currentAriaLabel | default('Current page') }} ({{ position }})"
+                                aria-current="true"
+                                aria-label="{% if params.currentAriaLabel %}{{ params.currentAriaLabel }} ({{ position }}){% else %}{{ position }}{% endif %}"
                             {%- else -%}
-                                aria-label="{{ params.goToAriaLabel | default('Go to page') }} {{ loop.index }}"
+                                aria-label="{{ params.goToAriaLabel | default('Page') }} {{ loop.index }}"
                             {%- endif -%}
                             {%- if loop.index == currentPageIndex - 1 -%}
                                 rel="prev"
@@ -86,7 +87,7 @@
                     <a
                         href="{{ lastPage.url }}"
                         class="ons-pagination__link"
-                        aria-label="{{ params.lastAriaLabel | default('Go to the last page') }} ({{ totalPages }})"
+                        aria-label="{{ params.lastAriaLabel | default('Last page') }} ({{ totalPages }})"
                         >{{ totalPages }}</a
                     >
                 </li>

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/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">