@ons/design-system 70.0.7 → 70.0.9

package/components/radios/radios.dom.js

@@ -1,37 +1,37 @@
 import domready from '../../js/domready';
 
 domready(async () => {
-  const radios = [...document.querySelectorAll('.ons-js-radio')];
-
-  if (radios.length) {
-    const Radios = (await import('../checkboxes/checkboxes-with-reveal')).default;
-
-    new Radios(radios);
-
-    const button = document.querySelector('.ons-js-clear-btn');
-    const otherInput = document.querySelector('.ons-radio__other');
-    if (button) {
-      const ClearRadios = (await import('./clear-radios')).default;
-
-      new ClearRadios(radios, button, otherInput);
-    }
-
-    const openOther = document.querySelector('.ons-radio__other--open');
-    if (openOther) {
-      const parent = openOther.parentNode;
-      const radioInput = parent.querySelector('.ons-radio__input');
-      const CheckRadios = (await import('./check-radios')).default;
-
-      new CheckRadios(radioInput, openOther);
-    }
-
-    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-radio')];
-    if (otherFieldsets) {
-      const RadioWithInnerFieldset = (await import('./radio-with-fieldset')).default;
-      otherFieldsets.forEach((otherFieldset) => {
-        const context = otherFieldset.closest('.ons-radio');
-        new RadioWithInnerFieldset(context);
-      });
+    const radios = [...document.querySelectorAll('.ons-js-radio')];
+
+    if (radios.length) {
+        const Radios = (await import('../checkboxes/checkboxes-with-reveal')).default;
+
+        new Radios(radios);
+
+        const button = document.querySelector('.ons-js-clear-btn');
+        const otherInput = document.querySelector('.ons-radio__other');
+        if (button) {
+            const ClearRadios = (await import('./clear-radios')).default;
+
+            new ClearRadios(radios, button, otherInput);
+        }
+
+        const openOther = document.querySelector('.ons-radio__other--open');
+        if (openOther) {
+            const parent = openOther.parentNode;
+            const radioInput = parent.querySelector('.ons-radio__input');
+            const CheckRadios = (await import('./check-radios')).default;
+
+            new CheckRadios(radioInput, openOther);
+        }
+
+        const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-radio')];
+        if (otherFieldsets) {
+            const RadioWithInnerFieldset = (await import('./radio-with-fieldset')).default;
+            otherFieldsets.forEach((otherFieldset) => {
+                const context = otherFieldset.closest('.ons-radio');
+                new RadioWithInnerFieldset(context);
+            });
+        }
     }
-  }
 });

package/components/radios/radios.spec.js

@@ -1,288 +1,288 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RADIOS_PARAMS = {
-  name: 'contact-preference',
-  clearRadios: {
-    text: 'Clear selection',
-    url: '/',
-    ariaClearText: 'You can clear your answer by clicking the clear selection button under the radio buttons',
-    ariaClearedText: 'You have cleared your answer',
-  },
-  legend: 'How would you like us to contact you?',
-  legendClasses: 'ons-u-vh',
-  radios: [
-    {
-      id: 'email',
-      value: 'email',
-      label: {
-        text: 'Email',
-      },
-      other: {
-        id: 'email-other',
-        type: 'email',
-        label: {
-          text: 'Enter your email address',
-        },
-      },
+    name: 'contact-preference',
+    clearRadios: {
+        text: 'Clear selection',
+        url: '/',
+        ariaClearText: 'You can clear your answer by clicking the clear selection button under the radio buttons',
+        ariaClearedText: 'You have cleared your answer',
     },
-    {
-      id: 'phone',
-      value: 'phone',
-      label: {
-        text: 'Phone',
-      },
-      other: {
-        id: 'tel-other',
-        type: 'tel',
-        label: {
-          text: 'Enter your phone number',
+    legend: 'How would you like us to contact you?',
+    legendClasses: 'ons-u-vh',
+    radios: [
+        {
+            id: 'email',
+            value: 'email',
+            label: {
+                text: 'Email',
+            },
+            other: {
+                id: 'email-other',
+                type: 'email',
+                label: {
+                    text: 'Enter your email address',
+                },
+            },
         },
-      },
-    },
-    {
-      id: 'text',
-      value: 'Open input test',
-      label: {
-        text: 'Text',
-      },
-      other: {
-        id: 'text-other',
-        type: 'text',
-        open: true,
-        label: {
-          text: 'Enter something else',
+        {
+            id: 'phone',
+            value: 'phone',
+            label: {
+                text: 'Phone',
+            },
+            other: {
+                id: 'tel-other',
+                type: 'tel',
+                label: {
+                    text: 'Enter your phone number',
+                },
+            },
         },
-      },
-    },
-  ],
+        {
+            id: 'text',
+            value: 'Open input test',
+            label: {
+                text: 'Text',
+            },
+            other: {
+                id: 'text-other',
+                type: 'text',
+                open: true,
+                label: {
+                    text: 'Enter something else',
+                },
+            },
+        },
+    ],
 };
 
 describe('script: radios', () => {
-  describe('other options', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('radios', EXAMPLE_RADIOS_PARAMS));
-    });
-
-    it('radios with other options should be given aria-expanded attributes', async () => {
-      const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
-      expect(ariaExpandedOption1).toBe('false');
-      const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
-      expect(ariaExpandedOption2).toBe('false');
-    });
-
-    it('radios with "open" other options should not be given aria-expanded attributes', async () => {
-      const hasAriaExpandedOption3 = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
-      expect(hasAriaExpandedOption3).toBe(false);
-    });
-
-    describe('a radio checked', () => {
-      beforeEach(async () => {
-        await page.click('#email');
-      });
-
-      it('then the checked radio aria-expanded attribute should be set to true', async () => {
-        const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
-        expect(ariaExpandedOption1).toBe('true');
-      });
-
-      it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
-        const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
-        expect(ariaExpandedOption2).toBe('false');
-      });
-
-      it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
-        const hasAriaExpanded = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
-        expect(hasAriaExpanded).toBe(false);
-      });
-
-      it('then the clear button should be visible', async () => {
-        const isHidden = await page.$eval('.ons-js-clear-btn', (node) => node.classList.contains('ons-u-db-no-js_enabled'));
-        expect(isHidden).toBe(false);
-      });
-
-      it('then the aria live message should announce that the answer can be cleared', async () => {
-        const alertText = await page.$eval('.ons-js-clear-radio-alert', (node) => node.innerHTML);
-        expect(alertText).toBe('You can clear your answer by clicking the clear selection button under the radio buttons');
-      });
-
-      describe('and the radio selection is changed', () => {
+    describe('other options', () => {
         beforeEach(async () => {
-          await page.click('#phone');
+            await setTestPage('/test', renderComponent('radios', EXAMPLE_RADIOS_PARAMS));
         });
 
-        it('then the checked radio aria-expanded attribute should be set to true', async () => {
-          const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
-          expect(ariaExpandedOption2).toBe('true');
+        it('radios with other options should be given aria-expanded attributes', async () => {
+            const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
+            expect(ariaExpandedOption1).toBe('false');
+            const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
+            expect(ariaExpandedOption2).toBe('false');
         });
 
-        it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
-          const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
-          expect(ariaExpandedOption1).toBe('false');
+        it('radios with "open" other options should not be given aria-expanded attributes', async () => {
+            const hasAriaExpandedOption3 = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
+            expect(hasAriaExpandedOption3).toBe(false);
         });
 
-        it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
-          const hasAriaExpanded = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
-          expect(hasAriaExpanded).toBe(false);
+        describe('a radio checked', () => {
+            beforeEach(async () => {
+                await page.click('#email');
+            });
+
+            it('then the checked radio aria-expanded attribute should be set to true', async () => {
+                const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
+                expect(ariaExpandedOption1).toBe('true');
+            });
+
+            it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
+                const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
+                expect(ariaExpandedOption2).toBe('false');
+            });
+
+            it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
+                const hasAriaExpanded = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
+                expect(hasAriaExpanded).toBe(false);
+            });
+
+            it('then the clear button should be visible', async () => {
+                const isHidden = await page.$eval('.ons-js-clear-btn', (node) => node.classList.contains('ons-u-db-no-js_enabled'));
+                expect(isHidden).toBe(false);
+            });
+
+            it('then the aria live message should announce that the answer can be cleared', async () => {
+                const alertText = await page.$eval('.ons-js-clear-radio-alert', (node) => node.innerHTML);
+                expect(alertText).toBe('You can clear your answer by clicking the clear selection button under the radio buttons');
+            });
+
+            describe('and the radio selection is changed', () => {
+                beforeEach(async () => {
+                    await page.click('#phone');
+                });
+
+                it('then the checked radio aria-expanded attribute should be set to true', async () => {
+                    const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
+                    expect(ariaExpandedOption2).toBe('true');
+                });
+
+                it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
+                    const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
+                    expect(ariaExpandedOption1).toBe('false');
+                });
+
+                it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
+                    const hasAriaExpanded = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
+                    expect(hasAriaExpanded).toBe(false);
+                });
+            });
         });
