Merge pull request #176 from alphagov/styleguide-updates

Updates to styleguide

app/assets/stylesheets/components/banner.scss

@@ -31,28 +31,6 @@
 
 }
 
-.banner-info {
-
-  @extend %banner;
-  background: $govuk-blue;
-  color: $white;
-
-  a {
-
-    &:link,
-    &:visited {
-      color: $white;
-      text-decoration: underline;
-    }
-
-    &:hover {
-      color: $light-blue-25;
-    }
-
-  }
-
-}
-
 .banner-dangerous {
 
   @extend %banner;

app/main/views/styleguide.py

@@ -1,4 +1,4 @@
-from flask import render_template
+from flask import render_template, current_app, abort
 from flask_wtf import Form
 from wtforms import StringField, PasswordField, TextAreaField, FileField, validators
 from app.main import main
@@ -7,9 +7,13 @@ from app.main import main
 @main.route('/_styleguide')
 def styleguide():
 
+    if not current_app.config['SHOW_STYLEGUIDE']:
+        abort(404)
+
     class FormExamples(Form):
         username = StringField(u'Username')
         password = PasswordField(u'Password', [validators.required()])
+        code = StringField('Enter code')
         message = TextAreaField(u'Message')
         file_upload = FileField('Upload a CSV file to add your recipients’ details')
 

app/templates/views/styleguide.html

@@ -5,7 +5,7 @@
 {% 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/table.html" import mapping_table, list_table, row, field, right_aligned_field_heading %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/api-key.html" import api_key %}
@@ -17,7 +17,7 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">
-    Styleguide
+    <a href="http://www.notify.works/_styleguide" style="text-decoration: none;">www.notify.works/_styleguide</a>
   </h1>
 
   <p>
@@ -29,18 +29,6 @@
 
   {{ banner("You sent 1,234 text messages", with_tick=True) }}
 
-  <div class="grid-row">
-    <div class="column-one-third">
-      {{ banner("Delivered 10:20") }}
-    </div>
-  </div>
-
-  {{ banner(
-    'You can only send notifications to yourself',
-    type='info',
-    subhead='Restricted mode'
-  ) }}
-
   {{ banner('You’re not allowed to do this', 'dangerous')}}
 
   {{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}}
@@ -134,14 +122,19 @@
 
   <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"
+        'Your vehicle tax for LC12 BFL is due on 1 March 2016. Renew online at www.gov.uk/vehicle-tax',
+        name='Two week reminder',
       ) }}
       {{ sms_message(
-        "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax",
+        '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'
+      ) }}
+      {{ sms_message(
+        'Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax',
         name='Two week reminder',
         edit_link='#'
       ) }}
@@ -149,11 +142,10 @@
   </div>
 
   <h2 class="heading-large">Tables</h2>
-
   {% call mapping_table(
     caption='Account settings',
-    field_headings=['Label', 'Value'],
-    field_headings_visible=True,
+    field_headings=['Label', 'Value', 'Action'],
+    field_headings_visible=False,
     caption_visible=True
   ) %}
     {% call row() %}
@@ -163,6 +155,9 @@
       {% call field() %}
         admin
       {% endcall %}
+      {% call field(align='right') %}
+        <a href="#">Change</a>
+      {% endcall %}
     {% endcall %}
   {% endcall %}
 
@@ -175,18 +170,21 @@
         'file': 'dispatch_20151117.csv', 'status': 'Delivered'
       },
       {
-        'file': 'remdinder_monday.csv', 'status': 'Delivered'
+        'file': 'remdinder_monday.csv', 'status': 'Failed'
       }
     ],
     caption='Messages',
-    field_headings=['File', 'Status'],
-    field_headings_visible=False,
-    caption_visible=True
+    field_headings=['File', right_aligned_field_heading('Status')],
+    field_headings_visible=True,
+    caption_visible=False
   ) %}
     {% call field() %}
       {{ item.file }}
     {% endcall %}
-    {% call field() %}
+    {% call field(
+      align='right',
+      status='error' if item.status == 'Failed' else 'default'
+    ) %}
       {{ item.status }}
     {% endcall %}
   {% endcall %}
@@ -210,6 +208,7 @@
   {{ textbox(form.username) }}
   {{ textbox(form.password) }}
   {{ textbox(form.message, highlight_tags=True) }}
+  {{ textbox(form.code, width='1-8') }}
 
   <h2 class="heading-large">File upload</h2>
   {{ file_upload(form.file_upload) }}

config.py

@@ -45,6 +45,8 @@ class Config(object):
 
     AWS_REGION = 'eu-west-1'
 
+    SHOW_STYLEGUIDE = True
+
 
 class Development(Config):
     DEBUG = True
@@ -67,7 +69,7 @@ class Preview(Config):
 
 
 class Staging(Preview):
-    pass
+    SHOW_STYLEGUIDE = False
 
 
 class Live(Staging):