From c7f30e19a58ec8364eac7d4df59b9c511b02f7a5 Mon Sep 17 00:00:00 2001
From: Ben Meyrick <bameyrick@gmail.com>
Date: Fri, 10 May 2019 12:28:18 +0100
Subject: [PATCH] Added border bottom to buttons (#362)

---
 src/components/button/_button.scss            | 254 +++++++++---------
 src/components/button/_macro.njk              |   6 +-
 src/components/header/_header-nav.scss        |  39 +--
 src/components/header/_macro.njk              |  17 +-
 src/components/header/header-nav.js           |   3 -
 .../{loader.svg => icons/icons--loader.svg}   |   0
 src/scss/helpers/_functions.scss              |   9 +-
 7 files changed, 159 insertions(+), 169 deletions(-)
 rename src/img/{loader.svg => icons/icons--loader.svg} (100%)

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index d5b99b482a..2701987623 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -1,57 +1,38 @@
-@mixin btn-override(
-  $bg,
-  $color,
-  $color-hover: $color,
-  $darken-hover: 10%,
-  $border-color: $bg,
-  $border-color-hover: darken($border-color, $darken-hover)
-) {
-  border-color: $border-color;
-  background: $bg;
-  color: $color;
-
-  &:hover,
-  &:focus {
-    border-color: $border-color-hover;
-    background: darken($bg, $darken-hover);
-    color: $color-hover;
-  }
-
-  &:focus {
-    outline: 3px solid $color-focus;
-  }
-}
+$button-border-height: 3px;
 
 .btn {
   display: inline-block;
   margin: 0;
-  padding: 0.75rem 1rem;
-  width: 100%;
+  padding: 0;
 
-  border: 1px solid $color-button;
-  border-radius: $input-radius;
-
-  background: $color-button;
-  color: $color-white;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
 
   font-family: inherit;
   font-size: 1rem;
   font-weight: 600;
 
-  text-decoration: none;
   text-rendering: optimizeLegibility;
 
+  vertical-align: top;
+
   cursor: pointer;
 
-  transition: background-color 200ms ease-in, color 200ms ease-in, border 200ms ease-in;
+  &__inner {
+    display: inherit;
+    padding: 0.75em 1em;
 
-  &:hover,
-  &:focus {
-    border-color: darken($color-button, 10%);
-    background-color: darken($color-button, 10%);
+    border-bottom: ems($button-border-height) solid rgba(0, 0, 0, 0.35);
+    border-radius: $input-radius;
 
+    background: $color-button;
     color: $color-white;
-    text-decoration: none;
+  }
+
+  // When preceded by another button (e.g. in a group)
+  & + & {
+    margin-left: 0.5rem;
   }
 
   &:focus {
@@ -59,138 +40,143 @@
     outline-offset: 3px;
   }
 
-  @include mq(s) {
-    width: auto;
+  // When clicked
+  &:not([class*='btn--ghost']):not([class*='btn--mobile']):active {
+    padding-top: ems(3px);
   }
-}
 
-.btn--inline {
-  padding: $input-padding 1rem;
-}
-
-.btn--secondary,
-.btn--print {
-  @include btn-override($bg: $color-button-secondary, $color: $color-black);
-  font-weight: normal;
-}
-
-.btn--print {
-  &:after {
-    @include icon('print-link');
+  &:not([class*='btn--ghost']):not([class*='btn--mobile']):active &__inner {
+    border-bottom: 0;
+  }
 
-    content: '';
+  &--small,
+  &--mobile {
+    font-size: 0.9rem;
+  }
 
-    margin: 0 0 0 0.5rem;
-    vertical-align: middle;
+  // Modifiers
+  &--inline & {
+    &__inner {
+      padding: $input-padding 1rem;
+    }
   }
-}
 
-.btn--ghost {
-  @include btn-override(
-    $bg: transparent,
-    $color: $color-white,
-    $border-color: rgba(255, 255, 255, 0.6),
-    $border-color-hover: rgba(255, 255, 255, 1)
-  );
+  &--secondary &,
+  &--print & {
+    &__inner {
+      background: $color-button-secondary;
+      color: $color-black;
+      font-weight: normal;
+    }
+  }
 
-  padding: 0.5rem 1rem;
-  border-width: 2px;
-}
+  &--print &__inner {
+    &:after {
+      @include icon('print');
 
-.btn--ghost-blue {
-  @include btn-override($bg: transparent, $color: $color-blue, $border-color: darken($color-blue, 10%), $border-color-hover: $color-blue);
+      content: '';
 
-  padding: 0.5rem 1rem;
-  border-width: 2px;
-}
-
-.btn--small {
-  padding: 0.4rem 0.5rem;
-  font-size: 0.9rem;
-}
+      margin: 0 0 0 0.5rem;
+      vertical-align: middle;
+    }
+  }
 
-.btn--loader {
-  position: relative;
-  transition: color 300ms ease-out;
+  &--loader &__inner {
+    position: relative;
+    transition: color 0.3s ease-in-out;
 
-  &::after {
-    content: '';
+    &:after {
+      @include icon($name: 'loader', $height: 1.5em);
 
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+      content: '';
 
-    margin: auto;
+      position: absolute;
 
-    width: 2rem;
-    height: 2rem;
+      top: 50%;
+      left: 50%;
 
-    background-image: url('#{$static}/img/loader.svg');
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 1.5rem;
+      transform: translate(-50%, -50%);
 
-    opacity: 0;
+      opacity: 0;
 
-    pointer-events: none;
-    transition: opacity 300ms ease-out 200ms;
+      transition: opacity 0.3s ease-in-out;
+    }
   }
-  &.is-loading {
+
+  &--loader.is-loading &__inner {
     color: transparent;
-    &::after {
+
+    &:after {
       opacity: 1;
     }
   }
-}
 
-.btn-group {
-  .btn-group__btn {
-    display: inline-block;
-    margin-right: 1rem;
-    &:last-of-type {
-      margin-right: 0;
+  // Spooky Buttons
+  &--ghost &,
+  &--mobile & {
+    &__inner {
+      border: 2px solid rgba(255, 255, 255, 0.6);
+
+      background: transparent;
+      color: $color-white;
     }
   }
-}
 
-.btn--menu {
-  @extend .btn--secondary;
-  @extend .btn--small;
-  @include mq(m) {
-    display: none;
+  &--ghost:active &,
+  &--mobile:active & {
+    &__inner {
+      border-color: $color-white;
+    }
   }
-}
 
-.btn--mobile {
-  @extend .btn--ghost;
-  @extend .btn--small;
+  &--ghost-blue & {
+    &__inner {
+      border: 2px solid $color-blue;
 
-  $size: 0.6rem;
+      background: transparent;
+      color: $color-blue;
+    }
+  }
 
-  position: relative;
-  padding-right: $size * 2.5;
+  &--ghost-blue:active & {
+    &__inner {
+      border-color: darken($color-blue, 10%);
+      color: darken($color-blue, 10%);
+    }
+  }
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 11px;
-    right: 8px;
-    width: $size;
-    height: $size;
-    background: url('#{$static}/img/icons/icons--chevron-down-white.svg') no-repeat center center;
-    background-size: $size $size;
+  &--mobile {
+    @include mq(m) {
+      display: none;
+    }
   }
 
-  &[aria-expanded='true'] {
-    &::before {
-      transform: rotate(180deg);
+  &--mobile & {
+    &__inner {
+      padding: 0.4rem 0.5rem;
+
+      &:after {
+        content: '';
+        display: inline-block;
+        margin: 0 0 0 0.5rem;
+
+        width: 12px;
+        height: 8px;
+
+        background: {
+          image: url(#{$static}/img/icons/icons--chevron-down-white.svg);
+          repeat: no-repeat;
+          size: 12px 8px;
+        }
+
+        vertical-align: middle;
+      }
     }
   }
 
-  @include mq(m) {
-    display: none;
+  &--mobile[aria-expanded='true'] & {
+    &__inner:after {
+      transform: rotate(180deg);
+    }
   }
 }
diff --git a/src/components/button/_macro.njk b/src/components/button/_macro.njk
index 1ab43d8be4..43e6925d89 100644
--- a/src/components/button/_macro.njk
+++ b/src/components/button/_macro.njk
@@ -1,7 +1,4 @@
 {% macro onsButton(params) %}
-  {#- Define common attributes we can use for the toggle button type #}
-  {% set buttonToggleAttributes %} aria-haspopup="true" aria-expanded="false" aria-controls="{{ params.ariaControls }}" aria-label="{{ params.ariaLabel }}"{% endset %}
-
   <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--print print__hidden u-d-no js-print-btn{% endif %}"
@@ -10,8 +7,7 @@
       {% if params.name %}name="{{ params.name }}"{% endif %}
       {% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
       {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
-      {% if params.isToggle %}{{ buttonToggleAttributes | safe }}{% endif %}
       >
-      {{- params.html | safe if params.html else params.text -}}
+      <span class="btn__inner">{{- params.html | safe if params.html else params.text -}}</span>
   </button>
 {% endmacro %}
diff --git a/src/components/header/_header-nav.scss b/src/components/header/_header-nav.scss
index 02441609d5..5f4a1dbb44 100644
--- a/src/components/header/_header-nav.scss
+++ b/src/components/header/_header-nav.scss
@@ -1,28 +1,30 @@
 .header-nav {
   opacity: 1;
-  transition: opacity 200ms ease-in-out;
 
   &__list {
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
   }
 
   &__item {
     display: block;
+    margin: 0;
     padding: 0.3rem 0;
     border-top: 1px solid rgba(255, 255, 255, 0.5);
-    margin: 0;
 
     @include mq(m) {
-      position: relative;
       display: inline-block;
-      padding: 0 0 0.3rem;
+      position: relative;
+
       margin: 0 0 0 1rem;
-      text-align: center;
-      border-top: none;
+      padding: 0 0 0.3rem;
+
+      border-top: 0;
       border-bottom: 4px solid transparent;
 
+      text-align: center;
+
       &:first-child {
         margin-left: 0;
       }
@@ -34,19 +36,20 @@
     }
 
     + .header-nav__item--secondary {
-      border-top: 2px solid $color-white;
       margin-top: 0.5rem;
+      border-top: 2px solid $color-white;
     }
   }
 
   &__link {
-    color: $color-white;
-    text-decoration: none;
-    font-size: 0.9rem;
     display: block;
     margin: 0 0.35rem;
     padding: 0 0.65rem;
 
+    color: $color-white;
+    font-size: 0.9rem;
+    text-decoration: none;
+
     &:hover,
     &:focus {
       color: #c2ecff;
@@ -59,9 +62,11 @@
 
     @include mq(m) {
       display: inline-block;
-      font-size: 1rem;
-      padding: 0;
       margin: 0;
+      padding: 0;
+
+      font-size: 1rem;
+
       &:hover,
       &:focus {
         color: $color-white;
@@ -72,8 +77,9 @@
 
 .header-nav--mobile {
   @include mq(xs, m) {
-    opacity: 0;
     max-height: 0;
+    opacity: 0;
+
     .nav__item {
       display: none;
     }
@@ -82,14 +88,15 @@
 
 .header-service-nav {
   &__list {
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
   }
 
   &__item {
-    margin: 0 0 0 1rem;
     display: inline-block;
+    margin: 0 0 0 1rem;
+
     &:first-child {
       margin-left: 0;
     }
diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk
index a2c701cdd4..0166bcbc24 100644
--- a/src/components/header/_macro.njk
+++ b/src/components/header/_macro.njk
@@ -80,13 +80,16 @@
                   {% endif %}
                   {% if params.toggleButton %}
                       <div class="grid__col col-auto u-flex-no-shrink">
-                          {{ onsButton({
-                              "buttonToggleAttributes": true,
-                              "text": params.toggleButton.text,
-                              "ariaControls": params.navigation.id,
-                              "ariaLabel": params.toggleButton.ariaLabel,
-                              "classes": "btn--mobile u-d-no js-toggle-main"
-                          }) }}
+                            {{ onsButton({
+                                "text": params.toggleButton.text,
+                                "classes": "btn--mobile u-d-no js-toggle-main",
+                                "attributes": {
+                                        "aria-label": params.toggleButton.ariaLabel,
+                                        "aria-controls": params.navigation.id,
+                                        "aria-haspopup": "true",
+                                        "aria-expanded": "false"
+                                }
+                            }) }}
                       </div>
                   {% endif %}
               </div>
diff --git a/src/components/header/header-nav.js b/src/components/header/header-nav.js
index db2feedf87..572a3f8c71 100644
--- a/src/components/header/header-nav.js
+++ b/src/components/header/header-nav.js
@@ -3,7 +3,6 @@ import domReady from 'js/domready';
 const attrExpanded = 'aria-expanded';
 const attrHidden = 'aria-hidden';
 const hideClass = 'header-nav--mobile';
-const openClass = 'open';
 
 export default class NavToggle {
   constructor(toggle, nav) {
@@ -23,14 +22,12 @@ export default class NavToggle {
   }
 
   openNav(toggleEl, navEl) {
-    toggleEl.parentNode.classList.add(openClass);
     toggleEl.setAttribute(attrExpanded, 'true');
     navEl.setAttribute(attrHidden, 'false');
     navEl.classList.remove(hideClass);
   }
 
   closeNav(toggleEl, navEl) {
-    toggleEl.parentNode.classList.remove(openClass);
     toggleEl.setAttribute(attrExpanded, 'false');
     navEl.setAttribute(attrHidden, 'true');
     navEl.classList.add(hideClass);
diff --git a/src/img/loader.svg b/src/img/icons/icons--loader.svg
similarity index 100%
rename from src/img/loader.svg
rename to src/img/icons/icons--loader.svg
diff --git a/src/scss/helpers/_functions.scss b/src/scss/helpers/_functions.scss
index 4f2ebd70e4..69eef80798 100644
--- a/src/scss/helpers/_functions.scss
+++ b/src/scss/helpers/_functions.scss
@@ -1,9 +1,10 @@
-@function ems($pxval, $base: $base-font-size) {
-  @return em($pxval, $base);
+@function ems($pxval, $base: $base) {
+  $emSize: $pxval / $base;
+  @return #{$emSize}em;
 }
 
-@function rems($size, $base) {
-  $remSize: $size / $base;
+@function rems($pxval, $base: $base) {
+  $remSize: $pxval / $base;
   @return #{$remSize}rem;
 }