@ons/design-system 70.0.16 → 72.0.0

package/README.md

@@ -44,6 +44,15 @@ yarn start
 
 Once the server has started, navigate to <http://localhost:3030>
 
+## Lighthouse Testing - local
+
+This project uses [LHCI](https://www.npmjs.com/package/@lhci/cli).
+
+```bash
+yarn global add @lhci/cli
+yarn test-lighthouse 
+```
+
 ## Testing - macros and scripts
 
 This project uses [jest](https://jestjs.io/docs/cli) and supports its command line options.
@@ -112,7 +121,7 @@ It is sometimes useful to adjust the following settings when writing tests or di
 
 ## Testing - Visual regression tests
 
-This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
+This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Puppeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
 
 The visual tests will run automatically on pull requests and the result will be available in the Github Action logs. If the tests fail, the process for viewing the failures and approving changes will need to be handled locally using the following workflow and commands.
 

package/components/access-code/_macro.njk

@@ -3,8 +3,8 @@
 
 {% macro onsAccessCode(params) %}
     {% set groupSize = params.groupSize | default(4) %}
-    {% set extraSpaces = (params.maxlength | default(16) / groupSize) - 1 %}
-    {% set maxlength = params.maxlength | default(16) + extraSpaces %}
+    {% set extraSpaces = (params.maxLength | default(16) / groupSize) - 1 %}
+    {% set maxLength = params.maxLength | default(16) + extraSpaces %}
 
     {% set content %}
         {{
@@ -12,10 +12,10 @@
                 "id": params.id,
                 "type": params.type,
                 "name": params.name,
-                "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
+                "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-2xs" if params.postTextboxLinkText else ""),
                 "label": params.label,
+                "maxLength": maxLength,
                 "attributes": {
-                    "maxlength": maxlength,
                     "data-group-size": groupSize,
                     "autocomplete": "off",
                     "autocapitalize": "characters"

package/components/access-code/_macro.spec.js

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('FOR: access-code', () => {
+describe('FOR: Macro: Access-code', () => {
     describe('GIVEN: Params: required', () => {
         describe('WHEN: all required params are provided', () => {
             const $ = cheerio.load(
@@ -24,7 +24,7 @@ describe('FOR: access-code', () => {
             test('THEN: autocomplete is disabled on text input', () => {
                 expect($('input').attr('autocomplete')).toBe('off');
             });
-            test('THEN: text input has automatic capitalisation', () => {
+            test('THEN: text input has autocapitalize attribute', () => {
                 expect($('input').attr('autocapitalize')).toBe('characters');
             });
         });
@@ -102,23 +102,23 @@ describe('FOR: access-code', () => {
             });
         });
     });
-    describe('GIVEN: Params: maxlength & groupSize', () => {
+    describe('GIVEN: Params: maxLength & groupSize', () => {
         describe('WHEN: params are at default state', () => {
             const $ = cheerio.load(renderComponent('access-code'));
-            test('THEN: renders input with total maxlength of 19', () => {
+            test('THEN: renders input with total maxLength of 19', () => {
                 expect($('input').attr('maxlength')).toBe('19');
             });
             test('THEN: renders input with groupSize of 4', () => {
                 expect($('input').attr('data-group-size')).toBe('4');
             });
         });
-        describe('WHEN: maxlength param is provided', () => {
+        describe('WHEN: maxLength param is provided', () => {
             const $ = cheerio.load(
                 renderComponent('access-code', {
-                    maxlength: 8,
+                    maxLength: 8,
                 }),
             );
-            test('THEN: renders input with provided maxlength', () => {
+            test('THEN: renders input with provided maxLength', () => {
                 expect($('input').attr('maxlength')).toBe('9');
             });
         });
@@ -132,14 +132,14 @@ describe('FOR: access-code', () => {
                 expect($('input').attr('data-group-size')).toBe('2');
             });
         });
-        describe('WHEN: maxlength and groupSize params are provided', () => {
+        describe('WHEN: maxLength and groupSize params are provided', () => {
             const $ = cheerio.load(
                 renderComponent('access-code', {
-                    maxlength: 6,
+                    maxLength: 6,
                     groupSize: 3,
                 }),
             );
-            test('THEN: renders input with provided maxlength accounting for provided groupSize', () => {
+            test('THEN: renders input with provided maxLength accounting for provided groupSize', () => {
                 expect($('input').attr('maxlength')).toBe('7');
             });
         });

package/components/access-code/example-access-code-error.njk

@@ -36,7 +36,7 @@ layout: ~
         }}
     {% endcall %}
 
-    <h1 class="ons-u-mt-l">Start study</h1>
+    <h1 class="ons-u-mt-2xl">Start study</h1>
 
     {{
         onsAccessCode({
@@ -59,7 +59,7 @@ layout: ~
     {{
         onsButton({
             "text": "Access study",
-            "classes": "ons-u-mb-xl"
+            "classes": "ons-u-mb-2xl ons-u-mt-s"
         })
     }}
 

package/components/access-code/example-access-code.njk

@@ -17,7 +17,7 @@ layout: ~
 %}
 
 {% block main %}
-    <h1 class="ons-u-mt-l">Start study</h1>
+    <h1 class="ons-u-mt-2xl">Start study</h1>
 
     {{
         onsAccessCode({
@@ -36,7 +36,7 @@ layout: ~
     {{
         onsButton({
             "text": "Access study",
-            "classes": "ons-u-mb-xl"
+            "classes": "ons-u-mb-2xl ons-u-mt-s"
         })
     }}
 

package/components/accordion/_macro.njk

@@ -32,7 +32,7 @@
                     "headingAttributes": item.headingAttributes,
                     "contentAttributes": item.contentAttributes,
                     "title": item.title,
-                    "titleTag": item.titleTag,
+                    "headingLevel": item.headingLevel,
                     "content": item.content,
                     "group": params.id,
                     "saveState": params.saveState,

package/components/accordion/_macro.spec.js

@@ -4,88 +4,106 @@ import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
-
-const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = {
-    id: 'accordion-identifier',
-    itemsList: [
-        {
-            title: 'Title for item 1',
-            content: 'Content for item 1',
-        },
-        {
-            title: 'Title for item 2',
-            content: 'Content for item 2',
-        },
-    ],
-};
-
-const EXAMPLE_ACCORDION = {
-    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-    allButton: {
-        open: 'Open label',
-        close: 'Close label',
-    },
-};
-
-describe('macro: accordion', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+import { EXAMPLE_ACCORDION } from './_test_examples';
+
+describe('FOR: Macro: Accordion', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
-
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-        expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+    describe('GIVEN: Params: required and allButton', () => {
+        describe('WHEN: required and allButton params are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                    },
+                }),
+            );
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
-
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('accordion', {
-                ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
-        expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: renders with provided id', () => {
+                expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+            });
+        });
     });
-
-    describe('item', () => {
-        it('has provided title text', () => {
-            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-            const titleText = $('.ons-details__title').first().text().trim();
-            expect(titleText).toBe('Title for item 1');
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
+                expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+            });
         });
-
-        it('has title with provided tag override', () => {
+    });
+    describe('GIVEN: Params: itemsList: AccordionItem', () => {
+        describe('WHEN: title is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: renders title with provided text', () => {
+                const titleText = $('.ons-details__title').first().text().trim();
+                expect(titleText).toBe('Title for item 1');
+            });
+        });
+        describe('WHEN: titleTag is not provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
                         {
                             title: 'Title for item 1',
-                            titleTag: 'h5',
                             content: 'Content for item 1',
                         },
                     ],
                 }),
             );
-
-            const titleTag = $('.ons-details__title')[0].tagName;
-            expect(titleTag).toBe('h5');
+            test('THEN: item title renders with default heading tag', () => {
+                const titleTag = $('.ons-details__title')[0].tagName;
+                expect(titleTag).toBe('h2');
+            });
         });
-
-        it('has provided content text', () => {
-            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-            const titleText = $('.ons-details__content').first().text().trim();
-            expect(titleText).toBe('Content for item 1');
+        describe('WHEN: titleTag is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            headingLevel: 5,
+                            content: 'Content for item 1',
+                        },
+                    ],
+                }),
+            );
+            test('THEN: item title renders with provided heading tag', () => {
+                const titleTag = $('.ons-details__title')[0].tagName;
+                expect(titleTag).toBe('h5');
+            });
         });
-
-        it('has additionally provided `attributes`', () => {
+        describe('WHEN: content is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: item content renders with provided text', () => {
+                const titleText = $('.ons-details__content').first().text().trim();
+                expect(titleText).toBe('Content for item 1');
+            });
+        });
+        describe('WHEN: attributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -99,12 +117,12 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details').attr('a')).toBe('123');
-            expect($('.ons-details').attr('b')).toBe('456');
+            test('THEN: item renders with provided HTML attributes', () => {
+                expect($('.ons-details').attr('a')).toBe('123');
+                expect($('.ons-details').attr('b')).toBe('456');
+            });
         });
-
-        it('has additionally provided `headingAttributes`', () => {
+        describe('WHEN: headingAttributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -118,12 +136,12 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details__heading').attr('a')).toBe('123');
-            expect($('.ons-details__heading').attr('b')).toBe('456');
+            test('THEN: item header renders with provided HTML attributes', () => {
+                expect($('.ons-details__heading').attr('a')).toBe('123');
+                expect($('.ons-details__heading').attr('b')).toBe('456');
+            });
         });
-
-        it('has additionally provided `contentAttributes`', () => {
+        describe('WHEN: contentAttributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -138,31 +156,37 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details__content').attr('a')).toBe('123');
-            expect($('.ons-details__content').attr('b')).toBe('456');
+            test('THEN: item content renders with provided HTML attributes', () => {
+                expect($('.ons-details__content').attr('a')).toBe('123');
+                expect($('.ons-details__content').attr('b')).toBe('456');
+            });
         });
     });
-
-    describe('toggle all button', () => {
-        it('outputs a button with the expected class', () => {
+    describe('GIVEN: Params: allButton: AccordionButton', () => {
+        describe('WHEN: required open/close params are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
-                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    ...EXAMPLE_ACCORDION,
                     allButton: {
                         open: 'Open label',
                         close: 'Close label',
                     },
                 }),
             );
-
-            expect($('button.ons-accordion__toggle-all').length).toBe(1);
+            test('THEN: renders button with expected class', () => {
+                expect($('button.ons-accordion__toggle-all').length).toBe(1);
+            });
+            test('THEN: renders button with provided open text', () => {
+                expect($('.ons-accordion__toggle-all-inner').text()).toBe('Open label');
+            });
+            test('THEN: renders button with provided close text', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-close-all')).toBe('Close label');
+            });
         });
-
-        it('has additionally provided `attributes`', () => {
+        describe('WHEN: attributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
-                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    ...EXAMPLE_ACCORDION,
                     allButton: {
                         open: 'Open label',
                         close: 'Close label',
@@ -173,9 +197,56 @@ describe('macro: accordion', () => {
                     },
                 }),
             );
-
-            expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
-            expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+            test('THEN: renders button with additional attributes provided', () => {
+                expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
+                expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+            });
+        });
+    });
+    describe('GIVEN: Params: saveState', () => {
+        describe('WHEN: saveState param is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                }),
+            );
+            test('THEN: renders without saveState attribute', () => {
+                expect($('.ons-details--accordion').attr('saveState')).toBe(undefined);
+            });
+        });
+        describe('WHEN: saveState param is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    saveState: true,
+                }),
+            );
+            test('THEN: renders with saveState attribute', () => {
+                expect($('.ons-details--accordion').attr('saveState'));
+            });
+        });
+    });
+    describe('GIVEN: Params: open', () => {
+        describe('WHEN: open param is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                }),
+            );
+            test('THEN: renders with accordion items closed on page load', () => {
+                expect($('.ons-details--accordion').attr('open')).toBe(undefined);
+            });
+        });
+        describe('WHEN: open param is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    open: true,
+                }),
+            );
+            test('THEN: renders with accordion items open on page load', () => {
+                expect($('.ons-details--accordion').attr('open'));
+            });
         });
     });
 });

