govuk_publishing_components 30.0.0 → 30.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9d5601a07939b79ec5f1d7f4251d9b7ad00628225282405c6e17bb95b3f7552
-  data.tar.gz: 866b2f17bc9cc6bab9e7a29bec0fbc9f5f72e96f99742556bed1d5ff8811e3b2
+  metadata.gz: f402d935fbe75f4dde432aab1dd5f525388d478b99a960c57cedc2b73034ea0d
+  data.tar.gz: e6cf9788314e58be8a0f13158e7262a31dec5ff4adece4ee2daf117ebb5252f8
 SHA512:
-  metadata.gz: a4cac8f96d558bf72da3a0f016d40341ea211a9e3895401b7980a260c125f4ccd898b720968e7c207c227128400440237ad0f1d4f6739834aac1923200b4e4a0
-  data.tar.gz: e97320af9673d84fd8324c66d88dc6d64b0fb9708a41fe9e42573a33cfca2deea1b6e34400e546c762485141b38c6a088a15be4e5425283206bdfef37141178a
+  metadata.gz: 76b3d647997d9248dc930d224037a2d31d54aebee66879668743e7a962b85a199aff66cfc95dcb200577de4292f8dcd769ea105497df3ea71206746d798e112e
+  data.tar.gz: c29eaaf88f004b23c2412b3db5667533e2ed76e69b9a59679875e1dd68c2522ab15f935f6ed66ee0df3bbfd8c619aa604359afebf4e2369ff481959d4f7f535f

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/{gtm-click-tracking.js → ga4-event-tracker.js}

@@ -5,16 +5,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   'use strict'
 
