@ons/design-system 70.0.6 → 70.0.8

package/components/checkboxes/checkbox-with-fieldset.js

@@ -1,28 +1,28 @@
 export default class CheckboxWithFieldset {
-  constructor(context) {
-    this.context = context;
-    this.checkbox = context.querySelector('.ons-js-checkbox');
-    this.childInputs = [...this.context.querySelectorAll('input')];
-    this.selectAllChildrenInput = this.context.querySelector('.ons-js-select-all-children');
+    constructor(context) {
+        this.context = context;
+        this.checkbox = context.querySelector('.ons-js-checkbox');
+        this.childInputs = [...this.context.querySelectorAll('input')];
+        this.selectAllChildrenInput = this.context.querySelector('.ons-js-select-all-children');
 
-    if (this.selectAllChildrenInput) {
-      this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
-    } else {
-      this.checkbox.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this));
+        if (this.selectAllChildrenInput) {
+            this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
+        } else {
+            this.checkbox.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this));
+        }
     }
-  }
 
-  checkChildInputsOnSelect() {
-    this.childInputs.forEach((input) => {
-      input.checked = this.selectAllChildrenInput.checked === true ? true : false;
-    });
-  }
+    checkChildInputsOnSelect() {
+        this.childInputs.forEach((input) => {
+            input.checked = this.selectAllChildrenInput.checked === true ? true : false;
+        });
+    }
 
-  uncheckChildInputsOnDeselect() {
-    if (this.checkbox.checked === false) {
-      this.childInputs.forEach((input) => {
-        input.checked = false;
-      });
+    uncheckChildInputsOnDeselect() {
+        if (this.checkbox.checked === false) {
+            this.childInputs.forEach((input) => {
+                input.checked = false;
+            });
+        }
     }
-  }
 }

package/components/checkboxes/checkboxes-with-reveal.js

@@ -1,13 +1,13 @@
 export default class Checkboxes {
-  constructor(inputs) {
-    this.inputs = inputs;
-    this.inputs.forEach((input) => input.addEventListener('change', this.setExpandedAttributes.bind(this)));
-    this.setExpandedAttributes();
-  }
+    constructor(inputs) {
+        this.inputs = inputs;
+        this.inputs.forEach((input) => input.addEventListener('change', this.setExpandedAttributes.bind(this)));
+        this.setExpandedAttributes();
+    }
 
-  setExpandedAttributes() {
-    this.inputs
-      .filter((input) => input.hasAttribute('aria-haspopup'))
-      .forEach((input) => input.setAttribute('aria-expanded', input.checked));
-  }
+    setExpandedAttributes() {
+        this.inputs
+            .filter((input) => input.hasAttribute('aria-haspopup'))
+            .forEach((input) => input.setAttribute('aria-expanded', input.checked));
+    }
 }

package/components/checkboxes/checkboxes.dom.js