package/components/accordion/_test_examples.js

@@ -0,0 +1,13 @@
+export const EXAMPLE_ACCORDION = {
+    id: 'accordion-identifier',
+    itemsList: [
+        {
+            title: 'Title for item 1',
+            content: 'Content for item 1',
+        },
+        {
+            title: 'Title for item 2',
+            content: 'Content for item 2',
+        },
+    ],
+};

package/components/address-input/_macro.njk

@@ -132,9 +132,9 @@
                                 "mutuallyExclusive": params.mutuallyExclusive
                             },
                             "externalInitialiser": true,
-                            "APIDomain": params.APIDomain,
-                            "APIDomainBearerToken": params.APIDomainBearerToken,
-                            "APIManualQueryParams": params.APIManualQueryParams,
+                            "apiDomain": params.apiDomain,
+                            "apiDomainBearerToken": params.apiDomainBearerToken,
+                            "apiManualQueryParams": params.apiManualQueryParams,
                             "allowMultiple": params.allowMultiple,
                             "mandatory": params.mandatory,
                             "instructions": params.instructions,
@@ -157,15 +157,15 @@
                             "errorTitle": params.errorTitle,
                             "errorMessageEnter": params.errorMessageEnter,
                             "errorMessageSelect": params.errorMessageSelect,
