mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 10:53:28 -05:00
Merge pull request #160 from alphagov/front-end-lint
Add linting for SASS and Javascript
This commit is contained in:
Adam Shimali
29
.sass-lint.yml
Normal file
29
.sass-lint.yml
Normal file
@@ -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
|
||||
@@ -4,39 +4,50 @@
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
#global-header #logo {
|
||||
white-space: nowrap;
|
||||
font-size: 27px;
|
||||
line-height: 32px;
|
||||
#global-header {
|
||||
|
||||
img {
|
||||
padding-right: 8px;
|
||||
#logo {
|
||||
|
||||
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 {
|
||||
color: $link-colour;
|
||||
a {
|
||||
&:visited {
|
||||
color: $link-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-5em {
|
||||
|
||||
width: 100%;
|
||||
|
||||
@include media(tablet) {
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.column-main {
|
||||
|
||||
@@ -32,29 +32,35 @@
|
||||
}
|
||||
|
||||
.banner-info {
|
||||
@extend .banner;
|
||||
|
||||
@extend %banner;
|
||||
background: $govuk-blue;
|
||||
color: $white;
|
||||
|
||||
a:link, a:visited {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a {
|
||||
|
||||
&: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 {
|
||||
color: $text-colour;
|
||||
text-decoration: underline;
|
||||
a {
|
||||
&:link,
|
||||
&: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;
|
||||
|
||||
@@ -7,14 +7,25 @@
|
||||
margin-bottom: $gutter-two-thirds;
|
||||
}
|
||||
|
||||
a.browse-list-link {
|
||||
&-link {
|
||||
|
||||
@include bold-24;
|
||||
|
||||
&-destructive,
|
||||
&-destructive:visited {
|
||||
&-destructive {
|
||||
|
||||
@include bold-24;
|
||||
color: $error-colour;
|
||||
|
||||
&:visited,
|
||||
&:link {
|
||||
@include bold-24;
|
||||
color: $error-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $mellow-red;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -15,10 +15,11 @@
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&-field:focus + .file-upload-button {
|
||||
outline: 3px solid $yellow;
|
||||
&:focus + .file-upload-button {
|
||||
outline: 3px solid $yellow;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-button {
|
||||
@@ -27,9 +28,9 @@
|
||||
}
|
||||
|
||||
&-filename {
|
||||
@include bold-19;
|
||||
display: inline-block;
|
||||
padding-left: $gutter-half;
|
||||
@include bold-19;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
a {
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-colour;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $link-hover-colour;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -14,16 +14,20 @@
|
||||
line-height: 40px;
|
||||
padding: 0 0 0 5px;
|
||||
|
||||
a:visited,
|
||||
a:link {
|
||||
color: $error-colour;
|
||||
display: inline-block;
|
||||
vertical-align: center;
|
||||
}
|
||||
a {
|
||||
|
||||
&:visited,
|
||||
&:link {
|
||||
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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -25,9 +25,13 @@
|
||||
color: $error-colour;
|
||||
font-weight: bold;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $error-colour;
|
||||
a {
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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']
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user