From ee52e72f9094587988615ff428d02d50a3b9c867 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 1 Jul 2016 17:07:39 +0100
Subject: [PATCH 1/2] Move template guidance underneath
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two problems with having it on the side:
- some users didn’t see it at all
- there wasn’t space to have additional guidance about Markdown-style
  formatting
---
 .../templates/guidance-character-count.html   | 20 ++++++--------
 .../partials/templates/guidance-links.html    | 12 +++------
 .../templates/guidance-personalisation.html   | 26 +++++++++----------
 app/templates/views/edit-email-template.html  |  3 +--
 app/templates/views/edit-sms-template.html    |  3 +--
 5 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/app/templates/partials/templates/guidance-character-count.html b/app/templates/partials/templates/guidance-character-count.html
index b11dae62e..9dea399f4 100644
--- a/app/templates/partials/templates/guidance-character-count.html
+++ b/app/templates/partials/templates/guidance-character-count.html
@@ -1,12 +1,8 @@
-<details>
-  <summary class="button tertiary-button">Message length</summary>
-  <div id="guidance-personalisation">
-    <p>
-      If your message is long then it will
-      cost more.
-    </p>
-    <p>
-      See <a href="{{ url_for('.pricing') }}">pricing</a> for details.
-    </p>
-  </div>
-</details>
+<h2 class="heading-medium">Message length</h2>
+<p>
+  If your message is long then it will
+  cost more.
+</p>
+<p>
+  See <a href="{{ url_for('.pricing') }}">pricing</a> for details.
+</p>
diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html
index 2d7aab039..c53dcca4a 100644
--- a/app/templates/partials/templates/guidance-links.html
+++ b/app/templates/partials/templates/guidance-links.html
@@ -1,8 +1,4 @@
-<details>
-  <summary class="button tertiary-button">Links and URLs</summary>
-  <div id="guidance-personalisation">
-    <p>
-      Always use full URLs, starting with https://
-    </p>
-  </div>
-</details>
+<h2 class="heading-medium">Links and URLs</h2>
+<p>
+  Always use full URLs, starting with https://
+</p>
diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html
index 3cae73723..0fa4f087a 100644
--- a/app/templates/partials/templates/guidance-personalisation.html
+++ b/app/templates/partials/templates/guidance-personalisation.html
@@ -1,14 +1,12 @@
-<details>
-  <summary class="button tertiary-button">Personalisation</summary>
-  <div id="guidance-personalisation">
-    <p>
-      Use double brackets to add personalisation.
-    </p>
-    <p>
-      Correct: ((name))
-    </p>
-    <p>
-      Incorrect: ((Helen))
-    </p>
-  </div>
-</details>
+<h2 class="heading-medium">
+  Personalisation
+</h2>
+<p>
+  Use double brackets to add personalisation.
+</p>
+<p>
+  Correct: ((name))
+</p>
+<p>
+  Incorrect: ((Helen))
+</p>
diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html
index 1e3db961c..dd94b8962 100644
--- a/app/templates/views/edit-email-template.html
+++ b/app/templates/views/edit-email-template.html
@@ -26,8 +26,7 @@
             delete_link_text='Delete this template'
           ) }}
         </div>
-        <aside class="column-one-third">
-          <h2 style="margin: 0 0 5px 0;">Help</h2>
+        <aside class="column-whole">
           {% include "partials/templates/guidance-personalisation.html" %}
           {% include "partials/templates/guidance-links.html" %}
         </aside>
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index 45d6d7fe4..4c302d507 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -25,8 +25,7 @@
             delete_link_text='Delete this template'
           ) }}
         </div>
-        <aside class="column-one-third">
-          <h2 style="margin: 0 0 5px 0;">Help</h2>
+        <aside class="column-whole">
           {% include "partials/templates/guidance-personalisation.html" %}
           {% include "partials/templates/guidance-links.html" %}
           {% include "partials/templates/guidance-character-count.html" %}

From bc715b3dd8c737c47a38fbaa7e4b3393a2df9c76 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 14 Jul 2016 16:52:53 +0100
Subject: [PATCH 2/2] =?UTF-8?q?Add=20Gwen=E2=80=99s=20initial=20guidance?=
 =?UTF-8?q?=20about=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is based on some work Gwen did for Civil Service Digital. Let’s
get it in for now so that we have a starting point from which to
improve.

This specifically doesn’t reference ‘optional’ placeholders because I
don’t know how best to explain those yet.
---
 .../templates/guidance-formatting.html        | 27 +++++++++++++++++++
 .../partials/templates/guidance-links.html    |  5 ++++
 .../templates/guidance-personalisation.html   | 13 +++++----
 app/templates/views/edit-email-template.html  |  5 ++--
 4 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 app/templates/partials/templates/guidance-formatting.html

diff --git a/app/templates/partials/templates/guidance-formatting.html b/app/templates/partials/templates/guidance-formatting.html
new file mode 100644
index 000000000..c17fbb452
--- /dev/null
+++ b/app/templates/partials/templates/guidance-formatting.html
@@ -0,0 +1,27 @@
+<h2 class="heading-medium">Formatting</h2>
+<p>
+  To put a title in your template, use a hash:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    # This is a title
+  </p>
+</div>
+<p>
+  To make bullet points, use asterisks:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    * point 1<br/>
+    * point 2<br/>
+    * point 3<br/>
+  </p>
+</div>
+<p>
+  To add a callout, use a caret:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    ^ You must tell us if your circumstances change
+  </p>
+</div>
diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html
index c53dcca4a..34ff7cf82 100644
--- a/app/templates/partials/templates/guidance-links.html
+++ b/app/templates/partials/templates/guidance-links.html
@@ -2,3 +2,8 @@
 <p>
   Always use full URLs, starting with https://
 </p>
+<div class="panel panel-border-wide">
+  <p>
+    Apply now at https://www.gov.uk/example
+  </p>
+</div>
diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html
index 0fa4f087a..bc3c44d91 100644
--- a/app/templates/partials/templates/guidance-personalisation.html
+++ b/app/templates/partials/templates/guidance-personalisation.html
@@ -2,11 +2,10 @@
   Personalisation
 </h2>
 <p>
-  Use double brackets to add personalisation.
-</p>
-<p>
-  Correct: ((name))
-</p>
-<p>
-  Incorrect: ((Helen))
+  Use double brackets to personalise your message:
 </p>
+<div class="panel panel-border-wide">
+  <p>
+    Hello ((first name)), your reference is ((ref number))
+  </p>
+</div>
diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html
index dd94b8962..669b0e278 100644
--- a/app/templates/views/edit-email-template.html
+++ b/app/templates/views/edit-email-template.html
@@ -14,11 +14,11 @@
 
     <form method="post">
       <div class="grid-row">
-        <div class="column-two-thirds">
+        <div class="column-three-quarters">
           {{ textbox(form.name, width='1-1', hint='Your recipients won’t see this', rows=10) }}
           {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
         </div>
-        <div class="column-two-thirds">
+        <div class="column-three-quarters">
           {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
           {{ page_footer(
             'Save',
@@ -27,6 +27,7 @@
           ) }}
         </div>
         <aside class="column-whole">
+          {% include "partials/templates/guidance-formatting.html" %}
           {% include "partials/templates/guidance-personalisation.html" %}
           {% include "partials/templates/guidance-links.html" %}
         </aside>