Add Sass linting to components

Gemfile

@@ -34,7 +34,7 @@ end
 group :development, :test do
   gem 'jasmine-rails', '~> 0.10.6'
   gem 'quiet_assets', '1.1.0'
-  gem 'govuk-lint', '~> 0.3.0'
+  gem 'govuk-lint', '~> 0.6.0'
   gem 'pry'
 end
 

Gemfile.lock

@@ -44,7 +44,7 @@ GEM
       builder
       multi_json
     arel (6.0.3)
-    ast (2.1.0)
+    ast (2.2.0)
     astrolabe (1.3.1)
       parser (~> 2.2)
     better_errors (2.1.1)
@@ -82,8 +82,9 @@ GEM
       activesupport (>= 4.1.0)
     govuk-content-schema-test-helpers (1.4.0)
       json-schema (~> 2.5.1)
-    govuk-lint (0.3.0)
-      rubocop (~> 0.32)
+    govuk-lint (0.6.1)
+      rubocop (~> 0.35.0)
+      scss_lint (~> 0.44.0)
     govuk_frontend_toolkit (4.7.0)
       rails (>= 3.1.0)
       sass (>= 3.2.0)
@@ -136,8 +137,8 @@ GEM
     nokogiri (1.6.6.4)
       mini_portile (~> 0.6.0)
     null_logger (0.0.1)
-    parser (2.2.2.6)
-      ast (>= 1.1, < 3.0)
+    parser (2.3.0.6)
+      ast (~> 2.2)
     phantomjs (1.9.8.0)
     plek (1.11.0)
     power_assert (0.2.4)
@@ -179,19 +180,20 @@ GEM
       activesupport (= 4.2.5.1)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rainbow (2.0.0)
+    rainbow (2.1.0)
     raindrops (0.15.0)
     rake (10.5.0)
     rest-client (1.8.0)
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 3.0)
       netrc (~> 0.7)
-    rubocop (0.34.2)
+    rubocop (0.35.1)
       astrolabe (~> 1.3)
-      parser (>= 2.2.2.5, < 3.0)
+      parser (>= 2.2.3.0, < 3.0)
       powerpack (~> 0.1)
       rainbow (>= 1.99.1, < 3.0)
-      ruby-progressbar (~> 1.4)
+      ruby-progressbar (~> 1.7)
+      tins (<= 1.6.0)
     ruby-progressbar (1.7.5)
     safe_yaml (1.0.4)
     sass (3.4.18)
@@ -201,6 +203,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    scss_lint (0.44.0)
+      rake (~> 10.0)
+      sass (~> 3.4.15)
     shoulda (3.5.0)
       shoulda-context (~> 1.0, >= 1.0.1)
       shoulda-matchers (>= 1.4.1, < 3.0)
@@ -220,6 +225,7 @@ GEM
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (2.0.1)
+    tins (1.6.0)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     uglifier (2.7.2)
@@ -249,7 +255,7 @@ DEPENDENCIES
   capybara (~> 2.5.0)
   gds-api-adapters (= 26.7.0)
   govuk-content-schema-test-helpers (~> 1.4)
-  govuk-lint (~> 0.3.0)
+  govuk-lint (~> 0.6.0)
   govuk_frontend_toolkit (~> 4.7.0)
   govuk_template (= 0.16.1)
   image_optim (= 0.17.1)

app/assets/stylesheets/govuk-component/_document-footer.scss

@@ -13,29 +13,33 @@
     min-height: 1em;
     @include grid-column( 1 / 3 );
   }
+
   &.direction-rtl .history-information {
     @include grid-column( 1 / 3, $float: right );
   }
+
   .related-information {
     @include grid-column( 2 / 3 );
   }
+
   &.direction-rtl .related-information {
     @include grid-column( 2 / 3, $float: right );
   }
 
