govuk_publishing_components 24.18.3 → 24.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c29fbe8ad46db11c8172e16fcd68bb08cc6e6799de22293cc29cd1829b6a938b
-  data.tar.gz: ac3904c23ae5a71ca5d556558da2411750454338bdcac2f1747f061322ee2daf
+  metadata.gz: 50a7296ca62da87133989dc55c692649132efeee4d4a2eedbb253291ea489459
+  data.tar.gz: 026f82dfb2d8b86abd040d5a69ccae280190e345247404e7621aeea89f30eca2
 SHA512:
-  metadata.gz: 7c1c5d8b01c9036993418b85125975b0bac85d59e8d7e9fdca6ae8d2444f9742c0c6b017adce4b0e1ba0482e2a410bf992f1e3556f8c971200a18d306ddba07a
-  data.tar.gz: e19439505f30c55bdfcb3fe1f2637f47311ae1c978e6bb5e0b50b09ada4ab0a60ddeb259167048d836ff97863c44213f06fbd369c774969a70452c3f88486724
+  metadata.gz: 45190fd0137cd36e04523ce5d97783cda446256a4089646b317404a410be28f7e6c96798ec9d5a56fdd130cbfa0f47630ade875dfe8af61a2b9c52f0111f4abb
+  data.tar.gz: bc733b83f05ba2520729a23ecb56788bc8552ef082babc9b0743317cf0808fefc7baab2199dfa1fb77e168b4c38cf72d8b9068e38e67889682b088b2b707641f

data/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js

@@ -63,7 +63,8 @@
       'taxon-ids': { dimension: 59, defaultValue: 'other' },
       'content-has-history': { dimension: 39, defaultValue: 'false' },
       'publishing-application': { dimension: 89 },
-      'brexit-audience': { dimension: 111 },
+      'brexit-audience': { dimension: 112 },
+      'brexit-superbreadcrumb': { dimension: 111 },
       stepnavs: { dimension: 96 },
       'relevant-result-shown': { dimension: 83 },
       'spelling-suggestion': { dimension: 81 }

data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js

@@ -206,6 +206,13 @@
       ['Percent', 80],
       ['Percent', 100]
     ],
+    '/guidance/brexit-guidance-for-businesses.cy': [
+      ['Percent', 20],
+      ['Percent', 40],
+      ['Percent', 60],
+      ['Percent', 80],
+      ['Percent', 100]
+    ],
     '/guidance/brexit-guidance-for-individuals-and-families': [
       ['Percent', 20],
       ['Percent', 40],
@@ -213,6 +220,13 @@
       ['Percent', 80],
       ['Percent', 100]
     ],
