refactor: allow component inputs to be more configurable

Alter the date-input and postal-address-object template macros to
allow the addition and overriding of certain macro parameters.

Signed-off-by: Colin Rotherham <work@colinr.com>

Author: colinrotherham

app/views/casa/components/date-input/README.md

@@ -23,6 +23,41 @@ casaGovukDateInput({
 })
 ```
 
+With configurable items:
+
+```nunjucks
+{% from "casa/components/date-input/macro.njk" import casaGovukDateInput %}
+
+casaGovukDateInput({
+  namePrefix: "dateOfBirth",
+  casaValue: formData.dateOfBirth,
+  casaErrors: formErrors,
+  items: [
+    {
+      autocomplete: "bday-day",
+      attributes: {
+        min: "1",
+        max: "31"
+      }
+    },
+    {
+      autocomplete: "bday-month",
+      attributes: {
+        min: "1",
+        max: "12"
+      }
+    },
+    {
+      autocomplete: "bday-year",
+      attributes: {
+        min: "1",
+        max: "9999"
+      }
+    }
+  ]
+})
+```
+
 ## Companion validation
 
 There is a companion validation rule - [`dateObject`](../../../../../docs/field-validation-rules.md#dateObject) - that you can use to ensure the dates are passed in correctly.

app/views/casa/components/date-input/template.njk

@@ -20,26 +20,32 @@
   id: params.id if params.id else 'f-' + params.namePrefix,
   namePrefix: '',
   attributes: mergedAttributes,
-  items: [{
-    label: t('macros:dateInput.day'),
-    name: params.namePrefix + '[dd]',
-    id: 'f-' + params.namePrefix + '[dd]',
-    value: params.casaValue.dd,
-    classes: 'govuk-input--width-2 ' + (inputErrorClass if includes(fieldErrors[0].focusSuffix, '[dd]') or not hasSuffixHighlights)
-  }, {
-    label: t('macros:dateInput.month'),
-    name: params.namePrefix + '[mm]',
-    id: 'f-' + params.namePrefix + '[mm]',
-    value: params.casaValue.mm,
-    classes: 'govuk-input--width-2 ' + (inputErrorClass if includes(fieldErrors[0].focusSuffix, '[mm]') or not hasSuffixHighlights),
-    attributes: attributes_mm
-  }, {
-    label: t('macros:dateInput.year'),
-    name: params.namePrefix + '[yyyy]',
-    id: 'f-' + params.namePrefix + '[yyyy]',
-    value: params.casaValue.yyyy,
-    classes: 'govuk-input--width-4 ' + (inputErrorClass if includes(fieldErrors[0].focusSuffix, '[yyyy]') or not hasSuffixHighlights)
-  }],
+  items: [
+    mergeObjectsDeep({
+      label: t('macros:dateInput.day'),
+      classes: 'govuk-input--width-2 ' + (inputErrorClass if includes(fieldErrors[0].focusSuffix, '[dd]') or not hasSuffixHighlights)
+    }, params.items[0] if params.items[0] else {}, {
+      id: 'f-' + params.namePrefix + '[dd]',
+      name: params.namePrefix + '[dd]',
+      value: params.casaValue.dd
+    }),
+    mergeObjectsDeep({
+      label: t('macros:dateInput.month'),
+      classes: 'govuk-input--width-2 ' + (inputErrorClass if includes(fieldErrors[0].focusSuffix, '[mm]') or not hasSuffixHighlights)
+    }, params.items[1] if params.items[1] else {}, {
+      id: 'f-' + params.namePrefix + '[mm]',
+      name: params.namePrefix + '[mm]',
+      value: params.casaValue.mm
+    }),
+    mergeObjectsDeep({
+      label: t('macros:dateInput.year'),
+      classes: 'govuk-input--width-4 ' + (inputErrorClass if includes(fieldErrors[0].focusSuffix, '[yyyy]') or not hasSuffixHighlights)
+    }, params.items[2] if params.items[2] else {}, {
+      id: 'f-' + params.namePrefix + '[yyyy]',
+      name: params.namePrefix + '[yyyy]',
+      value: params.casaValue.yyyy
+    })
+  ],
   errorMessage: {
     text: t(params.casaErrors[params.namePrefix][0].inline)
   } if params.casaErrors[params.namePrefix] else null

app/views/casa/components/postal-address-object/README.md

@@ -2,8 +2,9 @@
 
 Custom parameters:
 
-* `casaValue` - the value of the chosen radio button. This is a convenience for toggling the `checked` flag on the appropriate `item`, but you can also manually set `checked` on each item if you need to use more specific logic for determining checked state.
+* `value` - the value of the address object, in `{address1: '', address2: '', address3: '', address4: '', postcode: ''}` format
 * `casaErrors` - form errors (just pass `formErrors`)
+* `address[1-4]` and `postcode` - for specifying extra attributes for each of the address input components
 
 ## Example usage
 
@@ -15,7 +16,34 @@ Basic example:
 {{ casaPostalAddressObject({
   name: 'address',
   value: formData.address,
-  casaErrors: formErrors,
+  casaErrors: formErrors
+}) }}
+```
+
+With configurable items:
+
+```nunjucks
+{% from "casa/components/postal-address-object/macro.njk" import casaPostalAddressObject %}
+
+{{ casaPostalAddressObject({
+  name: 'address',
+  value: formData.address,
+  address1: {
+    autocomplete: 'address-line1'
+  },
+  address2: {
+    autocomplete: 'address-line2'
+  },
+  address3: {
+    autocomplete: 'address-level2'
+  },
+  address4: {
+    autocomplete: 'address-level1'
+  },
+  postcode: {
+    autocomplete: 'postal-code'
+  },
+  casaErrors: formErrors
 }) }}
 ```
 

