Give more guidance about what to put in templates

There are some common questions that keep coming up when users are
editing or creating templates. This commit adds a pattern for sections
of guidance which can be shown/hidden.

It then modifies the guidance as follows.

Change:

- guidance about placeholders; give an example about what to do and what
  not to do (because the mistake we keep seeing people make is putting
  the thing itself, not the name of the thing)

Add (pretty basic at the moment but a need for these has come out of
research):

- guidance about links
- guidance about message length for text messages

app/assets/stylesheets/components/secondary-button.scss

@@ -6,3 +6,12 @@
   padding-right: 0;
   text-align: center;
 }
+
+.tertiary-button {
+  @include button($grey-3);
+  padding: 0.3em 0.1em 0.2em 0.1em;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: left;
+}

app/templates/partials/templates/guidance-character-count.html

@@ -0,0 +1,12 @@
+<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>

app/templates/partials/templates/guidance-links.html

@@ -0,0 +1,8 @@
+<details>
+  <summary class="button tertiary-button">Links and URLs</summary>
+  <div id="guidance-personalisation">
+    <p>
+      Always use full URLs, including the http://
+    </p>
+  </div>
+</details>

app/templates/partials/templates/guidance-personalisation.html

@@ -0,0 +1,14 @@
+<details>
+  <summary class="button tertiary-button">Personalisation</summary>
+  <div id="guidance-personalisation">
+    <p>
+      Use double brackets to add personalisation.
+    </p>
+    <p>
+      Yes: ((name))
+    </p>
+    <p>
+      No: ((Helen))
+    </p>
+  </div>
+</details>

app/templates/views/edit-email-template.html

@@ -16,9 +16,9 @@
       <div class="grid-row">
         <div class="column-two-thirds">
           {{ 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">
-          {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
           {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
           {{ page_footer(
             'Save',
@@ -26,13 +26,11 @@
             delete_link_text='Delete this template'
           ) }}
         </div>
-        <div class="column-one-third">
-          <label for='template_content' class='placeholder-hint banner-mode' data-textboxes-selector='#template_content,#subject' data-target-textbox-selector="#template_content">
-            <div class="" id="placeholder-hint" aria-live="polite">
-              <p>Anything in ((double brackets)) gets replaced when you send this message</p>
-            </div>
-          </label>
-        </div>
+        <aside class="column-one-third">
+          <h2 style="margin: 0 0 5px 0;">Help</h2>
+          {% include "partials/templates/guidance-personalisation.html" %}
+          {% include "partials/templates/guidance-links.html" %}
+        </aside>
       </div>
     </form>
 

app/templates/views/edit-sms-template.html

@@ -18,20 +18,19 @@
           {{ textbox(form.name, width='1-1', hint='Your recipients won’t see this') }}
         </div>
         <div class="column-two-thirds">
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1') }}
+          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=5) }}
           {{ page_footer(
             'Save',
             delete_link=url_for('.delete_service_template', service_id=current_service.id, template_id=template_id) if template_id or None,
             delete_link_text='Delete this template'
           ) }}
         </div>
-        <div class="column-one-third">
-          <label for='template_content' class='placeholder-hint banner-mode' data-textboxes-selector='#template_content' data-target-textbox-selector="#template_content">
-            <div class="" id="placeholder-hint" aria-live="polite">
-              <p>Anything in ((double brackets)) gets replaced when you send this message</p>
-            </div>
-          </label>
-        </div>
+        <aside class="column-one-third">
+          <h2 style="margin: 0 0 5px 0;">Help</h2>
+          {% include "partials/templates/guidance-personalisation.html" %}
+          {% include "partials/templates/guidance-links.html" %}
+          {% include "partials/templates/guidance-character-count.html" %}
+        </aside>
       </div>
     </form>