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] 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>.