govuk_frontend_toolkit 4.8.1 → 4.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 766fc1a6b15eb2c922f230b00fda32bcc48da461
-  data.tar.gz: 2ba0dbb70cdf077adc5dd25a515b3c6313e0d7ac
+  metadata.gz: 66ba3271acb08b2653c29c0f029722e31d943f89
+  data.tar.gz: 876fbb47a7617f4a14a6993dea736562b8eb5c9f
 SHA512:
-  metadata.gz: 9f3003efea930d3d9857153888deaea308ae0a4d139d25f4bfde60ccefd40141dce71d040e6d31cb844200323412fce8aeb8db8be18cc514c365ed55bd48d896
-  data.tar.gz: b27440a359120867d3a79d49dc5ded40c4d829342f45143cde01d0a3ab5ad8829f04cfe3c7738b45bda3dee01ac13cff8f0f373ec2a5446f5e57f12de846d1d5
+  metadata.gz: f01b7f548ee5c92671b875ff7f683ef3db9dd6a0740ef45678212f41e29d994ad5f0709e225bc925e2c584dd3b9d221035b2f8f8f739c7d8f4d72699d72bfdb0
+  data.tar.gz: ee16608180a448011bbde1119ecb012839de324e1bd821e9bfdfc87cb0d5b9f77d936d899c47a3b16a2cf4e7f0c224153160101cef6acee7e85db5344b656839

data/app/assets/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 4.8.2
+
+- Add GOV.UK lint to lint scss files (PR #260)
+- Remove reference to old colour palette (PR #256)
+- Fix link to GOV.UK elements - tabular data
+
 # 4.8.1
 
 - Update DEFRA brand colour to new green (PR #249)

data/app/assets/Gemfile

@@ -1,4 +1,4 @@
 source 'https://rubygems.org'
 
-gem 'sass', '3.4.9'
-gem 'scss-lint', '0.30.0'
+gem 'sass', '3.4.15'
+gem 'govuk-lint', '0.7.0'

data/app/assets/Gruntfile.js

@@ -53,14 +53,12 @@ module.exports = function(grunt) {
         }
       },
     },
-    scsslint: {
-      allFiles: [
-        'stylesheets/*.scss',
-        'stylesheets/**/*.scss'
-      ],
-      options: {
-        bundleExec: true,
-        config: '.scss-lint.yaml'
+    shell: {
+      multiple: {
+        command: [
+          'bundle',
+          'bundle exec govuk-lint-sass stylesheets'
+        ].join('&&')
       }
     }
   });
@@ -68,8 +66,8 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-jasmine');
   grunt.loadNpmTasks('grunt-contrib-sass');
-  grunt.loadNpmTasks('grunt-scss-lint');
+  grunt.loadNpmTasks('grunt-shell');
 
-  grunt.registerTask('test', ['sass', 'clean', 'jasmine', 'scsslint']);
+  grunt.registerTask('test', ['sass', 'clean', 'jasmine', 'shell']);
   grunt.registerTask('default', ['test']);
 };

data/app/assets/VERSION.txt

@@ -1 +1 @@
-4.8.1
+4.8.2

data/app/assets/docs/mixins.md

@@ -351,7 +351,7 @@ Tabular numbers have numerals of a standard fixed width. As all numbers have the
       @include core-24($tabular-numbers: true);
     }
 
-[See an example of tabular numbers in a table](http://govuk-elements.herokuapp.com/#data-in-a-table)
+[See an example of tabular numbers in a table](http://govuk-elements.herokuapp.com/data/#data-table-numeric)
 
 #### external links
 

data/app/assets/package.json

@@ -6,9 +6,9 @@
     "grunt": "~0.4.2",
     "grunt-cli": "0.1.11",
     "grunt-contrib-clean":"~0.6.0",
-    "grunt-contrib-jasmine": "~0.8.2",
+    "grunt-contrib-jasmine": "^1.0.0",
     "grunt-contrib-sass": "0.7.4",
-    "grunt-scss-lint": "0.3.4",
+    "grunt-shell": "^1.1.2",
     "jquery": "~1.11.3"
   },
   "scripts": {

data/app/assets/stylesheets/_colours.scss

@@ -1,5 +1,4 @@
-// Colours for the site, as per:
-// http://alphagov.github.com/design/gov.uk.colours/
+// Colours for the site
 
 // Departmental colours
 $attorney-generals-office: #9f1888;

data/app/assets/stylesheets/_conditionals.scss

@@ -76,6 +76,7 @@ $mobile-ie6: true !default;
     }
   }
 }
