Add check answers and extended grid

src/patterns/check-answers/default/index.njk

@@ -0,0 +1,194 @@
+---
+title: Check answers
+layout: layout-example-full-page.njk
+---
+
+{% extends "example-wrappers/full-page.njk" %}
+
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "summary-list/macro.njk" import govukSummaryList %}
+{% from "button/macro.njk" import govukButton %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "#"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <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>
+
+      <h2 class="govuk-heading-m">Personal details</h2>
+
+      {{ govukSummaryList({
+        classes: 'govuk-!-margin-bottom-9',
+        rows: [
+          {
+            key: {
+              text: "Name"
+            },
+            value: {
+              text: "Sarah Philips"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "name"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Date of birth"
+            },
+            value: {
+              text: "5 January 1978"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "date of birth"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Contact information"
+            },
+            value: {
+              html: "72 Guild Street<br>London<br>SE23 6FH"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "contact information"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Contact details"
+            },
+            value: {
+              html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "contact details"
+                }
+              ]
+            }
+          }
+        ]
+      }) }}
+
+
+      <h2 class="govuk-heading-m">Application details</h2>
+
+      {{ govukSummaryList({
+        classes: 'govuk-!-margin-bottom-9',
+        rows: [
+          {
+            key: {
+              text: "Previous application number"
+            },
+            value: {
+              text: "502135326"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "previous application number"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Licence type"
+            },
+            value: {
+              text: "For personal use"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "licence type"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Home address"
+            },
+            value: {
+              html: "72 Guild Street<br>London<br>SE23 6FH"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "home address"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Licence period"
+            },
+            value: {
+              text: "Valid for 6 months"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "licence period"
+                }
+              ]
+            }
+          }
+        ]
+      }) }}
+
+      <h2 class="govuk-heading-m">Now send your application</h2>
+
+      <p class="govuk-body">By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+
+      <form action="/form-handler" method="post" novalidate>
+
+        <input type="hidden" name="answers-checked" value="true">
+
+        {{ govukButton({
+          text: "Accept and send"
+        }) }}
+
+      </form>
+
+    </div>
+  </div>
+{% endblock %}

src/patterns/check-answers/index.md.njk

@@ -7,18 +7,17 @@ aliases:
 backlog_issue_id: 36
 layout: layout-pane.njk
 ---
+{% from "_example.njk" import example %}
 
 Let users check their answers before submitting information to a service.
 