-  function GtmClickTracking (module) {
+  function Ga4EventTracker (module) {
     this.module = module
     this.trackingTrigger = 'data-ga4' // elements with this attribute get tracked
   }
 
-  GtmClickTracking.prototype.init = function () {
+  Ga4EventTracker.prototype.init = function () {
     this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
   }
 
-  GtmClickTracking.prototype.trackClick = function (event) {
+  Ga4EventTracker.prototype.trackClick = function (event) {
     if (window.dataLayer) {
       var target = this.findTrackingAttributes(event.target)
       if (target) {
@@ -33,7 +33,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         // 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 (schema.event_data[property]) {
+          if (property in schema.event_data) {
             schema.event_data[property] = data[property]
           }
         }
@@ -58,12 +58,25 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           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)
       }
     }
   }
 
-  GtmClickTracking.prototype.findTrackingAttributes = function (clicked) {
+  Ga4EventTracker.prototype.findTrackingAttributes = function (clicked) {
     if (clicked.hasAttribute('[' + this.trackingTrigger + ']')) {
       return clicked
     } else {
@@ -72,7 +85,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   // check if an attribute exists or contains the attribute
-  GtmClickTracking.prototype.getClosestAttribute = function (clicked, attribute) {
+  Ga4EventTracker.prototype.getClosestAttribute = function (clicked, attribute) {
     var isAttributeOnElement = clicked.getAttribute(attribute)
     var containsAttribute = clicked.querySelector('[' + attribute + ']')
 
@@ -83,5 +96,5 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  Modules.GtmClickTracking = GtmClickTracking
+  Modules.Ga4EventTracker = Ga4EventTracker
 })(window.GOVUK.Modules)

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

@@ -0,0 +1,153 @@
+// = require govuk/vendor/polyfills/Element/prototype/closest.js
+
+;(function (global) {
+  'use strict'
+
+  var GOVUK = global.GOVUK || {}
+  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+
+  GOVUK.analyticsGA4.linkTracker = {
+    trackLinkClicks: function () {
+      if (window.dataLayer) {
+        this.internalLinksDomain = 'www.gov.uk/'
+        this.internalLinksDomainWithoutWww = 'gov.uk/'
+        this.handleClick = this.handleClick.bind(this)
+        this.handleMousedown = this.handleMousedown.bind(this)
+        document.querySelector('body').addEventListener('click', this.handleClick)
+        document.querySelector('body').addEventListener('contextmenu', this.handleClick)
+        document.querySelector('body').addEventListener('mousedown', this.handleMousedown)
+      }
+    },
+
+    stopTracking: function () {
+      document.querySelector('body').removeEventListener('click', this.handleClick)
+      document.querySelector('body').removeEventListener('contextmenu', this.handleClick)
+      document.querySelector('body').removeEventListener('mousedown', this.handleMousedown)
+    },
+
+    handleClick: function (event) {
+      var element = event.target
+
+      if (element.tagName !== 'A') {
+        element = element.closest('a')
+      }
+
+      if (!element) {
+        return
+      }
+
+      var clickData = {}
+      var href = element.getAttribute('href')
+
+      if (!href) {
+        return
+      }
+
+      if (this.isMailToLink(href)) {
+        clickData.type = 'email'
+        clickData.external = 'true'
+      } else if (this.isDownloadLink(href)) {
+        clickData.type = 'download'
+        clickData.external = 'false'
+      } else if (this.isExternalLink(href)) {
+        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'
+
+        // get attributes from the clickData object to send to GA
+        // only allow it if it already exists in the schema
+        for (var property in clickData) {
+          if (property in schema.event_data) {
+            schema.event_data[property] = clickData[property]
+          }
+        }
+
+        window.dataLayer.push(schema)
+      }
+    },
+
+    getClickType: function (event) {
+      switch (event.type) {
+        case 'click':
+          if (event.ctrlKey) {
+            return 'ctrl click'
+          } else if (event.metaKey) {
+            return 'command/win click'
+          } else {
+            return 'primary click'
+          }
+        case 'mousedown':
+          return 'middle click'
+        case 'contextmenu':
+          return 'secondary click'
+      }
+    },
+
+    handleMousedown: function (event) {
+      // 1 = middle mouse button
+      if (event.button === 1) {
+        this.handleClick(event)
+      }
+    },
+
+    isMailToLink: function (href) {
+      return href.substring(0, 7) === 'mailto:'
+    },
+
+    isDownloadLink: function (href) {
+      var assetsDomain = 'assets.publishing.service.gov.uk/'
+      var uploadsPath = '/government/uploads/'
+
+      if (this.hrefPointsToDomain(href, assetsDomain)) {
+        return true
+      }
+
+      var isInternalLink = this.hrefPointsToDomain(href, this.internalLinksDomain) || this.hrefPointsToDomain(href, this.internalLinksDomainWithoutWww)
+      if (isInternalLink && href.indexOf(uploadsPath) !== -1) {
+        return true
+      }
+
+      // Checks relative links to the uploadsPath
+      if (this.stringStartsWith(href, uploadsPath)) {
+        return true
+      }
+    },
+
+    isExternalLink: function (href) {
+      var isInternalLink = this.hrefPointsToDomain(href, this.internalLinksDomain) || this.hrefPointsToDomain(href, this.internalLinksDomainWithoutWww)
+      if (!isInternalLink && !this.hrefIsRelative(href)) {
+        return true
+      }
+    },
+
+    hrefPointsToDomain: function (href, domain) {
+      var httpDomain = 'http://' + domain
+      var httpsDomain = 'https://' + domain
+      var schemaRelativeDomain = '//' + domain
+      return this.stringStartsWith(href, domain) ||
+      this.stringStartsWith(href, httpDomain) ||
+      this.stringStartsWith(href, httpsDomain) ||
+      this.stringStartsWith(href, schemaRelativeDomain)
+    },
+
+    stringStartsWith: function (string, stringToFind) {
+      return string.substring(0, stringToFind.length) === stringToFind
+    },
+
+    hrefIsRelative: function (href) {
+      // Checks that a link is relative, but is not a protocol relative url
+      return href[0] === '/' && href[1] !== '/'
+    }
+  }
+
+  global.GOVUK = GOVUK
+})(window)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/{gtm-page-views.js → ga4-page-views.js}

@@ -2,9 +2,11 @@
   'use strict'
 
   var GOVUK = global.GOVUK || {}
+  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
 
-  GOVUK.Gtm = {
+  GOVUK.analyticsGA4.pageViewTracker = {
     PIIRemover: new GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
+    nullValue: null,
 
     sendPageView: function () {
       if (window.dataLayer) {
@@ -32,9 +34,9 @@
             language: this.getLanguage(),
             history: this.getHistory(),
             withdrawn: this.getWithDrawn(),
-            first_published_at: this.getMetaContent('first-published-at'),
-            updated_at: this.getMetaContent('updated-at'),
-            public_updated_at: this.getMetaContent('public-updated-at'),
+            first_published_at: this.stripTimeFrom(this.getMetaContent('first-published-at')),
+            updated_at: this.stripTimeFrom(this.getMetaContent('updated-at')),
+            public_updated_at: this.stripTimeFrom(this.getMetaContent('public-updated-at')),
             publishing_government: this.getMetaContent('publishing-government'),
             political_status: this.getMetaContent('political-status'),
             primary_publishing_organisation: this.getMetaContent('primary-publishing-organisation'),
@@ -73,13 +75,17 @@
       if (tag) {
         return tag.getAttribute('content')
       } else {
-        return 'n/a'
+        return this.nullValue
       }
     },
 
     getLanguage: function () {
-      var html = document.querySelector('html')
-      return html.getAttribute('lang') || 'n/a'
+      var content = document.getElementById('content')
+      if (content) {
+        return content.getAttribute('lang') || this.nullValue
+      } else {
+        return this.nullValue
+      }
     },
 
     getHistory: function () {
@@ -90,6 +96,16 @@
     getWithDrawn: function () {
       var withdrawn = this.getMetaContent('withdrawn')
       return (withdrawn === 'withdrawn') ? 'true' : 'false'
+    },
+
+    // return only the date from given timestamps of the form
+    // 2022-03-28T19:11:00.000+00:00
+    stripTimeFrom: function (value) {
+      if (value !== null) {
+        return value.split('T')[0]
+      } else {
+        return this.nullValue
+      }
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/{gtm-schemas.js → ga4-schemas.js}

@@ -4,7 +4,7 @@
   var GOVUK = global.GOVUK || {}
 
   var Schemas = function () {
-    this.null = 'n/a'
+    this.null = null
   }
 
   Schemas.prototype.eventSchema = function () {
@@ -20,7 +20,8 @@
         index_total: this.null,
         section: this.null,
         action: this.null,
-        external: this.null
+        external: this.null,
+        link_method: this.null
       }
     }
   }

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

@@ -1,7 +1,9 @@
 // The following modules are imported in a specific order
-//= require ./analytics-ga4/gtm-schemas
+//= require ./analytics-ga4/ga4-schemas
 //= require ./analytics-ga4/pii-remover
-//= require ./analytics-ga4/gtm-page-views
-//= require ./analytics-ga4/gtm-click-tracking
+//= require ./analytics-ga4/ga4-page-views
+//= require ./analytics-ga4/ga4-link-tracker
+//= require ./analytics-ga4/ga4-event-tracker
 
-window.GOVUK.Gtm.sendPageView() // this will need integrating with cookie consent before production
+window.GOVUK.analyticsGA4.pageViewTracker.sendPageView() // this will need integrating with cookie consent before production
+window.GOVUK.analyticsGA4.linkTracker.trackLinkClicks()

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

@@ -31,6 +31,7 @@ $govuk-new-link-styles: true;
 @import "components/details";
 @import "components/devolved-nations";
 @import "components/document-list";
+@import "components/emergency-banner";
 @import "components/error-alert";
 @import "components/error-message";
 @import "components/error-summary";

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

@@ -7,6 +7,7 @@
 @import "components/print/button";
 @import "components/print/cards";
 @import "components/print/contents-list";
+@import "components/print/emergency-banner";
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
 @import "components/print/layout-super-navigation-header";

data/app/assets/stylesheets/govuk_publishing_components/components/_emergency-banner.scss

@@ -0,0 +1,76 @@
+.gem-c-emergency-banner {
+  @include govuk-font(19);
+  background-color: govuk-colour("mid-grey");
+  color: govuk-colour("white");
+  margin-top: 2px;
+  padding: govuk-spacing(3) 0;
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(6) 0;
+  }
+}
+
+.gem-c-emergency-banner--homepage {
+  border-bottom: govuk-spacing(1) solid govuk-colour("white");
+  border-top: govuk-spacing(1) solid govuk-colour("white");
+  margin-bottom: govuk-spacing(-2);
+  margin-top: 0;
+  position: relative;
+  z-index: 10;
+}
+
+.gem-c-emergency-banner__heading {
+  @include govuk-font(24, $weight: bold);
+  margin: 0;
+}
+
+.gem-c-emergency-banner__heading--homepage {
+  @include govuk-font(48, $weight: bold);
+
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(4);
+  }
+}
+
+.gem-c-emergency-banner__description {
+  @include govuk-font(19);
+  color: govuk-colour("white");
+  margin-top: 0;
+  margin-bottom: govuk-spacing(4);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.gem-c-emergency-banner__description--homepage {
+  margin: govuk-spacing(4) 0;
+}
+
+.gem-c-emergency-banner__link {
+  @include govuk-font(19);
+}
+
+.gem-c-emergency-banner__link:link,
+.gem-c-emergency-banner__link:visited {
+  color: govuk-colour("white");
+}
+
+.gem-c-emergency-banner__link:focus {
+  @include govuk-focused-text;
+}
+
+.gem-c-emergency-banner--notable-death {
+  background-color: govuk-colour("black");
+}
+
+.gem-c-emergency-banner--national-emergency {
+  // Not using govuk-colour("red") aka #d4351c as that's a slightly different red.
+  background-color: #b10e1e;
+}
+
+.gem-c-emergency-banner--local-emergency {
+  // Not using govuk-colour("turquoise") for background colour as
+  // the contrast was too low with white text
+  background-color: #00847d;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/print/_emergency-banner.scss

@@ -0,0 +1,3 @@
+.gem-c-emergency-banner {
+  display: none;
+}

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -150,7 +150,7 @@ module GovukPublishingComponents
     end
 
     def clean_file_path(file)
-      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/]
+      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z+.]+/]
     end
 
     def clean_file_name(name)

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

@@ -7,6 +7,10 @@
 
 <%= render 'govuk_publishing_components/components/title', title: @component_example.name, context: "#{@component_doc.name} example", margin_top: 0 %>
 
+<% code_example = capture do %>
+  <%= render partial: "govuk_publishing_components/component_guide/component_doc/call", locals: { component_doc: @component_doc, example: @component_example } %>
+<% end %>
+
 <div class="component-show">
   <div class="component-doc">
     <div class="component-markdown">
@@ -19,6 +23,6 @@
     <%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, example: @component_example } %>
 
     <h2 class="component-doc-h2">How to call this example</h2>
-    <%= render partial: "govuk_publishing_components/component_guide/component_doc/call", locals: { component_doc: @component_doc, example: @component_example } %>
+    <%= code_example %>
   </div>
 </div>

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

@@ -74,8 +74,11 @@
           <div class="component-markdown">
             <%= raw(example.html_description) %>
           </div>
+          <% code_example = capture do %>
+            <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %>
+          <% end %>
           <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: example %>
-          <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %>
+          <%= code_example %>
         </div>
       <% end %>
     </div>

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

@@ -22,7 +22,7 @@
   locales = {}
 
   data_attributes ||= {}
-  data_attributes[:module] = 'govuk-accordion gem-accordion'
+  ((data_attributes[:module] ||= "") << " " << "govuk-accordion gem-accordion").strip!
   data_attributes[:anchor_navigation] = anchor_navigation
   data_attributes[:track_show_all_clicks] = track_show_all_clicks
   data_attributes[:track_sections] = track_sections

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

@@ -0,0 +1,51 @@
+<%
+  heading ||= ""
+  short_description ||= nil
+  link ||= nil
+  link_text ||= "More information"
+  campaign_class ||= nil
+  homepage ||= false
+
+  emergency_banner_helper = GovukPublishingComponents::Presenters::EmergencyBannerHelper.new()
+
+  if !campaign_class
+    raise ArgumentError, "Need to specify an emergency_type"
+  end
+
+  if !emergency_banner_helper.is_a_valid_emergency_type?(campaign_class)
+    raise ArgumentError, "Emergency type #{campaign_class} is not in list of valid emergency types (#{emergency_banner_helper.emergency_types.join(', ')})"
+  end
+
+  banner_classes = %w[gem-c-emergency-banner]
+  banner_classes << "gem-c-emergency-banner--#{campaign_class}"
+  banner_classes << "gem-c-emergency-banner--homepage" if homepage
+
+  heading_classes = %w[gem-c-emergency-banner__heading]
+  heading_classes << "gem-c-emergency-banner__heading--homepage" if homepage
+
+  description_classes = %w[gem-c-emergency-banner__description]
+  description_classes << "gem-c-emergency-banner__description--homepage" if homepage
+
+%>
+
+<%= content_tag('div', class: banner_classes, "aria-label": "emergency banner", "role": "region", "data-nosnippet": true ) do %>
+  <div class="govuk-width-container">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <%= content_tag('h2', class: heading_classes) do %>
+          <%= heading %>
+        <% end %>
+        <% if short_description %>
+          <%= content_tag('p', class: description_classes) do %>
+            <%= short_description %>
+          <% end %>
+        <% end %>
+        <% if link %>
+          <a href="<%= link %>" class="gem-c-emergency-banner__link">
+            <%= link_text %>
+          </a>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -6,7 +6,7 @@
   margin_top ||= 3
   margin_bottom ||= 3
 
-  data_attributes[:module] = require_js ? "print-link" : "button"
+  ((data_attributes[:module] ||= "") << " " << (require_js ? "print-link" : "button")).strip!
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({
     margin_top: margin_top,

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

@@ -185,18 +185,17 @@ examples:
     description: |
       Adds custom data attributes to each section of the accordion. Accepts a hash, so multiple attributes can be added.
 
-      The `data_attributes` hash is for the outermost element in the accordion.
+      The `data_attributes` option applies attributes to the outermost element in the accordion. Each item can also have a `data_attributes` hash, which are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
 
-      Each item can also have a `data_attributes` hash. These `data_attributes` are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
+      Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). More details on how this can be used with the GA4 event tracking can be found in the 'Advanced' section of the [event tracking documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-gtm/ga4-event-tracker.md).
 
-      Data attributes can also be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). If `track_options` within `data_attributes_show_all` is set, then it is possible to pass a custom dimension when 'Show/Hide all' is clicked.
+      If `track_options` within `data_attributes_show_all` is set, then it is possible to pass a custom dimension when 'Show/Hide all' is clicked.
     data:
       data_attributes:
-          gtm: gtm-accordion
-          ga: ga-accordion
+        custom_data_attr: custom-data-attr-accordion
       data_attributes_show_all:
-        gtm-event-name: example
-        gtm-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
+        custom_data_attr-event-name: example
+        custom_data_attr-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
         tracking-options: "{ 'dimension114': 1 }"
       items:
         - heading:
@@ -204,25 +203,39 @@ examples:
           content:
             html: <p class="govuk-body">This is the content for Writing well for the web.</p>
           data_attributes:
-            gtm: gtm-accordion-item-1
+            custom_data_attr: custom-data-attr-accordion-item-1
         - heading:
             text: Writing well for specialists
           content:
             html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
           data_attributes:
-            gtm: gtm-accordion-item-2
+            custom_data_attr: custom-data-attr-accordion-item-2
         - heading:
             text: Know your audience
           content:
             html: <p class="govuk-body">This is the content for Know your audience.</p>
           data_attributes:
-            gtm: gtm-accordion-item-3
+            custom_data_attr: custom-data-attr-accordion-item-3
         - heading:
             text: How people read
           content:
             html: <p class="govuk-body">This is the content for How people read.</p>
           data_attributes:
-            gtm: gtm-accordion-item-4
+            custom_data_attr: custom-data-attr-accordion-item-4
+  with_custom_data_module:
+    description: The component includes its own `data-module` but others can be passed in addition if required, for example to apply tracking to an element. This will be included along with the components own `data-module`.
+    data:
+      data_attributes:
+        module: gem-track-click
+      items:
+        - heading:
+            text: Writing well for the web
+          content:
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
+        - heading:
+            text: Writing well for specialists
+          content:
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
   different_heading_level:
     description: This will alter the level of the heading, not the appearance of the heading.
     data:

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

@@ -0,0 +1,45 @@
+name: Emergency banner
+description: A site-wide banner used in the event of an emergency
+body: |
+  There are three types of events that would lead GOV.UK to add an emergency banner to the top of each page on the web site; a notable death, a national emergency or a local emergency.
+
+  See the [opsmanual](https://docs.publishing.service.gov.uk/manual/emergency-publishing.html#adding-emergency-publishing-banners) for information about what the Emergency Banner is and when it should be deployed.
+
+shared_accessibility_criteria:
+  - link
+
+examples:
+  default:
+    description: |
+      Death of a notable person
+    data:
+      campaign_class: "notable-death"
+      heading: "His Royal Highness Henry VIII"
+      short_description: "1491 to 1547"
+      link_text: "Override Link Text"
+      link: "https://www.gov.uk/"
+  national_emergency:
+    description: |
+      National emergency (level 1 or category 2)
+    data:
+      campaign_class: "national-emergency"
+      heading: "National emergency"
+      short_description: "This is a level 1 incident"
+      link: "https://www.gov.uk/"
+  local_emergency:
+    description: |
+      Localised large-scale emergency (level 2 or category 1)
+    data:
+      campaign_class: "local-emergency"
+      heading: "Local emergency"
+      short_description: "This is a level 2 incident"
+      link: "https://www.gov.uk/"
+  notable_death_homepage:
+    description: |
+      When presenting any type of emergency banner on homepage the styling is slightly different.
+    data:
+      campaign_class: "notable-death"
+      heading: "His Royal Highness Henry VIII"
+      short_description: "1491 to 1547"
+      link: "https://www.gov.uk/"
+      homepage: true

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

@@ -26,6 +26,11 @@ examples:
         track-category: "printButton"
         track-action: "clicked"
         track-label: "Print this page"
+  with_custom_data_module:
+    description: The component includes its own `data-module` but others can be passed in addition if required, for example to apply tracking to an element. This will be included along with the components own `data-module`.
+    data:
+      data_attributes:
+        module: "gem-track-click"
   with_custom_margins:
     description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having margin level `3` on top and bottom.
     data:

data/config/locales/hr.yml

@@ -16,7 +16,6 @@ hr:
       order_a_copy: Naručite kopiju
       page:
         few:
-        many:
         one: 1 stranica
         other: "%{count} stranice"
       reference: 'Referenca: %{reference}'

data/lib/govuk_publishing_components/presenters/emergency_banner_helper.rb

@@ -0,0 +1,17 @@
+module GovukPublishingComponents
+  module Presenters
+    class EmergencyBannerHelper
+      EMERGENCY_TYPES = %w[notable-death national-emergency local-emergency].freeze
+
+      def initialize; end
+
+      def emergency_types
+        EMERGENCY_TYPES
+      end
+
+      def is_a_valid_emergency_type?(type)
+        EMERGENCY_TYPES.include?(type)
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

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

data/lib/govuk_publishing_components.rb

@@ -12,6 +12,7 @@ require "govuk_publishing_components/presenters/breadcrumb_selector"
 require "govuk_publishing_components/presenters/button_helper"
 require "govuk_publishing_components/presenters/contextual_navigation"
 require "govuk_publishing_components/presenters/devolved_nations_helper"
+require "govuk_publishing_components/presenters/emergency_banner_helper"
 require "govuk_publishing_components/presenters/related_navigation_helper"
 require "govuk_publishing_components/presenters/step_by_step_nav_helper"
 require "govuk_publishing_components/presenters/page_with_step_by_step_navigation"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 30.0.0
+  version: 30.2.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-07-28 00:00:00.000000000 Z
+date: 2022-08-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -436,9 +436,10 @@ files:
 - app/assets/javascripts/component_guide/vendor/matches-polyfill.min.js
 - app/assets/javascripts/govuk_publishing_components/all_components.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4.js
-- app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-click-tracking.js
-- app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-page-views.js
-- app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-schemas.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
 - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js
@@ -534,6 +535,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_details.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_emergency-banner.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss
@@ -622,6 +624,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/print/_button.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_cards.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_contents-list.scss
+- app/assets/stylesheets/govuk_publishing_components/components/print/_emergency-banner.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak-html-publication.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_layout-super-navigation-header.scss
@@ -678,6 +681,7 @@ files:
 - app/views/govuk_publishing_components/components/_details.html.erb
 - app/views/govuk_publishing_components/components/_devolved_nations.html.erb
 - app/views/govuk_publishing_components/components/_document_list.html.erb
+- app/views/govuk_publishing_components/components/_emergency_banner.html.erb
 - app/views/govuk_publishing_components/components/_error_alert.html.erb
 - app/views/govuk_publishing_components/components/_error_message.html.erb
 - app/views/govuk_publishing_components/components/_error_summary.html.erb
@@ -760,6 +764,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/details.yml
 - app/views/govuk_publishing_components/components/docs/devolved_nations.yml
 - app/views/govuk_publishing_components/components/docs/document_list.yml
+- app/views/govuk_publishing_components/components/docs/emergency_banner.yml
 - app/views/govuk_publishing_components/components/docs/error_alert.yml
 - app/views/govuk_publishing_components/components/docs/error_message.yml
 - app/views/govuk_publishing_components/components/docs/error_summary.yml
@@ -922,6 +927,7 @@ files:
 - lib/govuk_publishing_components/presenters/contextual_navigation.rb
 - lib/govuk_publishing_components/presenters/curated_taxonomy_sidebar_links.rb
 - lib/govuk_publishing_components/presenters/devolved_nations_helper.rb
+- lib/govuk_publishing_components/presenters/emergency_banner_helper.rb
 - lib/govuk_publishing_components/presenters/heading_helper.rb
 - lib/govuk_publishing_components/presenters/image_card_helper.rb
 - lib/govuk_publishing_components/presenters/intervention_helper.rb
@@ -1931,7 +1937,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.19
+rubygems_version: 3.3.20
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications