govuk_publishing_components 27.11.0 → 27.14.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4cdfb123c38b321591389c84e2e9b397c5667f9782bc657efaaa59468d535f6a
-  data.tar.gz: 8d71ce616148c775034f93537252b16b40b134918ed34ff46bfb971963f93ca4
+  metadata.gz: 1de3732f2f8d07ca871687595bcc8ee4ce0ed90ce07fba59000f91399e543646
+  data.tar.gz: 5bc957d6e609ab9c946872b7260118aa3e8fb718b0d0fd1a01813c3542715e09
 SHA512:
-  metadata.gz: 16d792dd3e4cdf1350cf32bd1b5090e7dfe097ae3bbad51637b820745fb84d0ddb9ef9b0aa697c100f721ff9845c519cd335b1c459a10ba392c883eaaaca7cb0
-  data.tar.gz: 02a880a029f8991916315ed45ca24e87bdc59db3c426966b005f8ab043f21fbcb9a7c00fcc9686a4e12a6fe6502168f4d022fdc0c32f5cbebcc1a2e5c54d7e71
+  metadata.gz: 8cffec1a9a81f634492fb7c47f95c9ffb6b2664c951b15bbfa1a6f790fa1fe2e3d9bdaed3910e6b5cbcebe6152e15ba60585bc9438951c205a72a662b0bb1fe1
+  data.tar.gz: bd6342f5215c706369f52a8461b756a203274253c15832dda29b3aa9b8d883ee48e5b52441e1fba95e9f798e4cb17a00830a8b61c85301b33e1287d039ec6ac1

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -102,7 +102,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   // either `desktop` or `mobile` so it can be interpolated to access the
   // `data-toggle-{desktop|mobile}-group` attribute.
   var windowSize = function () {
-    return window.innerWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
+    return document.documentElement.clientWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
   }
 
   function SuperNavigationMegaMenu ($module) {

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -0,0 +1,48 @@
+/* global XMLHttpRequest */
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function SinglePageNotificationButton ($module) {
+    this.$module = $module
+    this.basePath = this.$module.querySelector('input[name="base_path"]').value
+    this.buttonLocation = this.$module.getAttribute('data-button-location')
+
+    this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
+    // This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
+    if (this.buttonLocation) this.personalisationEndpoint += '&button_location=' + this.buttonLocation
+  }
+
+  SinglePageNotificationButton.prototype.init = function () {
+    var xhr = new XMLHttpRequest()
+    xhr.open('GET', this.personalisationEndpoint, true)
+
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        var responseText = xhr.responseText
+        // if response text exists and is JSON parse-able, parse the response and get the button html
+        if (responseText && this.responseIsJSON(responseText)) {
+          var newButton = JSON.parse(responseText).button_html
+          var html = document.createElement('div')
+          html.innerHTML = newButton
+          // test that the html returned contains the button component; if yes, swap the button for the updated version
+          var responseHasButton = html.querySelector('form.gem-c-single-page-notification-button .gem-c-single-page-notification-button__submit')
+          if (responseHasButton) {
+            this.$module.outerHTML = newButton
+          }
+        }
+      }
+    }.bind(this)
+    xhr.send()
+  }
+
+  SinglePageNotificationButton.prototype.responseIsJSON = function (string) {
+    try {
+      JSON.parse(string)
+    } catch (e) {
+      return false
+    }
+    return true
+  }
+  Modules.SinglePageNotificationButton = SinglePageNotificationButton
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss

@@ -1,3 +1,5 @@
+@import "mixins/prefixed-transform";
+
 $gem-c-accordion-border-width: 3px;
 $gem-c-accordion-bottom-border-width: 1px;
 