-![Screenshot of a check answers page, includes a heading, and two sections for personal details and application details. Each section has details on the answers a user has given with a corresponding link to change their answer. At the bottom of the page there is a button to ‘accept and send’ the application.](check-answers-page.png)
-
-There is a [coded example of a check your answers page](https://govuk-prototype-kit.herokuapp.com/docs/templates/check-your-answers) in the GOV.UK Prototype Kit.
+{{ example({group: "patterns", item: "check-answers", example: "default", html: true, nunjucks: true, open: false, size: "xl"}) }}
 
 ## When to use this pattern
 
-Show a single Check answers page immediately before the confirmation screen for small to medium-sized transactions.
+Show a single check answers page immediately before the confirmation screen for small to medium-sized transactions.
 
-When designing a very large transaction with multiple sections, it may help to include a Check answers pages at the end of each section.
+When designing a very large transaction with multiple sections, it may help to include a check answers pages at the end of each section.
 
 This can be valuable for services where different users might be completing each section. You should test this approach with your users to find out if it’s helpful.
 
@@ -31,7 +30,7 @@ Check answers pages help to:
 
 ### Make the page easy to understand
 
-On your Check answers page you should:
+On your check answers page you should:
 
 - make it clear there’s a task to perform on the page
 - make it clear that the transaction will not be complete until a user confirms their information is correct
@@ -42,14 +41,14 @@ On your Check answers page you should:
 
 ### Let users go back and change their answers
 
-You should provide a ‘Change’ link next to each section on your Check answers page so that users can add or change the information.
+You should provide a ‘Change’ link next to each section on your check answers page so that users can add or change the information.
 
 The answers pages should look the same way they did when the user last used them, with all their answers pre-populated.
 
-When they’ve finished, the ‘Continue’ button should return them to the Check answers page. They should not need to go through the rest of the transaction again.
+When they’ve finished, the ‘Continue’ button should return them to the check answers page. They should not need to go through the rest of the transaction again.
 
-If a user changes their response in a way that means you need to ask them more questions, do this before returning them to the Check answers page.
+If a user changes their response in a way that means you need to ask them more questions, do this before returning them to the check answers page.
 
 ## Research on this pattern
 
-Read a blog about [how the Carer’s Allowance Service used Check answers to improve its users’ experience](https://dwpdigital.blog.gov.uk/2016/07/08/a-live-service-is-not-the-end-of-the-story/).
+Read a blog about [how the Carer’s Allowance Service used check answers to improve its users’ experience](https://dwpdigital.blog.gov.uk/2016/07/08/a-live-service-is-not-the-end-of-the-story/).

src/styles/layout/combinations/index.njk

@@ -4,7 +4,7 @@ layout: layout-example.njk
 ignore_in_sitemap: true
 stylesheets:
 - ../grid-annotate.css
-- grid-combinations-annotate.css
+- ../grid-combinations-annotate.css
 ---
 
 <div class="govuk-grid-row">

src/styles/layout/desktop/index.njk

@@ -0,0 +1,17 @@
+---
+title: Desktop grid classes – Layout
+layout: layout-example.njk
+ignore_in_sitemap: true
+stylesheets:
+- ../grid-annotate.css
+- ../grid-combinations-annotate.css
+---
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds-from-desktop">
+    <p>govuk-grid-column-two-thirds-from-desktop</p>
+  </div>
+  <div class="govuk-grid-column-one-third-from-desktop">
+    <p>govuk-grid-column-one-third-from-desktop</p>
+  </div>
+</div>

src/styles/layout/index.md.njk

@@ -100,6 +100,16 @@ The available widths are:
 
 {{ example({group: "styles", item: "layout", example: "combinations", html: true, open: true, size: "xl"}) }}
 
+### Desktop specific grid classes
+
+To specify a width at the desktop breakpoint you can use the desktop specific grid classes. For example `govuk-grid-column-two-thirds-from-desktop` will set your column width to be two-thirds width at the desktop breakpoint only.
+
+{{ example({group: "styles", item: "layout", example: "desktop", html: true, open: true, size: "m"}) }}
+
+The desktop specific classes also allow you to set the width of the tablet breakpoint by using them in combination with the standard grid classes. For example using `govuk-grid-column-one-half` and `govuk-grid-column-two-thirds-from-desktop` together will mean the column will be one-half at the tablet breakpoint and two-thirds width at desktop.
+
+{{ example({group: "styles", item: "layout", example: "tablet-desktop", html: true, open: true, size: "m"}) }}
+
 ### Nested grids
 
 {{ example({group: "styles", item: "layout", example: "nested", html: true, open: true, size: "m"}) }}

src/styles/layout/tablet-desktop/index.njk

@@ -0,0 +1,16 @@
+---
+title: Desktop and tablet grid classes – Layout
+layout: layout-example.njk
+ignore_in_sitemap: true
+stylesheets:
+- ../grid-annotate.css
+---
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-one-half govuk-grid-column-two-thirds-from-desktop">
+    <p>govuk-grid-column-one-half<br><br>govuk-grid-column-two-thirds-from-desktop</p>
+  </div>
+  <div class="govuk-grid-column-one-half govuk-grid-column-one-third-from-desktop">
+    <p>govuk-grid-column-one-half<br><br>govuk-grid-column-one-third-from-desktop</p>
+  </div>
+</div>