Refactor date and duration components to work in jinja2 environments

README.md

@@ -158,3 +158,4 @@ yarn build
 
 - "render whitespace" set to "all"
 - "insert spaces when pressing tab" checked
+- "trim trailing whitespace" checked

src/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 %}

src/components/date-input/_macro.spec.js

@@ -107,7 +107,7 @@ const EXAMPLE_YEAR_FIELD_WITH_ERROR = {
   },
 };
 
-const EXAMPLE_YEAR_FIELD_WITH_NO_ERROR = {
+const EXAMPLE_YEAR_FIELD_WITH_ERROR_FALSE = {
   year: {
     label: {
       text: 'Year',
@@ -148,9 +148,9 @@ const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_ERROR = {
   ...EXAMPLE_YEAR_FIELD_WITH_ERROR,
 };
 
-const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_NO_ERROR = {
+const EXAMPLE_DATE_SINGLE_FIELD_WITH_ERROR_FALSE = {
   ...EXAMPLE_DATE_INPUT_BASE,
-  ...EXAMPLE_YEAR_FIELD_WITH_NO_ERROR,
+  ...EXAMPLE_YEAR_FIELD_WITH_ERROR_FALSE,
 };
 
 describe('macro: date input', () => {
@@ -177,6 +177,7 @@ describe('macro: date input', () => {
         max: 31,
         maxLength: 2,
         classes: '',
+        error: '',
         label: {
           text: 'Day',
           description: 'The day',
@@ -204,6 +205,7 @@ describe('macro: date input', () => {
         max: 12,
         maxLength: 2,
         classes: '',
+        error: '',
         label: {
           text: 'Month',
           description: 'The month',
@@ -231,6 +233,7 @@ describe('macro: date input', () => {
         max: 3000,
         maxLength: 4,
         classes: '',
+        error: '',
         label: {
           text: 'Year',
           description: 'The year',
@@ -249,6 +252,12 @@ describe('macro: date input', () => {
       expect($(div).hasClass('ons-field-group')).toBe(true);
     });
 
+    it('has the correct number of inputs', () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS));
+      const $inputs = $('.ons-input');
+      expect($inputs.length).toBe(3);
+    });
+
     it('has the expected `fieldset` output', () => {
       const faker = templateFaker();
       const fieldsetSpy = faker.spy('fieldset');
@@ -356,6 +365,12 @@ describe('macro: date input', () => {
       });
     });
 
+    it('has the correct number of inputs', () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_SINGLE_FIELD));
+      const $inputs = $('.ons-input');
+      expect($inputs.length).toBe(1);
+    });
+
     it('has the expected `error` output', () => {
       const faker = templateFaker();
       const errorSpy = faker.spy('error');
@@ -371,7 +386,7 @@ describe('macro: date input', () => {
     });
   });
 
-  describe('mode: multiple fields with single field error', () => {
+  describe('mode: multiple fields with errors', () => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_SINGLE_ERROR));
 
@@ -394,7 +409,7 @@ describe('macro: date input', () => {
     });
 
     it('does not provide error class when error parameter set to false', async () => {
-      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_NO_ERROR));
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_SINGLE_FIELD_WITH_ERROR_FALSE));
       const $errorContent = $('.ons-input--error');
 
       expect($errorContent.length).toBe(0);