Make placeholder look more editable

Depends on:
- [ ] https://github.com/alphagov/notifications-utils/pull/40

In research we’ve noticed two problems with the appearance of
placeholders:

1. We are inconsistent about when we display the ((double brackets)).
   Sometimes we show them, sometimes we don’t. This doesn’t help user’s
   understanding about where the column names in their CSV file come
   from, or how they can edit the template to fix any errors.

2. Because they look so different from normal `<textarea>` text, it’s
   not immediately obvious that they can be edited just like normal
   text. They look more like something that can be dragged/inserted.

So this commit:

1. Makes the brackets always-visible.

2. Makes the text colour of the placeholder `$text-colour`, and only
   highlights the name of the ‘variable’, not the brackets themselves.

app/assets/javascripts/highlightTags.js

@@ -15,16 +15,14 @@
         .wrap(`
           <div class='textbox-highlight-wrapper' />
         `)
-        .after(this.$backgroundMaskForeground = $(`
+        .after(this.$background = $(`
           <div class="textbox-highlight-background" aria-hidden="true" />
-          <div class="textbox-highlight-mask" aria-hidden="true" />
-          <div class="textbox-highlight-foreground" aria-hidden="true" />
         `))
         .on("input", this.update);
 
       this.initialHeight = this.$textbox.height();
 
-      this.$backgroundMaskForeground.css({
+      this.$background.css({
         'width': this.$textbox.outerWidth(),
         'border-width': this.$textbox.css('border-width')
       });
@@ -37,15 +35,15 @@
     this.resize = () => this.$textbox.height(
       Math.max(
         this.initialHeight,
-        this.$backgroundMaskForeground.outerHeight()
+        this.$background.outerHeight()
       )
     );
 
     this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
 
-    this.replacePlaceholders = () => this.$backgroundMaskForeground.html(
+    this.replacePlaceholders = () => this.$background.html(
       this.escapedMessage().replace(
-        tagPattern, match => `<span class='tag'>${match}</span>`
+        tagPattern, match => `<span class='placeholder'>${match}</span>`
       )
     );
 

app/assets/stylesheets/components/placeholder.scss

@@ -1,8 +1,24 @@
+%placeholder,
 .placeholder {
+
   display: inline;
-  background: $light-blue;
-  color: $white;
-  white-space: nowrap;
-  padding: 0 5px;
-  border-radius: 3px;
+  background: $yellow;
+  color: $text-colour;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  border-radius: 20px;
+  box-shadow: inset 9px 0 0 0 $white, inset -9px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
+
+  .sms-message-wrapper & {
+    box-shadow: inset 9px 0 0 0 $panel-colour, inset -9px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
+  }
+
+}
+
+.placeholder-no-brackets {
+  @extend %placeholder;
+  padding-left: 3px;
+  padding-right: 3px;
+  border-radius: 1px;
+  box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
 }

app/assets/stylesheets/components/textbox.scss

@@ -26,61 +26,25 @@
     line-height: 1.6;
   }
 
-  &-background,
-  &-foreground,
-  &-mask {
+  &-background {
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
     color: transparent;
     white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
     border: 2px solid transparent;
     padding-bottom: $gutter-half;
-  }
-
-  &-background {
-
     z-index: 10;
 
-    .tag {
-      background: $light-blue;
-      border-radius: 3px;
+    .placeholder {
       color: transparent;
-      display: inline;
     }
 
   }
 
-  &-mask {
-
-    z-index: 30;
-
-    .tag {
-      color: $white;
-      text-shadow: 0 1px 0 $light-blue, 0 -1px 0 $light-blue;
-      position: relative;
-      display: inline;
-      overflow: hidden;
-    }
-
-  }
-
-  &-foreground {
-
-    z-index: 40;
-
-    .tag {
-      color: transparent;
-      border-radius: 3px;
-      overflow: hidden;
-      display: inline;
-      box-shadow: inset 0.75em 0 0 0 $tag-background, inset -0.75em 0 0 0 $tag-background;
-    }
-
-  }
-
-
 }
 
 .textbox-help-link {

app/templates/components/email-message.html

@@ -25,7 +25,7 @@
               <th>To</th>
               <td>
                 {% if show_placeholder_for_recipient %}
-                  <span class="placeholder">
+                  <span class="placeholder-no-brackets">
                     email address
                   </span>
                 {% else %}

app/templates/components/sms-message.html

@@ -13,7 +13,7 @@
     <p class="sms-message-recipient">
       To:
       {% if show_placeholder_for_recipient %}
-        <span class="placeholder">
+        <span class="placeholder-no-brackets">
           phone number
         </span>
       {% else %}

requirements.txt

@@ -18,4 +18,4 @@ pytz==2016.4
 
 git+https://github.com/alphagov/notifications-python-client.git@1.0.0#egg=notifications-python-client==1.0.0
 
-git+https://github.com/alphagov/notifications-utils.git@6.1.0#egg=notifications-utils==6.1.0
+git+https://github.com/alphagov/notifications-utils.git@6.2.0#egg=notifications-utils==6.2.0