Merge branch 'main' of https://github.com/GSA/notifications-admin into notify-678

app/assets/javascripts/errorBanner.js

@@ -12,6 +12,5 @@
     hideBanner: () => $('.banner-dangerous').addClass('display-none'),
     showBanner: () => $('.banner-dangerous')
       .removeClass('display-none')
-      .trigger('focus'),
   };
 })(window);

app/assets/javascripts/fileUpload.js

@@ -15,9 +15,9 @@
 
       // The label gets styled like a button and is used to hide the native file upload control. This is so that
       // users see a button that looks like the others on the site.
-// 
-      this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1');
 
+      this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1').attr( {role: 'button', tabindex: '0'} );
+      
       // Clear the form if the user navigates back to the page
       $(window).on("pageshow", () => this.$form[0].reset());
 

app/assets/javascripts/main.js

@@ -16,8 +16,6 @@ $(() => GOVUK.modules.start());
 
 $(() => $('.error-message, .usa-error-message').eq(0).parent('label').next('input').trigger('focus'));
 
-$(() => $('.banner-dangerous').eq(0).trigger('focus'));
-
 $(() => $('.govuk-header__container').on('click', function() {
   $(this).css('border-color', '#005ea5');
 }));

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -414,7 +414,6 @@ details form {
       display: block;
       box-sizing: border-box;
       position: relative;
-      margin: 0;
       padding: 4px;
       overflow: hidden;
       line-height: 1.6;

app/templates/components/components/alert/template.njk

@@ -11,7 +11,7 @@
   <div class="usa-alert__body">
     <h{{params.header_level}} class="usa-alert__heading">{{params.heading}}</h{{params.header_level}}>
     <p class="usa-alert__text">
-      {{params.text}}
+      {{params.text | safe }}
     </p>
   </div>
 </div>

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/check/message-too-long.html

@@ -1,7 +1,9 @@
-<h1 class='banner-title'>
-  Message too long
-</h1>
-<p class="usa-body">
-  Text messages cannot be longer than {{ SMS_CHAR_COUNT_LIMIT }} characters.
-  Your message is {{ template.content_count }} characters.
-</p>
+<div class="usa-alert usa-alert--error" role="alert">
+  <div class="usa-alert__body">
+    <h1 class="usa-alert__heading">Message too long</h1>
+    <p class="usa-alert__text">
+      Text messages cannot be longer than {{ SMS_CHAR_COUNT_LIMIT }} characters.
+      Your message is {{ template.content_count }} characters.
+    </p>
+  </div>
+</div>

app/templates/partials/check/not-allowed-to-send-to.html

@@ -1,12 +1,16 @@
-<h1 class='banner-title' data-module="track-error" data-error-type="Trial mode: bad recipients" data-error-label="{{ upload_id }}">
-  You cannot send to
-  {{ 'this' if count_of_recipients == 1 else 'these' }}
-  {{ template_type_label }}
-  {%- if count_of_recipients != 1 -%}
-    {{ 'es' if 'email address' == template_type_label else 's' }}
-  {%- endif %}
-</h1>
-<p class="usa-body">
-  In <a class="usa-link" href="{{ url_for('.trial_mode_new') }}">trial mode</a> you can only
-  send to yourself and members of your team
-</p>
+<div class="usa-alert usa-alert--error" role="alert">
+  <div class="usa-alert__body">
+    <h1 class="usa-alert__heading">
+      You cannot send to
+      {{ 'this' if count_of_recipients == 1 else 'these' }}
+      {{ template_type_label }}
+      {%- if count_of_recipients != 1 -%}
+      {{ 'es' if 'email address' == template_type_label else 's' }}
+      {%- endif %}
+    </h1>
+    <p class="usa-alert__text">
+      In <a class="usa-link" href="{{ url_for('.trial_mode_new') }}">trial mode</a> you can only
+      send to yourself and members of your team
+    </p>
+  </div>
+</div>

app/templates/partials/check/sent-previously.html

@@ -1,6 +1,8 @@
-<h1 class='banner-title' data-module="track-error" data-error-type="File previously sent" data-error-label="{{ upload_id }}">
-  These messages have already been sent today
-</h1>
-<p class="usa-body">
-  If you need to resend them, rename the file and upload it again.
-</p>
+<div class="usa-alert usa-alert--error" role="alert">
+  <div class="usa-alert__body">
+    <h1 class="usa-alert__heading">These messages have already been sent today</h1>
+    <p class="usa-alert__text">
+      If you need to resend them, rename the file and upload it again.
+    </p>
+  </div>
+</div>

app/templates/partials/check/too-many-messages.html

@@ -1,23 +1,30 @@
-<h1 class='banner-title' data-module="track-error" data-error-type="Trial mode: too many recipients" data-error-label="{{ upload_id }}">
-  {% if original_file_name %}
-    Too many recipients
-  {% else %}
-    Daily limit reached
-  {% endif %}
-</h1>
-<p class="usa-body">
-  You can only send {{ current_service.message_limit|format_thousands }} messages per day
-  {%- if current_service.trial_mode %}
-    in <a class="usa-link" href="{{ url_for('.trial_mode_new')}}">trial mode</a>
-  {%- endif -%}
-  .
-</p>
-{% if original_file_name %}
-  <p class="usa-body">
-    {% if current_service.message_limit != remaining_messages %}
+<div class="usa-alert usa-alert--error" role="alert">
+  <div class="usa-alert__body">
+    <h1 class="usa-alert__heading">
+      {% if original_file_name %}
+      Too many recipients
+      {% else %}
+      Daily limit reached
+      {% endif %}
+    </h1>
+    <p class="usa-alert__text">
+      You can only send {{ current_service.message_limit|format_thousands }} messages per day
+      {%- if current_service.trial_mode %}
+      in <a class="usa-link" href="{{ url_for('.trial_mode_new')}}">trial mode</a>
+      {%- endif -%}
+      .
+    </p>
+    {% if original_file_name %}
+    <p class="usa-alert__text">
+      {% if current_service.message_limit != remaining_messages %}
       You can still send {{ remaining_messages|format_thousands }} messages today, but
+      {% endif %}
+      ‘{{ original_file_name }}’ contains
+      {{ count_of_recipients|recipient_count(template.template_type) }}.
+    </p>
     {% endif %}
-    ‘{{ original_file_name }}’ contains
-    {{ count_of_recipients|recipient_count(template.template_type) }}.
-  </p>
-{% endif %}
+  </div>
+</div>
+
+
+

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

@@ -1,8 +1,14 @@
-<h2 class="font-body-lg">Message length</h2>
-<p class="usa-body">
-  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>
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="message-length">
+    Message length
+  </button>
+</h3>
+<div id="message-length" class="usa-accordion__content usa-prose">
+  <p class="usa-body">
+    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>
-<p class="bottom-gutter-1-3">
-  Always use full URLs, starting with https://. For example:
-{{ usaInsetText({
-  "text": "Apply now at https://www.usa.gov/example",
-  "classes": "usa-body"})
-}}
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="links-and-urls">
+    Links and URLs
+  </button>
+</h3>
+<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">
-  Optional content
-</h2>
-<p class="usa-body">
-  Use double brackets and ‘??’ to define optional content.
-</p>
-<p class="bottom-gutter-1-3">
-  For example if you only want to show something to people who are under
-  18:
-</p>
-{{ usaInsetText({
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a2">
+    Optional content
+  </button>
+</h3>
+<div id="m-a2" class="usa-accordion__content usa-prose">
+  <p class="usa-body">
+    Use double brackets and ‘??’ to define optional content.
+  </p>
+  <p class="bottom-gutter-1-3">
+    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">
-  For each person you send this message to, specify ‘yes’ or ‘no’ to
-  show or hide this content.
-</p>
+  }}
+  <p class="usa-body">
+    For each person you send this message to, specify ‘yes’ or ‘no’ to
+    show or hide this content.
+  </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/check/column-errors.html

@@ -6,193 +6,208 @@
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 
 {% block service_page_title %}
-  Error
+Error
 {% endblock %}
 
 {% block backLink %}
-  {{ usaBackLink({ "href": back_link }) }}
+{{ usaBackLink({ "href": back_link }) }}
 {% endblock %}
 
 {% block maincolumn_content %}
 
-  <div class="">
-    {% call banner_wrapper(type='dangerous') %}
+<div class="">
+  {% call banner_wrapper(type='dangerous') %}
 
-      {% if recipients.too_many_rows %}
+  {% if recipients.too_many_rows %}
 
-        <h1 class='banner-title' data-module="track-error" data-error-type="Too many rows" data-error-label="{{ upload_id }}">
-          Your file has too many rows
-        </h1>
-        <p>
+  <div class="usa-alert usa-alert--error" role="alert">
+    <div class="usa-alert__body">
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="Too many rows" data-error-label="{{ upload_id }}">Your file has too many rows</h1>
+      <p class="usa-alert__text">
           Notify can process up to
           {{ "{:,}".format(recipients.max_rows) }} rows at once. Your
           file has {{ "{:,}".format(recipients|length) }} rows.
-        </p>
-
-      {% elif not count_of_recipients %}
-
-        <h1 class='banner-title' data-module="track-error" data-error-type="No rows" data-error-label="{{ upload_id }}">
-          Your file is missing some rows
-        </h1>
-        {% if recipients.missing_column_headers %}
-          <p>
-            It needs at least one row of data, and {{ recipients.missing_column_headers | sort() | formatted_list(
-              prefix='a column called',
-              prefix_plural='columns called'
-            ) }}.
-          </p>
-        {% else %}
-          <p>
-            It needs at least one row of data.
-          </p>
-        {% endif %}
-
-      {% elif not recipients.has_recipient_columns %}
-
-        <h1 class='banner-title' data-module="track-error" data-error-type="Missing recipient columns" data-error-label="{{ upload_id }}">
-          There’s a problem with your column names
-        </h1>
-          <p>
-            Your file needs a column called ‘{{ first_recipient_column }}’.
-          </p>
-          <p>
-            Right now it has {{ recipients.column_headers | formatted_list(
-              prefix='one column, called ',
-              prefix_plural='columns called '
-            ) }}.
-          </p>
-
-      {% elif recipients.duplicate_recipient_column_headers %}
-
-        <h1 class='banner-title' data-module="track-error" data-error-type="Duplicate recipient columns" data-error-label="{{ upload_id }}">
-          There’s a problem with your column names
-        </h1>
-           <p>
-            We found more than one column called {{ (
-            recipients.duplicate_recipient_column_headers
-            ) | formatted_list(
-              conjunction='or',
-              prefix='',
-              prefix_plural=''
-            ) }}.
-          </p>
-        <p>
-          Delete or rename one of these columns and try again.
-        </p>
-
-      {% elif recipients.missing_column_headers %}
-
-        <h1 class='banner-title' data-module="track-error" data-error-type="Missing placeholder columns" data-error-label="{{ upload_id }}">
-          Your column names need to match the double brackets in your template
-        </h1>
-          <p>
-            Your file is missing {{ recipients.missing_column_headers | formatted_list(
-              conjunction='and',
-              prefix='a column called ',
-              prefix_plural='columns called '
-            ) }}.
-          </p>
-
-      {% elif sent_previously %}
-
-        {% include "partials/check/sent-previously.html" %}
-
-      {% elif not recipients.allowed_to_send_to %}
-
-        {% with
-          count_of_recipients=count_of_recipients,
-          template_type_label=recipients.recipient_column_headers[0]
-        %}
-          {% include "partials/check/not-allowed-to-send-to.html" %}
-        {% endwith %}
-
-      {% elif recipients.more_rows_than_can_send %}
-
-        {% include "partials/check/too-many-messages.html" %}
-
-      {% endif %}
-
-    {% endcall %}
+      </p>
+    </div>
   </div>
 
+  {% elif not count_of_recipients %}
 
-  <div class="js-stick-at-top-when-scrolling">
-    <div class="form-group">
-      {% if not request.args.from_test %}
-        {{ file_upload(
-          form.file,
-          allowed_file_extensions=allowed_file_extensions,
-          action=url_for('.send_messages', service_id=current_service.id, template_id=template.id),
-          button_text='Upload your file again'
-        ) }}
+  <div class="usa-alert usa-alert--error" role="alert">
+    <div class="usa-alert__body">
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="No rows"
+        data-error-label="{{ upload_id }}">Your file is missing some rows
+      </h1>
+      {% if recipients.missing_column_headers %}
+      <p class="usa-alert-text">
+        It needs at least one row of data, and {{ recipients.missing_column_headers | sort() | formatted_list(
+        prefix='a column called',
+        prefix_plural='columns called'
+        ) }}.
+      </p>
+      {% else %}
+      <p class="usa-alert-text">
+        It needs at least one row of data.
+      </p>
       {% endif %}
     </div>
-    <a href="#content" class="usa-link back-to-top-link">Back to top</a>
   </div>
 
-  {% if not request.args.from_test %}
+  {% elif not recipients.has_recipient_columns %}
 
-    {% set column_headers = recipients._raw_column_headers if recipients.duplicate_recipient_column_headers else recipients.column_headers %}
+  <div class="usa-alert usa-alert--error" role="alert">
+    <div class="usa-alert__body">
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="Missing recipient columns"
+        data-error-label="{{ upload_id }}">There’s a problem with your column names</h1>
+      <p class="usa-alert-text">
+        Your file needs a column called ‘{{ first_recipient_column }}’.
+      </p>
+      <p class="usa-alert-text">
+        Right now it has {{ recipients.column_headers | formatted_list(
+        prefix='one column, called ',
+        prefix_plural='columns called '
+        ) }}.
+      </p>
+    </div>
+  </div>
 
-    <h2 class="font-body-lg" id="file-preview">{{ original_file_name }}</h2>
+  {% elif recipients.duplicate_recipient_column_headers %}
 
-    <div class="fullscreen-content" data-module="fullscreen-table">
-      {% call(item, row_number) list_table(
-        recipients.displayed_rows,
-        caption=original_file_name,
-        caption_visible=False,
-        field_headings=[
-          '<span class="usa-sr-only">Row in file</span><span aria-hidden="true">1</span>'|safe
-        ] + column_headers
-      ) %}
-        {% call index_field() %}
-          <span>
-            {% set displayed_index = item.index + 2 %}
-            {{ displayed_index }}
-          </span>
-        {% endcall %}
-        {% for column in column_headers %}
-          {% if item[column].error and not recipients.missing_column_headers %}
-            {% call field() %}
-              <span>
-                <span class="table-field-error-label">{{ item[column].error }}</span>
-                {{ item[column].data if item[column].data != None }}
-              </span>
-            {% endcall %}
-          {% elif item[column].ignore %}
-            {{ text_field(item[column].data or '', status='default') }}
-          {% else %}
-            {{ text_field(item[column].data or '') }}
-          {% endif %}
-        {% endfor %}
-        {% if item[None].data %}
-          {% for column in item[None].data %}
-            {{ text_field(column, status='default') }}
-          {% endfor %}
-        {% endif %}
-      {% endcall %}
+  <div class="usa-alert usa-alert--error" role="alert">
+    <div class="usa-alert__body">
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="Duplicate recipient columns"
+        data-error-label="{{ upload_id }}">There’s a problem with your column names</h1>
+      <p class="usa-alert__text">
+        We found more than one column called {{ (
+        recipients.duplicate_recipient_column_headers
+        ) | formatted_list(
+        conjunction='or',
+        prefix='',
+        prefix_plural=''
+        ) }}.
+      </p>
+      <p class="usa-alert__text">
+        Delete or rename one of these columns and try again.
+      </p>
+    </div>
+  </div>
+
+  {% elif recipients.missing_column_headers %}
+
+  <div class="usa-alert usa-alert--error" role="alert">
+    <div class="usa-alert__body">
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="Missing placeholder columns"
+        data-error-label="{{ upload_id }}">Your column names need to match the double brackets in your template</h1>
+      <p class="usa-alert__text">
+        Your file is missing {{ recipients.missing_column_headers | formatted_list(
+        conjunction='and',
+        prefix='a column called ',
+        prefix_plural='columns called '
+        ) }}.
+      </p>
+    </div>
+  </div>
+
+  {% elif sent_previously %}
+
+  {% include "partials/check/sent-previously.html" %}
+
+  {% elif not recipients.allowed_to_send_to %}
+
+  {% with
+  count_of_recipients=count_of_recipients,
+  template_type_label=recipients.recipient_column_headers[0]
+  %}
+  {% include "partials/check/not-allowed-to-send-to.html" %}
+  {% endwith %}
+
+  {% elif recipients.more_rows_than_can_send %}
+
+  {% include "partials/check/too-many-messages.html" %}
+
+  {% endif %}
+
+  {% endcall %}
+</div>
+
+
+<div class="js-stick-at-top-when-scrolling">
+  <div class="form-group">
+    {% if not request.args.from_test %}
+    {{ file_upload(
+    form.file,
+    allowed_file_extensions=allowed_file_extensions,
+    action=url_for('.send_messages', service_id=current_service.id, template_id=template.id),
+    button_text='Upload your file again'
+    ) }}
     {% endif %}
   </div>
+  <a href="#content" class="usa-link back-to-top-link">Back to top</a>
+</div>
 
-  {% if recipients.too_many_rows %}
-    <p class="table-show-more-link">
-        Only showing the first {{ count_of_displayed_recipients }} rows
-    </p>
-  {% elif count_of_displayed_recipients < count_of_recipients %}
-    <p class="table-show-more-link">
-      {% if row_errors and not recipients.missing_column_headers %}
-        Only showing the first {{ count_of_displayed_recipients }} rows with errors
-      {% else %}
-        Only showing the first {{ count_of_displayed_recipients }} rows
-      {% endif %}
-    </p>
+{% if not request.args.from_test %}
+
+{% set column_headers = recipients._raw_column_headers if recipients.duplicate_recipient_column_headers else
+recipients.column_headers %}
+
+<h2 class="font-body-lg" id="file-preview">{{ original_file_name }}</h2>
+
+<div class="fullscreen-content" data-module="fullscreen-table">
+  {% call(item, row_number) list_table(
+  recipients.displayed_rows,
+  caption=original_file_name,
+  caption_visible=False,
+  field_headings=[
+  '<span class="usa-sr-only">Row in file</span><span aria-hidden="true">1</span>'|safe
+  ] + column_headers
+  ) %}
+  {% call index_field() %}
+  <span>
+    {% set displayed_index = item.index + 2 %}
+    {{ displayed_index }}
+  </span>
+  {% endcall %}
+  {% for column in column_headers %}
+  {% if item[column].error and not recipients.missing_column_headers %}
+  {% call field() %}
+  <span>
+    <span class="table-field-error-label">{{ item[column].error }}</span>
+    {{ item[column].data if item[column].data != None }}
+  </span>
+  {% endcall %}
+  {% elif item[column].ignore %}
+  {{ text_field(item[column].data or '', status='default') }}
+  {% else %}
+  {{ text_field(item[column].data or '') }}
+  {% endif %}
+  {% endfor %}
+  {% if item[None].data %}
+  {% for column in item[None].data %}
+  {{ text_field(column, status='default') }}
+  {% endfor %}
+  {% endif %}
+  {% endcall %}
+  {% endif %}
+</div>
+
+{% if recipients.too_many_rows %}
+<p class="table-show-more-link">
+  Only showing the first {{ count_of_displayed_recipients }} rows
+</p>
+{% elif count_of_displayed_recipients < count_of_recipients %} <p class="table-show-more-link">
+  {% if row_errors and not recipients.missing_column_headers %}
+  Only showing the first {{ count_of_displayed_recipients }} rows with errors
+  {% else %}
+  Only showing the first {{ count_of_displayed_recipients }} rows
+  {% endif %}
+  </p>
   {% elif row_errors and not recipients.missing_column_headers %}
-    <p class="table-show-more-link">
-      Only showing rows with errors
-    </p>
+  <p class="table-show-more-link">
+    Only showing rows with errors
+  </p>
   {% endif %}
 
   <h2 class="font-body-lg">Preview of {{ template.name }}</h2>
   {{ template|string }}
 
-{% endblock %}
+  {% endblock %}

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({
-      "type": "info",
-      "text": "Don't worry, saving the template will not send",
-      "classes": "margin-top-2 usa-button--secondary"
-    }) }}
+    <a class="usa-link display-inline-flex margin-top-05" href="#help">
+      How to customize your message
+    </a>
 
     {% 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-9 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="template-content-count">
-            <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 class="grid-row">
+          <div class="grid-col-12">
+            <div class="template-content-count">
+              <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">
-          {% 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" %}
+        <div class="grid-row width-full">
+            <div class="tablet:grid-col-2 mobile-lg:grid-col-12">
+              {{ page_footer('Save') }}
+            </div>
+          <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 maxw-mobile-lg" 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 %}

app/templates/views/service-settings.html

@@ -94,17 +94,19 @@
           }}
         {% endcall %}
         
-        {% call settings_row(if_has_permission='sms') %}
-          {{ text_field('Send international text messages') }}
-          {{ boolean_field('international_sms' in current_service.permissions) }}
-          {{ edit_field(
-            'Change',
-            url_for('.service_set_international_sms', service_id=current_service.id),
-            permissions=['manage_service'],
-            suffix='your settings for sending international text messages',
-          )
-          }}
-        {% endcall %}
+        {% if current_user.platform_admin %}
+          {% call settings_row(if_has_permission='sms') %}
+            {{ text_field('Send international text messages') }}
+            {{ boolean_field('international_sms' in current_service.permissions) }}
+            {{ edit_field(
+              'Change',
+              url_for('.service_set_international_sms', service_id=current_service.id),
+              permissions=['manage_service'],
+              suffix='your settings for sending international text messages',
+            )
+            }}
+          {% endcall %}
+        {% endif %}
         
         <!-- {% call settings_row(if_has_permission='sms') %}
                   {{ text_field('Receive text messages') }}

app/templates/views/templates/_template.html

@@ -19,7 +19,7 @@
       <div class="usa-button-group">
         {% if current_user.has_permissions('send_messages', restrict_admin_usage=True) %}
             <a href="{{ url_for(".set_sender", service_id=current_service.id, template_id=template.id) }}" class="usa-button usa-pill-separate-item">
-              Prepare to send<span class="usa-sr-only"> a message using this template</span>
+              Use this template
             </a>
         {% endif %}
         {% if current_user.has_permissions('manage_templates') %}