Cleanup macros

changelog.md

@@ -4,6 +4,7 @@
 
 ### Updated
 - Redirect back with errors. This *may* be a breaking change if you have written any customizations to deal with issues surrounding `renderPageWithErrors` in `validate.helpers.js`.  That method has been removed, and now on validation errors, we flash the errors to the session and redirect back to the `get` route.
+- Moved duplicated nunjucks code from macros into `views/macros/sub-imports`
 
 ### Removed
 - `renderPageWithErrors` has been removed from `validate.helpers.js`

views/base.njk

@@ -1,4 +1,3 @@
-{%- from 'validationMessage.njk' import validationMessage as validationMessage with context -%}
 {%- from 'input-text.njk' import textInput as textInput with context -%}
 {%- from 'input-textarea.njk' import textArea as textArea with context -%}
 {%- from 'radios.njk' import radioButtons as radioButtons with context -%}

views/macros/checkboxes.njk

@@ -1,22 +1,16 @@
+{% from 'sub-imports/label-text.njk' import labelText with context  %}
+{% from 'sub-imports/hint-text.njk' import hintText with context %}
+{% from 'sub-imports/validation-message.njk' import validationMessage with context %}
+
 {% macro checkBoxes(key, values, selectedVals, question, errors, attributes) %}
     <div class="{{ 'has-error' if errors and errors[key] }}">
         <fieldset class="fieldset">
             <legend class="fieldset__legend">
-            {% if attributes.required %}
-                <span aria-hidden="true" class="required">*</span>
-            {% endif %}
-            {{ __(question) }}
-            {% if attributes.required %}
-                <span class="required">{{ __("required")}}</span>
-            {% endif %}
+            {{ labelText(question, attributes.required) }}
             </legend>
-            {% if attributes.hint %}
-                <span class="form-message">{{ __(attributes.hint) }}</span>
-            {% endif %}
+            {{ hintText(attributes.hint) }}
             <div class="multiple-choice multiple-choice--checkboxes" id="{{ key }}">
-                {% if errors and errors[key] %}
-                    {{ validationMessage(errors[key].msg, key) }}
-                {% endif %}
+                {{ validationMessage(errors, key)}}
                 {% for index, val in values %}
                     <div class="multiple-choice__item">
                         <input id="{{ key }}{{ val }}" name="{{ key }}" type="checkbox" value="{{ val }}" {% if selectedVals and val in selectedVals %} checked="checked" {% endif %} {% if errors and errors[key] %} aria-describedby="{{ key + '-error' }}" aria-invalid="true" {% endif %}>

views/macros/input-text.njk

