Put message previews on ‘Send SMS’ page

A previous commit removed these to differentiate between this page and the
manage templates page. It turns out that we do want previews on this page
because:
- the users for the two pages might be different—they might only be allowed to
  do one or the other depending what permissions they have
- it’s useful to see what the placeholders in the message are before uploading
  a CSV, to make sure the CSV has the correct column headings

This commit re-adds the message preview with a simpler UI. Discussed with
@antimega and we both agreed that the speech bubble tails on the messages should
go.

app/assets/javascripts/main.js

@@ -1,3 +1,3 @@
 $(() => GOVUK.modules.start());
 
-$(() => new GOVUK.SelectionButtons('.block-label input'));
+$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));

app/assets/stylesheets/components/sms-message.scss

@@ -1,53 +1,63 @@
-.sms-message {
+%sms-message-wrapper,
-
+.sms-message-wrapper {
-  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: $gutter/2;
+  background: $panel-colour;
+  border: 1px solid $panel-colour;
+  border-radius: 5px;
+  white-space: normal;
   margin: 0 0 $gutter 0;
+}
+
+.sms-message-wrapper-with-radio {
+  @extend %sms-message-wrapper;
+  padding-left: 45px;
+  cursor: pointer;
+}
+
+.sms-message-recipient {
+  @include copy-19;
+  color: $secondary-text-colour;
+  margin: -$gutter-half 0 $gutter 0;
+}
+
+.sms-message-name {
+  @include bold-19;
+  margin: 30px 0 10px 0;
+}
+
+.sms-message-picker {
+  display: block;
+  margin: 7px 0 0 0;
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  z-index: 50;
+}
+
+label.sms-message-option {
+
+  display: block;
+  position: relative;
+
+  &.selected {
+
+    .sms-message-wrapper-with-radio {
+      background: $white;
+      border: 1px solid $text-colour;
+    }
 
-  &:before {
-    content: '';
-    position: absolute;
-    z-index: 10;
-    bottom: -12px;
-    right: 5px;
-    width: 20px;
-    height: 25px;
-    border-radius: 100%;
-    background: $panel-colour;
   }
 
-  &:after {
+  &.focused {
-    content: '';
-    position: absolute;
-    z-index: 20;
-    bottom: -15px;
-    right: -5px;
-    border-radius: 100%;
-    width: 20px;
-    height: 20px;
-    background: $white;
-  }
 
-  &-wrapper {
+    outline: none;
-    width: 100%;
-    display: inline-block;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 30;
-    padding: $gutter/2;
-    background: $panel-colour;
-    border-radius: 5px;
-    white-space: normal;
-  }
 
-  &-recipient {
+    .sms-message-wrapper-with-radio {
-    @include copy-19;
+      box-shadow: 0 0 0 3px $yellow;
-    color: $secondary-text-colour;
+    }
-    margin: -$gutter-half 0 $gutter 0;
-  }
 
-  &-name {
-    @include bold-19;
-    margin: 50px 0 10px 0;
   }
 
 }

app/templates/admin_template.html

@@ -55,8 +55,10 @@
             <summary class="dropdown-toggle">
               Service name
             </summary>
-            <a href="#">Switch to A N Other service</a>
+            <div>
-            <a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
+              <a href="#">Switch to A N Other service</a>
+              <a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
+            </div>
           </details>
         </div>
         <div class="column-half management-navigation-account">

app/templates/components/sms-message.html

@@ -1,4 +1,9 @@
-{% macro sms_message(body, recipient=None, name=None, edit_link=None) %}
+{% macro sms_message(
+  body, recipient=None, name=None, edit_link=None, input_name=None, input_index=None
+) %}
+  {% if input_name %}
+    <label class="sms-message-option" for="{{ input_name }}-{{ input_index }}">
+  {% endif %}
   {% if name %}
     <h3 class="sms-message-name">
       {% if edit_link %}
@@ -8,14 +13,18 @@
       {% endif %}
     </h3>
   {% endif %}
-  <div class="sms-message">
+  {% if input_name %}
-    <div class="sms-message-wrapper">
+    <input class="sms-message-picker" type="radio" id="{{ input_name }}-{{ input_index }}" name="{{ input_name }}" />
-      {{ body|placeholders }}
+  {% endif %}
-    </div>
+  <div class="sms-message-wrapper{% if input_name %}-with-radio{% endif %}">
+    {{ body|placeholders }}
   </div>
   {% if recipient %}
     <p class="sms-message-recipient">
       {{ recipient }}
     </p>
   {% endif %}
+  {% if input_name %}
+    </label>
+  {% endif %}
 {% endmacro %}

app/templates/views/send-sms.html

@@ -10,35 +10,40 @@
 {% block maincolumn_content %}
   <form method="POST" enctype="multipart/form-data">
 
-    <h1 class="heading-xlarge">Send text messages</h1>
+    <div class="grid-row">
+      <div class="column-three-quarters">
 
-    <fieldset class='form-group'>
+        <h1 class="heading-xlarge">Send text messages</h1>
-      <legend class="heading-medium">1. Choose text message template</legend>
-      {% for template in message_templates %}
-        <label class="block-label" for="template-{{loop.index}}">
-          {{ template.name }}
-          <input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
-        </label>
-      {% endfor %}
-    </fieldset>
 
-    <p>
+        <fieldset class='form-group'>
-      or <a href="{{ url_for('.add_service_template', service_id=service_id) }}">create a new template</a>
+          <legend class="heading-medium">1. Choose text message template</legend>
-    </p>
+          {% for template in message_templates %}
+            {{ sms_message(
+              template.body, name=template.name, input_name='template', input_index=loop.index
+            ) }}
+          {% endfor %}
+        </fieldset>
 
-    <h2 class="heading-medium">2. Add recipients</h2>
+        <p>
+          or <a href="{{ url_for(".add_template", service_id=service_id) }}">create a new template</a>
+        </p>
 
-    <p>
+        <h2 class="heading-medium">2. Add recipients</h2>
-      Upload a CSV file to add your recipients’ details.
-    </p>
-    <p>
-      You can also <a href="#">download an example CSV</a>.
-    </p>
-    <p>
-      {{textbox(form.file)}}
-    </p>
 
-    {{ page_footer("Continue") }}
+        <p>
+          Upload a CSV file to add your recipients’ details.
+        </p>
+        <p>
+          You can also <a href="#">download an example CSV</a>.
+        </p>
+        <p>
+          {{textbox(form.file)}}
+        </p>
+
+        {{ page_footer("Continue") }}
+
+      </div>
+    </div>
 
   </form>