@ons/design-system 67.2.0 → 68.0.1

package/components/char-check-limit/character-check.spec.js

@@ -2,7 +2,7 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_INPUT_WITH_CHARACTER_CHECK = {
   id: 'search-field',
-  type: 'number',
+  variant: 'number',
   width: '6',
   label: {
     text: 'Filter results',
@@ -24,7 +24,7 @@ const EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE = {
   id: 'feedback',
   name: 'feedback',
   width: '30',
-  legend: 'Feeback legend',
+  legend: 'Feedback legend',
   label: {
     text: 'Enter your feedback',
   },
@@ -59,12 +59,12 @@ describe('script: character-check', () => {
 
     describe('Given that the char check helper has initialised correctly', () => {
       it('the char check readout should be invisible', async () => {
-        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(true);
       });
 
       it('then the character limit readout should reflect the number of characters remaining', async () => {
-        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
         expect(innerHtml.trim()).toBe('You have 11 characters remaining');
       });
     });
@@ -76,17 +76,17 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 10 characters remaining');
         });
 
         it('the char check readout should be visible', async () => {
-          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(false);
         });
 
         it('then aria-live should be set to polite', async () => {
-          const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
+          const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
           expect(ariaLiveAttribute).toBe('polite');
         });
       });
@@ -97,7 +97,7 @@ describe('script: character-check', () => {
         });
 
         it('the char check readout should be invisible', async () => {
-          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(true);
         });
       });
@@ -108,7 +108,7 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 1 character remaining');
         });
       });
@@ -120,24 +120,26 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
         expect(innerHtml.trim()).toBe('1 number too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
-        const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
+        const hasClassOnSearchInput = await page.$eval('#search-field', (element) =>
+          element.classList.contains('ons-input--limit-reached'),
+        );
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', (element) =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -150,24 +152,26 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
         expect(innerHtml.trim()).toBe('2 numbers too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
-        const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
+        const hasClassOnSearchInput = await page.$eval('#search-field', (element) =>
+          element.classList.contains('ons-input--limit-reached'),
+        );
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', (element) =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -188,7 +192,7 @@ describe('script: character-check', () => {
       });
 
       it('then aria-live attribute should removed', async () => {
-        const hasAriaLiveAttribute = await page.$eval('#feedback-lim', element => element.hasAttribute('aria-live'));
+        const hasAriaLiveAttribute = await page.$eval('#feedback-lim', (element) => element.hasAttribute('aria-live'));
         expect(hasAriaLiveAttribute).toBe(false);
       });
     });

package/components/checkboxes/_checkbox-macro.njk

@@ -7,7 +7,7 @@
             id="{{ params.id }}"
             class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses else '' }}"
             value="{{ params.value }}"
-            {% if params.disabled == true %}disabled aria-disabled="true"{%endif %}
+            {% if params.disabled == true %}disabled aria-disabled="true"{% endif %}
             {% if params.name %} name="{{ params.name }}"{% endif %}
             {% if params.checked %} checked{% endif %}
             {% if params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% endif %}

package/components/checkboxes/_checkbox.scss

