From 70007fcb8fd94b7c2a83ac52950c6b5507b4173d Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 26 Aug 2020 14:24:00 +0100
Subject: [PATCH 1/2] Fix spacing in pill items

At maximum zoom, the text in the items gets
cropped horizontally.

This removes the padding on their containers to
give them more space and, instead, puts it on the
content items instead.

Left-aligned content still needs some padding on
the left-hand side but centrally-aligned can grow
into the whole space.

This also reduces the padding applied below 420px
width or when the screen is zoomed below 300%.
Above that, our content needs more space between
items but below that, the space allocated to the
content is more important.
---
 app/assets/stylesheets/components/big-number.scss | 11 +++++++++++
 app/assets/stylesheets/components/pill.scss       | 14 +++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index bed587724..45e006327 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -16,6 +16,17 @@
 
 }
 
+.pill .big-number-number {
+
+  // reduce padding until screen is bigger than 420px / zoomed below 300%
+  padding-left: govuk-spacing(1);
+
+  @include govuk-media-query($from: 420px) {
+    padding-left: govuk-spacing(2);
+  }
+
+}
+
 .big-number-dark {
   @extend %big-number;
   padding: govuk-spacing(3);
diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index 72004fa1a..952155057 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -31,7 +31,7 @@
     float: left;
     box-sizing: border-box;
     width: 100%;
-    padding: 10px;
+    padding: 10px 0;
   }
 
   a {
@@ -76,8 +76,20 @@
 
   }
 
+  &-label {
+
+    // reduce padding until screen is above 420px / zoomed below 300%
+    padding-left: govuk-spacing(1);
+
+    @include govuk-media-query($from: 420px) {
+      padding-left: govuk-spacing(2);
+    }
+
+  }
+
   &-centered-item {
     text-align: center;
+    padding-left: 0;
   }
 
 }

From 0560066638bd7366b1f816587363cf1420ad6f8f Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 28 Aug 2020 15:31:54 +0100
Subject: [PATCH 2/2] Change mixins-before-declarations Sass-lint rule

We write our Sass to be mobile-first, meaning we
declare the value for a property (for mobile) and
then add all other variations (for other
viewports) afterwards.

Because of this, we need mixins that produce media
queries to be able to follow declarations.

This extension to the rule is also hinted at as
good practice in the docs:

https://gitlab.skotty.io/forks/sass-lint/blob/7847511b61b3ca01a86a8870c00b5a7fca94bac5/docs/rules/mixins-before-declarations.md
---
 app/assets/stylesheets/components/cookie-message.scss | 1 -
 gulpfile.js                                           | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/cookie-message.scss b/app/assets/stylesheets/components/cookie-message.scss
index f72132ab5..28684d611 100644
--- a/app/assets/stylesheets/components/cookie-message.scss
+++ b/app/assets/stylesheets/components/cookie-message.scss
@@ -1,6 +1,5 @@
 // GOV.UK Publishing components cookie banner styles
 // https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
-// sass-lint:disable mixins-before-declarations
 
 // component uses .govuk-body and .govuk-button classes from govuk-frontend
 @import 'core/typography';
diff --git a/gulpfile.js b/gulpfile.js
index d8e8686d9..aef452c39 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -259,7 +259,8 @@ const lint = {
         paths.src + 'stylesheets/views/*.scss',
       ])
       .pipe(plugins.sassLint({
-        'options': { 'formatter': 'stylish' }
+        'options': { 'formatter': 'stylish' },
+        'rules': { 'mixins-before-declarations': [2, { 'exclude': ['media', 'govuk-media-query'] } ] }
       }))
       .pipe(plugins.sassLint.format())
       .pipe(plugins.sassLint.failOnError());