Add a template filter for message placeholders

As a first guess placeholders can be added to messages with the
`((placeholder))` syntax.

This commit adds a Jinja template filter to convert strings containing
said-formatted strings into HTML, which can then be styled to highlight which
parts will be substituted in messages.

app/__init__.py

@@ -1,6 +1,7 @@
 import os
+import re
 
-from flask import Flask, session
+from flask import Flask, session, Markup
 from flask._compat import string_types
 from flask.ext import assets
 from flask.ext.sqlalchemy import SQLAlchemy
@@ -44,6 +45,8 @@ def create_app(config_name):
     application.session_interface = ItsdangerousSessionInterface()
     admin_api_client.init_app(application)
 
+    application.add_template_filter(placeholders)
+
     return application
 
 
@@ -153,3 +156,13 @@ def convert_to_boolean(value):
             return False
 
     return value
+
+
+def placeholders(value):
+    if not value:
+        return value
+    return Markup(re.sub(
+        r"\(\(([^\)]+)\)\)",  # anything that looks like ((registration number))
+        lambda match: "<span class='placeholder'>{}</span>".format(match.group(1)),
+        value
+    ))

app/assets/stylesheets/main.scss

@@ -25,9 +25,9 @@
 @import "govuk_elements/elements/panels";
 @import "govuk_elements/elements/tables";
 
-// ////---xxsd----k/
 // Extra CSS for this application
 @import "components/sms-message";
-
+@import "components/placeholder";
+// // // sxx
 // Break this up
 @import "app";

app/templates/views/send-sms.html

@@ -9,12 +9,16 @@
 
 <div class="grid-row">
 	<div class="column-two-thirds">
+
 		<h1 class="heading-xlarge">Send text messages</h1>
 
-		<p>This page will be where we construct text messages</p>
+		{{ sms_message("
-		{{ sms_message("hi") }}
+			Vehicle tax: Your vehicle tax for ((registration number)) expires on
+			((date)). Tax your vehicle at www.gov.uk/vehicle-tax
+		") }}
+
   	<p>
-  	<a class="button" href="check-sms" role="button">Continue</a>
+	  	<a class="button" href="check-sms" role="button">Continue</a>
   	</p>
 	</div>
 </div>