govuk_publishing_components 30.2.1 → 30.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f402d935fbe75f4dde432aab1dd5f525388d478b99a960c57cedc2b73034ea0d
-  data.tar.gz: e6cf9788314e58be8a0f13158e7262a31dec5ff4adece4ee2daf117ebb5252f8
+  metadata.gz: 50a87147aabeeeb4c5d2fc38027b8c6e161becb7ac1aff2fe66ea8b6e7c1c9e1
+  data.tar.gz: 8d2bf92bd32628dc06f865ca12f6235b811dbf13f604c31cb0284f20efa34752
 SHA512:
-  metadata.gz: 76b3d647997d9248dc930d224037a2d31d54aebee66879668743e7a962b85a199aff66cfc95dcb200577de4292f8dcd769ea105497df3ea71206746d798e112e
-  data.tar.gz: c29eaaf88f004b23c2412b3db5667533e2ed76e69b9a59679875e1dd68c2522ab15f935f6ed66ee0df3bbfd8c619aa604359afebf4e2369ff481959d4f7f535f
+  metadata.gz: b54767f3c3e9d4c1d4796045d508ca619eabca6e576da063f54534a0917211341f771e23710060374432d1783322efd4301b2d296df9c31e9ca7bedc14f87e69
+  data.tar.gz: 6a298a85b7bc0aa909e393759324220a3ba41b4fc45325e2cf59848b82d0a247e8be3129397e5bf23ee7e54f8312c3247c1374314a69802bf88d38a7120fe7c5

data/app/assets/javascripts/govuk_publishing_components/analytics/page-content.js

@@ -17,6 +17,8 @@
         // if there are no accordion sections on the browse level 2 page
         // then it is a default page with one or two lists
         return document.querySelectorAll('[data-track-count="accordionSection"]').length || document.querySelectorAll('main .govuk-list').length
+      case isCostOfLivingHub():
+        return document.querySelectorAll('[data-track-count="accordionSection"]').length
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardList"]').length
       case isMainstreamBrowsePage():
@@ -51,6 +53,7 @@
       case isDocumentCollectionPage():
         return document.querySelectorAll('.document-collection .group-document-list li a').length
       case isNewBrowsePageLevelTwo():
+      case isCostOfLivingHub():
         return document.querySelectorAll('[data-track-count="contentLink"]').length
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardLink"]').length
@@ -108,6 +111,11 @@
       getMetaAttribute(metaNavigationTypeSelector) === 'browse level 2'
   }
 
