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

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

@@ -1,3 +1,5 @@
-{% macro banner(body) %}
+{% macro banner(body, with_tick=False) %}
-  <div class='banner'>{{ body }}</div>
+  <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

@@ -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(