-      });
-    });
 
-    describe('the clear button is clicked', () => {
-      beforeEach(async () => {
-        await page.$eval('.ons-js-clear-btn', (node) => node.click());
-      });
-
-      it('then the clear button should not be visible', async () => {
-        const isHidden = await page.$eval('.ons-js-clear-btn', (node) => node.classList.contains('ons-u-db-no-js_enabled'));
-        expect(isHidden).toBe(true);
-      });
-
-      it('then the aria live message should announce that the answer has been cleared', async () => {
-        const alertText = await page.$eval('.ons-js-clear-radio-alert', (node) => node.innerHTML);
-        expect(alertText).toBe('You have cleared your answer');
-      });
-
-      it('then all radios should not be checked', async () => {
-        const checkedRadios = await page.$$eval('.ons-js-radio', (nodes) => nodes.map((node) => node.checked));
-        expect(checkedRadios).not.toContain(true);
-      });
-
-      it('then all other input fields should be empty', async () => {
-        const emailOtherValue = await page.$eval('#email-other', (node) => node.value);
-        expect(emailOtherValue).toBe('');
-        const telOtherValue = await page.$eval('#tel-other', (node) => node.value);
-        expect(telOtherValue).toBe('');
-        const textOtherValue = await page.$eval('#text-other', (node) => node.value);
-        expect(textOtherValue).toBe('');
-      });
-    });
+        describe('the clear button is clicked', () => {
+            beforeEach(async () => {
+                await page.$eval('.ons-js-clear-btn', (node) => node.click());
+            });
+
+            it('then the clear button should not be visible', async () => {
+                const isHidden = await page.$eval('.ons-js-clear-btn', (node) => node.classList.contains('ons-u-db-no-js_enabled'));
+                expect(isHidden).toBe(true);
+            });
+
+            it('then the aria live message should announce that the answer has been cleared', async () => {
+                const alertText = await page.$eval('.ons-js-clear-radio-alert', (node) => node.innerHTML);
+                expect(alertText).toBe('You have cleared your answer');
+            });
+
+            it('then all radios should not be checked', async () => {
+                const checkedRadios = await page.$$eval('.ons-js-radio', (nodes) => nodes.map((node) => node.checked));
+                expect(checkedRadios).not.toContain(true);
+            });
+
+            it('then all other input fields should be empty', async () => {
+                const emailOtherValue = await page.$eval('#email-other', (node) => node.value);
+                expect(emailOtherValue).toBe('');
+                const telOtherValue = await page.$eval('#tel-other', (node) => node.value);
+                expect(telOtherValue).toBe('');
+                const textOtherValue = await page.$eval('#text-other', (node) => node.value);
+                expect(textOtherValue).toBe('');
+            });
+        });
 