+    '/guidance/brexit-guidance-for-individuals-and-families.cy': [
+      ['Percent', 20],
+      ['Percent', 40],
+      ['Percent', 60],
+      ['Percent', 80],
+      ['Percent', 100]
+    ],
     '/guidance/import-and-export-goods-using-preference-agreements': [
       ['Percent', 20],
       ['Percent', 40],

data/app/assets/javascripts/govuk_publishing_components/components/details.js

@@ -7,24 +7,26 @@ window.GOVUK.Modules.GovukDetails = window.GOVUKFrontend;
 (function (Modules) {
   function GemDetails ($module) {
     this.$module = $module
-    this.customTrackLabel = this.$module.getAttribute('data-track-label')
+    this.$summary = this.$module.querySelector('.govuk-details__summary')
+
+    this.customTrackLabel = this.$summary.getAttribute('data-track-label')
     this.detailsClick = this.$module.querySelector('[data-details-track-click]')
   }
 
   GemDetails.prototype.init = function () {
     if (this.customTrackLabel) { // If a custom label has been provided, we can simply call the tracking module
       var trackDetails = new window.GOVUK.Modules.GemTrackClick()
-      trackDetails.start($(this.$module))
+      trackDetails.start($(this.$summary))
     } else if (this.detailsClick) { // If no custom label is set, we use the open/close status as the label
       this.detailsClick.addEventListener('click', function (event) {
-        this.trackDefault(this.$module)
+        this.trackDefault(this.$summary)
       }.bind(this))
     }
   }
 
   GemDetails.prototype.trackDefault = function (element) {
     if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-      var componentStatus = (element.getAttribute('open') == null) ? 'open' : 'closed'
+      var componentStatus = (this.$module.getAttribute('open') == null) ? 'open' : 'closed'
       var trackCategory = element.getAttribute('data-track-category')
       var trackAction = element.getAttribute('data-track-action')
       var trackOptions = element.getAttribute('data-track-options')

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

@@ -0,0 +1,71 @@
+//= require govuk/vendor/polyfills/Element/prototype/classList.js
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function SuperNavigationToggle ($module) {
+    this.$module = $module
+
+    this.showMenuText = $module.getAttribute('data-text-for-show-menu')
+    this.hideMenuText = $module.getAttribute('data-text-for-hide-menu')
+    this.buttonText = $module.getAttribute('data-text-for-button')
+
+    this.$button = this.setupButton($module)
+
+    this.$menu = document.getElementById(this.$button.getAttribute('aria-controls'))
+
+    this.syncStatus()
+  }
+
+  SuperNavigationToggle.prototype.setupButton = function (target) {
+    var menuHeading = target.getAttribute('aria-labelledby')
+    var adjacentTo = target.querySelector('#' + menuHeading)
+    var buttonText = document.createTextNode(this.buttonText)
+
+    var button = document.createElement('button')
+    button.type = 'button'
+    button.className = 'govuk-header__menu-button gem-c-layout-super-navigation-header__menu-button'
+    button.setAttribute('aria-controls', 'super-navigation-menu')
+    button.setAttribute('aria-label', this.showMenuText)
+    button.setAttribute('aria-expanded', false)
+
+    button.appendChild(buttonText)
+    adjacentTo.insertAdjacentElement('beforebegin', button)
+
+    return button
+  }
+
+  SuperNavigationToggle.prototype.syncStatus = function () {
+    this.status = this.$button.getAttribute('aria-expanded') === 'true' ? 'open' : 'closed'
+  }
+
+  SuperNavigationToggle.prototype.closeMenu = function () {
+    this.$menu.classList.remove('gem-c-layout-super-navigation-header__items--open')
+
+    this.$button.classList.remove('govuk-header__menu-button--open')
+    this.$button.setAttribute('aria-expanded', false)
+    this.$button.setAttribute('aria-label', this.showMenuText)
+  }
+
+  SuperNavigationToggle.prototype.openMenu = function () {
+    this.$menu.classList.add('gem-c-layout-super-navigation-header__items--open')
+
+    this.$button.classList.add('govuk-header__menu-button--open')
+    this.$button.setAttribute('aria-expanded', true)
+    this.$button.setAttribute('aria-label', this.hideMenuText)
+  }
+
+  SuperNavigationToggle.prototype.handleToggle = function () {
+    if (this.status === 'open') this.closeMenu()
+    if (this.status === 'closed') this.openMenu()
+
+    this.syncStatus()
+  }
+
+  SuperNavigationToggle.prototype.init = function () {
+    this.$button.addEventListener('click', this.handleToggle.bind(this))
+  }
+
+  Modules.SuperNavigationToggle = SuperNavigationToggle
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -4,9 +4,16 @@
 
   window.GOVUK.triggerEvent = function (element, eventName, parameters) {
     var params = parameters || {}
-    params.bubbles = true
-    params.cancelable = true
     var event
+    var keyCode = params.keyCode
+
+    if (!Object.prototype.hasOwnProperty.call(params, 'bubbles')) {
+      params.bubbles = true
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(params, 'cancelable')) {
+      params.cancelable = true
+    }
 
     if (typeof window.CustomEvent === 'function') {
       event = new window.CustomEvent(eventName, params)
@@ -15,6 +22,10 @@
       event.initCustomEvent(eventName, params.bubbles, params.cancelable, params.detail)
     }
 
+    if (keyCode) {
+      event.keyCode = keyCode
+    }
+
     element.dispatchEvent(event)
   }
 }(window))

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -42,12 +42,14 @@ $govuk-new-link-styles: true;
 @import "components/image-card";
 @import "components/input";
 @import "components/inset-text";
+@import "components/intervention";
 @import "components/inverse-header";
 @import "components/label";
 @import "components/layout-footer";
 @import "components/layout-for-admin";
 @import "components/layout-for-public";
 @import "components/layout-header";
+@import "components/layout-super-navigation-header";
 @import "components/lead-paragraph";
 @import "components/metadata";
 @import "components/modal-dialogue";

data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss

@@ -8,6 +8,7 @@
 @import "components/print/contents-list";
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
+@import "components/print/layout-super-navigation-header";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
 @import "components/print/textarea";

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -151,11 +151,11 @@
 
   &:before {
     height: 30px;
-    width: 35px;
+    width: 30px;
     background-image: image-url("govuk_publishing_components/action-link-arrow--brexit.svg");
     background-repeat: no-repeat;
-    background-size: 25px auto;
-    background-position: 0 0;
+    background-size: 18px auto;
+    background-position: 0 2px;
   }
 
   @include govuk-media-query($until: tablet) {
@@ -166,7 +166,9 @@
     margin-bottom: govuk-spacing(2);
 
     &:before {
+      width: 35px;
       background-position: 0 4px;
+      background-size: 25px auto;
     }
   }
 }

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

@@ -0,0 +1,16 @@
+.gem-c-intervention {
+  @include govuk-text-colour;
+  @include govuk-responsive-padding(4);
+  @include govuk-responsive-margin(4, "bottom");
+  background-color: govuk-colour("light-grey", $legacy: "grey-4");
+}
+
+.gem-c-intervention__title {
+  @include govuk-font(24, $weight: bold);
+  margin-top: 0;
+  @include govuk-responsive-margin(4, "bottom");
+}
+
+.gem-c-intervention__paragraph {
+  @include govuk-font(19);
+}

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

@@ -106,10 +106,6 @@
   vertical-align: middle;
 }
 
