Merge pull request #823 from markhunter27/TAI-3083

TAI-3083 : Introduce styling for check-your-answers summary content

.gitignore

@@ -18,3 +18,4 @@ component-library/*
 !gulpfile.js/util/component-library/
 vrt-output/
 backstop.json
+.project

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 - Styling for new full width banner on frontend-template-provider [#824](https://github.com/hmrc/assets-frontend/pull/824)
+- Introduced new summary page styling, derived from GOV.UK design pattern. New sass partial `_check-your-answers.scss` [#823](https://github.com/hmrc/assets-frontend/pull/823)
 
 ## [2.251.1] - 2017-10-05
 ### Changed

assets/components/check-your-answers/README.md

@@ -0,0 +1,5 @@
+# Check your answers 
+
+A definition list based layout for use in confirmation pages.
+
+Based upon the GOV.UK service manual [design pattern](https://www.gov.uk/service-manual/design/check-your-answers-pages).

assets/components/check-your-answers/_check-your-answers.scss

@@ -0,0 +1,81 @@
+.govuk-check-your-answers {
+
+  @include media(desktop) {
+    display: table;
+  }
+
+  > * {
+    position: relative;
+    border-bottom: 1px solid $border-colour;
+
+    @include media(desktop) {
+      display: table-row;
+      border-bottom-width: 0;
+    }
+
+    > * {
+      display: block;
+
+      @include media(desktop) {
+        display: table-cell;
+        border-bottom: 1px solid $border-colour;
+        padding: em(12, 19) em(20, 19) em(9, 19) 0; // copied from Elements' td padding
+        margin: 0;
+      }
+    }
+
+    @include media(desktop) {
+      &:first-child > * {
+        padding-top: 0;
+      }
+    }
+  }
+
+  .cya-question {
+    font-weight: bold;
+    margin: em(12, 19) 4em em(4,19) 0;
+    // top: from Elements' td
+    // right: due to length of "change" link (adjust if you change the link to be much longer)
+    // bottom: by eye
+    // using margin instead of padding because of easier absolutely positioning of .change
+  }
+
+  > *:first-child .cya-question {
+    margin-top: 0;
+  }
+
+  @include media(desktop) {
+    // to make group of q&a line up horizontally (unless there is just one group)
+    &.cya-questions-short,
+    &.cya-questions-long {
+      width: 100%;
+    }
+
+    // recommended for mostly short questions
+    &.cya-questions-short .cya-question {
+      width: 30%;
+    }
+
+    // recommended for mostly long questions
+    &.cya-questions-long .cya-question {
+      width: 50%;
+    }
+  }
+
+  .cya-answer {
+    padding-bottom: em(9, 19); // from Elements' td
+  }
+
+  .cya-change {
+    text-align: right;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    @include media(desktop) {
+      position: static;
+      padding-right: 0;
+    }
+  }
+
+}

assets/components/check-your-answers/check-your-answers.html

@@ -0,0 +1,62 @@
+<h2 class="heading-medium">An example confirmation page</h2>
+
+<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="visually-hidden"> 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="visually-hidden"> date of birth</span>
+      </a>
+    </dd>
+  </div>
+
+  <div>
+    <dt class="cya-question">
+      Home address
+    </dt>
+    <dd class="cya-answer">
+      72 Guild Street<br>
+      London<br>
+      SE23 6FH
+    </dd>
+    <dd class="cya-change">
+      <a href="#">
+        Change<span class="visually-hidden"> home address</span>
+      </a>
+    </dd>
+  </div>
+
+  <div>
+    <dt class="cya-question">
+      Contact details
+    </dt>
+    <dd class="cya-answer">
+      07700 900457<br>
+      [email protected]
+    </dd>
+    <dd class="cya-change">
+      <a href="#">
+        Change<span class="visually-hidden"> contact details</span>
+      </a>
+    </dd>
+  </div>
+</dl>

assets/scss/_application-base.scss

@@ -96,6 +96,7 @@ $path: "../images/icons/";
 @import "components/flag";
 @import "components/indent";
 @import "components/page-heading/page-heading";
+@import "components/check-your-answers/check-your-answers";
 
 // Page Specific Styles
 @import "pages/messages";