-    describe('there is a visible input which is focused', () => {
-      beforeEach(async () => {
-        await page.focus('#text-other');
-      });
+        describe('there is a visible input which is focused', () => {
+            beforeEach(async () => {
+                await page.focus('#text-other');
+            });
 
-      it('then the radio button should be checked', async () => {
-        const isRadioChecked = await page.$eval('#text', (node) => node.checked);
-        expect(isRadioChecked).toBe(true);
-      });
-    });
+            it('then the radio button should be checked', async () => {
+                const isRadioChecked = await page.$eval('#text', (node) => node.checked);
+                expect(isRadioChecked).toBe(true);
+            });
+        });
 
-    describe('there is a visible input and the radio is checked', () => {
-      beforeEach(async () => {
-        await page.click('#text');
-      });
+        describe('there is a visible input and the radio is checked', () => {
+            beforeEach(async () => {
+                await page.click('#text');
+            });
 
-      it('then the input should have a tab index of 0', async () => {
-        const tabIndex = await page.$eval('#text-other', (node) => node.getAttribute('tabindex'));
-        expect(tabIndex).toBe('0');
-      });
+            it('then the input should have a tab index of 0', async () => {
+                const tabIndex = await page.$eval('#text-other', (node) => node.getAttribute('tabindex'));
+                expect(tabIndex).toBe('0');
+            });
+        });
     });