+
 @mixin ie($version) {
   @if $is-ie {
     @if $ie-version == $version {

data/app/assets/stylesheets/_css3.scss

@@ -8,6 +8,10 @@
 // You can use the @warn directive to deprecate a mixin where the property
 // no longer needs prefixes.
 
+// This style of indentation is preferred as it is easier to scan
+// Allow more than two spaces per indentation level and don't require a space after a colon
+// scss-lint:disable Indentation SpaceAfterPropertyColon
+
 @mixin border-radius($radius) {
   -webkit-border-radius: $radius; // Chrome 4.0, Safari 3.1 to 4.0, Mobile Safari 3.2, Android Browser 2.1
      -moz-border-radius: $radius; // Firefox 2.0 to 3.6

data/app/assets/stylesheets/_device-pixels.scss

@@ -4,8 +4,7 @@
   only screen and (  -o-min-device-pixel-ratio: #{($ratio*10)}/10),
   only screen and (     min-device-pixel-ratio: $ratio),
   only screen and (             min-resolution: #{($ratio*96)}dpi),
-  only screen and (             min-resolution: #{$ratio}dppx) { 
+  only screen and (             min-resolution: #{$ratio}dppx) {
     @content;
   }
 }
-

data/app/assets/stylesheets/_font_stack.scss

@@ -10,10 +10,13 @@
 //  the font-stack in a font-face declaration rather
 //  than with the usual font-family.
 
+// Allow uppercase letters in font stack variable names
+// scss-lint:disable NameFormat
+
 // New Transport Light
 
 $NTA-Light:
-  "nta", 
+  "nta",
   Arial,
   sans-serif;
 
@@ -21,7 +24,7 @@ $NTA-Light:
 
 $NTA-Light-Tabular:
   "ntatabularnumbers",
-  "nta", 
+  "nta",
   Arial,
   sans-serif;
 

data/app/assets/stylesheets/_grid_layout.scss

@@ -1,7 +1,7 @@
-@import '_conditionals.scss';
-@import '_css3.scss';
-@import '_measurements.scss';
-@import '_shims.scss';
+@import 'conditionals';
+@import 'css3';
+@import 'measurements';
+@import 'shims';
 
 $site-width: 960px;
 
@@ -17,15 +17,18 @@ $site-width: 960px;
 
 %site-width-container {
   max-width: $site-width;
-  @include ie-lte(8){
+
+  @include ie-lte(8) {
     width: $site-width;
   }
 
   margin: 0 $gutter-half;
-  @include media(tablet){
+
+  @include media(tablet) {
     margin: 0 $gutter;
   }
-  @include media($min-width: ($site-width + $gutter * 2)){
+
+  @include media($min-width: ($site-width + $gutter * 2)) {
     margin: 0 auto;
   }
 }
@@ -43,7 +46,8 @@ $site-width: 960px;
 %outdent-to-full-width {
   margin-left: -$gutter-half;
   margin-right: -$gutter-half;
-  @include media(tablet){
+
+  @include media(tablet) {
     margin-left: -$gutter;
     margin-right: -$gutter;
   }
@@ -87,11 +91,13 @@ $site-width: 960px;
 //   }
 
 @mixin grid-column($width, $full-width: tablet, $float: left) {
-  @include media($full-width){
+
+  @include media($full-width) {
     float: $float;
     width: percentage($width);
   }
-  @include ie-lte(7){
+
+  @include ie-lte(7) {
     width: (($site-width + $gutter) * $width) - $gutter;
   }
 
@@ -108,8 +114,9 @@ $site-width: 960px;
   @warn "The @mixin outer-block is deprecated and should be updated to use new grid helpers";
   margin: 0 auto;
   width: auto;
-  max-width: 960 + $gutter*2;
+  max-width: 960 + $gutter * 2;
   @extend %contain-floats;
+
   @include ie-lte(8) {
     width: 1020px;
   }
@@ -121,6 +128,7 @@ $site-width: 960px;
   @warn "The @mixin inner-block is deprecated and should be updated to use new grid helpers";
   #{$margin-or-padding}-left: $gutter-half;
   #{$margin-or-padding}-right: $gutter-half;
+
   @include media(tablet) {
     #{$margin-or-padding}-left: $gutter;
     #{$margin-or-padding}-right: $gutter;

data/app/assets/stylesheets/_measurements.scss

@@ -1,14 +1,14 @@
 // Measurements used across GOV.UK
 
 $full-width: 100%;
-$one-quarter: $full-width/4;
-$one-third: $full-width/3;
-$half: $full-width/2;
-$two-thirds: ($full-width)-($one-third);
-$three-quarters: ($full-width)-($one-quarter);
+$one-quarter: $full-width / 4;
+$one-third: $full-width / 3;
+$half: $full-width / 2;
+$two-thirds: ($full-width) - ($one-third);
+$three-quarters: ($full-width) - ($one-quarter);
 
 $gutter: 30px;
-$gutter-one-quarter: $gutter/4;
-$gutter-one-third: $gutter/3;
-$gutter-half: $gutter/2;
+$gutter-one-quarter: $gutter / 4;
+$gutter-one-third: $gutter / 3;
+$gutter-half: $gutter / 2;
 $gutter-two-thirds: $gutter - $gutter-one-third;

data/app/assets/stylesheets/_shims.scss

@@ -1,7 +1,7 @@
 // Cross-browser shims
 // Ways of normalising properties across browsers.
 
-@import "_conditionals";
+@import "conditionals";
 
 // From: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
 
@@ -48,6 +48,7 @@
     display: block;
     clear: both;
   }
+
   @include ie-lte(7) {
     zoom: 1;
   }

data/app/assets/stylesheets/_typography.scss

@@ -1,7 +1,7 @@
-@import '_font_stack.scss';
-@import '_conditionals.scss';
-@import '_device-pixels.scss';
-@import '_url-helpers.scss';
+@import 'font_stack';
+@import 'conditionals';
+@import 'device-pixels';
+@import 'url-helpers';
 
 //  GOV.UK typography palettes
 
@@ -15,6 +15,9 @@
 
 // CORE FONTS - NEW TRANSPORT
 
+// Allow uppercase letters in font stack variable names
+// scss-lint:disable NameFormat
+
 $is-print: false !default;
 
 @mixin _core-font-generator($font-size: 19px, $font-size-640: 16px, $font-size-print: 14pt, $line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
@@ -29,15 +32,17 @@ $is-print: false !default;
   line-height: $line-height-640;
   font-weight: $font-weight;
   text-transform: none;
+
   @include media(tablet) {
     font-size: $font-size;
     line-height: $line-height;
   }
+
   @if $is-print {
     font-size: $font-size-print;
   }
 }
-
+// scss-lint:enable NameFormat
 
 @mixin core-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false, $font-weight: 400) {
   $font-size: 80px;
@@ -133,7 +138,7 @@ $is-print: false !default;
   padding-top: 8px;
   padding-bottom: 7px;
 
-  @include media(tablet){
+  @include media(tablet) {
     padding-top: 6px;
     padding-bottom: 14px;
   }
@@ -145,7 +150,7 @@ $is-print: false !default;
   padding-top: 10px;
   padding-bottom: 10px;
 
-  @include media(tablet){
+  @include media(tablet) {
     padding-top: 7px;
     padding-bottom: 13px;
   }
@@ -157,7 +162,7 @@ $is-print: false !default;
   padding-top: 8px;
   padding-bottom: 7px;
 
-  @include media(tablet){
+  @include media(tablet) {
     padding-top: 6px;
     padding-bottom: 9px;
   }
@@ -169,7 +174,7 @@ $is-print: false !default;
   padding-top: 8px;
   padding-bottom: 7px;
 
-  @include media(tablet){
+  @include media(tablet) {
     padding-top: 4px;
     padding-bottom: 6px;
   }
@@ -181,7 +186,7 @@ $is-print: false !default;
   padding-top: 9px;
   padding-bottom: 6px;
 
-  @include media(tablet){
+  @include media(tablet) {
     padding-top: 6px;
     padding-bottom: 4px;
   }
@@ -193,7 +198,7 @@ $is-print: false !default;
   padding-top: 2px;
   padding-bottom: 8px;
 
-  @include media(tablet){
+  @include media(tablet) {
     padding-top: 0;
     padding-bottom: 5px;
   }
@@ -205,7 +210,7 @@ $is-print: false !default;
   padding-top: 8px;
   padding-bottom: 7px;
 
-  @include media(tablet){
+  @include media(tablet) {
     padding-top: 5px;
     padding-bottom: 5px;
   }
@@ -217,7 +222,7 @@ $is-print: false !default;
   padding-top: 8px;
   padding-bottom: 7px;
 
-  @include media(tablet){
+  @include media(tablet) {
     padding-top: 5px;
     padding-bottom: 5px;
   }
@@ -243,11 +248,11 @@ $is-print: false !default;
 }
 
 @mixin external-link-12-no-hover {
-  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0px);
+  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0);
 }
 
 @mixin external-link-12 {
-  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0px, $top-hover: -388px);
+  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0, $top-hover: -388px);
 }
 
 @mixin external-link-13-no-hover {

data/app/assets/stylesheets/_url-helpers.scss

@@ -8,7 +8,7 @@ $path: false !default;
 @function file-url($file) {
   $url: '';
   @if $path {
-    $url: url($path+$file);
+    $url: url($path + $file);
   } @else {
     $url: image-url($file);
   }

data/app/assets/stylesheets/design-patterns/_alpha-beta.scss

@@ -1,7 +1,7 @@
-@import "../_colours";
-@import "../_typography";
-@import "../_shims";
-@import "../_grid_layout";
+@import "../colours";
+@import "../typography";
+@import "../shims";
+@import "../grid_layout";
 
 // Phase banner usage:
 //
@@ -10,10 +10,12 @@
 // }
 
 @mixin phase-banner($state: alpha) {
-  padding: 10px 0 8px 0;
+  padding: 10px 0 8px;
+
   @include media(tablet) {
     padding-bottom: 10px;
   }
+
   border-bottom: 1px solid $border-colour;
 
   p {
@@ -51,19 +53,19 @@
   @include inline-block;
   vertical-align: top;
 
-  @include media(tablet){
+  @include media(tablet) {
     vertical-align: baseline;
   }
 
   margin: 0 8px 0 0;
   padding: 2px 5px 0;
 
-  @include bold-16($line-height: 20/16);
+  @include bold-16($line-height: 20 / 16);
   text-transform: uppercase;
   letter-spacing: 1px;
   text-decoration: none;
 
-  color: #fff;
+  color: $white;
   @if $state == alpha {
     background-color: $alpha-colour;
   } @else if $state == beta {

data/app/assets/stylesheets/design-patterns/_breadcrumbs.scss

@@ -1,7 +1,7 @@
-@import "../_colours";
-@import "../_typography";
-@import "../_shims";
-@import "../_url-helpers";
+@import "../colours";
+@import "../typography";
+@import "../shims";
+@import "../url-helpers";
 
 // Breadcrumbs usage:
 //
@@ -23,6 +23,7 @@
     float: left;
 
     background-image: file-url("separator.png");
+
     @include device-pixel-ratio() {
       background-image: file-url("separator-2x.png");
       background-size: 6px 11px;

data/app/assets/stylesheets/design-patterns/_buttons.scss

@@ -1,7 +1,7 @@
-@import '../_shims.scss';
-@import '../_css3.scss';
-@import '../_conditionals.scss';
-@import '../_colours.scss';
+@import '../shims';
+@import '../css3';
+@import '../conditionals';
+@import '../colours';
 
 // Mixin and defaults for making buttons on GOV.UK services.
 
@@ -20,14 +20,14 @@
 // }
 
 
-@mixin button($colour: $button-colour){
+@mixin button($colour: $button-colour) {
   // Colour
   background-color: $colour;
 
   // Size and shape
   position: relative;
   @include inline-block;
-  padding: 0.3em 0.6em 0.2em 0.6em;
+  padding: 0.3em 0.6em 0.2em;
   border: none;
   @include border-radius(0);
   -webkit-appearance: none;
@@ -46,13 +46,16 @@
 
   // Interaction
   cursor: pointer;
-  &:visited{
+
+  &:visited {
     background-color: $colour;
   }
+
   &:hover,
   &:focus {
     background-color: darken($colour, 5%);
   }
+
   &:active {
     top: 2px;
     @include box-shadow(0 0 0 $colour);
@@ -63,10 +66,11 @@
   &[disabled="disabled"],
   &[disabled] {
     @include opacity(0.5);
-    &:hover{
+    &:hover {
       cursor: default;
       background-color: $colour;
     }
+
     &:active {
       top: 0;
       @include box-shadow(0 2px 0 darken($colour, 15%));
@@ -79,18 +83,20 @@
   // Set text colour depending on background colour
   @if lightness($colour) < 50% {
     color: $white;
+
     &:link,
     &:hover,
     &:focus,
-    &:visited{
+    &:visited {
       color: $white;
     }
   } @else {
     color: $text-colour;
+
     &:link,
     &:hover,
     &:focus,
-    &:visited{
+    &:visited {
       color: $text-colour;
     }
   }
@@ -107,6 +113,7 @@
     top: 0;
     left: 0;
   }
+
   &:active:before {
     top: -10%;
     height: 120%;
@@ -132,7 +139,7 @@
     &[type="submit"],
     &[type="reset"],
     &[type="button"] {
-      filter:chroma(color=#000000);
+      filter: chroma(color = $black);
     }
 
     &[type=submit].button {

data/app/assets/stylesheets/design-patterns/_media-player.scss

@@ -1,5 +1,5 @@
-@import '../_colours';
-@import '../_url-helpers';
+@import '../colours';
+@import '../url-helpers';
 
 // Player overrides
 
@@ -44,15 +44,17 @@
       cursor: pointer;
     }
 
-    button, a {
+    a,
+    button {
       &:focus {
-        background-color: orange;
+        background-color: $focus-colour;
         outline: none;
       }
     }
 
     .player-controls {
-      .play, .pause {
+      .play,
+      .pause {
         position: absolute;
         bottom: 0;
         left: 0;
@@ -72,7 +74,8 @@
         background-image: file-url('player-icon-pause.png');
       }
 
-      .rewind, .forward {
+      .rewind,
+      .forward {
         position: absolute;
         top: 0;
         z-index: 30;
@@ -132,7 +135,8 @@
         content: "d";
       }
 
-      .vol-down, .vol-up {
+      .vol-down,
+      .vol-up {
         position: absolute;
         bottom: 0;
         height: 40px;
@@ -143,7 +147,8 @@
         text-align: center;
         z-index: 10;
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           color: $light-blue;
         }
       }
@@ -222,7 +227,9 @@
         height: 100%;
         padding-bottom: 1px;
         width: 20px;
-        color: rgba(0,0,0,0.5);
+        // Allow RGBA here, it is the only colour value with alpha transparency
+        // scss-lint:disable ColorVariable
+        color: rgba(0, 0, 0, 0.5);
         z-index: 10;
       }
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 4.8.1
+  version: 4.8.2
 platform: ruby
 authors:
 - Bradley Wright
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-02-18 00:00:00.000000000 Z
+date: 2016-03-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -82,7 +82,6 @@ files:
 - Rakefile
 - app/assets/.gitignore
 - app/assets/.ruby-version
-- app/assets/.scss-lint.yaml
 - app/assets/.travis.yml
 - app/assets/CHANGELOG.md
 - app/assets/CONTRIBUTING.md

data/app/assets/.scss-lint.yaml

@@ -1,107 +0,0 @@
-linters:
-  BangFormat:
-    enabled: true
-
-  DuplicateProperty:
-    enabled: true
-
-  EmptyRule:
-    enabled: true
-
-  FinalNewline:
-    enabled: true
-
-  Indentation:
-    character: space
-    enabled: true
-    exclude:
-      - 'stylesheets/_css3.scss'
-
-  MergeableSelector:
-    enabled: true
-
-  PropertySpelling:
-    enabled: true
-
-  SingleLinePerProperty:
-    enabled: true
-
-  TrailingSemicolon:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  # Disabled rules
-
-  BorderZero:
-    enabled: false
-  ColorKeyword:
-    enabled: false
-  Comment:
-    enabled: false
-  Compass Linters:
-    enabled: false
-  DebugStatement:
-    enabled: false
-  DeclarationOrder:
-    enabled: false
-  ElsePlacement:
-    enabled: false
-  EmptyLineBetweenBlocks:
-    enabled: false
-  HexLength:
-    enabled: false
-  HexNotation:
-    enabled: false
-  HexValidation:
-    enabled: false
-  IdWithExtraneousSelector:
-    enabled: false
-  ImportPath:
-    enabled: false
-  LeadingZero:
-    enabled: false
-  NameFormat:
-    enabled: false
-  NestingDepth:
-    enabled: false
-  PlaceholderInExtend:
-    enabled: false
-  PropertySortOrder:
-    enabled: false
-  QualifyingElement:
-    enabled: false
-  SelectorDepth:
-    enabled: false
-  SelectorFormat:
-    enabled: false
-  Shorthand:
-    enabled: false
-  SingleLinePerSelector:
-    enabled: false
-  SpaceAfterComma:
-    enabled: false
-  SpaceAfterPropertyColon:
-    enabled: false
-  SpaceAfterPropertyName:
-    enabled: false
-  SpaceBeforeBrace:
-    enabled: false
-  SpaceBetweenParens:
-    enabled: false
-  StringQuotes:
-    enabled: false
-  TrailingZero:
-    enabled: false
-  UnnecessaryMantissa:
-    enabled: false
-  UnnecessaryParentReference:
-    enabled: false
-  VendorPrefixes:
-    enabled: false
-  ZeroUnit:
-    enabled: false