From 85b0b4af215fb9c757dd3b2b7588ff79ec311a40 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 11 Jan 2016 11:27:42 +0000
Subject: [PATCH] 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) %}
-  <div class='banner'>{{ body }}</div>
+{% macro banner(body, with_tick=False) %}
+  <div class='banner{% if with_tick %}-with-tick{% endif %}'>
+    {{ body }}
+  </div>
 {% 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 @@
     </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 %}
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
 		</h1>
 
 		<p>
-    {{ banner(flash_message) }}
+      {{ banner(flash_message, with_tick=True) }}
 		</p>
 
 		<ul class="grid-row job-totals">
diff --git a/app/templates/views/notification.html b/app/templates/views/notification.html
index 1e771062a..4f21b6a96 100644
--- a/app/templates/views/notification.html
+++ b/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>
 
diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html
index 9ad7ba9a3..882679452 100644
--- a/app/templates/views/styleguide.html
+++ b/app/templates/views/styleguide.html
@@ -4,7 +4,7 @@
 {% 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/sms-message.html" import sms_message %}
 {% from "components/table.html" import mapping_table, list_table, row, field %}
 {% from "components/textbox.html" import textbox %}
 
@@ -20,7 +20,12 @@
 
   <h2 class="heading-large">Banner</h2>
   <p>Used to show the result of a user’s action.</p>
-  {{ banner("This is a banner") }}
+  {{ 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>
 
@@ -97,13 +102,6 @@
     </div>
   </div>
 
-  <h2 class="heading-large">Message status</h2>
-  <div class="grid-row">
-    <div class="column-third">
-      {{ message_status("Delivered 10:20") }}
-    </div>
-  </div>
-
   <h2 class="heading-large">Tables</h2>
 
   {% call mapping_table(