-                            "errorMessageAPI": params.errorMessageAPI,
-                            "errorMessageAPILinkText": params.errorMessageAPILinkText,
+                            "errorMessageApi": params.errorMessageApi,
+                            "errorMessageApiLinkText": params.errorMessageApiLinkText,
                             "options": params.options,
-                            "manualLink": params.manualLink,
+                            "manualLinkUrl": params.manualLinkUrl,
                             "manualLinkText": params.manualLinkText
                         })
                     }}
                     {% if params.manualLinkText %}
-                        <a href="{{ params.manualLink | default('#0') }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
+                        <a href="{{ params.manualLinkUrl }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
                             >{{ params.manualLinkText }}</a
                         >
                     {% endif %}

package/components/address-input/_macro.spec.js

@@ -312,9 +312,9 @@ describe('macro: address-input', () => {
                 error: '[params.error]',
                 name: '[params.name]',
                 mutuallyExclusive: '[params.mutuallyExclusive]',
-                APIDomain: '[params.APIDomain]',
-                APIDomainBearerToken: '[params.APIDomainBearerToken]',
-                APIManualQueryParams: '[params.APIManualQueryParams]',
+                apiDomain: '[params.apiDomain]',
+                apiDomainBearerToken: '[params.apiDomainBearerToken]',
+                apiManualQueryParams: '[params.apiManualQueryParams]',
                 allowMultiple: '[params.allowMultiple]',
                 mandatory: '[params.mandatory]',
                 instructions: '[params.instructions]',
@@ -338,10 +338,10 @@ describe('macro: address-input', () => {
                 errorTitle: '[params.errorTitle]',
                 errorMessageEnter: '[params.errorMessageEnter]',
                 errorMessageSelect: '[params.errorMessageSelect]',
-                errorMessageAPI: '[params.errorMessageAPI]',
-                errorMessageAPILinkText: '[params.errorMessageAPILinkText]',
+                errorMessageApi: '[params.errorMessageApi]',
+                errorMessageApiLinkText: '[params.errorMessageApiLinkText]',
                 options: '[params.options]',
-                manualLink: '[params.manualLink]',
+                manualLinkUrl: '[params.manualLinkUrl]',
                 manualLinkText: '[params.manualLinkText]',
             });
 
@@ -362,9 +362,9 @@ describe('macro: address-input', () => {
                     mutuallyExclusive: '[params.mutuallyExclusive]',
                 },
                 externalInitialiser: true,
-                APIDomain: '[params.APIDomain]',
-                APIDomainBearerToken: '[params.APIDomainBearerToken]',
-                APIManualQueryParams: '[params.APIManualQueryParams]',
+                apiDomain: '[params.apiDomain]',
+                apiDomainBearerToken: '[params.apiDomainBearerToken]',
+                apiManualQueryParams: '[params.apiManualQueryParams]',
                 allowMultiple: '[params.allowMultiple]',
                 mandatory: '[params.mandatory]',
                 instructions: '[params.instructions]',
@@ -387,18 +387,19 @@ describe('macro: address-input', () => {
                 errorTitle: '[params.errorTitle]',
                 errorMessageEnter: '[params.errorMessageEnter]',
                 errorMessageSelect: '[params.errorMessageSelect]',
-                errorMessageAPI: '[params.errorMessageAPI]',
-                errorMessageAPILinkText: '[params.errorMessageAPILinkText]',
+                errorMessageApi: '[params.errorMessageApi]',
+                errorMessageApiLinkText: '[params.errorMessageApiLinkText]',
                 options: '[params.options]',
-                manualLink: '[params.manualLink]',
+                manualLinkUrl: '[params.manualLinkUrl]',
                 manualLinkText: '[params.manualLinkText]',
             });
         });
 
-        it('renders manualLinkText` when provided with a default value for `manualLink`', () => {
+        it('renders manualLinkText` when provided with a default value for `manualLinkUrl`', () => {
             const $ = cheerio.load(
                 renderComponent('address-input', {
                     ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL,
+                    manualLinkUrl: '#0',
                     manualLinkText: 'Manually enter address',
                 }),
             );
@@ -407,11 +408,11 @@ describe('macro: address-input', () => {
             expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address');
         });
 
-        it('renders `manualLinkText` with `manualLink` when provided', () => {
+        it('renders `manualLinkText` with `manualLinkUrl` when provided', () => {
             const $ = cheerio.load(
                 renderComponent('address-input', {
                     ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL,
-                    manualLink: 'https://example.com/edit-address',
+                    manualLinkUrl: 'https://example.com/edit-address',
                     manualLinkText: 'Manually enter address',
                 }),
             );

package/components/address-input/autosuggest.address.error.js

@@ -32,7 +32,7 @@ export default class AddressError {
             const errorListElement = document.createElement('p');
             const errorLinkElement = document.createElement('a');
 
-            errorElement.className = 'ons-panel ons-panel--error ons-u-mb-m ons-js-autosuggest-error-panel';
+            errorElement.className = 'ons-panel ons-panel--error ons-u-mb-l ons-js-autosuggest-error-panel';
             errorElementHeader.className = 'ons-panel__header';
             errorElementTitle.className = 'ons-panel__title ons-u-fs-r--b';
             errorBodyElement.className = 'ons-panel__body';