-.gem-c-header__logotype-crown {
-  top: -2px;
-}
-
 .gem-c-header__product-name {
   display: none;
 

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

@@ -0,0 +1,125 @@
+$search-icon-size: 20px;
+
+.gem-c-layout-super-navigation-header {
+  background: govuk-colour("black");
+  position: relative;
+}
+
+.gem-c-layout-super-navigation-header__header-logo {
+  height: govuk-spacing(6);
+  padding-top: govuk-spacing(3);
+  padding-bottom: govuk-spacing(3);
+
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+    float: left;
+  }
+}
+
+.gem-c-layout-super-navigation-header__content {
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+    float: right;
+  }
+}
+
+.gem-c-layout-super-navigation-header__items {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 govuk-spacing(1) 0;
+
+  @include govuk-media-query($from: "desktop") {
+    padding: 0;
+  }
+}
+
+.gem-c-layout-super-navigation-header__item {
+  margin-right: 0;
+  padding: govuk-spacing(1) 0;
+
+  @include govuk-media-query($from: "desktop") {
+    float: left;
+    padding: 0;
+  }
+}
+
+.gem-c-layout-super-navigation-header__item-link {
+  display: block;
+  padding: govuk-spacing(3) 0;
+  position: relative;
+
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(4);
+    width: auto;
+  }
+
+  &:focus {
+    z-index: 1;
+  }
+}
+
+// Special search link
+.gem-c-layout-super-navigation-header__item--search {
+  border-bottom: 0;
+}
+
+.gem-c-layout-super-navigation-header__item-link--search {
+  @include govuk-media-query($from: "desktop") {
+    background-color: $govuk-link-colour;
+    display: inherit;
+    width: govuk-spacing(4);
+
+    &:hover {
+      background-color: $govuk-link-hover-colour;
+    }
+
+    &:focus {
+      background-color: $govuk-focus-colour;
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__item-link-text--search {
+  @include govuk-media-query($from: "desktop") {
+    @include govuk-visually-hidden;
+  }
+}
+
+.gem-c-layout-super-navigation-header__item-link-icon--search {
+  display: none;
+
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+    height: $search-icon-size;
+    width: $search-icon-size;
+  }
+}
+
+.gem-c-layout-super-navigation-header__menu-button {
+  @include govuk-font($size: 19, $weight: bold, $line-height: 20px);
+  border-left: 1px solid govuk-colour("mid-grey");
+  border-right: 1px solid govuk-colour("mid-grey");
+  padding: govuk-spacing(4);
+  top: 0;
+
+  &:focus {
+    border-left-color: $govuk-focus-colour;
+    border-right-color: $govuk-focus-colour;
+  }
+}
+
+.js-enabled .gem-c-layout-super-navigation-header__items {
+  display: none;
+
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+  }
+}
+
+.js-enabled .gem-c-layout-super-navigation-header__items--open {
+  display: block;
+}
+
+.gem-c-layout-super-navigation-header__dropdown-menu {
+  display: none;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -99,3 +99,12 @@
     font-weight: inherit;
   }
 }
