MAP-581 fix input field alignment

assets/js/add-another-detail.js

@@ -0,0 +1 @@
+new AddAnother($('.add-another-body-worn-camera'), '.remove-button-container')

assets/js/add-another-evidence.js

@@ -1,2 +1 @@
 new AddAnother($('.add-another-evidence'), '.remove-button-container')
-new AddAnother($('.add-another-input'), '.remove-button-container')

integration-tests/pages/createReport/useOfForceDetailsPage.js

@@ -7,8 +7,9 @@ const useOfForceDetailsPage = () =>
 
     bodyWornCamera: () => cy.get('[name="bodyWornCamera"]'),
     bodyWornCameraNumber: index => cy.get(`[name="bodyWornCameraNumbers[${index}][cameraNum]"]`),
-    addAnotherBodyWornCamera: () => cy.get('[data-qa-add-another-input = true]').click(),
-    removeBodyWornCamera: index => cy.get('.add-another-input .add-another__remove-button').eq(index).click(),
+    addAnotherBodyWornCamera: () => cy.get('[dataqa=add-another-body-worn-camera]').click(),
+    removeBodyWornCamera: index =>
+      cy.get('.add-another-body-worn-camera .add-another__remove-button').eq(index).click(),
 
     personalProtectionTechniques: () => cy.get('[name="personalProtectionTechniques"]'),
     batonDrawn: () => cy.get('[name="batonDrawn"]'),

server/config/forms/useOfForceDetailsForm.js

@@ -19,8 +19,7 @@ const completeSchema = joi.object({
 
   bodyWornCamera: requiredOneOfMsg(
     'YES',
-    'NO',
-    'NOT_KNOWN'
+    'NO'
   )('Select yes if any part of the incident was captured on a body-worn camera').alter(optionalForPartialValidation),
 
   bodyWornCameraNumbers: joi

server/views/formPages/incident/useOfForceDetails.html

@@ -32,13 +32,13 @@ <h1 class="govuk-heading-xl mainHeading">{{ pageTitle }}</h1>
     })}}
 
     <!-- Q2 new question body-worn camera question which was previously in the evidence page -->
