added new template for check your answers page (#126)

* added new template for check your answers page

* <th> tag converted to <td> to avoid bold question

* check-your-answers template version 1 replaced by version 2

* cleaner solution using latest gov.uk frontend

* version upgraded

* class added to list and link

* visuallyHidden class name to govuk-visually-hidden

assets/scss/look-and-feel/check-your-answers.scss

@@ -95,4 +95,4 @@
     font-weight: bold;
     padding-right: 0;
   }
-}
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hmcts/look-and-feel",
   "description": "One question per page apps made easy",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "main": "./src/main.js",
   "dependencies": {
     "babel-core": "^6.26.0",

templates/look-and-feel/components/check-your-answers.njk

@@ -1,27 +1,25 @@
 {% macro answer(question, answer, url, id) %}
-  <div class="govuk-summary-list__row" id="cya-{{ safeId(id, question) }}">
-    <dt class="govuk-summary-list__value">
-      {{ question }}
-    </dt>
-    <dd class="govuk-summary-list__value">
-      {% if caller %}
-        {{ caller() }}
+<tr class="govuk-table__row" id="cya-{{ safeId(id, question) }}">
+  <td class="govuk-table__cell govuk-!-width-one-third" scope="row">{{ question }}</td>
+  <td class="govuk-table__cell govuk-!-width-two-thirds">
+    {% if caller %}
+      {{ caller() }}
+    {% else %}
+      {% if isArray(answer) %}
+        <ul class="govuk-list">
+          {% for line in answer %}
+            <li>{{ line | safe }}</li>
+          {% endfor %}
+        </ul>
       {% else %}
-        {% if isArray(answer) %}
-          <ul class="govuk-list">
-            {% for line in answer %}
-              <li>{{ line | safe }}</li>
-            {% endfor %}
-          </ul>
-        {% else %}
-          {{ answer | safe }}
-        {% endif%}
-      {% endif %}
-    </dd>
-    <dd class="govuk-summary-list__actions">
-      <a class="govuk-link" href="{{ url }}">
-        Change<span class="govuk-visually-hidden"> {{ question }}</span>
-      </a>
-    </dd>
-  </div>
+        {{ answer | safe }}
+      {% endif%}
+    {% endif %}
+  </td>
+  <td class="govuk-table__cell">
+    <a class="govuk-link" href="{{ url }}">
+      Change<span class="govuk-visually-hidden"> {{ question }}</span>
+    </a>
+  </td>
+</tr>
 {% endmacro %}

templates/look-and-feel/layouts/check_your_answers.html

@@ -29,29 +29,31 @@
 
 {{ header(pageContent.title | default(defaultContent.title)) }}
 
-  {% for section in _sections %}
-
-    {% if section.atLeast1Completed %}
-      {% if section.title and _sections|length > 1 %}
-        {{ header(section.title, size='m') }}
-      {% endif %}
-
-      <dl class="govuk-summary-list">
-
-        {% for part in section.completedAnswers %}
-          {% if not part.hide %}
-            {% if part.html %}
-              {{ part.html | safe }}
-            {% else %}
-              {{ answer(part.question, part.answer, part.url, part.id) }}
+    <table class="govuk-table">
+      <caption class="govuk-table__caption">
+        <span class="govuk-visually-hidden">This table has a list of your questions and answers. The first column is the question. The second column is your answer and the third column is a link to change your answer of that particular question.</span> 
+      </caption>
+      <tbody class="govuk-table__body">
+
+        {% for section in _sections %}
+
+          {% if section.atLeast1Completed %}
+            {% if section.title and _sections|length > 1 %}
+              {{ header(section.title, size='m') }}
             {% endif %}
+              {% for part in section.completedAnswers %}
+                {% if not part.hide %}
+                  {% if part.html %}
+                    {{ part.html | safe }}
+                  {% else %}
+                    {{ answer(part.question, part.answer, part.url, part.id) }}
+                  {% endif %}
+                {% endif %}
+              {% endfor %}
           {% endif %}
         {% endfor %}
-
-      </dl>
-
-    {% endif %}
-  {% endfor %}
+      </tbody>
+    </table>
 
   {% if incomplete %}
     {% block continue_application %}
@@ -87,4 +89,4 @@
   {% block after_form -%}
   {%- endblock %}
 
-{% endblock %}
+{% endblock %}