+  function isCostOfLivingHub () {
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'cost of living hub'
+  }
+
   function isNewBrowsePage () {
     return getMetaAttribute(metaApplicationSelector) === 'collections' &&
       (getMetaAttribute(metaNavigationTypeSelector) === 'browse level 0' ||

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js

@@ -44,24 +44,26 @@
       }
 
       if (this.isMailToLink(href)) {
+        clickData.event_name = 'navigation'
         clickData.type = 'email'
         clickData.external = 'true'
       } else if (this.isDownloadLink(href)) {
-        clickData.type = 'download'
-        clickData.external = 'false'
+        clickData.event_name = 'file_download'
+        clickData.type = this.isPreviewLink(href) ? 'preview' : 'generic download'
+        clickData.external = 'true'
       } else if (this.isExternalLink(href)) {
+        clickData.event_name = 'navigation'
         clickData.type = 'generic link'
         clickData.external = 'true'
       }
 
       if (Object.keys(clickData).length > 0) {
-        clickData.event_name = 'navigation'
         clickData.text = element.textContent.trim()
         clickData.url = href
         clickData.link_method = this.getClickType(event)
 
         var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
-        schema.event = 'analytics'
+        schema.event = 'event_data'
 
         // get attributes from the clickData object to send to GA
         // only allow it if it already exists in the schema
@@ -124,11 +126,23 @@
 
     isExternalLink: function (href) {
       var isInternalLink = this.hrefPointsToDomain(href, this.internalLinksDomain) || this.hrefPointsToDomain(href, this.internalLinksDomainWithoutWww)
-      if (!isInternalLink && !this.hrefIsRelative(href)) {
+      if (!isInternalLink && !this.hrefIsRelative(href) && !this.hrefIsAnchor(href)) {
         return true
       }
     },
 
+    isPreviewLink: function (href) {
+      /*  Regex looks for:
+      1. The file extension period (the character '.')
+      2. any alphanumeric characters (so we can match any file type such as jpg, pdf, mp4.)
+      3. the presence of '/preview'.
+      For example, .csv/preview or .mp4/preview will be matched.
+      Regex is used over JS string methods as this should work with anchor links, query string parameters and files that may have 'preview' in their name.
+      */
+      var previewRegex = /\.\w+\/preview/i
+      return previewRegex.test(href)
+    },
+
     hrefPointsToDomain: function (href, domain) {
       var httpDomain = 'http://' + domain
       var httpsDomain = 'https://' + domain
@@ -146,6 +160,10 @@
     hrefIsRelative: function (href) {
       // Checks that a link is relative, but is not a protocol relative url
       return href[0] === '/' && href[1] !== '/'
+    },
+
+    hrefIsAnchor: function (href) {
+      return href[0] === '#'
     }
   }
 

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

@@ -9,7 +9,6 @@ window.GOVUK.Modules.GovukCheckboxes = window.GOVUKFrontend.Checkboxes;
     this.$module = $module
     this.$checkboxes = this.$module.querySelectorAll('input[type=checkbox]')
     this.$nestedCheckboxes = this.$module.querySelectorAll('[data-nested=true] input[type=checkbox]')
-    this.$exclusiveCheckboxes = this.$module.querySelectorAll('[data-exclusive=true] input[type=checkbox]')
   }
 
   GemCheckboxes.prototype.init = function () {
@@ -22,10 +21,6 @@ window.GOVUK.Modules.GovukCheckboxes = window.GOVUKFrontend.Checkboxes;
     for (i = 0; i < this.$nestedCheckboxes.length; i++) {
       this.$nestedCheckboxes[i].addEventListener('change', this.handleNestedCheckboxChange.bind(this))
     }
-
-    for (i = 0; i < this.$exclusiveCheckboxes.length; i++) {
-      this.$exclusiveCheckboxes[i].addEventListener('change', this.handleExclusiveCheckboxChange)
-    }
   }
 
   GemCheckboxes.prototype.handleCheckboxChange = function (event) {
@@ -95,23 +90,6 @@ window.GOVUK.Modules.GovukCheckboxes = window.GOVUKFrontend.Checkboxes;
     }
   }
 
-  GemCheckboxes.prototype.handleExclusiveCheckboxChange = function (event) {
-    var $currentCheckbox = event.target
-    var $checkboxes = $currentCheckbox.closest('.govuk-checkboxes')
-    var $exclusiveOption = $checkboxes.querySelector('input[type=checkbox][data-exclusive]')
-    var $nonExclusiveOptions = $checkboxes.querySelectorAll('input[type=checkbox]:not([data-exclusive])')
-
-    if ($currentCheckbox.getAttribute('data-exclusive') === 'true' && $currentCheckbox.checked === true) {
-      for (var i = 0; i < $nonExclusiveOptions.length; i++) {
-        $nonExclusiveOptions[i].checked = false
-      }
-    } else if ($currentCheckbox.getAttribute('data-exclusive') !== 'true' && $currentCheckbox.checked === true) {
-      if ($exclusiveOption) {
-        $exclusiveOption.checked = false
-      }
-    }
-  }
-
   GemCheckboxes.prototype.applyAriaControlsAttributes = function ($scope) {
     var $inputs = $scope.querySelectorAll('[data-controls]')
 

data/app/assets/stylesheets/component_guide/application.scss

@@ -499,3 +499,7 @@ $code-delete-bg: #fadddd;
   top: 0;
   background: govuk-colour("white");
 }
+
+.component-doc__content-list {
+  margin-top: govuk-spacing(5);
+}

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

@@ -12,3 +12,10 @@
 .gem-c-layout-footer .govuk-footer__list {
   padding-bottom: govuk-spacing(7);
 }
+
+.gem-c-layout-footer .govuk-footer__list-item:nth-child(odd):last-child {
+  // If there are an uneven number of links in the
+  // footer this ensures the left column has more links than the
+  // the right column.
+  margin-bottom: 20px;
+}

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

@@ -8,6 +8,10 @@ $search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
 $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
+$after-link-padding: govuk-spacing(6);
+$after-button-padding-right: govuk-spacing(6);
+$after-button-padding-left: govuk-spacing(5);
+
 @mixin chevron($colour, $update: false) {
   @if $update == true {
     border-bottom-color: $colour;
@@ -35,15 +39,17 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   top: 0;
 }
 
-@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4)) {
+@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4), $width: false) {
   background: none;
-  bottom: 0;
   content: "";
   height: $pseudo-underline-height;
   left: $left;
   position: absolute;
   right: $right;
   top: auto;
+  @if $width {
+    width: $width;
+  }
 }
 
 @mixin focus-and-focus-visible {
@@ -177,7 +183,8 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
     &:first-of-type {
       margin-right: -1px;
 
-      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner,
+      .gem-c-layout-super-navigation-header__navigation-item-link-inner {
         border-left: 1px solid $button-pipe-colour;
         border-right: 1px solid $button-pipe-colour;
       }
@@ -242,10 +249,8 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
       @if $govuk-typography-use-rem {
         font-size: govuk-px-to-rem(16px);
       }
-      // stylelint-enable max-nesting-depth
 
       height: govuk-spacing(4);
-      padding: govuk-spacing(3);
       position: relative;
 
       &:before {
@@ -260,8 +265,17 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
         }
       }
 
-      // stylelint-disable max-nesting-depth
+      &:focus:not(:focus-visible) {
+        .gem-c-layout-super-navigation-header__navigation-item-link-inner {
+          border-color: $button-pipe-colour;
+        }
+      }
+
       @include focus-and-focus-visible {
+        .gem-c-layout-super-navigation-header__navigation-item-link-inner {
+          border-color: $govuk-focus-colour;
+        }
+
         &,
         &:hover {
           box-shadow: none;
@@ -295,11 +309,27 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
           background: none;
         }
       }
-      // stylelint-enable max-nesting-depth
 
       &:after {
-        @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
+        @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding, $width: calc(100% - $after-link-padding));
       }
