Improve content of Check your answers page

* Make the text more generic * Include second section
alphagov · Apr 5, 2017 · 30603b0 · 30603b0
1 parent 730a3bf
commit 30603b0
Showing 1 changed file with 69 additions and 31 deletions.
diff --git a/docs/views/examples/check-your-answers-page.html b/docs/views/examples/check-your-answers-page.html
@@ -14,106 +14,144 @@ <h1 class="heading-large">
         Check your answers before sending your application
       </h1>
 
+
+      <!-- only add a heading for a list if there is more than one list -->
       <h2 class="heading-medium">
-        Organisations involved
+        Personal details
       </h2>
 
-      <dl class="govuk-check-your-answers">
+      <!-- use additional modifier class to change column widths for multiple groups of questions and answers: -->
+      <!--   * `cya-questions-short` for short questions -->
+      <!--   * `cya-questions-long` for long questions -->
+      <!--   * none for single group of q&a -->
+      <dl class="govuk-check-your-answers cya-questions-short">
+        <div>
+          <dt class="cya-question">
+            Name
+          </dt>
+          <dd class="cya-answer">
+            Sarah Philips
+          </dd>
+          <dd class="cya-change">
+            <a href="#">
+              Change <span class="visuallyhidden">name</span>
+            </a>
+          </dd>
+        </div>
+
+        <div>
+          <dt class="cya-question">
+            Date of birth
+          </dt>
+          <dd class="cya-answer">
+            5 January 1978
+          </dd>
+          <dd class="cya-change">
+            <a href="#">
+              Change <span class="visuallyhidden">date of birth</span>
+            </a>
+          </dd>
+        </div>
+
         <div>
           <dt class="cya-question">
-            Exporter
+            Home address
           </dt>
           <dd class="cya-answer">
-            Exporter name<br>
-            First line of address<br>
-            Second line of address<br>
-            Contact: Contact Name<br>
-            Tel: 01234 567 890<br>
-            Email: email@email.com
+            72 Guild Street<br />
+            London<br />
+            SE23 6FH
           </dd>
           <dd class="cya-change">
             <a href="#">
-              Change <span class="visuallyhidden">Exporter name</span>
+              Change <span class="visuallyhidden">home address</span>
             </a>
           </dd>
         </div>
 
         <div>
           <dt class="cya-question">
-            Producer
+            Contact details
           </dt>
           <dd class="cya-answer">
-            Producer name
+            07700 900457<br />
+            sarah.phillips@example.com
           </dd>
           <dd class="cya-change">
             <a href="#">
-              Change <span class="visuallyhidden">Producer name</span>
+              Change <span class="visuallyhidden">contact details</span>
             </a>
           </dd>
         </div>
+      </dl>
+
 
+      <h2 class="heading-medium">
+        Application details
+      </h2>
+
+      <dl class="govuk-check-your-answers cya-questions-short">
         <div>
           <dt class="cya-question">
-            Site of export
+            Previous application number
           </dt>
           <dd class="cya-answer">
-            Site of export name
+            502135326
           </dd>
           <dd class="cya-change">
             <a href="#">
-              Change <span class="visuallyhidden">Site of export name</span>
+              Change <span class="visuallyhidden">previous application number</span>
             </a>
           </dd>
         </div>
 
         <div>
           <dt class="cya-question">
-            Importer
+            Licence type
           </dt>
           <dd class="cya-answer">
-            Importer name<br>
-            First line of address<br>
-            Second line of address<br>
-            Contact: Contact Name<br>
-            Tel: 01234 567 890<br>
-            Email: email@email.com
+            For personal use
           </dd>
           <dd class="cya-change">
             <a href="#">
-              Change <span class="visuallyhidden">Importer name</span>
+              Change <span class="visuallyhidden">licence type</span>
             </a>
           </dd>
         </div>
 
         <div>
           <dt class="cya-question">
-            Recovery facilities
+            Home address
           </dt>
           <dd class="cya-answer">
-            Recovery facilities name
+            72 Guild Street<br />
+            London<br />
+            SE23 6FH
           </dd>
           <dd class="cya-change">
             <a href="#">
-              Change <span class="visuallyhidden">Recovery facilities name</span>
+              Change <span class="visuallyhidden">home address</span>
             </a>
           </dd>
         </div>
 
         <div>
           <dt class="cya-question">
-            Recovery site
+            Licence period
           </dt>
           <dd class="cya-answer">
-            Recovery site name
-          </td>
+            This is a longer paragraph of text provided by the user to provide additional information.<br /><br />
+            This is a second paragraph of text provided by the user.
+          </dd>
           <dd class="cya-change">
             <a href="#">
-              Change <span class="visuallyhidden">Recovery site name</span>
+              Change <span class="visuallyhidden">licence period</span>
             </a>
           </dd>
         </div>
       </dl>
 
+
       <h2 class="heading-medium">Now send your application</h2>
 
       <p class="text">