From ac794dbc5bacbdc3812a2565b3969edb421181a4 Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Fri, 19 Feb 2021 13:55:06 +0000
Subject: [PATCH 1/4] Add Sass for GOV.UK Frontend inset-text

---
 app/assets/stylesheets/govuk-frontend/_all.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss
index 8249d38f3..6cf2aff39 100644
--- a/app/assets/stylesheets/govuk-frontend/_all.scss
+++ b/app/assets/stylesheets/govuk-frontend/_all.scss
@@ -34,6 +34,7 @@ $govuk-assets-path: "/static/";
 @import "components/radios/_radios";
 @import "components/checkboxes/_checkboxes";
 @import "components/input/_input";
+@import "components/inset-text/_inset-text";
 
 // update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
 @import "./focus/components";

From 79a0a14b38c69a148adc243cecb233897e173254 Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Fri, 19 Feb 2021 13:55:40 +0000
Subject: [PATCH 2/4] Copy inset-text component from GOV.UK Frontend

---
 gulpfile.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/gulpfile.js b/gulpfile.js
index 200988779..b803c83f1 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -71,7 +71,8 @@ const copy = {
         'label',
         'checkboxes',
         'radios',
-        'input'
+        'input',
+        'inset-text'
       ];
       let done = 0;
 

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 3/4] 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 %}
 

From 792860085ec27f93d05edf1cdf8b77136663a8a2 Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Tue, 23 Feb 2021 13:14:07 +0000
Subject: [PATCH 4/4] Get rid of unecessary <div> and use the correct gutter
 class

* We don't need the inset text to be inside `<div>` tags because the
component adds its own
* Replaced `bottom-gutter` with `govuk-!-margin-bottom-6` since this
change will be needed across the app at some point.
---
 .../guidance-formatting-letters.html          | 42 ++++++++-----------
 .../templates/guidance-formatting.html        | 20 ++++-----
 .../partials/templates/guidance-links.html    | 10 ++---
 .../templates/guidance-optional-content.html  | 12 +++---
 .../templates/guidance-personalisation.html   | 10 ++---
 .../templates/guidance-send-a-document.html   | 13 +++---
 6 files changed, 46 insertions(+), 61 deletions(-)

diff --git a/app/templates/partials/templates/guidance-formatting-letters.html b/app/templates/partials/templates/guidance-formatting-letters.html
index 7e849955b..dec743519 100644
--- a/app/templates/partials/templates/guidance-formatting-letters.html
+++ b/app/templates/partials/templates/guidance-formatting-letters.html
@@ -4,33 +4,27 @@
 <p class="govuk-body">
   To put a heading in your template, use a hash:
 </p>
-<div>
-  {{ govukInsetText({
-    "text": "# This is a heading",
-    "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
-  }}
-</div>
+{{ govukInsetText({
+  "text": "# This is a heading",
+  "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+}}
 <p class="govuk-body">
   To make bullet points, use asterisks:
 </p>
-<div>
-  {{ govukInsetText({
-    "html": "* point 1<br/>
-             * point 2<br/>
-             * point 3<br/>",
-    "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
-  }}
-</div>
+{{ govukInsetText({
+  "html": "* point 1<br/>
+            * point 2<br/>
+            * point 3<br/>",
+  "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+}}
 <p class="govuk-body">
   To insert a page break, use three asterisks:
 </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>
+{{ govukInsetText({
+  "html": "Content on page 1<br/>
+            <br/>
+            ***<br/>
+            <br/>
+            Content on page 2<br/>",
+  "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+}}
diff --git a/app/templates/partials/templates/guidance-formatting.html b/app/templates/partials/templates/guidance-formatting.html
index 6dcb73dcf..da4a6b8bd 100644
--- a/app/templates/partials/templates/guidance-formatting.html
+++ b/app/templates/partials/templates/guidance-formatting.html
@@ -4,13 +4,13 @@
 <p class="bottom-gutter-1-3">
   To put a title in your template, use a hash:
 </p>
-<div class="bottom-gutter">
+<div class="govuk-!-margin-bottom-6">
   {{ 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="bottom-gutter">
+<div class="govuk-!-margin-bottom-6">
   {{ govukInsetText({
     "html": "* point 1<br/>
              * point 2<br/>
@@ -21,17 +21,15 @@
 <p class="bottom-gutter-1-3">
   To add inset text, use a caret:
 </p>
-<div class="bottom-gutter">
+<div class="govuk-!-margin-bottom-6">
   {{ 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>
-  {{ 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>
+{{ 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"})
+}}
diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html
index 2259c5c21..937a60470 100644
--- a/app/templates/partials/templates/guidance-links.html
+++ b/app/templates/partials/templates/guidance-links.html
@@ -4,9 +4,7 @@
 <p class="bottom-gutter-1-3">
   Always use full URLs, starting with https://
 </p>
-<div>
-  {{ govukInsetText({
-    "text": "Apply now at https://www.gov.uk/example",
-    "classes": "govuk-!-margin-top-0"})
-  }}
-</div>
+{{ govukInsetText({
+  "text": "Apply now at https://www.gov.uk/example",
+  "classes": "govuk-!-margin-top-0"})
+}}
diff --git a/app/templates/partials/templates/guidance-optional-content.html b/app/templates/partials/templates/guidance-optional-content.html
index 5bbe2aa33..2baed07db 100644
--- a/app/templates/partials/templates/guidance-optional-content.html
+++ b/app/templates/partials/templates/guidance-optional-content.html
@@ -10,13 +10,11 @@
   For example if you only want to show something to people who are under
   18:
 </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>
+{{ govukInsetText({
+  "text": "((under18??Please get your application signed by a parent or
+  guardian.))",
+  "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+}}
 <p class="govuk-body">
   For each person you send this message to, specify ‘yes’ or ‘no’ to
   show or hide this content.
diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html
index cf3f04ccf..5ca896a41 100644
--- a/app/templates/partials/templates/guidance-personalisation.html
+++ b/app/templates/partials/templates/guidance-personalisation.html
@@ -6,9 +6,7 @@
 <p class="bottom-gutter-1-3">
   Use double brackets to personalise your message:
 </p>
-<div>
-  {{ govukInsetText({
-    "text": "Hello ((first name)), your reference is ((ref number))",
-    "classes": "govuk-!-margin-top-0"})
-  }}
-</div>
+{{ govukInsetText({
+  "text": "Hello ((first name)), your reference is ((ref number))",
+  "classes": "govuk-!-margin-top-0"})
+}}
diff --git a/app/templates/partials/templates/guidance-send-a-document.html b/app/templates/partials/templates/guidance-send-a-document.html
index 2ce938a47..a5c138fc9 100644
--- a/app/templates/partials/templates/guidance-send-a-document.html
+++ b/app/templates/partials/templates/guidance-send-a-document.html
@@ -6,10 +6,9 @@
 <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>
-  {{ 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>.
+{{ govukInsetText({
+  "text": "Download your document at: ((link_to_file))",
+  "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+}}
+
+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>.