Add big number component…

…and count the messages to display some totals

app/assets/stylesheets/components/big-number.scss

@@ -0,0 +1,10 @@
+.big-number {
+
+  @include bold-48;
+
+  &-label {
+    @include core-19;
+    display: block;
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -27,6 +27,7 @@
 @import '../govuk_elements/public/sass/elements/panels';
 @import '../govuk_elements/public/sass/elements/tables';
 
+
 // Specific to this application
 @import 'grids';
 @import 'components/template-picker';
@@ -35,6 +36,9 @@
 @import 'components/submit-form';
 @import 'components/table';
 @import 'components/navigation';
+@import 'components/big-number';
+
+@import 'views/job';
 
 // TODO: break this up
 @import 'app';

app/assets/stylesheets/views/job.scss

@@ -0,0 +1,3 @@
+.job-totals {
+  margin-bottom: $gutter;
+}

app/templates/components/big-number.html

@@ -0,0 +1,6 @@
+{% macro big_number(number, label) %}
+  <div class="big-number">
+    {{ number }}
+    <span class="big-number-label">{{ label }}</span>
+  </div>
+{% endmacro %}

app/templates/components/table.html

@@ -1,6 +1,6 @@
-{% macro table(items, caption='', field_headings='', field_headings_visible=True) -%}
+{% macro table(items, caption='', field_headings='', field_headings_visible=True, caption_visible=True) -%}
   <table class="table">
-    <caption class="heading-medium table-heading">
+    <caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
       {{ caption }}
     </caption>
     <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">

app/templates/views/job.html

@@ -11,21 +11,33 @@ GOV.UK Notify | Notifications activity
 			{{ uploaded_file_name }} sent with {{ template_used }}
 		</h1>
 
-		<p>
-	    {{ counts.total }} text messages
-		</p>
+		<ul class="grid-row job-totals">
+			<li class="column-one-third">
+				{{ big_number(
+					counts.total,
+					'text message' if 1 == counts.total else 'text messages'
+				)}}
+			</li>
+			<li class="column-one-third">
+				{{ big_number(
+					counts.failed,
+					'failed delivery' if 1 == counts.failed else 'failed deliveries'
+				)}}
+			</li>
+			<li class="column-one-third">
+				{{ big_number(
+					cost, 'total cost'
+				)}}
+			</li>
+		</ul>
 
-		<p>
-	    {{ counts.failed }} failed deliveries
-		</p>
-
-		<p>
-	    {{ cost }} total cost
-		</p>
+    <p>
+      You uploaded contact-demo.csv today at 13:42
+    </p>
 
     {% call(item) table(
       messages,
-      caption='',
+      caption='Messages',
       caption_visible=False,
       field_headings=[
         'To',