Merge pull request #672 from alphagov/update-check-answers

Replace ‘check answers’ pattern with updated code
alphagov · Jan 16, 2019 · d89c86a · d89c86a
2 parents d141b31 + 8d0c21d
commit d89c86a
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 169 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,10 @@
 # Unreleased
 
 Features:
+- [#672 Replace ‘check answers’ pattern with updated code](https://github.com/alphagov/govuk-prototype-kit/pull/672)
 - [#671 Update to GOV.UK Frontend version 2.5.0](https://github.com/alphagov/govuk-prototype-kit/pull/671)
    Allows use of new components Accordion and Summary List
 
-
 Fixes:
 
 - [#667 Add acorn dependency to fix npm warning](https://github.com/alphagov/govuk-prototype-kit/pull/667)

diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
@@ -5,7 +5,6 @@ $govuk-global-styles: true;
 @import "node_modules/govuk-frontend/all";
 
 // Patterns that aren't in Frontend
-@import "patterns/check-your-answers";
 @import "patterns/step-by-step-navigation";
 @import "patterns/task-list";
 @import "patterns/related-items";

diff --git a/app/assets/sass/patterns/_check-your-answers.scss b/app/assets/sass/patterns/_check-your-answers.scss
diff --git a/docs/views/templates/check-your-answers.html b/docs/views/templates/check-your-answers.html
@@ -9,159 +9,151 @@
 {% endblock %}
 
 {% block content %}
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds-from-desktop">
 
-      <h1 class="govuk-heading-xl">
-        Check your answers before sending your application
-      </h1>
+      <h1 class="govuk-heading-xl">Check your answers before sending your application</h1>
 
-      <!-- only add a heading for a list if there is more than one list -->
-      <h2 class="govuk-heading-m">
-        Personal details
-      </h2>
+      <h2 class="govuk-heading-m">Personal details</h2>
 
-      <!-- use additional modifier class to change column widths for multiple groups of questions and answers: -->
-      <!--   * `app-check-your-answers--short` for short questions -->
-      <!--   * `app-check-your-answers__questions-long` for long questions -->
-      <!--   * none for single group of q&a -->
-      <dl class="app-check-your-answers app-check-your-answers--short">
-        <div class="app-check-your-answers__contents">
-          <dt class="app-check-your-answers__question">
+      <dl class="govuk-summary-list govuk-!-margin-bottom-9">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
             Name
           </dt>
-          <dd class="app-check-your-answers__answer">
+          <dd class="govuk-summary-list__value">
             Sarah Philips
           </dd>
-          <dd class="app-check-your-answers__change">
+          <dd class="govuk-summary-list__actions">
             <a href="#">
-              Change<span class="govuk-visually-hidden"> name</span>
+              Change
+              <span class="govuk-visually-hidden"> name</span>
             </a>
           </dd>
         </div>
-
-        <div class="app-check-your-answers__contents">
-          <dt class="app-check-your-answers__question">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
             Date of birth
           </dt>
-          <dd class="app-check-your-answers__answer">
+          <dd class="govuk-summary-list__value">
             5 January 1978
           </dd>
-          <dd class="app-check-your-answers__change">
+          <dd class="govuk-summary-list__actions">
             <a href="#">
-              Change<span class="govuk-visually-hidden"> date of birth</span>
+              Change
+              <span class="govuk-visually-hidden"> date of birth</span>
             </a>
           </dd>
         </div>
-
-        <div class="app-check-your-answers__contents">
-          <dt class="app-check-your-answers__question">
-            Home address
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
+            Contact information
           </dt>
-          <dd class="app-check-your-answers__answer">
-            72 Guild Street<br />
-            London<br />
-            SE23 6FH
+          <dd class="govuk-summary-list__value">
+            72 Guild Street
+            <br>London
+            <br>SE23 6FH
           </dd>
-          <dd class="app-check-your-answers__change">
+          <dd class="govuk-summary-list__actions">
             <a href="#">
-              Change<span class="govuk-visually-hidden"> home address</span>
+              Change
+              <span class="govuk-visually-hidden"> contact information</span>
             </a>
           </dd>
         </div>
-
-        <div class="app-check-your-answers__contents">
-          <dt class="app-check-your-answers__question">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
             Contact details
           </dt>
-          <dd class="app-check-your-answers__answer">
-            07700 900457<br />
-            sarah.phillips@example.com
+          <dd class="govuk-summary-list__value">
+            <p>07700 900457</p>
+            <p>sarah.phillips@example.com</p>
           </dd>
-          <dd class="app-check-your-answers__change">
+          <dd class="govuk-summary-list__actions">
             <a href="#">
-              Change<span class="govuk-visually-hidden"> contact details</span>
+              Change
+              <span class="govuk-visually-hidden"> contact details</span>
             </a>
           </dd>
         </div>
       </dl>
 
+      <h2 class="govuk-heading-m">Application details</h2>
 
-      <h2 class="govuk-heading-m">
-        Application details
-      </h2>
-
-      <dl class="app-check-your-answers app-check-your-answers--short">
-        <div class="app-check-your-answers__contents">
-          <dt class="app-check-your-answers__question">
+      <dl class="govuk-summary-list govuk-!-margin-bottom-9">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
             Previous application number
           </dt>
-          <dd class="app-check-your-answers__answer">
+          <dd class="govuk-summary-list__value">
             502135326
           </dd>
-          <dd class="app-check-your-answers__change">
+          <dd class="govuk-summary-list__actions">
             <a href="#">
-              Change<span class="govuk-visually-hidden"> previous application number</span>
+              Change
+              <span class="govuk-visually-hidden"> previous application number</span>
             </a>
           </dd>
         </div>
-
-        <div class="app-check-your-answers__contents">
-          <dt class="app-check-your-answers__question">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
             Licence type
           </dt>
-          <dd class="app-check-your-answers__answer">
+          <dd class="govuk-summary-list__value">
             For personal use
           </dd>
-          <dd class="app-check-your-answers__change">
+          <dd class="govuk-summary-list__actions">
             <a href="#">
-              Change<span class="govuk-visually-hidden"> licence type</span>
+              Change
+              <span class="govuk-visually-hidden"> licence type</span>
             </a>
           </dd>
         </div>
-
-        <div class="app-check-your-answers__contents">
-          <dt class="app-check-your-answers__question">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
             Home address
           </dt>
-          <dd class="app-check-your-answers__answer">
-            72 Guild Street<br />
-            London<br />
-            SE23 6FH
+          <dd class="govuk-summary-list__value">
+            72 Guild Street
+            <br>London
+            <br>SE23 6FH
           </dd>
-          <dd class="app-check-your-answers__change">
+          <dd class="govuk-summary-list__actions">
             <a href="#">
-              Change<span class="govuk-visually-hidden"> home address</span>
+              Change
+              <span class="govuk-visually-hidden"> home address</span>
             </a>
           </dd>
         </div>
-
-        <div class="app-check-your-answers__contents">
-          <dt class="app-check-your-answers__question">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
             Licence period
           </dt>
-          <dd class="app-check-your-answers__answer">
-            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 class="govuk-summary-list__value">
+            Valid for 6 months
           </dd>
-          <dd class="app-check-your-answers__change">
+          <dd class="govuk-summary-list__actions">
             <a href="#">
-              Change<span class="govuk-visually-hidden"> licence period</span>
+              Change
+              <span class="govuk-visually-hidden"> licence period</span>
             </a>
           </dd>
         </div>
       </dl>
 
-
       <h2 class="govuk-heading-m">Now send your application</h2>
 
-      <p>
-        By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
-      </p>
+      <p>By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+
+      <form action="/confirmation" method="post" novalidate>
+
+        <input type="hidden" name="answers-checked" value="true">
+
+        <button type="submit" class="govuk-button">
+          Accept and send
+        </button>
 
-      <a class="govuk-button" href="confirmation-page" role="button">
-        Accept and send application
-      </a>
+      </form>
 
     </div>
   </div>

diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "express-writer": "0.0.4",
     "fancy-log": "^1.3.3",
     "govuk-elements-sass": "^3.1.3",
-    "govuk-frontend": "^2.5.0",
+    "govuk-frontend": "^2.5.1",
     "govuk_frontend_toolkit": "^7.5.0",
     "govuk_template_jinja": "^0.24.1",
     "gulp": "^4.0.0",