Rename module

HighlightTags was bad because:
- we haven’t called placeholders ‘tags’ for a long time
- it also does resizing of the `<textarea>`, not just highlighting the
  placeholders

app/assets/javascripts/enhancedTextbox.js

@@ -7,7 +7,7 @@
 
   const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
 
-  Modules.HighlightTags = function() {
+  Modules.EnhancedTextbox = function() {
 
     this.start = function(textarea) {
 

app/templates/components/textbox.html

@@ -2,7 +2,7 @@
   field,
   label=None,
   hint=False,
-  highlight_tags=False,
+  highlight_placeholders=False,
   autofocus=False,
   autosize=False,
   colour_preview=False,
@@ -35,7 +35,7 @@
       {% endif %}
     </label>
     {%
-      if highlight_tags
+      if highlight_placeholders or autosize
     %}
       {% set field_class = 'form-control-{} textbox-highlight-textbox'.format(width) %}
     {% else %}
@@ -48,8 +48,8 @@
     %}
     {{ field(
       class=field_class,
-      data_module='highlight-tags' if highlight_tags or autosize else '',
-      data_highlight_placeholders='true' if highlight_tags else 'false',
+      data_module='enhanced-textbox' if highlight_placeholders or autosize else '',
+      data_highlight_placeholders='true' if highlight_placeholders else 'false',
       rows=rows|string,
       **kwargs
     ) }}

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

@@ -20,8 +20,8 @@
       <div class="grid-row">
         <div class="column-five-sixths">
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
-          {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
+          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }}
           {% if current_user.platform_admin %}
              {{ radios(form.process_type) }}
           {% endif %}

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

@@ -20,8 +20,8 @@
       <div class="grid-row">
         <div class="column-five-sixths">
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
-          {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
+          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }}
           {{ sticky_page_footer(
             'Save'
           ) }}

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

@@ -22,7 +22,7 @@
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this') }}
         </div>
         <div class="column-two-thirds">
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=5) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=5) }}
           {% if current_user.platform_admin %}
             {{ radios(form.process_type) }}
           {% endif %}

app/templates/views/service-settings/letter-contact/add.html

@@ -24,7 +24,7 @@
             hint='10 lines maximum',
             width='1-2',
             rows=10,
-            highlight_tags=True
+            highlight_placeholders=True
           ) }}
         {% if not first_contact_block %}
           <div class="form-group">

app/templates/views/service-settings/letter-contact/edit.html

@@ -22,7 +22,7 @@
       hint='10 lines maximum',
       width='1-2',
       rows=10,
-      highlight_tags=True
+      highlight_placeholders=True
     ) }}
 
 

app/templates/views/service-settings/set-letter-contact-block.html

@@ -22,7 +22,7 @@
         hint='10 lines maximum',
         width='1-1',
         rows=10,
-        highlight_tags=True
+        highlight_placeholders=True
       ) }}
       {{ page_footer('Save') }}
     {% endcall %}

app/templates/views/styleguide.html

@@ -181,7 +181,7 @@
   <h2 class="heading-large">Textbox</h2>
   {{ textbox(form.username) }}
   {{ textbox(form.password) }}
-  {{ textbox(form.message, highlight_tags=True) }}
+  {{ textbox(form.message, highlight_placeholders=True) }}
   {{ textbox(form.code, width='1-8') }}
 
   <h2 class="heading-large">File upload</h2>

gulpfile.js

@@ -82,7 +82,7 @@ const javascripts = () => {
       paths.src + 'javascripts/detailsPolyfill.js',
       paths.src + 'javascripts/apiKey.js',
       paths.src + 'javascripts/autofocus.js',
-      paths.src + 'javascripts/highlightTags.js',
+      paths.src + 'javascripts/enhancedTextbox.js',
       paths.src + 'javascripts/fileUpload.js',
       paths.src + 'javascripts/radioSelect.js',
       paths.src + 'javascripts/updateContent.js',

package.json

@@ -7,6 +7,7 @@
   },
   "scripts": {
     "test": "gulp lint && jest --config tests/javascripts/jest.config.js tests/javascripts",
+    "test-watch": "jest --watch --config tests/javascripts/jest.config.js tests/javascripts",
     "build": "gulp",
     "watch": "gulp watch"
   },

tests/app/main/views/test_templates.py

@@ -346,6 +346,8 @@ def test_should_show_page_for_one_template(
     assert "Template <em>content</em> with & entity" in str(
         page.select_one('textarea')
     )
+    assert page.select_one('textarea')['data-module'] == 'enhanced-textbox'
+    assert page.select_one('textarea')['data-highlight-placeholders'] == 'true'
     assert "priority" not in str(page.select_one('main'))
     mock_get_service_template.assert_called_with(SERVICE_ONE_ID, template_id, None)
 

tests/javascripts/enhancedTextbox.test.js

@@ -1,14 +1,14 @@
 const helpers = require('./support/helpers.js');
 
 beforeAll(() => {
-  require('../../app/assets/javascripts/highlightTags.js');
+  require('../../app/assets/javascripts/enhancedTextbox.js');
 });
 
 afterAll(() => {
   require('./support/teardown.js');
 });
 
-describe('Highlight tags', () => {
+describe('Enhanced textbox', () => {
 
   let input;
   let textarea;
@@ -38,11 +38,11 @@ describe('Highlight tags', () => {
     document.body.innerHTML = `
       <div class="form-group">
         <label for="subject">Subject</label>
-        <input class="form-control textbox-highlight-textbox" data-module="highlight-tags" type="text" name="subject" id="subject" />
+        <input class="form-control textbox-highlight-textbox" data-module="enhanced-textbox" type="text" name="subject" id="subject" />
       </div>
       <div class="form-group">
         <label for="template_content">Message</label>
-        <textarea class="form-control form-control-1-1 textbox-highlight-textbox" data-module="highlight-tags" id="template_content" name="template_content" rows="8">
+        <textarea class="form-control form-control-1-1 textbox-highlight-textbox" data-module="enhanced-textbox" id="template_content" name="template_content" rows="8">
         </textarea>
       </div>`;