Merge pull request #160 from alphagov/front-end-lint

Add linting for SASS and Javascript

.sass-lint.yml

@@ -0,0 +1,29 @@
+options:
+  merge-default-rules: true
+
+rules:
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2
+  mixins-before-declarations:
+    - 2
+    -
+      exclude:
+        - media
+  no-warn: 1
+  no-debug: 1
+  no-ids: 1
+  no-important: 2
+  hex-notation:
+    - 2
+    -
+      style: uppercase
+  indentation:
+    - 2
+    -
+      size: 2
+  leading-zero: 0
+  nesting-depth: 0
+  property-sort-order: 0
+  shorthand-values: 0
+  variable-for-property: 0

app/assets/stylesheets/app.scss

@@ -4,39 +4,50 @@
   background-color: $red;
 }
 
-#global-header #logo {
+#global-header {
-  white-space: nowrap;
-  font-size: 27px;
-  line-height: 32px;
 
-  img {
+  #logo {
-    padding-right: 8px;
+
+    white-space: nowrap;
+    font-size: 27px;
+    line-height: 32px;
+
+    img {
+      padding-right: 8px;
+    }
+
+  }
+
+  .header-proposition {
+    #proposition-links {
+      li {
+        padding: 0 0 0 15px;
+      }
+    }
   }
 
 }
 
 @include media(desktop) {
-
   #proposition-menu {
     float: right;
   }
-
-  #global-header .header-proposition #proposition-links li {
-    padding: 0 0 0 15px;
-  }
-
 }
 
