Draft feedback component

packages/govuk-frontend-review/src/views/full-page-examples/confirmation-page/index.njk

@@ -0,0 +1,88 @@
+---
+title: Application complete
+name: Confirmation page
+scenario: You have reached the end of a service
+
+notes: |
+  We'll write these later
+---
+
+{% extends "layouts/full-page-example.njk" %}
+
+{# {% set mainClasses = "govuk-main-wrapper--l" %} #}
+{# remember to set the title properly #}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+
+{% set pageTitle = example.title %}
+{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% block headerEnd %}
+  {{ govukPhaseBanner({
+    tag: {
+      text: "Alpha"
+    },
+    html: 'This is a new service. We’re still working on ways to improve it.'
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      {{ govukPanel({
+        titleText: pageTitle,
+        html: "Your reference number<br><strong>HDJ2123F</strong>"
+      }) }}
+
+      <p class="govuk-body">We have sent you a confirmation email.</p>
+
+      <h2 class="govuk-heading-m">What happens next</h2>
+
+      <p class="govuk-body">
+        We’ve sent your application to Hackney Electoral Register Office.
+      </p>
+      <p class="govuk-body">
+        They will contact you either to confirm your registration, or to ask for more information.
+      </p>
+    </div>
+  </div>
+{% endblock %}
+
+{% block footerStart %}
+  <div class="test-feedback govuk-width-container">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h2 class="govuk-heading-m">Help us improve this service</h2>
+        <p class="govuk-body">Tell us about your experience using this service. You’ll help us make improvements by <a href="#" class="govuk-link">giving us your feedback</a>.</p>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    .test-feedback {
+      box-sizing: border-box;
+      border-top: 1px solid var(--govuk-brand-colour, #1d70b8);
+      padding: 20px 15px 25px;
+      background-color: var(--govuk-surface-background-colour, #f4f8fb);
+    } 
+
+    .test-feedback .govuk-body:last-child { 
+      margin-bottom: 0;
+    }
+
+    @media (min-width: 40.0625rem) {
+      .test-feedback {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+
+    @media (max-width: calc(40.0625rem  - 1px)) {
+      .test-feedback { 
+        margin-left: 0; 
+        margin-right: 0;
+      }
+    }
+  </style>
+{% endblock %}
+

packages/govuk-frontend-review/src/views/layouts/_generic.njk

@@ -14,7 +14,7 @@
   {% endblock %}
 {% endblock %}
 
-{% set mainClasses = 'govuk-main-wrapper--auto-spacing' %}
+{# {% set mainClasses = 'govuk-main-wrapper--auto-spacing' %} #}
 
 {% block bodyEnd %}
   <script type="module" src="/javascripts/govuk-frontend.min.js"></script>