@@ -24,7 +24,6 @@ $checkbox-padding: 11px;
     // Check icon
     &::after {
       border: solid var(--ons-color-input-border);
-      border-radius: 1px;
       border-top-color: var(--ons-color-input-bg);
       border-width: 0 0 3px 3px;
       box-sizing: border-box;
@@ -94,7 +93,6 @@ $checkbox-padding: 11px;
 
       &:checked,
       &:focus {
-
         & + .ons-checkbox__label::before {
           background: none;
           border: none;
@@ -122,7 +120,6 @@ $checkbox-padding: 11px;
 
       &:checked,
       &:focus {
-
         & + .ons-checkbox__label::before {
           background: none;
           border: none;

package/components/checkboxes/_macro.spec.js

@@ -125,11 +125,7 @@ describe('macro: checkboxes', () => {
     it('has the expected text', () => {
       const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOXES));
 
-      expect(
-        $('.ons-checkboxes__label')
-          .text()
-          .trim(),
-      ).toBe('Select all that apply');
+      expect($('.ons-checkboxes__label').text().trim()).toBe('Select all that apply');
     });
 
     it('has additionally provided `checkboxesLabelClasses`', () => {

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

@@ -6,7 +6,7 @@ export default class CheckboxWithAutoSelect {
     this.insideReveal = insideReveal;
     // Event listeners
     this.button.addEventListener('click', this.handleButtonEvent.bind(this));
-    this.checkboxes.forEach(checkbox => checkbox.addEventListener('change', this.handleCheckboxEvent.bind(this)));
+    this.checkboxes.forEach((checkbox) => checkbox.addEventListener('change', this.handleCheckboxEvent.bind(this)));
     if (this.insideReveal) {
       this.insideReveal.addEventListener('change', this.handleCheckboxEvent.bind(this));
     }
@@ -23,7 +23,7 @@ export default class CheckboxWithAutoSelect {
 
   handleButtonEvent(event) {
     event.preventDefault();
-    this.checkboxes.forEach(checkbox => {
+    this.checkboxes.forEach((checkbox) => {
       checkbox.checked = this.allChecked === false ? true : false;
     });
     this.buttonText.innerHTML = this.allChecked === false ? this.unselectAllText : this.selectAllText;
@@ -31,7 +31,7 @@ export default class CheckboxWithAutoSelect {
   }
 
   handleCheckboxEvent() {
-    const totalChecked = this.checkboxes.filter(checkbox => checkbox.checked).length;
+    const totalChecked = this.checkboxes.filter((checkbox) => checkbox.checked).length;
     this.buttonText.innerHTML = totalChecked === this.numberOfCheckboxes ? this.unselectAllText : this.selectAllText;
     this.allChecked = totalChecked === this.numberOfCheckboxes ? true : false;
   }

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

@@ -13,14 +13,14 @@ export default class CheckboxWithFieldset {
   }
 
   checkChildInputsOnSelect() {
-    this.childInputs.forEach(input => {
+    this.childInputs.forEach((input) => {
       input.checked = this.selectAllChildrenInput.checked === true ? true : false;
     });
   }
 
   uncheckChildInputsOnDeselect() {
     if (this.checkbox.checked === false) {
-      this.childInputs.forEach(input => {
+      this.childInputs.forEach((input) => {
         input.checked = false;
       });
     }

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

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

package/components/checkboxes/checkboxes.dom.js

@@ -18,7 +18,7 @@ domready(async () => {
     const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-checkbox')];
     if (otherFieldsets) {
       const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
-      otherFieldsets.forEach(otherFieldset => {
+      otherFieldsets.forEach((otherFieldset) => {
         const context = otherFieldset.closest('.ons-checkbox');
         new CheckboxWithInnerFieldset(context);
       });
@@ -27,7 +27,7 @@ domready(async () => {
     const autoSelectButtons = [...document.querySelectorAll('.ons-js-auto-selector')];
     if (autoSelectButtons) {
       const CheckboxWithAutoSelect = (await import('./checkbox-with-autoselect')).default;
-      autoSelectButtons.forEach(button => {
+      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

@@ -47,12 +47,12 @@ describe('script: checkboxes', () => {
       });
 
       it('all checkboxes should be checked', async () => {
-        const checkedStates = await page.$$eval('.ons-js-checkbox', nodes => nodes.map(node => node.checked));
+        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);
+        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
         expect(buttonText).toBe('Unselect all');
       });
     });
@@ -64,23 +64,23 @@ describe('script: checkboxes', () => {
       });
 
       it('all checkboxes should be unchecked', async () => {
-        const checkedStates = await page.$$eval('.ons-js-checkbox', nodes => nodes.map(node => node.checked));
+        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);
+        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));
+        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);
+        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
         expect(buttonText).toBe('Select all');
       });
     });
@@ -93,13 +93,13 @@ describe('script: checkboxes', () => {
       });
 
       it('the button text should be unselect all', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', node => node.textContent);
+        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
         expect(buttonText).toBe('Unselect all');
       });
     });
   });
 
-  describe('reveal and fieldset', function() {
+  describe('reveal and fieldset', function () {
     const params = {
       legend: 'What are your favourite pizza toppings?',
       checkboxesLabel: 'Select all that apply',
@@ -157,7 +157,7 @@ describe('script: checkboxes', () => {
     });
 
     it('checkboxes with other options should be given aria-expanded attributes', async () => {
-      const ariaExpanded = await page.$eval('#other-checkbox', node => node.getAttribute('aria-expanded'));
+      const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpanded).toBe('false');
     });
 
@@ -167,7 +167,7 @@ describe('script: checkboxes', () => {
       });
 
       it('has aria-expanded attribute should be set to true', async () => {
-        const ariaExpanded = await page.$eval('#other-checkbox', node => node.getAttribute('aria-expanded'));
+        const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpanded).toBe('true');
       });
 
@@ -177,7 +177,7 @@ describe('script: checkboxes', () => {
         });
 
         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'));
+          const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
           expect(ariaExpanded).toBe('true');
         });
       });
@@ -193,12 +193,12 @@ describe('script: checkboxes', () => {
           });
 
           it('its aria-expanded attribute should be set to false', async () => {
-            const ariaExpanded = await page.$eval('#other-checkbox', node => node.getAttribute('aria-expanded'));
+            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);
+            const innerInputChecked = await page.$eval('#inner-bacon-other', (node) => node.checked);
             expect(innerInputChecked).toBe(false);
           });
         });

package/components/content-pagination/_macro.spec.js

@@ -128,7 +128,7 @@ describe('macro: content-pagination', () => {
       it('renders the provided `bridgingText`', () => {
         const $ = cheerio.load(
           renderComponent('content-pagination', {
-            contentPaginationItems: params.contentPaginationItems.map(item => ({
+            contentPaginationItems: params.contentPaginationItems.map((item) => ({
               ...item,
               bridgingText: 'custom bridging text:',
             })),
@@ -177,7 +177,7 @@ describe('macro: content-pagination', () => {
       it('renders the provided `bridgingText`', () => {
         const $ = cheerio.load(
           renderComponent('content-pagination', {
-            contentPaginationItems: params.contentPaginationItems.map(item => ({
+            contentPaginationItems: params.contentPaginationItems.map((item) => ({
               ...item,
               bridgingText: 'custom bridging text:',
             })),

package/components/cookies-banner/cookies-banner.dom.js

@@ -5,7 +5,7 @@ async function cookiesBanner() {
 
   if (cookiesBanner.length) {
     const CookiesBanner = (await import('./cookies-banner')).default;
-    cookiesBanner.forEach(banner => {
+    cookiesBanner.forEach((banner) => {
       new CookiesBanner(banner);
     });
   }

package/components/cookies-banner/cookies-banner.js

@@ -70,7 +70,7 @@ export default class CookiesBanner {
 
   updateRadios(action) {
     const radios = [...document.querySelectorAll('.ons-js-radio')];
-    radios.forEach(radio => {
+    radios.forEach((radio) => {
       if (action == 'reject') {
         radio.value == 'off' ? (radio.checked = true) : (radio.checked = false);
       } else if (action == 'accept') {

package/components/cookies-banner/cookies-banner.spec.js

@@ -11,7 +11,7 @@ describe('script: cookies-banner', () => {
   it('should show the cookie banner', async () => {
     await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+    const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
     expect(displayStyle).toBe('block');
   });
   describe.each([
@@ -24,7 +24,7 @@ describe('script: cookies-banner', () => {
       await page.click(`.ons-js-${action}-cookies`);
 
       const cookies = await page.cookies();
-      const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
+      const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
       const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
 
       expect(policy).toEqual({
@@ -41,7 +41,7 @@ describe('script: cookies-banner', () => {
       await page.click(`.ons-js-${action}-cookies`);
 
       const cookies = await page.cookies();
-      const ons_cookie_message_displayed = cookies.find(cookie => cookie.name === 'ons_cookie_message_displayed');
+      const ons_cookie_message_displayed = cookies.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
 
       expect(ons_cookie_message_displayed.value).toBe('true');
     });
@@ -51,7 +51,7 @@ describe('script: cookies-banner', () => {
 
       await page.click(`.ons-js-${action}-cookies`);
 
-      const displayStyle = await page.$eval('.ons-cookies-banner__primary', node =>
+      const displayStyle = await page.$eval('.ons-cookies-banner__primary', (node) =>
         window.getComputedStyle(node).getPropertyValue('display'),
       );
       expect(displayStyle).toBe('none');
@@ -62,7 +62,7 @@ describe('script: cookies-banner', () => {
 
       await page.click(`.ons-js-${action}-cookies`);
 
-      const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', node =>
+      const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', (node) =>
         window.getComputedStyle(node).getPropertyValue('display'),
       );
       expect(displayStyle).not.toBe('none');
@@ -76,7 +76,7 @@ describe('script: cookies-banner', () => {
       await page.click('.ons-js-accept-cookies');
       await page.click('.ons-js-hide-button');
 
-      const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+      const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
       expect(displayStyle).toBe('none');
     });
   });
@@ -87,7 +87,7 @@ describe('script: cookies-banner', () => {
 
       await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-      const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+      const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
       expect(displayStyle).toBe('none');
     });
   });

package/components/date-input/_macro.njk

@@ -1,8 +1,9 @@
-{% from "components/date-field-input/_macro.njk" import onsDateFieldInput %}
+{% from "components/multiple-input-fields/_macro.njk" import onsMultipleInputFields %}
+{% from "components/input/_macro.njk" import onsInput %}
 
 {% macro onsDateInput(params) %}
     {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
-     {%- set numberOfFields = 0 -%}
+    {%- set numberOfFields = 0 -%}
 
     {%- if params.day -%}
         {%- set numberOfFields = numberOfFields + 1 -%}
@@ -16,82 +17,83 @@
         {%- set numberOfFields = numberOfFields + 1 -%}
     {%- endif -%}
 
-    {% set fields = [] %}
-    {% if params.day %}
-        {% set dayField = {
-            "id": params.id + "-day",
-            "label": {
-                 "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
-                 "description": params.day.label.description if numberOfFields > 1 else params.description,
-                  "id": params.id + "-day-label"
-            },
-            "name": params.day.name,
-            "width": "2",
-            "min": 1,
-            "max": 31,
-            "maxLength": 2,
-            "attributes": params.day.attributes,
-            "value": params.day.value,
-            "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
-        } %}
-        {% set fields = (fields.push(dayField), fields) %}
-    {% endif %}
-    {% if params.month %}
-        {% set monthField = {
-            "id": params.id + "-month",
-            "label": { 
-                "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
-                "description": params.month.label.description if numberOfFields > 1 else params.description,
-                "id": params.id + "-month-label"
-            },
-            "name": params.month.name,
-            "width": "2",
-            "min": 1,
-            "max": 12,
-            "maxLength": 2,
-            "attributes": params.month.attributes,
-            "value": params.month.value,
-            "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
-        } %}
-        {% set fields = (fields.push(monthField), fields) %}
-    {% endif %}
-    {% if params.year %}
-        {% set yearField = {
-            "id": params.id + "-year",
-            "label": { 
-                "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
-                "description": params.year.label.description if numberOfFields > 1 else params.description,
-                "id": params.id + "-year-label"
-            }, 
-            "name": params.year.name,
-            "width": "4",
-            "min": 1000,
-            "max": 3000,
-            "maxLength": 4,
-            "attributes": params.year.attributes,
-            "value": params.year.value, 
-            "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
-        } %}
-        {% set fields = (fields.push(yearField), fields) %}
-    {% endif %}
+    {% set fields %}
+        {% if params.day %}
+            {{ onsInput({
+                "id": params.id + "-day",
+                "type": "number",
+                "name": params.day.name,
+                "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                "width": "2",
+                "min": 1,
+                "max": 31,
+                "maxLength": 2,
+                "attributes": params.day.attributes,
+                "label": {
+                    "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
+                    "description": params.day.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-day-label"
+                },
+                "value": params.day.value,
+                "error": params.error if numberOfFields < 2
+            }) }}
+        {% endif %}
 
-    {{ onsDateFieldInput({
+        {% if params.month %}
+            {{ onsInput({
+                "id": params.id + "-month",
+                "type": "number",
+                "name": params.month.name,
+                "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                "width": "2",
+                "min": 1,
+                "max": 12,
+                "maxLength": 2,
+                "attributes": params.month.attributes,
+                "label": {
+                    "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
+                    "description": params.month.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-month-label"
+                },
+                "value": params.month.value,
+                "error": params.error if numberOfFields < 2
+            }) }}
+        {% endif %}
+
+        {% if params.year %}
+            {{ onsInput({
+                "id": params.id + "-year",
+                "type": "number",
+                "name": params.year.name,
+                "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                "width": "4",
+                "min": 1000,
+                "max": 3000,
+                "maxLength": 4,
+                "attributes": params.year.attributes,
+                "label": {
+                    "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
+                    "description": params.year.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-year-label"
+                },
+                "value": params.year.value,
+                "error": params.error if numberOfFields < 2
+            }) }}
+        {% endif %}
+    {% endset %}
+
+    {{ onsMultipleInputFields({
         "id": params.id,
         "legendOrLabel": params.legendOrLabel,
         "description": params.description,
         "mutuallyExclusive": params.mutuallyExclusive,
-        "fields": fields,
         "numberOfFields": numberOfFields,
+        "fields": fields,
         "error": params.error,
         "legend": params.legendOrLabel,
         "dontWrap": params.dontWrap,
-        "legendClasses": params.legendClasses,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle,
         "classes": params.classes,
-        "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
-        "or": params.mutuallyExclusive.or,
-        "deselectMessage": params.mutuallyExclusive.deselectMessage,
-        "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-        "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective
+        "legendClasses": params.legendClasses,
+        "legendIsQuestionTitle": params.legendIsQuestionTitle
     }) }}
 {% endmacro %}