+
+.gem-c-govspeak--inverse {
+  color: govuk-colour('white');
+
+  a {
+    @include govuk-link-common;
+    @include govuk-link-style-inverse;
+  }
+}

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

@@ -0,0 +1,3 @@
+.gem-c-super-navigation-header a:after {
+  content: " ( " attr(href) " ) ";
+}

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -105,5 +105,5 @@
 </ul>
 
 <div class="component-markdown">
-  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/develop-component.md">creating a new one</a>.</p>
+  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/generate-a-new-component.md">creating a new one</a>.</p>
 </div>

data/app/views/govuk_publishing_components/components/_contextual_breadcrumbs.html.erb

@@ -12,9 +12,9 @@
                inverse: inverse,
                collapse_on_mobile: collapse_on_mobile %>
   <% end %>
-
-  <%= render(
-        'govuk_publishing_components/components/step_by_step_nav_header', breadcrumb_selector.priority_breadcrumbs
-      ) if breadcrumb_selector.priority_breadcrumbs
-  %>
+  <% if breadcrumb_selector.priority_breadcrumbs %>
+    <%= render 'govuk_publishing_components/components/step_by_step_nav_header', breadcrumb_selector.priority_breadcrumbs %>
+    <% meta_tag = GovukPublishingComponents::Presenters::MetaTags.new(content_item, local_assigns, request).brexit_priority_breadcrumb_tag %>
+    <meta name="<%= meta_tag.keys.first %>" content="<%= meta_tag.values.first %>">
+  <% end %>
 </div>

data/app/views/govuk_publishing_components/components/_details.html.erb

@@ -6,15 +6,18 @@
   css_classes = %w(gem-c-details govuk-details)
   css_classes << (shared_helper.get_margin_bottom)
 
+  details_data_attributes = {}
+  details_data_attributes[:module] = 'govuk-details gem-details'
+
   data_attributes ||= {}
-  data_attributes[:module] = 'govuk-details gem-details'
+  data_attributes[:details_track_click] = ''
 %>
-<%= tag.details class: css_classes, data: data_attributes, open: open do %>
-  <summary class="govuk-details__summary" data-details-track-click>
+<%= tag.details class: css_classes, data: details_data_attributes, open: open do %>
+  <%= tag.summary class: "govuk-details__summary", data: data_attributes do %>
     <span class="govuk-details__summary-text">
       <%= title %>
     </span>
-  </summary>
+  <% end %>
   <div class="govuk-details__text">
     <%= yield %>
   </div>