govuk_publishing_components 30.3.0 → 30.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3e967d80364c5bc79a3d6ae1338e28e4713dfbb9d4e07a6b6fda984e177e8db
-  data.tar.gz: 80a99542db952464b49e1b1468fb320ae5c5a997d62bd2fad49d1dd880591568
+  metadata.gz: 6db205fec06f001e8342d61eec7b8e8183e87b0d9bd4949b041d13dcd90a37a7
+  data.tar.gz: fff5b686c9bcd316ef8d646ca271dc7fdb6390767cbc68b012b56e2438aa9cf3
 SHA512:
-  metadata.gz: 973d005a28142f232b29ed9cb4669e57a39bbfe45403ae69ff56a94bfe8f263571ee1e51143f4dcdf75fb9fd0dc4d978fe5b957853c046ec6c1450cf0d2dd174
-  data.tar.gz: 1cbdfbba36fa2a140c33fb4aadbd5797d9dd4fff255b8f2d3d77ade1962dae343d322f34ff4b55001d79b914b7d1a954d800f2697e01c02fd6700d74648c0dc2
+  metadata.gz: b68cfb8ca8bd60307057dbcc96c4fdfa00fa02dced1720c9b06cd7d7b2834480a6969b08cc75f6ae356c10519fce45e599d53ea0a5616b70fc9238e0987cdab9
+  data.tar.gz: 6639054079af181c6b4a781fb6ba69913b5eb574e3026f8f1317e9582f37987f0fcba1964aa81ffb1b0607873b755a888a07aac5d5a233f4c6bc99557b1fb541

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

@@ -11,68 +11,80 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Ga4EventTracker.prototype.init = function () {
-    this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
   }
 
