From b303e06ca09a85979522d5125dcdd4cb8dfa7b92 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Jan 2016 11:13:06 +0000 Subject: [PATCH 1/3] 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 From 85b0b4af215fb9c757dd3b2b7588ff79ec311a40 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Jan 2016 11:27:42 +0000 Subject: [PATCH 2/3] Replace `message_status` component with `banner` Message status was almost identical to banner, visually and semantically. This consolidates the two into one component. This means adding an extra parameter which controls whether or not the banner has a tick (with and without a tick are the only two variations currently). --- app/assets/stylesheets/components/banner.scss | 10 +++++++- .../stylesheets/components/sms-message.scss | 23 ------------------- app/templates/components/banner.html | 6 +++-- app/templates/components/sms-message.html | 8 ------- app/templates/views/job.html | 2 +- app/templates/views/notification.html | 5 +++- app/templates/views/styleguide.html | 16 ++++++------- 7 files changed, 25 insertions(+), 45 deletions(-) diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss index a801b2ec7..70555d2d1 100644 --- a/app/assets/stylesheets/components/banner.scss +++ b/app/assets/stylesheets/components/banner.scss @@ -1,14 +1,22 @@ +%banner, .banner { @include core-19; background: $turquoise; color: $white; display: block; - padding: $gutter-half $gutter; + padding: $gutter-half; margin: 0 0 $gutter 0; text-align: center; position: relative; +} + +.banner-with-tick { + + @extend %banner; + padding: $gutter-half $gutter; + &:before { @include core-24; content: '✔'; diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index 4fa727388..abdd5f9bf 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/app/assets/stylesheets/components/sms-message.scss @@ -45,27 +45,4 @@ margin: -$gutter-half 0 $gutter 0; } - &-history { - - background: $turquoise; - color: $white; - padding: $gutter-half; - @include bold-19; - margin: 0 0 $gutter 0; - - &-heading { - - @include bold-19; - margin: 0; - - &-time { - @include inline-block; - margin-left: 10px; - font-weight: normal; - } - - } - - } - } diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html index 2dab12c5d..a03d2cb0a 100644 --- a/app/templates/components/banner.html +++ b/app/templates/components/banner.html @@ -1,3 +1,5 @@ -{% macro banner(body) %} - +{% macro banner(body, with_tick=False) %} +
+ {{ body }} +
{% endmacro %} diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html index 38d30b877..d0d0f92ce 100644 --- a/app/templates/components/sms-message.html +++ b/app/templates/components/sms-message.html @@ -10,11 +10,3 @@

{% endif %} {% endmacro %} - -{% macro message_status(status, time) %} -
-

- {{ status }} {{ time }} -

-
-{% endmacro %} diff --git a/app/templates/views/job.html b/app/templates/views/job.html index 29ae57ba7..b733a5e61 100644 --- a/app/templates/views/job.html +++ b/app/templates/views/job.html @@ -14,7 +14,7 @@ GOV.UK Notify | Notifications activity

- {{ banner(flash_message) }} + {{ banner(flash_message, with_tick=True) }}