From 9ee2c3946a1d581708092a3bc7b7d9644b4978fa Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Fri, 19 Feb 2021 14:46:09 +0000
Subject: [PATCH] Use inset-text component for template formatting partials

This adds spacing classes from the design system where necessary to keep
the spacing looking the same.

It also replaces the `<aside>` elements with a `<div>` on the edit
template pages. The accessibility audit noted that these were inside a
`<main>` element, so screen readers may not be able to navigate the
elements correctly.
---
 .../guidance-formatting-letters.html          | 41 +++++++++--------
 .../templates/guidance-formatting.html        | 44 +++++++++----------
 .../partials/templates/guidance-links.html    | 11 +++--
 .../templates/guidance-optional-content.html  | 13 +++---
 .../templates/guidance-personalisation.html   | 11 +++--
 .../templates/guidance-send-a-document.html   | 11 +++--
 app/templates/views/edit-email-template.html  |  4 +-
 app/templates/views/edit-letter-template.html |  4 +-
 app/templates/views/edit-sms-template.html    |  4 +-
 .../templates/edit-template-postage.html      |  4 +-
 10 files changed, 80 insertions(+), 67 deletions(-)

diff --git a/app/templates/partials/templates/guidance-formatting-letters.html b/app/templates/partials/templates/guidance-formatting-letters.html
index 6e02550f5..7e849955b 100644
--- a/app/templates/partials/templates/guidance-formatting-letters.html
+++ b/app/templates/partials/templates/guidance-formatting-letters.html
@@ -1,31 +1,36 @@
+{% from "components/inset-text/macro.njk" import govukInsetText %}
+
 <h2 class="heading-medium">Formatting</h2>
 <p class="govuk-body">
   To put a heading in your template, use a hash:
 </p>