app/views/casa/components/postal-address-object/template.njk

@@ -14,36 +14,38 @@
     {% if fieldAddress1Errors %}
       {% set fieldAttributes = mergeObjects(fieldAttributes, {'data-validation': {fn: params.name + '[address1]', va: fieldAddress1Errors[0].validator} | dump}) %}
     {% endif %}
-    {{ govukInput({
+    {{ govukInput(mergeObjectsDeep({
       label: {
         html: t('macros:postalAddressObject.address1')
       },
-      id: 'f-' + params.name + '[address1]',
-      name: params.name + '[address1]',
-      value: params.value.address1,
       attributes: fieldAttributes,
       errorMessage: {
         text: t(fieldAddress1Errors[0].inline)
       } if fieldAddress1Errors else null
-    }) }}
+    }, params.address1 if params.address1 else {}, {
+      id: 'f-' + params.name + '[address1]',
+      name: params.name + '[address1]',
+      value: params.value.address1
+    })) }}
 
     {# Line 2 #}
     {% set fieldAttributes = {} %}
     {% if fieldAddress2Errors %}
       {% set fieldAttributes = mergeObjects(fieldAttributes, {'data-validation': {fn: params.name + '[address2]', va: fieldAddress2Errors[0].validator} | dump}) %}
     {% endif %}
-    {{ govukInput({
+    {{ govukInput(mergeObjectsDeep({
       label: {
         html: t('macros:postalAddressObject.address2')
       },
-      id: 'f-' + params.name + '[address2]',
-      name: params.name + '[address2]',
-      value: params.value.address2,
       attributes: fieldAttributes,
       errorMessage: {
         text: t(fieldAddress2Errors[0].inline)
       } if fieldAddress2Errors else null
-    }) }}
+    }, params.address2 if params.address2 else {}, {
+      id: 'f-' + params.name + '[address2]',
+      name: params.name + '[address2]',
+      value: params.value.address2
+    })) }}
   </div>
 
   {# Town #}
@@ -52,57 +54,60 @@
   {% if fieldErrors %}
     {% set fieldAttributes = mergeObjects(fieldAttributes, {'data-validation': {fn: params.name + '[address3]', va: fieldErrors[0].validator} | dump}) %}
   {% endif %}
-  {{ govukInput({
+  {{ govukInput(mergeObjectsDeep({
+    classes: "govuk-!-width-two-thirds",
     label: {
       html: t('macros:postalAddressObject.address3')
     },
-    id: 'f-' + params.name + '[address3]',
-    name: params.name + '[address3]',
-    value: params.value.address3,
-    classes: "govuk-!-width-two-thirds",
     attributes: fieldAttributes,
     errorMessage: {
       text: t(fieldErrors[0].inline)
     } if fieldErrors else null
-  }) }}
+  }, params.address3 if params.address3 else {}, {
+    id: 'f-' + params.name + '[address3]',
+    name: params.name + '[address3]',
+    value: params.value.address3
+  })) }}
 
   {# County #}
   {% set fieldErrors = params.casaErrors[params.name+"[address4]"] %}
   {% set fieldAttributes = {} %}
   {% if fieldErrors %}
     {% set fieldAttributes = mergeObjects(fieldAttributes, {'data-validation': {fn: params.name + '[address4]', va: fieldErrors[0].validator} | dump}) %}
   {% endif %}
-  {{ govukInput({
+  {{ govukInput(mergeObjectsDeep({
+    classes: "govuk-!-width-two-thirds",
     label: {
       html: t('macros:postalAddressObject.address4')
     },
-    id: 'f-' + params.name + '[address4]',
-    name: params.name + '[address4]',
-    value: params.value.address4,
-    classes: "govuk-!-width-two-thirds",
     attributes: fieldAttributes,
     errorMessage: {
       text: t(fieldErrors[0].inline)
     } if fieldErrors else null
-  }) }}
+  }, params.address4 if params.address4 else {}, {
+    id: 'f-' + params.name + '[address4]',
+    name: params.name + '[address4]',
+    value: params.value.address4
+  })) }}
 
   {# Postcode #}
   {% set fieldErrors = params.casaErrors[params.name+"[postcode]"] %}
   {% set fieldAttributes = {} %}
   {% if fieldErrors %}
     {% set fieldAttributes = mergeObjects(fieldAttributes, {'data-validation': {fn: params.name + '[postcode]', va: fieldErrors[0].validator} | dump}) %}
   {% endif %}
-  {{ govukInput({
+  {{ govukInput(mergeObjectsDeep({
+    classes: "govuk-input--width-10",
     label: {
       html: t('macros:postalAddressObject.postcode')
     },
-    id: 'f-' + params.name + '[postcode]',
-    name: params.name + '[postcode]',
-    value: params.value.postcode,
-    classes: "govuk-input--width-10",
     attributes: fieldAttributes,
     errorMessage: {
       text: t(fieldErrors[0].inline)
     } if fieldErrors else null
-  }) }}
+  }, params.postcode if params.postcode else {}, {
+    id: 'f-' + params.name + '[postcode]',
+    name: params.name + '[postcode]',
+    value: params.value.postcode
+  })) }}
 {% endcall %}

test/unit/templates/components/date-input.njk

@@ -0,0 +1,3 @@
+{% from "casa/components/date-input/macro.njk" import casaGovukDateInput %}
+
+{{ casaGovukDateInput(params) }}