@@ -69,6 +71,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
 
     &:after {
+      @include prefixed-transform($rotate: -45deg);
       content: "";
       display: block;
       box-sizing: border-box;
@@ -78,7 +81,6 @@ $gem-c-accordion-bottom-border-width: 1px;
       height: govuk-em(6, 14);
       border-top: govuk-em(2, 14) solid;
       border-right: govuk-em(2, 14) solid;
-      transform: rotate(-45deg);
       left: govuk-em(6, 14);
       bottom: govuk-em(5, 14);
 
@@ -111,7 +113,7 @@ $gem-c-accordion-bottom-border-width: 1px;
 
   // Rotate icon to create "Down" version
   .gem-c-accordion-nav__chevron--down {
-    transform: rotate(180deg);
+    @include prefixed-transform($rotate: 180deg);
   }
 
   .gem-c-accordion__section-heading {
@@ -296,12 +298,12 @@ $gem-c-accordion-bottom-border-width: 1px;
 
     // Reduce Chevron size
     .gem-c-accordion-nav__chevron {
+      @include prefixed-transform($scale: .875);
       width: govuk-em(20, 14);
       height: govuk-em(20, 14);
       margin-left: govuk-em(5, 14);
       border: govuk-em(1, 14) solid;
       border-radius: govuk-em(100, 14);
-      transform: scale(.875);
 
       &:after {
         width: govuk-em(6, 14);
@@ -314,7 +316,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
 
     .gem-c-accordion-nav__chevron--down {
-      transform: scale(.875) rotate(180deg);
+      @include prefixed-transform($rotate: 180deg, $scale: .875);
     }
 
     .gem-c-accordion__section-summary {

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss

@@ -16,7 +16,6 @@
 @import "govspeak/place";
 @import "govspeak/stat-headline";
 @import "govspeak/steps";
-@import "govspeak/summary";
 @import "govspeak/tables";
 @import "govspeak/typography";
 @import "govspeak/warning-callout";

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -1,3 +1,5 @@
+@import "mixins/prefixed-transform";
+
 /// Set grid row or column value using the fraction unit.
 ///
 /// @param {Integer} $number - number of fractions that the grid row or column
@@ -98,19 +100,21 @@
 
 $icon-size: 20px;
 $chevron-indent-spacing: 7px;
+$black-bar-height: 50px;
+$search-width-or-height: $black-bar-height;
 
 @mixin chevron($colour, $update: false) {
   @if ($update == true) {
     border-bottom-color: $colour;
     border-right-color: $colour;
   } @else {
-    border-bottom: 3px solid $colour;
-    border-right: 3px solid $colour;
+    @include prefixed-transform($rotate: 45deg, $translateY: -35%);
+    border-bottom: 2px solid $colour;
+    border-right: 2px solid $colour;
     content: " ";
     display: inline-block;
     height: 8px;
     margin: 0 8px 0 2px;
-    transform: translateY(-35%) rotate(45deg);
     vertical-align: middle;
     width: 8px;
   }
@@ -130,10 +134,10 @@ $chevron-indent-spacing: 7px;
   background: none;
   bottom: 0;
   content: " ";
-  height: govuk-spacing(1);
-  left: govuk-spacing(4);
+  height: 3px;
+  left: govuk-spacing(3);
   position: absolute;
-  right: govuk-spacing(4);
+  right: govuk-spacing(3);
   top: auto;
 }
 
@@ -165,7 +169,7 @@ $chevron-indent-spacing: 7px;
   position: relative;
 
   .lte-ie8 & {
-    height: govuk-spacing(9);
+    height: $black-bar-height;
   }
 
   [hidden] {
@@ -183,8 +187,8 @@ $chevron-indent-spacing: 7px;
 
 .gem-c-layout-super-navigation-header__header-logo {
   height: govuk-spacing(6);
-  padding-bottom: govuk-spacing(3);
-  padding-top: govuk-spacing(3);
+  padding-bottom: govuk-spacing(2);
+  padding-top: govuk-spacing(2);
 
   @include govuk-media-query($from: "desktop") {
     display: block;
@@ -228,24 +232,18 @@ $chevron-indent-spacing: 7px;
   @include govuk-media-query($from: "desktop") {
     display: inline-block;
   }
-
-  .js-module-initialised & {
-    padding: 0 0 govuk-spacing(9) 0;
-
-    @include govuk-media-query($from: "desktop") {
-      padding: 0;
-    }
-  }
 }
 
 .gem-c-layout-super-navigation-header__navigation-item,
 .gem-c-layout-super-navigation-header__search-item {
   display: block;
-  margin: 0 govuk-spacing(3);
+  margin: 0;
+  padding: govuk-spacing(2) govuk-spacing(3);
   position: relative;
 
   @include govuk-media-query($from: "tablet") {
     margin: 0 govuk-spacing(6);
+    padding: govuk-spacing(2) 0;
   }
 
   @include govuk-media-query($from: "desktop") {
@@ -261,8 +259,15 @@ $chevron-indent-spacing: 7px;
 .gem-c-layout-super-navigation-header__navigation-item {
   border-bottom: 1px solid $govuk-border-colour;
 
+  .js-module-initialised & {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
   @include govuk-media-query($from: "desktop") {
     border-bottom: 0;
+    padding: 0;
   }
 }
 
@@ -326,7 +331,7 @@ $chevron-indent-spacing: 7px;
       // stylelint-enable max-nesting-depth
 
       height: govuk-spacing(4);
-      padding: govuk-spacing(4);
+      padding: govuk-spacing(3);
       position: relative;
 
       &:before {
@@ -343,28 +348,40 @@ $chevron-indent-spacing: 7px;
 
       // stylelint-disable max-nesting-depth
       @include focus-and-focus-visible {
-        box-shadow: none;
-        color: $govuk-focus-text-colour;
+        &,
+        &:hover {
+          box-shadow: none;
+          color: $govuk-focus-text-colour;
 
-        &:after {
-          background: $govuk-focus-text-colour;
+          &:after {
+            background: $govuk-focus-text-colour;
+          }
         }
       }
 
       @include focus-not-focus-visible {
         &,
         &:hover {
-          color: govuk-colour("white");
           text-decoration: none;
         }
-      }
-      // stylelint-enable max-nesting-depth
 
-      &:focus:not(:focus-visible) {
+        & {
+          color: govuk-colour("white");
+        }
+
+        &:hover {
+          color: govuk-colour("mid-grey");
+
+          &:after {
+            background: govuk-colour("mid-grey");
+          }
+        }
+
         &:after {
           background: none;
         }
       }
+      // stylelint-enable max-nesting-depth
 
       &:after {
         @include pseudo-underline;
@@ -423,8 +440,8 @@ $chevron-indent-spacing: 7px;
       @if $govuk-typography-use-rem {
         font-size: govuk-px-to-rem(16px);
       }
-      height: govuk-spacing(9);
-      padding: govuk-spacing(4);
+      height: $black-bar-height;
+      padding: govuk-spacing(3);
       position: relative;
       text-decoration: none;
 
@@ -463,7 +480,7 @@ $chevron-indent-spacing: 7px;
   &.gem-c-layout-super-navigation-header__open-button {
     @include focus-not-focus-visible {
       &:before {
-        transform: translateY(0) rotate(225deg);
+        @include prefixed-transform($rotate: 225deg, $translateY: 1px);
       }
     }
 
@@ -509,7 +526,7 @@ $chevron-indent-spacing: 7px;
       background: $govuk-brand-colour;
 
       &:hover {
-        background: none;
+        background: govuk-colour("black");
 
         &:before {
           left: 0;
@@ -524,6 +541,30 @@ $chevron-indent-spacing: 7px;
           content: none;
         }
       }
+
+      &:after {
+        left: 0;
+        right: 0;
+      }
+
+      @include focus-not-focus-visible {
+        background: $govuk-link-colour;
+
+        &:hover {
+          background: govuk-colour("black");
+        }
+      }
+
+      @include focus-and-focus-visible {
+        &:hover {
+          background: $govuk-focus-colour;
+        }
+
+        &:after,
+        &:hover:after {
+          background: $govuk-focus-colour;
+        }
+      }
     }
   }
 }
@@ -574,10 +615,11 @@ $chevron-indent-spacing: 7px;
   box-sizing: border-box;
   color: govuk-colour("white");
   cursor: pointer;
-  height: govuk-spacing(9);
+  height: $black-bar-height;
   padding: 0;
+  margin: 0;
   position: absolute;
-  right: ((govuk-spacing(9) - govuk-spacing(3)) - 1px); // width of the search button (60px) - 15px - 1px to create an overlap between buttons and stop the border appearing to hang off the buttons when they're focused/open
+  right: (($search-width-or-height - govuk-spacing(3)) - 1px); // width of the search button (50px) - 15px - 1px to create an overlap between buttons and stop the border appearing to hang off the buttons when they're focused/open
   top: 0;
   z-index: 10;
 
@@ -615,6 +657,10 @@ $chevron-indent-spacing: 7px;
     }
   }
 
+  &:after {
+    @include pseudo-underline;
+  }
+
   // Open button modifier
   &.gem-c-layout-super-navigation-header__open-button {
     // stylelint-disable max-nesting-depth
@@ -622,6 +668,10 @@ $chevron-indent-spacing: 7px;
       @include govuk-focused-text;
       box-shadow: none;
 
+      &:after {
+        background-color: $govuk-focus-colour;
+      }
+
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
         color: govuk-colour("black");
         border-color: $govuk-focus-colour;
@@ -629,7 +679,7 @@ $chevron-indent-spacing: 7px;
         @include govuk-media-query($from: 360px) {
           &:before {
             @include chevron(govuk-colour("black"), true);
-            transform: translateY(0) rotate(225deg);
+            @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
         }
       }
@@ -638,14 +688,18 @@ $chevron-indent-spacing: 7px;
     @include focus-not-focus-visible {
       background: govuk-colour("light-grey");
 
+      &:after {
+        background-color: $govuk-link-colour;
+      }
+
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        color: govuk-colour("black");
+        color: $govuk-link-colour;
         border-color: govuk-colour("light-grey");
 
         @include govuk-media-query($from: 360px) {
           &:before {
-            @include chevron(govuk-colour("black"));
-            transform: translateY(0) rotate(225deg);
+            @include chevron($govuk-link-colour);
+            @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
         }
       }
@@ -658,7 +712,7 @@ $chevron-indent-spacing: 7px;
   display: inline-block;
   border-left: 1px solid govuk-colour("white");
   border-right: 1px solid govuk-colour("white");
-  margin: govuk-spacing(2) 0;
+  margin: 0;
   padding: govuk-spacing(2) govuk-spacing(4);
 
   @include govuk-media-query($from: 360px) {
@@ -675,12 +729,12 @@ $chevron-indent-spacing: 7px;
   border: 0;
   color: govuk-colour("white");
   cursor: pointer;
-  height: govuk-spacing(9);
-  padding: govuk-spacing(4);
+  height: $search-width-or-height;
+  padding: govuk-spacing(3);
   position: absolute;
   right: (0 - govuk-spacing(3));
   top: 0;
-  width: govuk-spacing(9);
+  width: $search-width-or-height;
 
   @include focus-and-focus-visible {
     @include govuk-focused-text;
@@ -749,7 +803,7 @@ $chevron-indent-spacing: 7px;
   font-weight: normal;
   left: 0;
   line-height: 22px;
-  padding: govuk-spacing(4) 0;
+  padding: govuk-spacing(3) 0;
   pointer-events: none;
   position: absolute;
   right: 0;
@@ -769,7 +823,6 @@ $chevron-indent-spacing: 7px;
     left: 0;
     position: absolute;
     right: 0;
-    top: govuk-spacing(9);
   }
 }
 
@@ -785,96 +838,57 @@ $chevron-indent-spacing: 7px;
 
 // Dropdown menu items.
 .gem-c-layout-super-navigation-header__dropdown-list-item {
-  margin: 0 0 0 $chevron-indent-spacing;
-  padding: govuk-spacing(2) 0;
+  box-sizing: border-box;
+  padding: 0 0 govuk-spacing(4) 0;
   position: relative;
-
-  @include govuk-media-query($from: "desktop") {
-    margin: 0;
-    padding: govuk-spacing(2) 0;
-  }
 }
 
 // Navigation menu items.
 .gem-c-layout-super-navigation-header__navigation-second-items {
-  margin: 0 auto;
-  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
+  list-style: none;
+  margin: 0;
+  padding: govuk-spacing(6) govuk-spacing(4);
+
+  & > li {
+    margin: 0;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    margin-left: (0 - govuk-spacing(3));
-    margin-right: (0 - govuk-spacing(3));
-    padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
+    margin: 0 (0 - govuk-spacing(3));
+    padding: govuk-spacing(7) 0 govuk-spacing(8) 0;
 
     & > li {
-      box-sizing: border-box;
-      margin: 0 govuk-spacing(3) govuk-spacing(2) govuk-spacing(3);
+      margin: 0 govuk-spacing(3);
     }
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns(18, 2, "li");
-    @include columns-children(18, 2, "li");
+    @include columns(17, 2, "li");
+    @include columns-children(17, 2, "li");
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
-  & > li:first-child {
-    margin-bottom: govuk-spacing(7);
-  }
-
   @include govuk-media-query($from: "desktop") {
-    @include columns(7, 2, "li");
+    @include columns(6, 2, "li");
+    @include columns-children(6, 2, "li");
     padding-bottom: 0;
 
-    & > li,
-    & > li:first-child {
-      margin-bottom: govuk-spacing(4);
-    }
-
-    @supports (display: grid) {
-      & > li:first-child {
-        grid-column: span 2;
-      }
-    }
-
-    & > li:first-child {
-      border-bottom: 1px solid $govuk-border-colour;
-      padding-bottom: 0;
-      -ms-grid-column-span: 2;
-      -ms-grid-column: 1;
-      -ms-grid-row: 1;
-    }
-
-    & > li:nth-child(2) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 2;
-    }
-
-    & > li:nth-child(3) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 3;
-    }
-
-    & > li:nth-child(4) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 4;
-    }
-
-    & > li:nth-child(5) {
-      -ms-grid-column: 2;
-      -ms-grid-row: 2;
-    }
-
-    & > li:nth-child(6) {
-      -ms-grid-column: 2;
-      -ms-grid-row: 3;
+    & > li {
+      box-sizing: border-box;
+      padding-bottom: govuk-spacing(4);
     }
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+
   &:after {
     @include make-selectable-area-bigger;
   }
@@ -890,9 +904,11 @@ $chevron-indent-spacing: 7px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
-  @include govuk-font($size: 19, $weight: bold);
-  margin-bottom: 0;
-  margin-top: govuk-spacing(2);
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  font-weight: bold;
 }
 
 // Dropdown menu footer links.
@@ -904,28 +920,31 @@ $chevron-indent-spacing: 7px;
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-list {
   list-style: none;
-  padding: 0 0 govuk-spacing(8) 0;
+  padding: 0 0 govuk-spacing(8) govuk-spacing(4);
 
   @include govuk-media-query($from: "desktop") {
-    margin: 0 (0 - govuk-spacing(3)) 0 (0 - govuk-spacing(3));
-    padding: govuk-spacing(8) 0 govuk-spacing(9) 0;
     @include columns(2, 2, "li");
     @include columns-children(2, 2, "li");
+    margin: 0 (0 - govuk-spacing(3));
+    padding: govuk-spacing(6) 0 govuk-spacing(7) 0;
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-item {
-  padding: govuk-spacing(2) 0 govuk-spacing(2) $chevron-indent-spacing;
+  padding: govuk-spacing(2) 0;
   position: relative;
 
   @include govuk-media-query($from: "desktop") {
-    padding: 0 govuk-spacing(3) 0 govuk-spacing(3);
+    padding: 0 govuk-spacing(3);
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-link {
-  @include govuk-font($size: 19, $weight: normal);
   display: inline-block;
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
   margin: govuk-spacing(1) 0;
 
   &:after {
@@ -934,11 +953,23 @@ $chevron-indent-spacing: 7px;
 
   @include govuk-media-query($from: "desktop") {
     display: inline;
-    font-weight: bold;
     padding: 0;
+
+    &:after {
+      content: none;
+    }
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-second-item-description {
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  font-weight: normal;
+  margin: govuk-spacing(1) 0 0 0;
+}
+
 // Search dropdown.
 .gem-c-layout-super-navigation-header__search-items {
   background: govuk-colour("light-grey");
@@ -964,12 +995,34 @@ $chevron-indent-spacing: 7px;
 }
 
 // Popular links.
+.gem-c-layout-super-navigation-header__popular-item {
+  position: relative;
+  padding: govuk-spacing(1) 0;
+}
+
 .gem-c-layout-super-navigation-header__popular-link {
-  padding: govuk-spacing(2) 0;
   display: inline-block;
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  padding: 0;
+
+  &:after {
+    @include make-selectable-area-bigger;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    margin: govuk-spacing(1) 0;
-    padding: 0;
+    &:after {
+      content: none;
+    }
+  }
+}
+
+// To be used with .govuk-width-container - we only need the margins from
+// desktop onwards.
+.gem-c-layout-super-navigation-header__width-container {
+  @include govuk-media-query($until: "desktop") {
+    margin: 0;
   }
 }