From bd33fa3c2672479cd70606250467f1cd30b9d3ae Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 10 Feb 2016 11:03:56 +0000
Subject: [PATCH] =?UTF-8?q?Use=20tablular=20numbers=20for=20=E2=80=98big?=
 =?UTF-8?q?=20number=E2=80=99=20pattern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

> Tabular numbers have numerals of a standard fixed width. As all numbers have
> the same width, sets of numbers may be more easily compared. We recommend
> using them where different numbers are likely to be compared, or where
> different numbers should line up with each other, eg in tables.

The big number pattern is good candidate for tabluar numbers, especially if
we ever have these numbers update dynamically (in that case tabular numbers
won’t jump around like lining ones would).
---
 app/assets/stylesheets/components/big-number.scss | 2 +-
 app/templates/views/styleguide.html               | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index 4beea24df..0bce53b25 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -1,6 +1,6 @@
 .big-number {
 
-  @include bold-48;
+  @include bold-48($tabular-numbers: true);
 
   &-label {
     @include core-19;
diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html
index 9c0d2006c..bd830ba12 100644
--- a/app/templates/views/styleguide.html
+++ b/app/templates/views/styleguide.html
@@ -62,7 +62,12 @@
       {{ big_number("567") }}
     </div>
     <div class="column-one-third">
-      {{ big_number("2", "Messages delivered") }}
+      {{ big_number("£2.19", "Final cost") }}
+    </div>
+  </div>
+  <div class="grid-row">
+    <div class="column-one-third">
+      {{ big_number("711", "Queued") }}
     </div>
   </div>