-  p, ol {
+  p,
+  ol {
     margin-bottom: $gutter-one-third;
 
-    @include media(tablet){
+    @include media(tablet) {
       margin-bottom: $gutter-two-thirds;
     }
   }
 
-
   .definition {
     @include bold-24;
     margin-top: 5px;
     display: block;
+
     a {
       text-decoration: none;
     }
@@ -46,13 +50,14 @@
       display: block;
       font-weight: bold;
     }
+
     li {
       list-style: none;
       margin-bottom: 5px;
-      @include media(tablet){
+
+      @include media(tablet) {
         margin-bottom: $gutter-one-third;
       }
     }
   }
-
 }

app/assets/stylesheets/govuk-component/_govspeak-magna-charta.scss

@@ -1,3 +1,5 @@
+// Disable linting for vendor asset
+// scss-lint:disable all
 /*
  * magna-charta example stylesheet
  * https://github.com/alphagov/magna-charta
@@ -6,7 +8,6 @@
  * Licensed under the MIT license.
  */
 
-
 .govuk-govspeak {
     // DEFAULT CHART STYLES
 

app/assets/stylesheets/govuk-component/_govspeak.scss

@@ -40,6 +40,7 @@
 
       a {
         text-decoration: none;
+
         &:hover {
           text-decoration: underline;
         }
@@ -70,7 +71,7 @@
   h6 {
     @include bold-19;
 
-    & + p {
+    + p {
       margin-top: 5px;
     }
   }
@@ -116,7 +117,7 @@
     }
   }
 
-  ol.legislative-list {
+  .legislative-list {
     list-style: none;
     margin: 5px 0;
 
@@ -167,6 +168,7 @@
     padding: 0 0 0 $gutter-two-thirds;
     margin: 0;
     border: 0;
+
     @include media(desktop) {
       margin: 0 0 0 (-$gutter);
     }
@@ -193,6 +195,7 @@
 
   &.direction-rtl blockquote {
     padding: 0 $gutter-two-thirds 0 0;
+
     @include media(desktop) {
       margin: 0 (-$gutter) 0 0;
     }
@@ -221,8 +224,8 @@
 
   hr {
     margin-top: $gutter - 1px;
-    border-top: 1px solid #ccc;
     margin-bottom: $gutter;
+    border-top: 1px solid $border-colour;
   }
 
   figure {
@@ -303,20 +306,20 @@
   table {
     border-collapse: collapse;
     border-spacing: 0;
-    margin: $gutter 0 $gutter 0;
+    margin: $gutter 0;
     width: $full-width;
     @include core-14;
 
     caption {
-      text-align:left;
+      text-align: left;
       margin-bottom: 0.5em;
     }
 
     th,
     td {
       vertical-align: top;
       padding: $gutter-one-third $gutter-one-third $gutter-one-third 0;
-      border-bottom:solid 1px $grey-2;
+      border-bottom: solid 1px $border-colour;
     }
 
     th {
@@ -326,7 +329,7 @@
     }
 
     td small {
-      font-size:1em;
+      font-size: 1em;
     }
   }
 
@@ -339,7 +342,7 @@
     img {
       display: inline-block;
       width: auto;
-      margin: 0 0 -5px 0;
+      margin: 0 0 -5px;
     }
   }
 
@@ -375,10 +378,10 @@
       .email-url-number {
         p {
           margin: 0;
+        }
 
-          .email {
-            word-wrap: break-word;
-          }
+        .email {
+          word-wrap: break-word;
         }
 
         span {

app/assets/stylesheets/govuk-component/_metadata-print.scss

@@ -5,9 +5,11 @@
     clear: both;
     min-width: 120px;
   }
+
   dd {
     margin-left: 120px;
   }
+
   dd p {
     margin: 0;
     padding: 0;

app/assets/stylesheets/govuk-component/_metadata.scss

@@ -14,14 +14,16 @@
     width: auto;
     min-width: 120px;
 
-    @include media(tablet){
+    @include media(tablet) {
       padding-right: $gutter-one-third;
     }
   }
+
   &.direction-rtl dt {
     float: right;
     clear: right;
-    @include media(tablet){
+
+    @include media(tablet) {
       padding-left: $gutter-one-third;
       padding-right: 0;
     }
@@ -31,10 +33,11 @@
     float: left;
     width: 55%;
 
-    @include media(tablet){
+    @include media(tablet) {
       width: 70%;
     }
   }
+
   &.direction-rtl dd {
     float: right;
   }