+
+      .js-module-initialised & {
+        // If js is initialised, we are hiding the links and
+        // making the buttons visible instead. This means we have
+        // to remove the padding added to make the links vertically
+        // aligned, as the buttons are styled vertically aligned by
+        // default.
+
+        padding: 0;
+        margin: 0;
+
+        &:after {
+          @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right, $width: calc(100% - $after-button-padding-left));
+        }
+      }
+
+      // stylelint-enable max-nesting-depth
     }
   }
 
@@ -308,6 +338,13 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-item-link,
+.gem-c-layout-super-navigation-header__navigation-second-toggle-button {
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(3) 0;
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-item-link {
   .js-module-initialised & {
     margin-left: govuk-spacing(4);
@@ -459,20 +496,31 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-item-link-inner {
+  @include govuk-media-query($from: "desktop") {
+    // links have different left padding to the button as
+    // they do not have the 5px wide caret pseudo element
+    padding: govuk-spacing(1) $after-link-padding;
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
   @include govuk-media-query($from: "desktop") {
     display: inline-block;
-    padding: govuk-spacing(1) govuk-spacing(6) govuk-spacing(1) govuk-spacing(5);
+    padding: govuk-spacing(1) $after-button-padding-right govuk-spacing(1) $after-button-padding-left;
   }
 }
 
 // Search link and dropdown.
 .gem-c-layout-super-navigation-header__search-item-link {
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(3);
+  }
+
   &:link,
   &:visited {
     @include govuk-media-query($from: "desktop") {
       background: $govuk-brand-colour;
-      border-bottom: 1px solid govuk-colour("dark-blue");
 
       &:hover {
         background: govuk-colour("black");
@@ -494,6 +542,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
       &:after {
         left: 0;
         right: 0;
+        width: 100%;
       }
 
       @include focus-not-focus-visible {
@@ -811,7 +860,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns($items: 16, $columns: 2, $selector: "li", $flow: column);
+    @include columns($items: 17, $columns: 2, $selector: "li", $flow: column);
   }
 }
 

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

@@ -28,7 +28,30 @@
     </div>
   </div>
 
-  <h2 class="component-doc-h2">
+  <% if @component_doc.other_examples.any? %>
+    <div class="component-doc__content-list">
+      <%
+        content_items = [
+          {
+            href: "#default",
+            text: "How it looks",
+          }
+        ]
+
+        @component_doc.other_examples.each do | example |
+          content_items << {
+            href: "##{example.id}",
+            text: example.name
+          }
+        end
+      %>
+      <%= render "govuk_publishing_components/components/contents_list", {
+        contents: content_items
+      } %>
+    </div>
+  <% end %>
+
+  <h2 class="component-doc-h2" id="default">
     <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
     <small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
     <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
@@ -65,8 +88,9 @@
   <% if @component_doc.other_examples.any? %>
     <div class="examples">
       <h2 class="component-doc-h2">Other examples</h2>
+
       <% @component_doc.other_examples.each do |example| %>
-        <div class="component-example">
+        <div class="component-example" id="<%= example.id %>">
           <h3 class="example-title">
             <a href="<%= component_example_path(@component_doc.id, example.id) %>" class="govuk-link"><%= example.name %></a>
             <small>(<a href="<%= component_preview_path(@component_doc.id, example.id) %>" class="govuk-link">preview</a>)</small>

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

@@ -4,7 +4,7 @@
   id = cb_helper.id
 %>
 
-<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "gem-checkboxes" } do %>
+<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "gem-checkboxes govuk-checkboxes" } do %>
   <% if cb_helper.should_have_fieldset %>
     <% if cb_helper.heading_markup %>
       <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %>
@@ -24,8 +24,7 @@
 
         <%= tag.ul class: cb_helper.list_classes, data: {
           module: ('govuk-checkboxes' if cb_helper.has_conditional),
-          nested: ('true' if cb_helper.has_nested),
-          exclusive: ('true' if cb_helper.has_exclusive)
+          nested: ('true' if cb_helper.has_nested)
         } do %>
           <% cb_helper.items.each_with_index do |item, index| %>
             <% if item === :or %>

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

@@ -96,7 +96,7 @@
           %>
           <%= tag.li class: li_classes do %>
             <div class="gem-c-layout-super-navigation-header__navigation-toggle-wrapper govuk-clearfix">
-              <%= link_to link[:label], link[:href], {
+              <%= link_to link[:href], {
                 class: "gem-c-layout-super-navigation-header__navigation-item-link",
                 data: {
                   track_action: "#{tracking_label}Link",
@@ -105,7 +105,11 @@
                   track_dimension: link[:label],
                   track_dimension_index: "29",
                 }
-              } %>
+              } do %>
+                <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
+                  <%= link[:label] %>
+                </span>
+              <% end %>
               <% if has_children %>
                 <%= content_tag(:button, {
                   aria: {

data/app/views/govuk_publishing_components/components/docs/textarea.yml

@@ -103,3 +103,10 @@ examples:
       name: "described"
       rows: 2
       describedby: "contextual-guidance"
+  with_data_attributes:
+    data:
+      label:
+        text: "This textarea has a data attribute"
+      name: "with_data_attrbutes"
+      data:
+        module: "some-awesome-module-here"

data/config/locales/en.yml

@@ -96,6 +96,8 @@ en:
           href: "/browse/childcare-parenting"
         - text: Citizenship and living in the UK
           href: "/browse/citizenship"
+        - text: Cost of living support
+          href: "/cost-of-living"
         - text: Crime, justice and the law
           href: "/browse/justice"
         - text: Disabled people
@@ -175,6 +177,8 @@ en:
           href: "/browse/childcare-parenting"
         - label: Citizenship and living in the UK
           href: "/browse/citizenship"
+        - label: Cost of living support
+          href: "/cost-of-living"
         - label: Crime, justice and the law
           href: "/browse/justice"
         - label: Disabled people

data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb

@@ -14,8 +14,7 @@ module GovukPublishingComponents
                   :id,
                   :hint_text,
                   :description,
-                  :heading_caption,
-                  :has_exclusive
+                  :heading_caption
 
       def initialize(options)
         @items = options[:items] || []
@@ -29,7 +28,6 @@ module GovukPublishingComponents
 
         # check if any item is set as being conditional
         @has_conditional = options[:items].any? { |item| item.is_a?(Hash) && item[:conditional] }
-        @has_exclusive = options[:items].any? { |item| item.is_a?(Hash) && item[:exclusive] }
         @has_nested = options[:items].any? { |item| item.is_a?(Hash) && item[:items] }
 
         @id = options[:id] || "checkboxes-#{SecureRandom.hex(4)}"
@@ -97,7 +95,7 @@ module GovukPublishingComponents
         data = checkbox[:data_attributes] || {}
         data[:controls] = controls
         data["aria-controls"] = aria_controls
-        data[:exclusive] = checkbox[:exclusive]
+        data[:behaviour] = "exclusive" if checkbox[:exclusive]
 
         capture do
           concat check_box_tag checkbox_name, checkbox[:value], checked, class: "govuk-checkboxes__input", id: checkbox_id, data: data

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "30.2.1".freeze
+  VERSION = "30.4.1".freeze
 end