Correct secondary button colours and reorder css attributes to satisf…

…y linter (#344)

* Correct secondary button colors and reorder css attributes to satisfy linter

* Updated print button icon to be black

* Get rid of print button icon hover state

src/components/button/_button.scss

@@ -6,15 +6,15 @@
   $border-color: $bg,
   $border-color-hover: darken($border-color, $darken-hover)
 ) {
-  background-color: $bg;
-  color: $color;
   border-color: $border-color;
+  background: $bg;
+  color: $color;
 
   &:hover,
   &:focus {
-    color: $color-hover;
-    background-color: darken($bg, $darken-hover);
     border-color: $border-color-hover;
+    background: darken($bg, $darken-hover);
+    color: $color-hover;
   }
 
   &:focus {
@@ -23,34 +23,40 @@
 }
 
 .btn {
-  background-color: $color-button;
-  color: $color-white;
-  border: 1px solid $color-button;
+  display: inline-block;
+  margin: 0;
   padding: 0.75rem 1rem;
+  width: 100%;
 
-  margin: 0;
+  border: 1px solid $color-button;
+  border-radius: $input-radius;
+
+  background: $color-button;
+  color: $color-white;
+
+  font-family: inherit;
   font-size: 1rem;
   font-weight: 600;
-  font-family: inherit;
-  border-radius: $input-radius;
-  display: inline-block;
-  text-rendering: optimizeLegibility;
+
   text-decoration: none;
-  width: 100%;
-  transition: background-color 200ms ease-in, color 200ms ease-in, border 200ms ease-in;
+  text-rendering: optimizeLegibility;
+
   cursor: pointer;
 
+  transition: background-color 200ms ease-in, color 200ms ease-in, border 200ms ease-in;
+
   &:hover,
   &:focus {
-    text-decoration: none;
-    color: $color-white;
-    background-color: darken($color-button, 10%);
     border-color: darken($color-button, 10%);
+    background-color: darken($color-button, 10%);
+
+    color: $color-white;
+    text-decoration: none;
   }
 
   &:focus {
-    outline-offset: 3px;
     outline: 3px solid $color-focus;
+    outline-offset: 3px;
   }
 
   @include mq(s) {
@@ -63,7 +69,8 @@
 }
 
 .btn--secondary {
-  @include btn-override($bg: $color-button-secondary, $color: $color-links, $color-hover: $color-links-hover, $darken-hover: 5%);
+  @include btn-override($bg: $color-button-secondary, $color: $color-black, $color-hover: $color-black, $darken-hover: 5%);
+  font-weight: normal;
 }
 
 .btn--ghost {
@@ -74,44 +81,50 @@
     $border-color-hover: rgba(255, 255, 255, 1)
   );
 
-  border-width: 2px;
   padding: 0.5rem 1rem;
+  border-width: 2px;
 }
 
 .btn--ghost-blue {
   @include btn-override($bg: transparent, $color: $color-blue, $border-color: darken($color-blue, 10%), $border-color-hover: $color-blue);
 
-  border-width: 2px;
   padding: 0.5rem 1rem;
+  border-width: 2px;
 }
 
 .btn--small {
   padding: 0.4rem 0.5rem;
-  font-weight: 600;
   font-size: 0.9rem;
 }
 
 .btn--loader {
-  transition: color 300ms ease-out;
   position: relative;
+  transition: color 300ms ease-out;
+
   &::after {
-    display: block;
     content: '';
-    width: 2rem;
-    height: 2rem;
-    opacity: 0;
+
+    display: block;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
+
     margin: auto;
+
+    width: 2rem;
+    height: 2rem;
+
     background-image: url('#{$static}/img/loader.svg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 1.5rem;
-    transition: opacity 300ms ease-out 200ms;
+
+    opacity: 0;
+
     pointer-events: none;
+    transition: opacity 300ms ease-out 200ms;
   }
   &.is-loading {
     color: transparent;

src/components/button/_macro.njk

@@ -4,7 +4,7 @@
 
   <button
       type="{{ params.type if params.type else ('button' if params.print else 'submit') }}"
-      class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}{% if params.print %} btn--secondary icon--print-link print__hidden u-d-no js-print-btn{% endif %}"
+      class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}{% if params.print %} btn--secondary icon--print print__hidden u-d-no js-print-btn{% endif %}"
       {% if params.id %}id="{{ params.id }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
       {% if params.name %}name="{{ params.name }}"{% endif %}

src/components/checkboxes/_checkbox.scss

@@ -81,7 +81,7 @@ $checkbox-label-vertical-padding: 0.75rem;
 
   &__input:checked + &__label:before {
     border-color: $color-links-hover;
-    background: $color-grey-4;
+    background: $color-grey-5;
     box-shadow: 0 0 0 1px $color-links-hover;
   }
 

src/components/field/_field.scss

@@ -62,7 +62,7 @@
     display: none;
     clear: both;
     padding: 0 0.5rem 0.5rem;
-    background-color: $color-grey-4;
+    background-color: $color-grey-5;
 
     input:checked ~ & {
       display: block;

src/components/footer/_footer.scss

@@ -1,6 +1,6 @@
 .footer {
   padding: 2rem 0 4rem;
-  background-color: $color-grey-4;
+  background-color: $color-grey-5;
 
   &__heading {
     margin: 0 0 1rem;

src/components/input/_input-type.scss

@@ -22,7 +22,7 @@
     padding: $input-padding $input-padding * 2;
 
     border: 1px solid $color-input;
-    background-color: $color-grey-4;
+    background-color: $color-grey-5;
 
     font-size: 1rem;
     font-weight: 600;

src/components/pagination/_pagination.scss

@@ -40,7 +40,7 @@ $pagination-item-width: 2.5rem;
 
     &:hover,
     &:focus {
-      background: $color-grey-4;
+      background: $color-grey-5;
     }
   }
 

src/components/phase-banner/_phase-banner.scss

@@ -1,6 +1,6 @@
 .phase-banner {
   padding: 0.5rem 0;
-  background: $color-grey-4;
+  background: $color-grey-5;
 
   &__badge {
     margin: 0 0.5rem 0 0;

src/components/radios/_radio.scss

@@ -5,7 +5,7 @@
     @extend .checkbox__input;
 
     border-radius: 50%;
-    background: $color-grey-4;
+    background: $color-grey-5;
 
     box-shadow: inset 0 0 0 3px $color-white;
 

src/scss/patternlib.scss

@@ -76,7 +76,7 @@
     code:not(.patternlib-example__code) {
       display: inline-block;
       padding: 0.05rem 0.25rem;
-      background: $color-grey-4;
+      background: $color-grey-5;
       color: $color-red;
     }
 
@@ -147,7 +147,7 @@
 .patternlib-hero {
   padding: 2rem 0 1rem;
   width: 100%;
-  background: $color-grey-4;
+  background: $color-grey-5;
 
   &__title {
     max-width: 30rem;

src/scss/vars/_colors.scss

@@ -3,7 +3,8 @@ $color-black: #222;
 $color-grey-1: #595959;
 $color-grey-2: #999;
 $color-grey-3: #ccc;
-$color-grey-4: #f0f0f0;
+$color-grey-4: #d0d0d0;
+$color-grey-5: #f0f0f0;
 $color-white: #fff;
 
 // brand

src/styles/colours/index.njk

@@ -67,7 +67,7 @@ Our text and background colours are designed to meet accessibility needs. We aim
             },
             {
                 'bg': '#f0f0f0',
-                'var': '$color-grey-4'
+                'var': '$color-grey-5'
             },
             {
                 'bg': '#ffffff',

src/styles/typography/icons/_icons.scss

@@ -1,11 +1,6 @@
 // The @include create-icon @mixin is located in the 'partials/helpers/_mixins.scss' file
 @include create-icon($icon-name: check); // Example for the pattern library
-@include create-icon(
-  $icon-name: print-link,
-  $hover-icon-name: print-hover,
-  $position: right,
-  $btn: true
-); // Example for the pattern library
+@include create-icon($icon-name: print, $position: right, $btn: true); // Example for the pattern library
 @include create-icon($icon-name: person, $width: 1rem, $top: 1px); // Example for the pattern library
 
 @include create-icon(

src/tests/spec/print-button/print-button.spec.js

@@ -33,7 +33,7 @@ describe('Function: Print Button ', function() {
   describe('Before the button is initialised', () => {
     it('Button should have relevant classes', () => {
       expect(buttonElement.classList.contains('btn--secondary')).to.be.true;
-      expect(buttonElement.classList.contains('icon--print-link')).to.be.true;
+      expect(buttonElement.classList.contains('icon--print')).to.be.true;
       expect(buttonElement.classList.contains('print__hidden')).to.be.true;
       expect(buttonElement.classList.contains('u-d-no')).to.be.true;
       expect(buttonElement.classList.contains('js-print-btn')).to.be.true;

src/views/partials/example/_example.scss

@@ -53,7 +53,7 @@
   @for $i from 1 through 4 {
     &__radio:nth-of-type(#{$i}):checked ~ {
       #{$c}__tabs > #{$c}__tab:nth-of-type(#{$i}) {
-        background: $color-grey-4;
+        background: $color-grey-5;
       }
 
       #{$c}__panels > #{$c}__panel:nth-of-type(#{$i}) {
@@ -75,7 +75,7 @@
 .macro-options {
   margin: 0 0 1rem;
   padding: 0.5rem 1rem;
-  background: $color-grey-4;
+  background: $color-grey-5;
 
   &__summary {
     outline: none;
@@ -87,7 +87,7 @@
     padding: 0.5rem 0;
 
     th {
-      background: $color-grey-4;
+      background: $color-grey-5;
     }
 
     code {