819 - Make template help more prominent

app/templates/components/components/inset-text/template.njk

@@ -1,4 +1,4 @@
-<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-inset-text {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="bg-base-lightest padding-y-1 padding-x-2 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {{ params.html | safe if params.html else params.text }}
 </div>

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

@@ -1,8 +1,14 @@
-<h2 class="font-body-lg">Message length</h2>
+<h3 class="usa-accordion__heading">
-<p class="usa-body">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="message-length">
-  If your message is long then it will
+    Message length
-  cost more.
+  </button>
-</p>
+</h3>
-<p class="usa-body">
+<div id="message-length" class="usa-accordion__content usa-prose">
-  See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
+  <p class="usa-body">
-</p>
+    If your message is long then it will
+    cost more.
+  </p>
+  <p class="usa-body">
+    See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
+  </p>
+</div>

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

@@ -1,9 +1,15 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="font-body-lg">Links and URLs</h2>
+<h3 class="usa-accordion__heading">
-<p class="bottom-gutter-1-3">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="links-and-urls">
-  Always use full URLs, starting with https://. For example:
+    Links and URLs
-{{ usaInsetText({
+  </button>
-  "text": "Apply now at https://www.usa.gov/example",
+</h3>
-  "classes": "usa-body"})
+<div id="links-and-urls" class="usa-accordion__content usa-prose">
-}}
+  <p>
+    Always use full URLs, starting with https://. For example:
+    {{ usaInsetText({
+    "text": "Apply now at https://www.usa.gov/example",
+    "classes": "usa-body"})
+    }}
+</div>

app/templates/partials/templates/guidance-optional-content.html

@@ -1,21 +1,25 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="font-body-lg">
+<h3 class="usa-accordion__heading">
-  Optional content
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a2">
-</h2>
+    Optional content
-<p class="usa-body">
+  </button>
-  Use double brackets and ‘??’ to define optional content.
+</h3>
-</p>
+<div id="m-a2" class="usa-accordion__content usa-prose">
-<p class="bottom-gutter-1-3">
+  <p class="usa-body">
-  For example if you only want to show something to people who are under
+    Use double brackets and ‘??’ to define optional content.
-  18:
+  </p>
-</p>
+  <p class="bottom-gutter-1-3">
-{{ usaInsetText({
+    For example if you only want to show something to people who are under
+    18:
+  </p>
+  {{ usaInsetText({
   "text": "((under18??Please get your application signed by a parent or
   guardian.))",
   "classes": "usa-body"})
-}}
+  }}
-<p class="usa-body">
+  <p class="usa-body">
-  For each person you send this message to, specify ‘yes’ or ‘no’ to
+    For each person you send this message to, specify ‘yes’ or ‘no’ to
-  show or hide this content.
+    show or hide this content.
-</p>
+  </p>
+</div>

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

@@ -1,12 +0,0 @@
-{% from "components/components/inset-text/macro.njk" import usaInsetText %}
-
-<h2 class="font-body-lg">
-  Personalization
-</h2>
-<p class="bottom-gutter-1-3">
-  Use double brackets to personalize your message:
-</p>
-{{ usaInsetText({
-  "text": "Hello ((first name)), your reference is ((ref number))",
-  "classes": ""})
-}}

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

@@ -0,0 +1,17 @@
+{% from "components/components/inset-text/macro.njk" import usaInsetText %}
+
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="personalization">
+    Personalization
+  </button>
+</h3>
+<div id="personalization" class="usa-accordion__content usa-prose">
+  <p class="bottom-gutter-1-3">
+    Use double brackets to personalize your message:
+  </p>
+  {{ usaInsetText({
+    "text": "Hello ((first name)), your reference is ((ref number))",
+    "classes": ""})
+  }}
+</div>
+

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

@@ -37,7 +37,7 @@
         </div>
         <div class="grid-col-12">
           {% include "partials/templates/guidance-formatting.html" %}
-          {% include "partials/templates/guidance-personalisation.html" %}
+          {% include "partials/templates/guidance-personalization.html" %}
           {% include "partials/templates/guidance-optional-content.html" %}
           {% include "partials/templates/guidance-links.html" %}
           {% include "partials/templates/guidance-send-a-document.html" %}

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

@@ -20,11 +20,9 @@
 
     {{ page_header('{} text message template'.format(heading_action)) }}
 
-    {{ usaAlert({
+    <a class="usa-link display-inline-flex margin-top-05" href="#help">
-      "type": "info",
+      How to customize your message
-      "text": "Don't worry, saving the template will not send",
+    </a>
-      "classes": "margin-top-2 usa-button--secondary"
-    }) }}
 
     {% if current_service.prefix_sms %}
       {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
@@ -32,7 +30,7 @@
 
     {% call form_wrapper() %}
       <div class="grid-row">
-        <div class="grid-col-8">
+        <div class="tablet:grid-col-8 mobile-lg:grid-col-12">
           {{ form.name(param_extensions={
             "extra_form_group_classes": "margin-bottom-2",
             "hint": {"text": "Your recipients will not see this"}
@@ -50,22 +48,36 @@
             {{ form.process_type }}
           {% endif %}
         </div>
-        <div class="grid-col-12">
+        <div class="grid-row">
-          <div class="template-content-count">
+          <div class="grid-col-12">
-            <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}" aria-live="polite">
+            <div class="template-content-count">
-              &nbsp;
+              <div data-module="update-status" data-target="template_content"
+                data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}"
+                aria-live="polite">
+                &nbsp;
+              </div>
             </div>
           </div>
-          {{ page_footer('Save') }}
-          <p class="usa-hint">
-            After saving, you'll have the option to send 🚀
-          </p>
         </div>
-        <div class="grid-col-12">
+        <div class="grid-row width-full">
-          {% include "partials/templates/guidance-personalisation.html" %}
+            <div class="tablet:grid-col-2 mobile-lg:grid-col-12">
-          {% include "partials/templates/guidance-optional-content.html" %}
+              {{ page_footer('Save') }}
-          {% include "partials/templates/guidance-links.html" %}
+            </div>
-          {% include "partials/templates/guidance-character-count.html" %}
+          <div class="tablet:grid-col-10 mobile-lg:grid-col-12">
+              <p class="usa-hint margin-top-5 tablet:margin-left-neg-2">
+                After saving, you'll have the option to send.
+              </p>
+          </div>
+        </div>
+      
+        <div class="tablet:grid-col-9 mobile-lg:grid-col-12">
+          <h2 id="help" class="font-body-xl margin-top-2">How to customize your message</h2>
+          <div class="usa-accordion usa-accordion--bordered usa-accordion--multiselectable" data-allow-multiple>
+            {% include "partials/templates/guidance-personalization.html" %}
+            {% include "partials/templates/guidance-optional-content.html" %}
+            {% include "partials/templates/guidance-links.html" %}
+            {% include "partials/templates/guidance-character-count.html" %}
+          </div>
         </div>
       </div>
     {% endcall %}