-    {{ incidentMacro.radioWithMultipleNestedTextBox({
+    {{ incidentMacro.radiosWithAddAnotherTextBox({
       primaryQuestion:{
         text: "Was any part of the incident captured on a body-worn camera?",
         name: "bodyWornCamera",
         value: data.bodyWornCamera,
         errorMessage: errors | findError('bodyWornCamera'),
-        includeNotKnown: false
+        questionSubject: 'body-worn-camera'
     },
       followUpQuestion:{
         name: "bodyWornCameraNumbers",
@@ -184,4 +184,5 @@ <h1 class="govuk-heading-xl mainHeading">{{ pageTitle }}</h1>
 {% block script %}
 <script src="/assets/deselect-children.js"></script>
 <script src="/assets/add-another-evidence.js"></script>
+<script src="/assets/add-another-detail.js"></script>
 {% endblock %}

server/views/formPages/incidentMacros.njk

@@ -51,94 +51,6 @@
 </div>
 {% endmacro %}
 
-
-{% macro radioWithMultipleNestedTextBox(question) %}
-
-  {% if question.primaryQuestion.errorMessage %}
-    {% set govukFormGroupErrorOuter  =  'govuk-form-group--error' %}
-    {% set primaryErrorMessageText = question.primaryQuestion.errorMessage.text %}
-  {% endif %}
-
-  <div class="govuk-!-margin-bottom-9 {{govukFormGroupErrorOuter}}">
-    <fieldset class="govuk-fieldset">
-      <legend class="govuk-fieldset__legend ">
-        {{question.primaryQuestion.text}}
-      </legend>
-      <span id="primaryQuestionErrMsg" class="govuk-error-message">
-        <span class="govuk-visually-hidden">Error:</span>
-        {{ primaryErrorMessageText}}
-      </span>
-
-      <div class="govuk-radios{% if not question.primaryQuestion.includeNotKnown %}--inline{% endif %}" data-module="govuk-radios">
-        <div class=" govuk-radios">
-          <div class="govuk-radios__item">
-            <input class="govuk-radios__input" id="{{question.primaryQuestion.name}}" name="{{question.primaryQuestion.name}}"
-            type="radio" value="YES" data-aria-controls="conditional-inputs" 
-            {% if question.primaryQuestion.value === 'YES' %} checked="checked" {% endif %}>
-            <label class="govuk-label govuk-radios__label" for="{{question.primaryQuestion.name}}">
-              Yes
-            </label>
-          </div>
-          <!-- hidden panel starts here -->
-          <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-inputs">
-
-            <!-- add another starts here -->
-            <div class="add-another-input" id="{{question.followUpQuestion.name}}">
-              {% for item in question.followUpQuestion.value %}
-
-                {{ addAnother(
-                question.followUpQuestion.otherIds, 
-                question.followUpQuestion.name, 
-                question.followUpQuestion.errorMessage, 
-                index = loop.index0, 
-                value = item[question.followUpQuestion.otherIds[0]], 
-                showRemove = loop.length != 1) 
-                }}
-              {% else %}
-                {{ addAnother(
-                question.followUpQuestion.otherIds, 
-                question.followUpQuestion.name, 
-                question.followUpQuestion.errorMessage, 
-                index = 0, 
-                value = null, 
-                showRemove = false) }}
-              {% endfor %}
-
-              <div class="button-action">
-                {{
-                govukButton({
-                  text: 'Add another',
-                  classes: 'govuk-button--secondary  add-another__add-button govuk-!-margin-bottom-4',
-                  attributes: { 'data-qa-add-another-input': true }
-                })
-              }}
-              </div>
-            </div>
-            <!-- add another ends here -->
-          </div>
-          <!-- hidden panel end -->
-
-          <div class="govuk-radios__item">
-            <input class="govuk-radios__input" id="primary-question-no" name="{{question.primaryQuestion.name}}" type="radio" value="NO" {% if question.primaryQuestion.value === 'NO' %} checked="checked" {% endif %}>
-            <label class="govuk-label govuk-radios__label" for="primary-question-no">
-              No
-            </label>
-          </div>
-          {% if question.primaryQuestion.includeNotKnown %}
-              <div class="govuk-radios__item">
-                <input class="govuk-radios__input" id="primary-question-notKnown" name="{{question.primaryQuestion.name}}" type="radio" value="NOT_KNOWN" {% if question.primaryQuestion.value === 'NOT_KNOWN' %} checked="checked" {% endif %}>
-                <label class="govuk-label govuk-radios__label" for="primary-question-notKnown">
-                  Not known
-                </label>
-              </div>
-          {% endif %}
-        </div>
-      </div>
-      <!-- end of radios -->
-    </fieldset>
-  </div>
-{% endmacro %}
-
 {% macro addAnother(otherIds, name, errors, index, value, showRemove) %}
   {% call govukFieldset({ classes: 'add-another__item' }) %}
   <div class="govuk-grid-row">
@@ -170,6 +82,80 @@
   {% endcall %}
 {% endmacro%}
 
+{% macro radiosWithAddAnotherTextBox(question) %}
+
+  {% if question.primaryQuestion.errorMessage %}
+    {% set govukFormGroupErrorOuter  =  'govuk-form-group--error' %}
+    {% set primaryErrorMessageText = question.primaryQuestion.errorMessage.text %}
+  {% endif %}
+
+  <div class="govuk-!-margin-bottom-9 {{govukFormGroupErrorOuter}}">
+    <fieldset class="govuk-fieldset">
+      <legend class="govuk-fieldset__legend ">
+        {{question.primaryQuestion.text}}
+      </legend>
+      <span id="primaryQuestionErrMsg" class="govuk-error-message">
+        <span class="govuk-visually-hidden">Error:</span>
+        {{ primaryErrorMessageText}}
+      </span>
+
+      <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="{{question.primaryQuestion.name}}" name="{{question.primaryQuestion.name}}"
+          type="radio" value="YES" data-aria-controls="conditional-input-for-{{question.primaryQuestion.questionSubject}}"
+          {% if question.primaryQuestion.value === 'YES' %} checked="checked" {% endif %}>
+          <label class="govuk-label govuk-radios__label" for="{{question.primaryQuestion.name}}">
+            Yes
+          </label>
+        </div>
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="primary-question-no" 
+          name="{{question.primaryQuestion.name}}" type="radio" value="NO" 
+          {% if question.primaryQuestion.value === 'NO' %} checked="checked" {% endif %}>
+          <label class="govuk-label govuk-radios__label" for="primary-question-no">
+            No
+          </label>
+        </div>
+        <div class="govuk-radios__conditional govuk-radios__conditional--hidden clear-both" id="conditional-input-for-{{question.primaryQuestion.questionSubject}}">
+          <div class="add-another-{{question.primaryQuestion.questionSubject}}" id="{{question.followUpQuestion.name}}">
+            {% set dataqa = ["add-another-", question.primaryQuestion.questionSubject ] | join %}
+
+            {% for item in question.followUpQuestion.value %}
+
+              {{ addAnother(
+              question.followUpQuestion.otherIds, 
+              question.followUpQuestion.name, 
+              question.followUpQuestion.errorMessage, 
+              index = loop.index0, 
+              value = item[question.followUpQuestion.otherIds[0]], 
+              showRemove = loop.length != 1) 
+              }}
+            {% else %}
+              {{ addAnother(
+              question.followUpQuestion.otherIds, 
+              question.followUpQuestion.name, 
+              question.followUpQuestion.errorMessage, 
+              index = 0, 
+              value = null, 
+              showRemove = false) }}
+            {% endfor %}
+
+            <div class="button-action">
+              {{
+              govukButton({
+                text: 'Add another',
+                classes: 'govuk-button--secondary  add-another__add-button govuk-!-margin-bottom-4',
+                attributes: {dataqa: dataqa}
+              })
+            }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+{% endmacro %}
+
 {% macro radiosWithNestedRadios(question) %}
 
 {% set radio_button_orientation = 'govuk-radios--inline' if question.orientation === 'inline' else 'govuk-radios'%}