-  });
 
-  describe('reveal and fieldset', function () {
-    const params = {
-      legend: 'What are your favourite pizza toppings?',
-      name: 'food-other',
-      radios: [
-        {
-          id: 'bacon-other',
-          label: {
-            text: 'Bacon',
-          },
-          value: 'bacon',
-        },
-        {
-          id: 'olives-other',
-          label: {
-            text: 'Olives',
-          },
-          value: 'olives',
-        },
-        {
-          id: 'other-radio',
-          label: {
-            text: 'Other',
-            description: 'An answer is required',
-          },
-          value: 'other',
-          other: {
-            id: 'other-textbox',
-            name: 'other-answer',
-            legend: 'Please specify other',
-            otherType: 'checkboxes',
-            checkboxes: [
-              {
-                id: 'inner-bacon-other',
-                label: {
-                  text: 'Bacon',
+    describe('reveal and fieldset', function () {
+        const params = {
+            legend: 'What are your favourite pizza toppings?',
+            name: 'food-other',
+            radios: [
+                {
+                    id: 'bacon-other',
+                    label: {
+                        text: 'Bacon',
+                    },
+                    value: 'bacon',
                 },
-                value: 'bacon',
-              },
-              {
-                id: 'inner-olives-other',
-                label: {
-                  text: 'Olives',
+                {
+                    id: 'olives-other',
+                    label: {
+                        text: 'Olives',
+                    },
+                    value: 'olives',
+                },
+                {
+                    id: 'other-radio',
+                    label: {
+                        text: 'Other',
+                        description: 'An answer is required',
+                    },
+                    value: 'other',
+                    other: {
+                        id: 'other-textbox',
+                        name: 'other-answer',
+                        legend: 'Please specify other',
+                        otherType: 'checkboxes',
+                        checkboxes: [
+                            {
+                                id: 'inner-bacon-other',
+                                label: {
+                                    text: 'Bacon',
+                                },
+                                value: 'bacon',
+                            },
+                            {
+                                id: 'inner-olives-other',
+                                label: {
+                                    text: 'Olives',
+                                },
+                                value: 'olives',
+                            },
+                        ],
+                    },
                 },
-                value: 'olives',
-              },
             ],
-          },
-        },
-      ],
-    };
-
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('radios', params));
-    });
+        };
 
-    it('radios with other options should be given aria-expanded attributes', async () => {
-      const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
-      expect(ariaExpanded).toBe('false');
-    });
-
-    describe('and a radio with an other input is checked', () => {
-      beforeEach(async () => {
-        await page.click('#other-radio');
-      });
-
-      it('has aria-expanded attribute should be set to true', async () => {
-        const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
-        expect(ariaExpanded).toBe('true');
-      });
-
-      describe('and any other radio is changed', () => {
         beforeEach(async () => {
-          await page.click('#bacon-other');
-        });
-
-        it('the radio with an other input aria-expanded attribute changes', async () => {
-          const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
-          expect(ariaExpanded).toBe('false');
+            await setTestPage('/test', renderComponent('radios', params));
         });
-      });
 
-      describe('and a child of other radio is checked', () => {
-        beforeEach(async () => {
-          await page.click('#inner-bacon-other');
-        });
-
-        describe('and another radio is checked', () => {
-          beforeEach(async () => {
-            await page.click('#olives-other');
-          });
-
-          it('the other radio aria-expanded attribute should be set to false', async () => {
+        it('radios with other options should be given aria-expanded attributes', async () => {
             const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
             expect(ariaExpanded).toBe('false');
-          });
+        });
 
-          it('the child of other checkbox should be unchecked', async () => {
-            const innerInputChecked = await page.$eval('#inner-bacon-other', (node) => node.checked);
-            expect(innerInputChecked).toBe(false);
-          });
+        describe('and a radio with an other input is checked', () => {
+            beforeEach(async () => {
+                await page.click('#other-radio');
+            });
+
+            it('has aria-expanded attribute should be set to true', async () => {
+                const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
+                expect(ariaExpanded).toBe('true');
+            });
+
+            describe('and any other radio is changed', () => {
+                beforeEach(async () => {
+                    await page.click('#bacon-other');
+                });
+
+                it('the radio with an other input aria-expanded attribute changes', async () => {
+                    const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
+                    expect(ariaExpanded).toBe('false');
+                });
+            });
+
+            describe('and a child of other radio is checked', () => {
+                beforeEach(async () => {
+                    await page.click('#inner-bacon-other');
+                });
+
+                describe('and another radio is checked', () => {
+                    beforeEach(async () => {
+                        await page.click('#olives-other');
+                    });
+
+                    it('the other radio aria-expanded attribute should be set to false', async () => {
+                        const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
+                        expect(ariaExpanded).toBe('false');
+                    });
+
+                    it('the child of other checkbox should be unchecked', async () => {
+                        const innerInputChecked = await page.$eval('#inner-bacon-other', (node) => node.checked);
+                        expect(innerInputChecked).toBe(false);
+                    });
+                });
+            });
         });
-      });
     });
-  });
 });

package/components/related-content/_macro.njk

@@ -1,18 +1,18 @@
 {% macro onsRelatedContent(params) %}
-
-    {% if params.classes %}
-        {% set classes = ' ' + params.classes %}
-    {% endif %}
-
-    <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
+    <aside
+        class="ons-related-content{{ ' ' + params.classes if params.classes else '' }}"
+        aria-label="{{ params.ariaLabel | default('Related content') }}"
+    >
         {% if params.rows %}
             {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
             {% from "components/list/_macro.njk" import onsList %}
             {% for row in params.rows %}
-                {% call onsRelatedContentSection({
-                    "title": row.title,
-                    "id": row.id
-                }) %}
+                {%
+                    call onsRelatedContentSection({
+                        "title": row.title,
+                        "id": row.id
+                    })
+                %}
                     <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
                         {{
                             onsList({
@@ -30,5 +30,4 @@
             {{ caller() if caller }}
         {% endif %}
     </aside>
-
 {% endmacro %}