From 4e158e203cf9081d0f35d95a9c87b36fc9741982 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 26 Jan 2016 16:20:57 +0000
Subject: [PATCH] Update styleguide

---
 app/assets/stylesheets/components/table.scss |  3 ++-
 app/templates/admin_template.html            | 16 +++-------------
 app/templates/components/banner.html         |  8 +++++++-
 app/templates/views/styleguide.html          | 15 +++++++++++++--
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index ce6930370..f5c0c94b0 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -56,6 +56,7 @@
 .table-empty-message {
   @include core-16;
   color: $secondary-text-colour;
+  border-top: 1px solid $border-colour;
   border-bottom: 1px solid $border-colour;
-  padding: 5px 0 8px 0;
+  padding: 0.75em 0 0.5625em 0;
 }
diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index f5907f644..42505fc90 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -72,19 +72,9 @@
   <main id="content" role="main" class="page-container">
       {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
-          <ul class="banner-dangerous">
-            {% for category, message in messages %}
-              <li class="flash-message">
-                {{ message }}
-                {% if 'delete' == category %}
-                  <form method='post'>
-                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                    <input type="submit" class="button" name="delete" value="Yes, delete this template" />
-                  </form>
-                {% endif %}
-              </li>
-            {% endfor %}
-          </ul>
+          {% for category, message in messages %}
+            {{ banner(message, 'dangerous', delete_button="Yes, delete this template" if 'delete' == category else None)}}
+          {% endfor %}
         {% endif %}
       {% endwith %}
       {% block fullwidth_content %}{% endblock %}
diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html
index 39e0a1e5f..8adbfa5c6 100644
--- a/app/templates/components/banner.html
+++ b/app/templates/components/banner.html
@@ -1,5 +1,11 @@
-{% macro banner(body, type=None, with_tick=False) %}
+{% macro banner(body, type=None, with_tick=False, delete_button=None) %}
   <div class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'>
     {{ body }}
+    {% if delete_button %}
+      <form method='post'>
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+        <input type="submit" class="button" name="delete" value="{{ delete_button }}" />
+      </form>
+    {% endif %}
   </div>
 {% endmacro %}
diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html
index edf2a753c..2dde4716a 100644
--- a/app/templates/views/styleguide.html
+++ b/app/templates/views/styleguide.html
@@ -22,14 +22,25 @@
   <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) }}
+  <p>Used to show the status of a thing or action.</p>
+
+  {{ 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(
+    'Your service is in restricted mode. You can only send notifications to yourself.',
+    'info'
+  ) }}
+
+  {{ banner('You’re not allowed to do this', 'dangerous')}}
+
+  {{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}}
+
   <h2 class="heading-large">Big number</h2>
 
   <p>Used to show some important statistics.</p>