Merge pull request #56 from alphagov/add-styleguide

Add styleguide

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: '✔';

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;
-      }
-
-    }
-
-  }
-
 }

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/components/banner.html

@@ -1,3 +1,5 @@
-{% macro banner(body) %}
-  <div class='banner'>{{ body }}</div>
+{% macro banner(body, with_tick=False) %}
+  <div class='banner{% if with_tick %}-with-tick{% endif %}'>
+    {{ body }}
+  </div>
 {% endmacro %}

app/templates/components/sms-message.html

@@ -10,11 +10,3 @@
     </p>
   {% endif %}
 {% endmacro %}
-
-{% macro message_status(status, time) %}
-  <div class="sms-message-history">
-    <p class="sms-message-history-heading">
-      {{ status }} <span class="sms-message-history-heading-time">{{ time }}</span>
-    </p>
-  </div>
-{% endmacro %}

app/templates/views/job.html

@@ -14,7 +14,7 @@ GOV.UK Notify | Notifications activity
 		</h1>
 
 		<p>
-    {{ banner(flash_message) }}
+      {{ banner(flash_message, with_tick=True) }}
 		</p>
 
 		<ul class="grid-row job-totals">

app/templates/views/notification.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message, message_status %}
+{% from "components/banner.html" import banner %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
@@ -18,7 +19,9 @@ GOV.UK Notify | Notifications activity
 				{{ sms_message(message.message, message.phone) }}
 			</div>
 			<div class="column-one-third">
-				{{ message_status(message.status, delivered_at) }}
+				{{ banner(
+					"{} {}".format(message.status, delivered_at)
+				) }}
 			</div>
 		</div>
 

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 %}
+{% 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>
+
+  <p><a href="https://github.com/alphagov/notifications-admin/blob/master/app/templates/views/styleguide.html">View source</a></p>
+
+  <h2 class="heading-large">Banner</h2>
+  <p>Used to show the result of a user’s action.</p>
+  {{ banner("This is a banner", with_tick=True) }}
+  <div class="grid-row">
+    <div class="column-one-third">
+      {{ banner("Delivered 10:20") }}
+    </div>
+  </div>
+
+  <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">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