-a:visited {
+a {
-  color: $link-colour;
+  &:visited {
+    color: $link-colour;
+  }
 }
 
 .form-control-5em {
+
   width: 100%;
 
   @include media(tablet) {
     width: 5em;
   }
+
 }
 
 .column-main {

app/assets/stylesheets/components/banner.scss

@@ -32,29 +32,35 @@
 }
 
 .banner-info {
-  @extend .banner;
+
+  @extend %banner;
   background: $govuk-blue;
   color: $white;
 
-  a:link, a:visited {
+  a {
-    color: $white;
+
-    text-decoration: underline;
+    &:link,
-  }
+    &:visited {
+      color: $white;
+      text-decoration: underline;
+    }
+
+    &:hover {
+      color: $light-blue-25;
+    }
 
-  a:hover {
-    color: $light-blue-25;
   }
 
 }
 
 .banner-dangerous {
 
-  @extend .banner;
+  @extend %banner;
+  @include bold-19;
   background: $white;
   color: $error-colour;
   border: 5px solid $error-colour;
   margin: 15px 0;
-  @include bold-19;
   text-align: left;
 
   .button {
@@ -66,15 +72,18 @@
 
 .banner-tip {
 
-  @extend .banner;
+  @extend %banner;
   background: $yellow;
   color: $text-colour;
   text-align: left;
   font-weight: bold;
 
-  a:link, a:visited {
+  a {
-    color: $text-colour;
+    &:link,
-    text-decoration: underline;
+    &:visited {
+      color: $text-colour;
+      text-decoration: underline;
+    }
   }
 
   ol {
@@ -87,7 +96,7 @@
   @extend %banner;
   background: $white;
   color: $text-colour;
-  background-image: file-url("icon-important-2x.png");
+  background-image: file-url('icon-important-2x.png');
   background-size: 34px 34px;
   background-position: 0 0;
   background-repeat: no-repeat;

app/assets/stylesheets/components/browse-list.scss

@@ -7,14 +7,25 @@
     margin-bottom: $gutter-two-thirds;
   }
 
-  a.browse-list-link {
+  &-link {
 
     @include bold-24;
 
-    &-destructive,
+    &-destructive {
-    &-destructive:visited {
+
       @include bold-24;
       color: $error-colour;
+
+      &:visited,
+      &:link {
+        @include bold-24;
+        color: $error-colour;
+      }
+
+      &:hover {
+        color: $mellow-red;
+      }
+
     }
 
   }

app/assets/stylesheets/components/email-message.scss

@@ -4,13 +4,13 @@
   border: 1px solid $border-colour;
 
   &-subject {
-    border-bottom: 1px solid $border-colour;;
-    padding: 10px;
     @include bold-19;
+    border-bottom: 1px solid $border-colour;
+    padding: 10px;
   }
 
   &-body {
-    border-bottom: 1px solid white;
+    border-bottom: 1px solid $white;
     padding: 10px;
     overflow: hidden;
     max-height: 103px;

app/assets/stylesheets/components/file-upload.scss

@@ -15,10 +15,11 @@
       overflow: hidden;
       position: absolute;
       z-index: -1;
-    }
 
-    &-field:focus + .file-upload-button {
+      &:focus + .file-upload-button {
-      outline: 3px solid $yellow;
+        outline: 3px solid $yellow;
+      }
+
     }
 
     &-button {
@@ -27,9 +28,9 @@
     }
 
     &-filename {
+      @include bold-19;
       display: inline-block;
       padding-left: $gutter-half;
-      @include bold-19;
     }
 
   }

app/assets/stylesheets/components/navigation.scss

@@ -2,7 +2,8 @@
 
   padding: 20px 0 0 0;
 
-  ul, h2 {
+  ul,
+  h2 {
     @include core-19;
     border-bottom: 1px solid $border-colour;
     margin: 10px 20px 15px 0;
@@ -18,14 +19,18 @@
     margin: 10px 0 0 0;
   }
 
-  a:link,
+  a {
-  a:visited {
+
-    text-decoration: none;
+    &:link,
-  }
+    &:visited {
+      text-decoration: none;
+    }
+
+    &:hover {
+      color: $link-hover-colour;
+      text-decoration: underline;
+    }
 
-  a:hover {
-    color: $link-hover-colour;
-    text-decoration: underline;
   }
 
 }

app/assets/stylesheets/components/page-footer.scss

@@ -14,16 +14,20 @@
     line-height: 40px;
     padding: 0 0 0 5px;
 
-    a:visited,
+    a {
-    a:link {
+
-      color: $error-colour;
+      &:visited,
-      display: inline-block;
+      &:link {
-      vertical-align: center;
+        color: $error-colour;
-    }
+        display: inline-block;
+        vertical-align: center;
+      }
+
+      &:hover,
+      &:active {
+        color: $mellow-red;
+      }
 
-    a:hover,
-    a:active {
-      color: $mellow-red;
     }
 
   }
@@ -33,8 +37,6 @@
     margin-top: $gutter;
   }
 
-  .button {}
-
   .button-destructive {
     @include button($error-colour);
     padding: 0.52632em 0.78947em 0.26316em 0.78947em;

app/assets/stylesheets/components/sms-message.scss

@@ -2,7 +2,7 @@
 .sms-message-wrapper {
   width: 100%;
   box-sizing: border-box;
-  padding: $gutter/2;
+  padding: $gutter-half;
   background: $panel-colour;
   border: 1px solid $panel-colour;
   border-radius: 5px;
@@ -36,33 +36,7 @@
   z-index: 50;
 }
 
-label.sms-message-option {
-
-  display: block;
-  position: relative;
-
-  &.selected {
-
-    .sms-message-wrapper-with-radio {
-      background: $white;
-      border: 1px solid $text-colour;
-    }
-
-  }
-
-  &.focused {
-
-    outline: none;
-
-    .sms-message-wrapper-with-radio {
-      box-shadow: 0 0 0 3px $yellow;
-    }
-
-  }
-
-}
-
 .sms-message-use-link {
-  margin-top: 70px;
   @include bold-19;
+  margin-top: 70px;
 }

app/assets/stylesheets/components/table.scss

@@ -25,9 +25,13 @@
       color: $error-colour;
       font-weight: bold;
 
-      a:link,
+      a {
-      a:visited {
+
-        color: $error-colour;
+        &:link,
+        &:visited {
+          color: $error-colour;
+        }
+
       }
 
     }
@@ -50,7 +54,7 @@
 }
 
 .table-field-right-aligned {
-  @extend .table-field;
+  @extend %table-field;
   text-align: right;
 }
 
@@ -62,8 +66,8 @@
 }
 
 .table-show-more-link {
+  @include bold-16;
   margin-top: -20px;
   border-bottom: 1px solid $border-colour;
   padding-bottom: 10px;
-  @include bold-16;
 }

app/assets/stylesheets/components/textbox.scss

@@ -1,5 +1,7 @@
 .textbox-highlight {
 
+  $tag-background: rgba($light-blue, 0.7);
+
   &-wrapper {
     position: relative;
   }
@@ -72,8 +74,7 @@
       border-radius: 3px;
       overflow: hidden;
       display: inline;
-      box-shadow: inset 0.75em 0 0 0 rgba($light-blue, .7),
+      box-shadow: inset 0.75em 0 0 0 $tag-background, inset -0.75em 0 0 0 $tag-background;
-                  inset -0.75em 0 0 0 rgba($light-blue, .7);
     }
 
   }

app/templates/components/sms-message.html

@@ -1,9 +1,6 @@
 {% macro sms_message(
-  body, recipient=None, name=None, id=None, edit_link=None, input_name=None, input_index=None
+  body, recipient=None, name=None, id=None, edit_link=None
 ) %}
-  {% if input_name %}
-    <label class="sms-message-option" for="{{ input_name }}-{{ input_index }}">
-  {% endif %}
   {% if name %}
     <h3 class="sms-message-name">
       {% if edit_link %}
@@ -13,9 +10,6 @@
       {% endif %}
     </h3>
   {% endif %}
-  {% if input_name %}
-    <input class="sms-message-picker" type="radio" id="{{ input_name }}-{{ input_index }}" name="{{ input_name }}" value="{{ input_index }}" />
-  {% endif %}
   <div class="sms-message-wrapper{% if input_name %}-with-radio{% endif %}">
     {{ body|placeholders }}
   </div>
@@ -29,7 +23,4 @@
       Template ID: {{ id }}
     </p>
   {% endif %}
-  {% if input_name %}
-    </label>
-  {% endif %}
 {% endmacro %}

app/templates/views/styleguide.html

@@ -140,12 +140,6 @@
         name='Two week reminder',
         edit_link='#'
       ) }}
-      {{ sms_message(
-        "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax",
-        name="Reminder",
-        input_name="template",
-        input_index=1
-      ) }}
     </div>
   </div>
 

gulpfile.babel.js

@@ -7,6 +7,7 @@
 // - - - - - - - - - - - - - - -
 var gulp = require('gulp'),
     plugins = require('gulp-load-plugins')(),
+    stylish = require('jshint-stylish'),
 
 // 2. CONFIGURATION
 // - - - - - - - - - - - - - - -
@@ -83,6 +84,24 @@ gulp.task('watchForChanges', function() {
   gulp.watch(paths.src + 'images/**/*', ['images']);
 });
 
+gulp.task('lint:sass', () => gulp
+  .src(paths.src + '/stylesheets/**/*.scss')
+    .pipe(plugins.sassLint())
+    .pipe(plugins.sassLint.format(stylish))
+    .pipe(plugins.sassLint.failOnError())
+);
+
+gulp.task('lint:js', () => gulp
+  .src(paths.src + 'javascripts/**/*.js')
+    .pipe(plugins.jshint({'esversion': 6, 'esnext': false}))
+    .pipe(plugins.jshint.reporter(stylish))
+    .pipe(plugins.jshint.reporter('fail'))
+);
+
+gulp.task('lint',
+  ['lint:sass', 'lint:js']
+);
+
 // Default: compile everything
 gulp.task('default',
     ['copy:govuk_template:template', 'copy:govuk_template:assets', 'javascripts', 'sass', 'images']

package.json

@@ -6,7 +6,7 @@
     "node": "5.0.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "gulp lint",
     "postinstall": "./node_modules/bower/bin/bower install",
     "build": "gulp",
     "watch": "gulp watch"
@@ -35,5 +35,11 @@
     "gulp-uglify": "1.5.1",
     "jquery": "1.11.2",
     "query-command-supported": "1.0.0"
+  },
+  "devDependencies": {
+    "gulp-jshint": "2.0.0",
+    "gulp-sass-lint": "1.1.1",
+    "jshint": "2.9.1",
+    "jshint-stylish": "2.1.0"
   }
 }

scripts/run_tests.sh

@@ -25,9 +25,12 @@ function display_result {
 pep8 .
 display_result $? 1 "Code style check"
 
+npm test
+display_result $? 2 "Front end code style check"
+
 ## Code coverage
 #py.test --cov=app tests/
-#display_result $? 2 "Code coverage"
+#display_result $? 3 "Code coverage"
 
 py.test -v
-display_result $? 3 "Unit tests"
+display_result $? 4 "Unit tests"