@@ -1,3 +1,6 @@
+{% from 'sub-imports/label-text.njk' import labelText with context  %}
+{% from 'sub-imports/hint-text.njk' import hintText with context %}
+{% from 'sub-imports/validation-message.njk' import validationMessage with context %}
 {#
   - `name`: field name
   - `label`: text for the label
@@ -10,20 +13,10 @@
 {% macro textInput(name, label, attributes) %}
     <div class="{{ 'has-error' if errors and errors[name] }} {{ attributes.divClasses }}">
         <label for="{{ name }}" id="{{ name }}__label">
-            {% if attributes.required %}
-                <span aria-hidden="true" class="required">*</span>
-            {% endif %}
-            {{ __(label) }}
-            {% if attributes.required %}
-                <span class="required">{{ __("required")}}</span>
-            {% endif %}
+            {{ labelText(label, attributes.required) }}
         </label>
-        {% if attributes.hint %}
-            <span class="form-message">{{ __(attributes.hint) }}</span>
-        {% endif %}
-        {% if errors and errors[name] %}
-            {{ validationMessage(errors[name].msg, name) }}
-        {% endif %}
+        {{ hintText(attributes.hint) }}
+        {{ validationMessage(errors, name) }}
         <input class="{{ attributes.class if attributes.class else "w-3-4" }}" {% if attributes.autocomplete %}autocomplete="{{ attributes.autocomplete }}" {% endif %} type="text" id="{{ attributes.id if attributes.id else name }}" {% if errors and errors[name] %} aria-describedby="{{ name + '-error' }}" aria-invalid="true" {% endif %} {% if errors and firstError.param === name %} autofocus="true" {% endif %} name="{{ name }}" value="{{ data[name] }}"/>
     </div>
 {% endmacro %}

views/macros/input-textarea.njk

@@ -1,3 +1,7 @@
+{% from 'sub-imports/label-text.njk' import labelText with context  %}
+{% from 'sub-imports/hint-text.njk' import hintText with context %}
+{% from 'sub-imports/validation-message.njk' import validationMessage with context %}
+
 {#
   - `name`: field name
   - `label`: text for the label
@@ -10,20 +14,10 @@
 {% macro textArea(name, label, attributes) %}
     <div class="{{ 'has-error' if errors and errors[name] }} {{ attributes.divClasses }}">
         <label for="{{ name }}" id="{{ name }}__label">
-        {% if attributes.required %}
-                <span aria-hidden="true" class="required">*</span>
-        {% endif %}
-        {{ __(label) }}
-        {% if attributes.required %}
-            <span class="required">{{ __("required")}}</span>
-        {% endif %}
+        {{ labelText(label, attributes.required) }}
         </label>
-        {% if attributes.hint %}
-            <span class="form-message">{{ __(attributes.hint) }}</span>
-        {% endif %}
-        {% if errors and errors[name] %}
-            {{ validationMessage(errors[name].msg, name) }}
-        {% endif %}
+        {{ hintText(attributes.hint) }}
+        {{ validationMessage(errors, name) }}
         <textarea class="{{ attributes.class if attributes.class else "w-3-4" }}" id="{{ attributes.id if attributes.id else name }}" {% if errors and errors[name] %} aria-describedby="{{ name + '-error' }}" aria-invalid="true" {% endif %} {% if errors and firstError.param === name %} autofocus="true" {% endif %} name="{{ name }}">{{ data[name] }}</textarea>
     </div>
 {% endmacro %}

views/macros/radios.njk

@@ -1,22 +1,16 @@
+{% from 'sub-imports/label-text.njk' import labelText with context  %}
+{% from 'sub-imports/hint-text.njk' import hintText with context %}
+{% from 'sub-imports/validation-message.njk' import validationMessage with context %}
+
 {% macro radioButtons(key, values, value, question, errors, attributes) %}
     <div class="{{ 'has-error' if errors and errors[key] }}">
         <fieldset class="fieldset">
             <legend class="fieldset__legend">
-            {% if attributes.required %}
-                <span aria-hidden="true" class="required">*</span>
-            {% endif %}
-            {{ __(question) }}
-            {% if attributes.required %}
-                <span class="required">{{ __("required")}}</span>
-            {% endif %}
+            {{ labelText(question, attributes.required) }}
             </legend>
-            {% if attributes.hint %}
-                <span class="form-message">{{ __(attributes.hint) }}</span>
-            {% endif %}
+            {{ hintText(attributes.hint) }}
             <div class="multiple-choice multiple-choice--radios" id="{{ key }}">
-                {% if errors and errors[key] %}
-                    {{ validationMessage(errors[key].msg, key) }}
-                {% endif %}
+                {{ validationMessage(errors, key) }}
                 {% for index, val in values %}
                     <div class="multiple-choice__item">
                         <input id="{{ key }}{{ val }}" name="{{ key }}" type="radio" value="{{ val }}" {% if value == val %} checked="checked" {% endif %} {% if errors and errors[key] %} aria-describedby="{{ key + '-error' }}" aria-invalid="true" {% endif %}>

views/macros/sub-imports/hint-text.njk

@@ -0,0 +1,5 @@
+{% macro hintText(text) %}
+    {% if text %}
+        <span class="form-message">{{ __(text) }}</span>
+    {% endif %}
+{% endmacro %}

views/macros/sub-imports/label-text.njk

@@ -0,0 +1,9 @@
+{% macro labelText(text, required) %}
+    {% if required %}
+        <span aria-hidden="true" class="required">*</span>
+    {% endif %}
+    {{ __(text) }}
+    {% if required %}
+        <span class="required">{{ __("required")}}</span>
+    {% endif %}
+{% endmacro %}

views/macros/sub-imports/validation-message.njk

@@ -0,0 +1,8 @@
+{% macro validationMessage(msg, id) %}
+    {% if errors and errors[id] %}
+        <span class="validation-message" id="{{ id }}-error" role="alert">
+            <span class="visually-hidden">{{ __('Error:') }}</span>
+            {{ __(errors[id].msg) }}
+        </span>
+    {% endif %}
+{% endmacro %}