Add a styleguide page

There are now quite a few frontend components in the app.

It’s good to have a reference for them to:
- document for developers what patterns are available and how they are used
- check for regressions
  - when working on one variation of a pattern you can check that your changes
    don’t break other variations of it
  - when changing the arguments to a pattern you can check that this doesn’t
    change the expected arguments already in use

This commit adds a single page (`/_styleguide`) which has examples of all the
patterns.

app/main/__init__.py

@@ -4,5 +4,5 @@ main = Blueprint('main', __name__)
 
 from app.main.views import (
     index, sign_in, sign_out, register, two_factor, verify, sms, add_service,
-    code_not_received, jobs, dashboard, templates, service_settings, forgot_password, new_password
+    code_not_received, jobs, dashboard, templates, service_settings, forgot_password, new_password, styleguide
 )

app/main/views/styleguide.py

@@ -0,0 +1,7 @@
+from flask import render_template
+from app.main import main
+
+
+@main.route('/_styleguide')
+def styleguide():
+    return render_template('views/styleguide.html')

app/templates/views/styleguide.html

@@ -0,0 +1,162 @@
+{% extends "admin_template.html" %}
+
+{% from "components/banner.html" import banner %}
+{% from "components/big-number.html" import big_number %}
+{% from "components/browse-list.html" import browse_list %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/sms-message.html" import sms_message, message_status %}
+{% from "components/table.html" import mapping_table, list_table, row, field %}
+{% from "components/textbox.html" import textbox %}
+
+{% block page_title %}
+  Styleguide – GOV.UK Notify
+{% endblock %}
+
+{% block fullwidth_content %}
+
+  <h1 class="heading-xlarge">
+    Styleguide
+  </h1>
+
+  <h2 class="heading-large">Banner</h2>
+  <p>Used to show the result of a user’s action.</p>
+  {{ banner("This is a banner") }}
+
+  <h2 class="heading-large">Big number</h2>
+
+  <p>Used to show some important statistics.</p>
+
+  <div class="grid-row">
+    <div class="column-one-third">
+      {{ big_number("567") }}
+    </div>
+    <div class="column-one-third">
+      {{ big_number("2", "Messages delivered") }}
+    </div>
+  </div>
+
+  <h2 class="heading-large">Browse list</h2>
+
+  <p>Used to navigate to child pages.</p>
+
+  {{ browse_list([
+    {
+      'title': 'Change your username',
+      'link': 'http://example.com',
+    },
+    {
+      'title': 'Change your password',
+      'link': 'http://example.com',
+      'hint': 'Your password is used to log in'
+    },
+    {
+      'title': 'Delete everything',
+      'link': 'http://example.com',
+      'hint': 'You can’t undo this',
+      'destructive': True
+    }
+  ]) }}
+
+  <h2 class="heading-large">Page footer</h2>
+
+  <p>
+    Used to submit forms and optionally provide a link to go back to the
+    previous page.
+  </p>
+  <p>
+    Must be used inside a form.
+  </p>
+  <p>
+    Adds a hidden CSRF token to the page.
+  </p>
+
+  {{ page_footer(
+    button_text='Save and continue'
+  ) }}
+
+  {{ page_footer(
+    button_text='Delete', destructive=True
+  ) }}
+
+  {{ page_footer(
+    button_text='Send', back_link='http://example.com', back_link_text="Back to dashboard"
+  ) }}
+
+  <h2 class="heading-large">SMS message</h2>
+
+  <p>Used to show or preview an SMS message.</p>
+
+  <div class="grid-row">
+    <div class="column-half">
+      {{ sms_message("Your vehicle tax for LC12 BFL is due on 1 March 2016. Renew online at www.gov.uk/vehicle-tax") }}
+      {{ sms_message("Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax") }}
+      {{ sms_message(
+        "Your vehicle tax for registration number is due on date. Renew online at www.gov.uk/vehicle-tax",
+        "+44 7700 900 306"
+      ) }}
+    </div>
+  </div>
+
+  <h2 class="heading-large">Message status</h2>
+  <div class="grid-row">
+    <div class="column-third">
+      {{ message_status("Delivered 10:20") }}
+    </div>
+  </div>
+
+  <h2 class="heading-large">Tables</h2>
+
+  {% call mapping_table(
+    caption='Account settings',
+    field_headings=['Label', 'Value'],
+    field_headings_visible=True,
+    caption_visible=True
+  ) %}
+    {% call row() %}
+      {% call field() %}
+        Username
+      {% endcall %}
+      {% call field() %}
+        admin
+      {% endcall %}
+    {% endcall %}
+  {% endcall %}
+
+  {% call(item) list_table(
+    [
+      {
+        'file': 'dispatch_20151114.csv', 'status': 'Queued'
+      },
+      {
+        'file': 'dispatch_20151117.csv', 'status': 'Delivered'
+      },
+      {
+        'file': 'remdinder_monday.csv', 'status': 'Delivered'
+      }
+    ],
+    caption='Messages',
+    field_headings=['File', 'Status'],
+    field_headings_visible=False,
+    caption_visible=True
+  ) %}
+    {% call field() %}
+      {{ item.file }}
+    {% endcall %}
+    {% call field() %}
+      {{ item.status }}
+    {% endcall %}
+  {% endcall %}
+
+  <h2 class="heading-large">Textbox</h2>
+
+  {{ textbox('name', 'Username') }}
+  {{ textbox('password', 'Password', password=True) }}
+  {{ textbox(
+    'message',
+    "Message",
+    value="Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax",
+    small=False,
+    highlight_tags=True
+  ) }}
+
+{% endblock %}

tests/app/main/views/test_styleguide.py

@@ -0,0 +1,4 @@
+def test_styleguide_can_render(notifications_admin):
+    response = notifications_admin.test_client().get('/_styleguide')
+
+    assert response.status_code == 200