@ons/design-system 69.0.0 → 70.0.1

package/components/mutually-exclusive/mutually-exclusive.date.spec.js

@@ -31,7 +31,35 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_PARAMS = {
     deselectExclusiveOptionAdjective: 'deselected',
     exclusiveOptions: [
       {
-        id: 'date-exclusive-exclusive-option',
+        id: 'date-exclusive-option',
+        name: 'no-paid-job',
+        value: 'no-paid-job',
+        label: {
+          text: 'I have never had a paid job',
+        },
+      },
+    ],
+  },
+};
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_SINGLE_PARAMS = {
+  id: 'date-mutually-exclusive',
+  legendOrLabel: 'What year was your last MOT?',
+  description: 'For example, 2018',
+  year: {
+    label: {
+      text: 'Year',
+    },
+    name: 'year-exclusive',
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear the date if one has been inputted',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'date-exclusive-option',
         name: 'no-paid-job',
         value: 'no-paid-job',
         label: {
@@ -57,11 +85,11 @@ describe('script: mutually-exclusive', () => {
 
       describe('when the user clicks the mutually exclusive option', () => {
         beforeEach(async () => {
-          await page.click('#date-exclusive-exclusive-option');
+          await page.click('#date-exclusive-option');
         });
 
         it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#date-exclusive-exclusive-option', (node) => node.checked);
+          const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(true);
         });
 
@@ -85,7 +113,7 @@ describe('script: mutually-exclusive', () => {
 
     describe('Given the user has checked the mutually exclusive exclusive option', () => {
       beforeEach(async () => {
-        await page.click('#date-exclusive-exclusive-option');
+        await page.click('#date-exclusive-option');
       });
 
       describe('when the user populates the dateInput', () => {
@@ -95,8 +123,8 @@ describe('script: mutually-exclusive', () => {
           await page.type('#date-mutually-exclusive-year', '2018');
         });
 
-        it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#date-exclusive-exclusive-option', (node) => node.checked);
+        it('then the mutually exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(false);
         });
 
@@ -127,7 +155,93 @@ describe('script: mutually-exclusive', () => {
 
       describe('when the user clicks the mutually exclusive option', () => {
         beforeEach(async () => {
-          await page.click('#date-exclusive-exclusive-option');
+          await page.click('#date-exclusive-option');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
+  describe('date-year', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('date-input', EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_SINGLE_PARAMS));
+    });
+
+    describe('Given the user populated the date input', () => {
+      beforeEach(async () => {
+        await page.type('#date-mutually-exclusive-year', '2018');
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#date-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the date input should be cleared', async () => {
+          const yearValue = await page.$eval('#date-mutually-exclusive-year', (node) => node.value);
+          expect(yearValue).toBe('');
+        });
+
+        it('then the aria alert should tell the user that the date input has been cleared', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+          expect(alertText).toBe('What year was your last MOT? cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#date-exclusive-option');
+      });
+
+      describe('when the user populates the dateInput', () => {
+        beforeEach(async () => {
+          await page.type('#date-mutually-exclusive-year', '2018');
+        });
+
+        it('then the mutually exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
+          expect(isChecked).toBe(false);
+        });
+
+        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+          expect(alertText).toBe('I have never had a paid job deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the date input or checked the exclusive option', () => {
+      describe('when the user populates the date input', () => {
+        beforeEach(async () => {
+          await page.type('#date-mutually-exclusive-year', '2018');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#date-exclusive-option');
         });
 
         it('then the aria alert shouldnt say anything', async () => {

package/components/mutually-exclusive/mutually-exclusive.duration.spec.js

@@ -48,6 +48,40 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
   },
 };
 
+const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS = {
+  id: 'address-duration',
+  legendOrLabel: 'How long have you lived at this address?',
+  description: 'If you have lived at this address for less than a year then enter 0 into the year input.',
+  field1: {
+    id: 'address-duration-years',
+    name: 'address-duration-years',
+    suffix: {
+      text: 'Years',
+      id: 'address-duration-years-suffix',
+    },
+    attributes: {
+      min: 0,
+      max: 100,
+    },
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear the date if one has been inputted',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'duration-exclusive-option',
+        name: 'no-duration',
+        value: 'no-duration',
+        label: {
+          text: 'I have not moved in to this address yet',
+        },
+      },
+    ],
+  },
+};
+
 describe('script: mutually-exclusive', () => {
   describe('duration', () => {
     beforeEach(async () => {
@@ -140,4 +174,91 @@ describe('script: mutually-exclusive', () => {
       });
     });
   });
+
+  describe('duration-single', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('duration', EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS));
+    });
+
+    describe('Given the user populated the duration', () => {
+      beforeEach(async () => {
+        await page.type('#address-duration-years', '2');
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#duration-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#duration-exclusive-option', (node) => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the inputs should be cleared', async () => {
+          const yearsValue = await page.$eval('#address-duration-years', (node) => node.value);
+          expect(yearsValue).toBe('');
+        });
+
+        it('then the aria alert should tell the user that the inputs have been cleared', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+          expect(alertText).toBe('How long have you lived at this address? cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#duration-exclusive-option');
+      });
+
+      describe('when the user populates the duration fields', () => {
+        beforeEach(async () => {
+          await page.type('#address-duration-years', '2');
+        });
+
+        it('then the exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#duration-exclusive-option', (node) => node.checked);
+          expect(isChecked).toBe(false);
+        });
+
+        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+          expect(alertText).toBe('I have not moved in to this address yet deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the duration inputs or checked the exclusive option', () => {
+      describe('when the user populates the duration inputs', () => {
+        beforeEach(async () => {
+          await page.type('#address-duration-years', '2');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#duration-exclusive-option');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
 });

package/components/section-navigation/_macro.njk

@@ -1,11 +1,11 @@
 {% macro onsSectionNavigation(params) %}
-    {% set headingLevel = params.headingLevel | int | default(2) %}
-    {% set sectionTitleHeadingLevel =  headingLevel + 1 %}
+    {% set headingLevel = params.headingLevel | default(2) %}
+    {% set sectionTitleHeadingLevel = headingLevel + 1 %}
     <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-    <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
+        <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
         {% if params.sections %}
             {% for section in params.sections %}
-                {% set sectionItemHeadingLevel =  headingLevel + 2 if section.title else headingLevel + 1 %}
+                {% set sectionItemHeadingLevel = headingLevel + 2 if section.title else headingLevel + 1 %}
                 <div class="ons-section-nav__sub">
                     {% if section.title %}
                         <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
@@ -18,12 +18,12 @@
                                 {% set isCurrent = false %}
                             {% endif %}
                             <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                              {% if isCurrent == true %} 
-                                  <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
-                              {% else %}
-                                  <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
-                              {% endif %}
-                            {% if item.anchors and isCurrent == true %}
+                                {% if isCurrent == true %}
+                                    <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
+                                {% else %}
+                                    <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                                {% endif %}
+                                {% if item.anchors and isCurrent == true %}
                                     <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                                         {% for anchor in item.anchors %}
                                             <li class="ons-section-nav__item ons-list__item">
@@ -43,7 +43,7 @@
             {% endif %}
             <ul class="ons-section-nav__list">
                 {% for item in params.itemsList %}
-                    {% set sectionItemHeadingLevel =  headingLevel + 2 if params.title else headingLevel + 1 %}
+                    {% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
                     {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
                         {% set isCurrent = true %}
                     {% else %}
@@ -51,7 +51,7 @@
                     {% endif %}
                     <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
                         {% if isCurrent == true %} 
-                            <h{{ sectionItemHeadingLevel}} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
+                            <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
                         {% else %}
                             <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
                         {% endif %}

package/components/summary/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsSummary(params) %}
     {% set className = "ons-summary" %}
-    {% set titleSize = "2" %}
+    {% set headingLevel = 2 %}
 
     {% if params.variant == "hub" %}
         {% set variantHub = true %}
@@ -17,12 +17,12 @@
         {% for summary in params.summaries %}
             {% if summary.summaryTitle %}
                 <h2 class="ons-summary__title ons-u-mb-m{{ " ons-u-mt-m" if loop.index > 1 else "" }}">{{ summary.summaryTitle }}</h2>
-                {% set titleSize = "3" %}
+                {% set headingLevel = 3 %}
             {% endif %}
             {% for group in summary.groups %}
                 <div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group{{ variantClasses }}">
                     {% if group.groupTitle %}
-                        <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
+                        <h{{ headingLevel }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ headingLevel }}>
                     {% endif %}
                     {% if group.rows %}
                         <dl class="ons-summary__items">