From b303e06ca09a85979522d5125dcdd4cb8dfa7b92 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Jan 2016 11:13:06 +0000 Subject: [PATCH] Add a styleguide page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 2 +- app/main/views/styleguide.py | 7 + app/templates/views/styleguide.html | 162 ++++++++++++++++++++++++ tests/app/main/views/test_styleguide.py | 4 + 4 files changed, 174 insertions(+), 1 deletion(-) create mode 100644 app/main/views/styleguide.py create mode 100644 app/templates/views/styleguide.html create mode 100644 tests/app/main/views/test_styleguide.py diff --git a/app/main/__init__.py b/app/main/__init__.py index 3d3ab5cde..578ea5e92 100644 --- a/app/main/__init__.py +++ b/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 ) diff --git a/app/main/views/styleguide.py b/app/main/views/styleguide.py new file mode 100644 index 000000000..516a39b6c --- /dev/null +++ b/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') diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html new file mode 100644 index 000000000..9ad7ba9a3 --- /dev/null +++ b/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 %} + +

+ Styleguide +

+ +

Banner

+

Used to show the result of a user’s action.

+ {{ banner("This is a banner") }} + +

Big number

+ +

Used to show some important statistics.

+ +
+
+ {{ big_number("567") }} +
+
+ {{ big_number("2", "Messages delivered") }} +
+
+ +

Browse list

+ +

Used to navigate to child pages.

+ + {{ 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 + } + ]) }} + +

Page footer

+ +

+ Used to submit forms and optionally provide a link to go back to the + previous page. +

+

+ Must be used inside a form. +

+

+ Adds a hidden CSRF token to the page. +

+ + {{ 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" + ) }} + +

SMS message

+ +

Used to show or preview an SMS message.

+ +
+
+ {{ 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" + ) }} +
+
+ +

Message status

+
+
+ {{ message_status("Delivered 10:20") }} +
+
+ +

Tables

+ + {% 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 %} + +

Textbox

+ + {{ 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 %} diff --git a/tests/app/main/views/test_styleguide.py b/tests/app/main/views/test_styleguide.py new file mode 100644 index 000000000..10004b847 --- /dev/null +++ b/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