@@ -1,37 +1,37 @@
 import domready from '../../js/domready';
 
 domready(async () => {
-  const checkboxes = [...document.querySelectorAll('.ons-js-checkbox')];
+    const checkboxes = [...document.querySelectorAll('.ons-js-checkbox')];
 
-  if (checkboxes.length) {
-    const Checkboxes = (await import('./checkboxes-with-reveal')).default;
-    new Checkboxes(checkboxes);
+    if (checkboxes.length) {
+        const Checkboxes = (await import('./checkboxes-with-reveal')).default;
+        new Checkboxes(checkboxes);
 
-    const openOther = document.querySelector('.ons-checkbox__other--open');
-    if (openOther) {
-      const checkboxInput = openOther.parentNode.querySelector('.ons-checkbox__input');
-      const CheckCheckbox = (await import('../radios/check-radios')).default;
+        const openOther = document.querySelector('.ons-checkbox__other--open');
+        if (openOther) {
+            const checkboxInput = openOther.parentNode.querySelector('.ons-checkbox__input');
+            const CheckCheckbox = (await import('../radios/check-radios')).default;
 
-      new CheckCheckbox(checkboxInput, openOther);
-    }
+            new CheckCheckbox(checkboxInput, openOther);
+        }
 
-    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-checkbox')];
-    if (otherFieldsets) {
-      const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
-      otherFieldsets.forEach((otherFieldset) => {
-        const context = otherFieldset.closest('.ons-checkbox');
-        new CheckboxWithInnerFieldset(context);
-      });
-    }
+        const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-checkbox')];
+        if (otherFieldsets) {
+            const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
+            otherFieldsets.forEach((otherFieldset) => {
+                const context = otherFieldset.closest('.ons-checkbox');
+                new CheckboxWithInnerFieldset(context);
+            });
+        }
 
-    const autoSelectButtons = [...document.querySelectorAll('.ons-js-auto-selector')];
-    if (autoSelectButtons) {
-      const CheckboxWithAutoSelect = (await import('./checkbox-with-autoselect')).default;
-      autoSelectButtons.forEach((button) => {
-        const context = button.parentNode;
-        const insideReveal = context.parentNode.parentNode.querySelector('.ons-js-other');
-        new CheckboxWithAutoSelect(context, button, insideReveal);
-      });
+        const autoSelectButtons = [...document.querySelectorAll('.ons-js-auto-selector')];
+        if (autoSelectButtons) {
+            const CheckboxWithAutoSelect = (await import('./checkbox-with-autoselect')).default;
+            autoSelectButtons.forEach((button) => {
+                const context = button.parentNode;
+                const insideReveal = context.parentNode.parentNode.querySelector('.ons-js-other');
+                new CheckboxWithAutoSelect(context, button, insideReveal);
+            });
+        }
     }
-  }
 });

package/components/checkboxes/checkboxes.spec.js

@@ -1,208 +1,208 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 describe('script: checkboxes', () => {
-  describe('automatic selection', () => {
-    const params = {
-      legend: 'What are your favourite pizza toppings?',
-      checkboxesLabel: 'Select all that apply',
-      name: 'food-other',
-      autoSelect: {
-        selectAllText: 'Select all',
-        unselectAllText: 'Unselect all',
-        context: 'following checkboxes',
-      },
-      checkboxes: [
-        {
-          id: 'bacon-other',
-          label: {
-            text: 'Bacon',
-          },
-          value: 'bacon',
-        },
-        {
-          id: 'olives-other',
-          label: {
-            text: 'Olives',
-          },
-          value: 'olives',
-        },
-        {
-          id: 'other-checkbox',
-          label: {
-            text: 'Other',
-            description: 'An answer is required',
-          },
-          value: 'other',
-        },
-      ],
-    };
-
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('checkboxes', params));
-    });
-
-    describe('and the autoselect button is clicked', () => {
-      beforeEach(async () => {
-        await page.click('.ons-js-auto-selector');
-      });
-
-      it('all checkboxes should be checked', async () => {
-        const checkedStates = await page.$$eval('.ons-js-checkbox', (nodes) => nodes.map((node) => node.checked));
-        expect(checkedStates).toEqual([true, true, true]);
-      });
-
-      it('the button text should have changed', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
-        expect(buttonText).toBe('Unselect all');
-      });
-    });
-
-    describe('and the autoselect button is clicked to select all and clicked again', () => {
-      beforeEach(async () => {
-        await page.click('.ons-js-auto-selector');
-        await page.click('.ons-js-auto-selector');
-      });
-
-      it('all checkboxes should be unchecked', async () => {
-        const checkedStates = await page.$$eval('.ons-js-checkbox', (nodes) => nodes.map((node) => node.checked));
-        expect(checkedStates).toEqual([false, false, false]);
-      });
-
-      it('the button text should have changed', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
-        expect(buttonText).toBe('Select all');
-      });
-    });
-
-    describe('when all except one checkbox is checked', () => {
-      beforeEach(async () => {
-        await page.$eval('#olives-other', (node) => (node.checked = true));
-      });
-
-      it('the button text should be select all', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
-        expect(buttonText).toBe('Select all');
-      });
-    });
-
-    describe('when the only unchecked checkbox is checked', () => {
-      beforeEach(async () => {
-        await page.click('#bacon-other');
-        await page.click('#olives-other');
-        await page.click('#other-checkbox');
-      });
-
-      it('the button text should be unselect all', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
-        expect(buttonText).toBe('Unselect all');
-      });
-    });
-  });
-
-  describe('reveal and fieldset', function () {
-    const params = {
-      legend: 'What are your favourite pizza toppings?',
-      checkboxesLabel: 'Select all that apply',
-      name: 'food-other',
-      checkboxes: [
-        {
-          id: 'bacon-other',
-          label: {
-            text: 'Bacon',
-          },
-          value: 'bacon',
-        },
-        {
-          id: 'olives-other',
-          label: {
-            text: 'Olives',
-          },
-          value: 'olives',
-        },
-        {
-          id: 'other-checkbox',
-          label: {
-            text: 'Other',
-            description: 'An answer is required',
-          },
-          value: 'other',
-          other: {
-            id: 'other-textbox',
-            name: 'other-answer',
-            legend: 'Please specify other',
-            otherType: 'checkboxes',
+    describe('automatic selection', () => {
+        const params = {
+            legend: 'What are your favourite pizza toppings?',
+            checkboxesLabel: 'Select all that apply',
+            name: 'food-other',
+            autoSelect: {
+                selectAllText: 'Select all',
+                unselectAllText: 'Unselect all',
+                context: 'following checkboxes',
+            },
             checkboxes: [
-              {
-                id: 'inner-bacon-other',
-                label: {
-                  text: 'Bacon',
+                {
+                    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-checkbox',
+                    label: {
+                        text: 'Other',
+                        description: 'An answer is required',
+                    },
+                    value: 'other',
                 },
-                value: 'olives',
-              },
             ],
-          },
-        },
-      ],
-    };
+        };
 
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('checkboxes', params));
-    });
+        beforeEach(async () => {
+            await setTestPage('/test', renderComponent('checkboxes', params));
+        });
 
-    it('checkboxes with other options should be given aria-expanded attributes', async () => {
-      const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
-      expect(ariaExpanded).toBe('false');
-    });
+        describe('and the autoselect button is clicked', () => {
+            beforeEach(async () => {
+                await page.click('.ons-js-auto-selector');
+            });
 
-    describe('and a checkbox with an other input is checked', () => {
-      beforeEach(async () => {
-        await page.click('#other-checkbox');
-      });
+            it('all checkboxes should be checked', async () => {
+                const checkedStates = await page.$$eval('.ons-js-checkbox', (nodes) => nodes.map((node) => node.checked));
+                expect(checkedStates).toEqual([true, true, true]);
+            });
 
-      it('has aria-expanded attribute should be set to true', async () => {
-        const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
-        expect(ariaExpanded).toBe('true');
-      });
+            it('the button text should have changed', async () => {
+                const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
+                expect(buttonText).toBe('Unselect all');
+            });
+        });
 
-      describe('and any other checkbox is changed', () => {
-        beforeEach(async () => {
-          await page.click('#bacon-other');
+        describe('and the autoselect button is clicked to select all and clicked again', () => {
+            beforeEach(async () => {
+                await page.click('.ons-js-auto-selector');
+                await page.click('.ons-js-auto-selector');
+            });
+
+            it('all checkboxes should be unchecked', async () => {
+                const checkedStates = await page.$$eval('.ons-js-checkbox', (nodes) => nodes.map((node) => node.checked));
+                expect(checkedStates).toEqual([false, false, false]);
+            });
+
+            it('the button text should have changed', async () => {
+                const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
+                expect(buttonText).toBe('Select all');
+            });
         });
 
-        it('the checkbox with an other input aria-expanded attribute not change', async () => {
-          const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
-          expect(ariaExpanded).toBe('true');
+        describe('when all except one checkbox is checked', () => {
+            beforeEach(async () => {
+                await page.$eval('#olives-other', (node) => (node.checked = true));
+            });
+
+            it('the button text should be select all', async () => {
+                const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
+                expect(buttonText).toBe('Select all');
+            });
         });
-      });
 
-      describe('and a child of other checkbox is checked', () => {
-        beforeEach(async () => {
-          await page.click('#inner-bacon-other');
+        describe('when the only unchecked checkbox is checked', () => {
+            beforeEach(async () => {
+                await page.click('#bacon-other');
+                await page.click('#olives-other');
+                await page.click('#other-checkbox');
+            });
+
+            it('the button text should be unselect all', async () => {
+                const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
+                expect(buttonText).toBe('Unselect all');
+            });
         });
+    });
 
-        describe('and a checkbox with an other input is unchecked', () => {
-          beforeEach(async () => {
-            await page.click('#other-checkbox');
-          });
+    describe('reveal and fieldset', function () {
+        const params = {
+            legend: 'What are your favourite pizza toppings?',
+            checkboxesLabel: 'Select all that apply',
+            name: 'food-other',
+            checkboxes: [
+                {
+                    id: 'bacon-other',
+                    label: {
+                        text: 'Bacon',
+                    },
+                    value: 'bacon',
+                },
+                {
+                    id: 'olives-other',
+                    label: {
+                        text: 'Olives',
+                    },
+                    value: 'olives',
+                },
+                {
+                    id: 'other-checkbox',
+                    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',
+                            },
+                        ],
+                    },
+                },
+            ],
+        };
 
-          it('its aria-expanded attribute should be set to false', async () => {
+        beforeEach(async () => {
+            await setTestPage('/test', renderComponent('checkboxes', params));
+        });
+
+        it('checkboxes with other options should be given aria-expanded attributes', async () => {
             const ariaExpanded = await page.$eval('#other-checkbox', (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 checkbox with an other input is checked', () => {
+            beforeEach(async () => {
+                await page.click('#other-checkbox');
+            });
+
+            it('has aria-expanded attribute should be set to true', async () => {
+                const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
+                expect(ariaExpanded).toBe('true');
+            });
+
+            describe('and any other checkbox is changed', () => {
+                beforeEach(async () => {
+                    await page.click('#bacon-other');
+                });
+
+                it('the checkbox with an other input aria-expanded attribute not change', async () => {
+                    const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
+                    expect(ariaExpanded).toBe('true');
+                });
+            });
+
+            describe('and a child of other checkbox is checked', () => {
+                beforeEach(async () => {
+                    await page.click('#inner-bacon-other');
+                });
+
+                describe('and a checkbox with an other input is unchecked', () => {
+                    beforeEach(async () => {
+                        await page.click('#other-checkbox');
+                    });
+
+                    it('its aria-expanded attribute should be set to false', async () => {
+                        const ariaExpanded = await page.$eval('#other-checkbox', (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/content-pagination/_content-pagination.scss

@@ -1,52 +1,52 @@
 .ons-content-pagination {
-  display: block;
-  margin: 1.5rem 0 2.5rem;
-
-  &__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__item {
-    margin: 0 0 1.5rem;
-  }
-
-  &__link {
-    display: inline-block;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-      .ons-content-pagination__link-label {
-        text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
-      }
+    display: block;
+    margin: 1.5rem 0 2.5rem;
+
+    &__list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
     }
 
-    &:focus {
-      text-decoration: none;
+    &__item {
+        margin: 0 0 1.5rem;
+    }
 
-      .ons-content-pagination__link-label {
+    &__link {
+        display: inline-block;
         text-decoration: none;
-      }
+
+        &:hover {
+            text-decoration: none;
+            .ons-content-pagination__link-label {
+                text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+            }
+        }
+
+        &:focus {
+            text-decoration: none;
+
+            .ons-content-pagination__link-label {
+                text-decoration: none;
+            }
+        }
     }
-  }
 
-  &__link-title {
-    display: block;
-  }
+    &__link-title {
+        display: block;
+    }
 
-  &__link-text {
-    @extend .ons-u-fs-r--b;
+    &__link-text {
+        @extend .ons-u-fs-r--b;
 
-    margin: 0 0 0 0.5rem;
-    vertical-align: middle;
-  }
+        margin: 0 0 0 0.5rem;
+        vertical-align: middle;
+    }
 
-  &__link-label {
-    display: inline-block;
-    font-size: 0.9rem;
-    margin: 0 0 0 2rem;
-    text-decoration: underline;
-  }
+    &__link-label {
+        display: inline-block;
+        font-size: 0.9rem;
+        margin: 0 0 0 2rem;
+        text-decoration: underline;
+    }
 }