-<div class="panel panel-border-wide">
-  <p class="govuk-body">
-    # This is a heading
-  </p>
+<div>
+  {{ govukInsetText({
+    "text": "# This is a heading",
+    "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+  }}
 </div>
 <p class="govuk-body">
   To make bullet points, use asterisks:
 </p>
-<div class="panel panel-border-wide">
-  <p class="govuk-body">
-    * point 1<br/>
-    * point 2<br/>
-    * point 3<br/>
-  </p>
+<div>
+  {{ govukInsetText({
+    "html": "* point 1<br/>
+             * point 2<br/>
+             * point 3<br/>",
+    "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+  }}
 </div>
 <p class="govuk-body">
   To insert a page break, use three asterisks:
 </p>
-<div class="panel panel-border-wide">
-  <p class="govuk-body">
-    Content on page 1<br/>
-    <br/>
-    ***<br/>
-    <br/>
-    Content on page 2<br/>
-  </p>
+<div>
+  {{ govukInsetText({
+    "html": "Content on page 1<br/>
+             <br/>
+             ***<br/>
+             <br/>
+             Content on page 2<br/>",
+    "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+  }}
 </div>
diff --git a/app/templates/partials/templates/guidance-formatting.html b/app/templates/partials/templates/guidance-formatting.html
index 6c405f598..6dcb73dcf 100644
--- a/app/templates/partials/templates/guidance-formatting.html
+++ b/app/templates/partials/templates/guidance-formatting.html
@@ -1,41 +1,37 @@
+{% from "components/inset-text/macro.njk" import govukInsetText %}
+
 <h2 class="heading-medium">Formatting</h2>
 <p class="bottom-gutter-1-3">
   To put a title in your template, use a hash:
 </p>
-<div class="panel panel-border-wide bottom-gutter">
-  <p class="govuk-body">
-    # This is a title
-  </p>
+<div class="bottom-gutter">
+  {{ govukInsetText({"text": "# This is a title", "classes": "govuk-!-margin-top-0"})}}
 </div>
 <p class="bottom-gutter-1-3">
   To make bullet points, use asterisks:
 </p>
-<div class="panel panel-border-wide bottom-gutter">
-  <p class="govuk-body">
-    * point 1<br/>
-    * point 2<br/>
-    * point 3<br/>
-  </p>
+<div class="bottom-gutter">
+  {{ govukInsetText({
+    "html": "* point 1<br/>
+             * point 2<br/>
+             * point 3<br/>",
+    "classes": "govuk-!-margin-top-0"})
+  }}
 </div>
 <p class="bottom-gutter-1-3">
   To add inset text, use a caret:
 </p>
-<div class="panel panel-border-wide bottom-gutter">
-  <p class="govuk-body">
-    ^ You must tell us if your circumstances change
-  </p>
+<div class="bottom-gutter">
+  {{ govukInsetText({"text": "^ You must tell us if your circumstances change", "classes": "govuk-!-margin-top-0"})}}
 </div>
 <p class="bottom-gutter-1-3">
   To add a horizontal line, use three dashes:
 </p>
-<div class="panel panel-border-wide">
-  <p class="govuk-body">
-    First paragraph
-  </p>
-  <p style="letter-spacing: 1px;">
-    ---
-  </p>
-  <p class="govuk-body">
-    Second paragraph
-  </p>
+<div>
+  {{ govukInsetText({
+    "html": '<p class="govuk-body">First paragraph</p>
+             <p class="govuk-body" style="letter-spacing: 1px;">---</p>
+             <p class="govuk-body">Second paragraph</p>',
+    "classes": "govuk-!-margin-top-0"})
+  }}
 </div>
diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html
index 13233badc..2259c5c21 100644
--- a/app/templates/partials/templates/guidance-links.html
+++ b/app/templates/partials/templates/guidance-links.html
@@ -1,9 +1,12 @@
+{% from "components/inset-text/macro.njk" import govukInsetText %}
+
 <h2 class="heading-medium">Links and URLs</h2>
 <p class="bottom-gutter-1-3">
   Always use full URLs, starting with https://
 </p>
-<div class="panel panel-border-wide">
-  <p class="govuk-body">
-    Apply now at https://www.gov.uk/example
-  </p>
+<div>
+  {{ govukInsetText({
+    "text": "Apply now at https://www.gov.uk/example",
+    "classes": "govuk-!-margin-top-0"})
+  }}
 </div>
diff --git a/app/templates/partials/templates/guidance-optional-content.html b/app/templates/partials/templates/guidance-optional-content.html
index 31e2469d3..5bbe2aa33 100644
--- a/app/templates/partials/templates/guidance-optional-content.html
+++ b/app/templates/partials/templates/guidance-optional-content.html
@@ -1,3 +1,5 @@
+{% from "components/inset-text/macro.njk" import govukInsetText %}
+
 <h2 class="heading-medium">
   Optional content
 </h2>
@@ -8,11 +10,12 @@
   For example if you only want to show something to people who are under
   18:
 </p>
-<div class="panel panel-border-wide">
-  <p class="govuk-body">
-    ((under18??Please get your application signed by a parent or
-    guardian.))
-  </p>
+<div>
+  {{ govukInsetText({
+    "text": "((under18??Please get your application signed by a parent or
+    guardian.))",
+    "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+  }}
 </div>
 <p class="govuk-body">
   For each person you send this message to, specify ‘yes’ or ‘no’ to
diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html
index 8730dacc2..cf3f04ccf 100644
--- a/app/templates/partials/templates/guidance-personalisation.html
+++ b/app/templates/partials/templates/guidance-personalisation.html
@@ -1,11 +1,14 @@
+{% from "components/inset-text/macro.njk" import govukInsetText %}
+
 <h2 class="heading-medium">
   Personalisation
 </h2>
 <p class="bottom-gutter-1-3">
   Use double brackets to personalise your message:
 </p>
-<div class="panel panel-border-wide">
-  <p class="govuk-body">
-    Hello ((first name)), your reference is ((ref number))
-  </p>
+<div>
+  {{ govukInsetText({
+    "text": "Hello ((first name)), your reference is ((ref number))",
+    "classes": "govuk-!-margin-top-0"})
+  }}
 </div>
diff --git a/app/templates/partials/templates/guidance-send-a-document.html b/app/templates/partials/templates/guidance-send-a-document.html
index e78cbc9ce..2ce938a47 100644
--- a/app/templates/partials/templates/guidance-send-a-document.html
+++ b/app/templates/partials/templates/guidance-send-a-document.html
@@ -1,12 +1,15 @@
+{% from "components/inset-text/macro.njk" import govukInsetText %}
+
 <h2 class="heading-medium">
   Send a document by email
 </h2>
 <p class="govuk-body">
   Use double brackets to add a placeholder field to your template. This will contain a secure link to download the document.
 </p>
-<div class="panel panel-border-wide">
-  <p class="govuk-body">
-    Download your document at: ((link_to_file))
-  </p>
+<div>
+  {{ govukInsetText({
+    "text": "Download your document at: ((link_to_file))",
+    "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+  }}
 </div>
   Next, use the API to upload your document. Follow the instructions to send a document by email in the <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.documentation') }}">API documentation</a>.
diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html
index 8e87c32d3..8a4b25844 100644
--- a/app/templates/views/edit-email-template.html
+++ b/app/templates/views/edit-email-template.html
@@ -31,7 +31,7 @@
             'Save'
           ) }}
         </div>
-        <aside class="govuk-grid-column-full">
+        <div class="govuk-grid-column-full">
           {% include "partials/templates/guidance-formatting.html" %}
           {% include "partials/templates/guidance-personalisation.html" %}
           {% include "partials/templates/guidance-optional-content.html" %}
@@ -39,7 +39,7 @@
           {% if current_service.has_permission('upload_document') %}
             {% include "partials/templates/guidance-send-a-document.html" %}
           {% endif %}
-        </aside>
+        </div>
       </div>
     {% endcall %}
 
diff --git a/app/templates/views/edit-letter-template.html b/app/templates/views/edit-letter-template.html
index 89369d39b..203c9cf0b 100644
--- a/app/templates/views/edit-letter-template.html
+++ b/app/templates/views/edit-letter-template.html
@@ -28,11 +28,11 @@
             'Save'
           ) }}
         </div>
-        <aside class="govuk-grid-column-three-quarters">
+        <div class="govuk-grid-column-three-quarters">
           {% include "partials/templates/guidance-formatting-letters.html" %}
           {% include "partials/templates/guidance-personalisation.html" %}
           {% include "partials/templates/guidance-optional-content.html" %}
-        </aside>
+        </div>
       </div>
     {% endcall %}
 
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index 749927c08..8522e4e38 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -41,12 +41,12 @@
           </div>
           {{ page_footer('Save') }}
         </div>
-        <aside class="govuk-grid-column-full">
+        <div class="govuk-grid-column-full">
           {% include "partials/templates/guidance-personalisation.html" %}
           {% include "partials/templates/guidance-optional-content.html" %}
           {% include "partials/templates/guidance-links.html" %}
           {% include "partials/templates/guidance-character-count.html" %}
-        </aside>
+        </div>
       </div>
     {% endcall %}
 
diff --git a/app/templates/views/templates/edit-template-postage.html b/app/templates/views/templates/edit-template-postage.html
index b7bffeb8a..04d01a6d5 100644
--- a/app/templates/views/templates/edit-template-postage.html
+++ b/app/templates/views/templates/edit-template-postage.html
@@ -19,9 +19,9 @@
           {{ form.postage }}
           {{ page_footer('Save') }}
         </div>
-        <aside class="govuk-grid-column-three-quarters">
+        <div class="govuk-grid-column-three-quarters">
           {% include "partials/templates/guidance-postage.html" %}
-        </aside>
+        </div>
       </div>
     {% endcall %}