-  Ga4EventTracker.prototype.trackClick = function (event) {
+  // triggered by cookie-consent event, which happens when users consent to cookies
+  Ga4EventTracker.prototype.startModule = function () {
     if (window.dataLayer) {
-      var target = this.findTrackingAttributes(event.target)
-      if (target) {
-        var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
-
-        try {
-          var data = target.getAttribute(this.trackingTrigger)
-          data = JSON.parse(data)
-        } catch (e) {
-          // if there's a problem with the config, don't start the tracker
-          console.error('GA4 configuration error: ' + e.message, window.location)
-          return
-        }
+      this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
+    }
+  }
 
-        schema.event = 'event_data'
-        // get attributes from the data attribute to send to GA
-        // only allow it if it already exists in the schema
-        for (var property in data) {
-          if (property in schema.event_data) {
-            schema.event_data[property] = data[property]
-          }
-        }
+  Ga4EventTracker.prototype.trackClick = function (event) {
+    var target = this.findTrackingAttributes(event.target)
+    if (target) {
+      var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
 
-        // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
-        if (target.closest('.gem-c-accordion')) {
-          var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
-        }
+      try {
+        var data = target.getAttribute(this.trackingTrigger)
+        data = JSON.parse(data)
+      } catch (e) {
+        // if there's a problem with the config, don't start the tracker
+        console.error('GA4 configuration error: ' + e.message, window.location)
+        return
+      }
 
-        /*
-          the details component uses an 'open' attribute instead of aria-expanded, so we need to check if we're on a details component.
-          since details deletes the 'open' attribute when closed, we need this boolean, otherwise every element which
-          doesn't contain an 'open' attr would be pushed to gtm as a closed element.
-        */
-        var detailsElement = target.closest('details')
-
-        if (ariaExpanded) {
-          schema.event_data.text = data.text || target.innerText
-          schema.event_data.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
-        } else if (detailsElement) {
-          schema.event_data.text = data.text || detailsElement.textContent
-          var openAttribute = detailsElement.getAttribute('open')
-          schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
+      schema.event = 'event_data'
+      // get attributes from the data attribute to send to GA
+      // only allow it if it already exists in the schema
+      for (var property in data) {
+        if (property in schema.event_data) {
+          schema.event_data[property] = data[property]
         }
+      }
+
+      // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
+      if (target.closest('.gem-c-accordion')) {
+        var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
+      }
 
-        /* If a tab was clicked, grab the href of the clicked tab (usually an anchor # link) */
-        var tabElement = event.target.closest('.gem-c-tabs')
-        if (tabElement) {
-          var aTag = event.target.closest('a')
-          if (aTag) {
-            var href = aTag.getAttribute('href')
-            if (href) {
-              schema.event_data.url = href
-            }
+      /*
+        the details component uses an 'open' attribute instead of aria-expanded, so we need to check if we're on a details component.
+        since details deletes the 'open' attribute when closed, we need this boolean, otherwise every element which
+        doesn't contain an 'open' attr would be pushed to gtm as a closed element.
+      */
+      var detailsElement = target.closest('details')
+
+      if (ariaExpanded) {
+        schema.event_data.text = data.text || target.innerText
+        schema.event_data.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
+      } else if (detailsElement) {
+        schema.event_data.text = data.text || detailsElement.textContent
+        var openAttribute = detailsElement.getAttribute('open')
+        schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
+      }
+
+      /* If a tab was clicked, grab the href of the clicked tab (usually an anchor # link) */
+      var tabElement = event.target.closest('.gem-c-tabs')
+      if (tabElement) {
+        var aTag = event.target.closest('a')
+        if (aTag) {
+          var href = aTag.getAttribute('href')
+          if (href) {
+            schema.event_data.url = href
           }
         }
-
-        window.dataLayer.push(schema)
       }
+
+      window.dataLayer.push(schema)
     }
   }
 

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

@@ -1,13 +1,13 @@
 // = require govuk/vendor/polyfills/Element/prototype/closest.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analyticsModules || {};
 
-;(function (global) {
+(function (analyticsModules) {
   'use strict'
 
-  var GOVUK = global.GOVUK || {}
-  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
-
-  GOVUK.analyticsGA4.linkTracker = {
-    trackLinkClicks: function () {
+  var Ga4LinkTracker = {
+    init: function () {
       if (window.dataLayer) {
         this.internalLinksDomain = 'www.gov.uk/'
         this.internalLinksDomainWithoutWww = 'gov.uk/'
@@ -44,18 +44,20 @@
       }
 
       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)
@@ -129,6 +131,18 @@
       }
     },
 
+    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
@@ -153,5 +167,5 @@
     }
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  analyticsModules.Ga4LinkTracker = Ga4LinkTracker
+})(window.GOVUK.analyticsGA4.analyticsModules)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -1,14 +1,15 @@
-;(function (global) {
-  'use strict'
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analyticsModules || {};
 
-  var GOVUK = global.GOVUK || {}
-  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+(function (analyticsModules) {
+  'use strict'
 
-  GOVUK.analyticsGA4.pageViewTracker = {
-    PIIRemover: new GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
+  var PageViewTracker = {
+    PIIRemover: new window.GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
     nullValue: null,
 
-    sendPageView: function () {
+    init: function () {
       if (window.dataLayer) {
         var data = {
           event: 'page_view',
@@ -61,7 +62,7 @@
     },
 
     // window.httpStatusCode is set in the source of the error page in static
-    // https://github.com/alphagov/static/blob/main/app/views/root/_error_page.html.erb#L32
+    // https://github.com/alphagov/static/blob/1c734451f2dd6fc0c7e80beccbdcbfa5aaffd0e4/app/views/root/_error_page.html.erb#L41-L43
     getStatusCode: function () {
       if (window.httpStatusCode) {
         return window.httpStatusCode.toString()
@@ -109,5 +110,5 @@
     }
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  analyticsModules.PageViewTracker = PageViewTracker
+})(window.GOVUK.analyticsGA4.analyticsModules)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js

@@ -0,0 +1,26 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+
+var initFunction = function () {
+  // to be added: digital identity consent mechanism
+
+  var consentCookie = window.GOVUK.getConsentCookie()
+
+  if (consentCookie && consentCookie.usage) {
+    var analyticsModules = window.GOVUK.analyticsGA4.analyticsModules
+    for (var property in analyticsModules) {
+      var module = analyticsModules[property]
+      if (typeof module.init === 'function') {
+        module.init()
+      }
+    }
+    // to be added: attach JS from Google to the DOM and execute
+    // to be added: cross domain tracking code
+  } else {
+    window.addEventListener('cookie-consent', function () {
+      window.GOVUK.analyticsGA4.init()
+    })
+  }
+}
+
+window.GOVUK.analyticsGA4.init = initFunction

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

@@ -4,6 +4,4 @@
 //= require ./analytics-ga4/ga4-page-views
 //= require ./analytics-ga4/ga4-link-tracker
 //= require ./analytics-ga4/ga4-event-tracker
-
-window.GOVUK.analyticsGA4.pageViewTracker.sendPageView() // this will need integrating with cookie consent before production
-window.GOVUK.analyticsGA4.linkTracker.trackLinkClicks()
+//= require ./analytics-ga4/init-ga4

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/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -37,11 +37,11 @@
 .gem-c-organisation-logo__crest {
   // Default brand colour
   border-left: 2px solid govuk-colour("black");
-  padding-top: 20px;
+  padding-top: 23px;
   padding-left: 6px;
 
   @include govuk-media-query($from: tablet) {
-    padding-top: 25px;
+    padding-top: 28px;
     padding-left: 7px;
   }
 
@@ -53,8 +53,6 @@
 }
 
 .gem-c-organisation-logo__name {
-  position: relative;
-  top: 3px;
   font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 

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

@@ -28,18 +28,42 @@
     </div>
   </div>
 
-  <h2 class="component-doc-h2">
+  <div class="component-doc__content-list">
+    <%
+      content_items = [
+        { href: "#how-it-looks", text: "How it looks" },
+        { href: "#how-to-call-this-component", text: "How to call this component" },
+        ({ href: "#govuk-design-system", text: "GOV.UK Design System" } if @component_doc.govuk_frontend_components.any?),
+        ({ href: "#accessibility-acceptance-criteria", text: "Accessibility acceptance criteria" } if @component_doc.accessibility_criteria.present?),
+        ({
+          href: "#other-examples",
+          text: "Other examples",
+          items: @component_doc.other_examples.map do | example |
+            {
+              href: "##{example.id}",
+              text: example.name
+            }
+          end
+        } if @component_doc.other_examples.any?),
+      ].compact
+    %>
+    <%= render "govuk_publishing_components/components/contents_list", {
+      contents: content_items
+    } %>
+  </div>
+
+  <h2 class="component-doc-h2" id="how-it-looks">
     <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>
   </h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
-  <h2 class="component-doc-h2">How to call this component</h2>
+  <h2 class="component-doc-h2" id="how-to-call-this-component">How to call this component</h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
 
   <% if @component_doc.govuk_frontend_components.any? %>
-    <h2 class="component-doc-h2">GOV.UK Design System</h2>
+    <h2 class="component-doc-h2" id="govuk-design-system">GOV.UK Design System</h2>
     <div class="component-markdown">
       <p>This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:</p>
 
@@ -52,7 +76,7 @@
   <% end %>
 
   <% if @component_doc.accessibility_criteria.present? %>
-    <div class="govuk-grid-row component-accessibility-criteria">
+    <div class="govuk-grid-row component-accessibility-criteria" id="accessibility-acceptance-criteria">
       <div class="govuk-grid-column-two-thirds">
         <h2 class="component-doc-h2">Accessibility acceptance criteria</h2>
         <div class="component-markdown">
@@ -64,9 +88,10 @@
 
   <% if @component_doc.other_examples.any? %>
     <div class="examples">
-      <h2 class="component-doc-h2">Other examples</h2>
+      <h2 class="component-doc-h2" id="other-examples">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/_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/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/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "30.3.0".freeze
+  VERSION = "30.5.0".freeze
 end