govuk_publishing_components 21.51.0 → 21.55.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fedf34db2684991bab29ed8f0b4fb255955d0c224c212fac7a39ec770aea839f
-  data.tar.gz: e951f2b97efa24c267d1d16148f8ca9ee3c68cc55d368deb88228491c7be4574
+  metadata.gz: 67b6a6a998771d72bbbe83523102343350d083190a7c77e2bfd158d89104be3a
+  data.tar.gz: f64d56023c03cc92dc84dec30e06436e5904f98f2334e14440e4468886d27f55
 SHA512:
-  metadata.gz: fce07b54ebb9312b2ff11803363761a1aaf112514e8bc3c614e2184fe2d5d6605fd15ee59b4becf9d055acf9f7b4f7bfecf297f06a8bb4e9043b640967e7b157
-  data.tar.gz: 0a9f8e24d9b3cf7b69b8d2d8e145b12efb14d2a0f44e6a5a07b88c6ab151ec0fede4cb4f40bacb63fdfb38488a3af942a749e3f6b08605088effae9b161ec4ab
+  metadata.gz: a9fb15374f204846907e809baff835885ae63698064184bbe55b0dbe0c5fbf82ed0986595de7ebfdc62b50144ee0173c73c2b30f58468c72e1701745848f50c7
+  data.tar.gz: 30a0a5885f0bf9343d2bcb9679630829d394148447ee1041ff737704105b07ff4e28fd7711bee68ac604d7c864c6bd103606d7204ee2e010a94a0c9ebdd9a977

data/app/assets/images/govuk_publishing_components/action-link--nhs.svg

@@ -0,0 +1 @@
+<svg fill="none" height="227" viewBox="0 0 227 227" width="227" xmlns="http://www.w3.org/2000/svg"><path d="m55.7 226.5c-30.4 0-55.2-24.8-55.2-55.2v-115.6c0-30.4 24.8-55.2 55.2-55.2h115.6c30.4 0 55.2 24.8 55.2 55.2v115.6c0 30.4-24.8 55.2-55.2 55.2z" fill="#0ba23b"/><path d="m171.3 1c30.2 0 54.7 24.5 54.7 54.7v115.6c0 30.2-24.5 54.7-54.7 54.7h-115.6c-30.2 0-54.7-24.5-54.7-54.7v-115.6c0-30.2 24.5-54.7 54.7-54.7zm0-1h-115.6c-30.7 0-55.7 25-55.7 55.7v115.6c0 30.7 25 55.7 55.7 55.7h115.6c30.7 0 55.7-25 55.7-55.7v-115.6c0-30.7-25-55.7-55.7-55.7z" fill="#0ba23b"/><path d="m113.5 52.7-.5-.3-112 112v6.9c0 7.3 1.5 14.3 4.1 20.7l107.9-107.9.5.3 108.2 108.2c2.8-6.5 4.3-13.8 4.3-21.3v-6.1z" fill="#fcf411"/><path d="m171.3 1h-3l57.7 57.7v-3c0-30.2-24.5-54.7-54.7-54.7z" fill="#fcf411"/><path d="m57.8 1h-2.1c-30.2 0-54.7 24.5-54.7 54.7v2.1z" fill="#fcf411"/><path d="m226 94.5-93.5-93.5h-38.8l-92.7 92.7v31.7l112-112 .5.3 112.5 112.5z" fill="#fcf411"/><path d="m205.8 213.8-92.3-92.3-.5-.3-92.2002 92.2c6 5 13.1 8.7 20.9 10.8l71.3002-71.3.5.3 71.1 71.1c7.9-1.9 15.1-5.6 21.2-10.5z" fill="#fcf411"/><path d="m112.1 188.3 1 1 .8-.8z" fill="#fcf411"/><path d="m149.8 226-36.7-36.7-36.7001 36.7z" fill="#fcf411"/><path d="m166.5 213.1h-106.0001c-25.7 0-46.6-20.9-46.6-46.6v-106c0-25.7 20.9-46.6 46.6-46.6h106.0001c25.7 0 46.6 20.9 46.6 46.6v106c0 25.7-20.9 46.6-46.6 46.6z" fill="#0071b9"/><g fill="#fff"><path d="m56.2998 56.7v48.5h119.7002v-48.5zm26.9 43.7-8.2-27h-.1l-5.4 27h-9.8l8.3-39h13l8 27.1h.1l5.5-27.1h9.8002l-8.3002 39zm39.7002 0 3.5-16.7h-12.3l-3.5 16.7h-10.4l8.1-39h10.5l-3.1 14.9h12.3l3.1-14.9h10.5l-8.1 39zm46.1-30.2c-2.7-1.2-5.6-1.8-8.6-1.8-4.1 0-7.5.6-7.5 3.7 0 5.5 15.1 3.5 15.1 15.3 0 10.8-10 13.6-19.1 13.6-4.1-.1-8.2-.8-12.1-2l2.4-7.9c2.1 1.3 6.2 2.2 9.6 2.2s8.3-.6 8.3-4.6c0-6.3-15.1-3.9-15.1-14.9 0-10.1 8.8-13.1 17.4-13.1 4.8 0 9.3.5 12 1.7z"/><path d="m50.5001 156.8c-.6.4-1.6.6-3 .9-1.3.2-2.8.3-4.3.3-2.6 0-4.9-.4-6.8-1.3s-3.6-2.1-4.9-3.7-2.3-3.4-2.9-5.5c-.7-2.1-1-4.4-1-6.9s.3-4.8 1-6.9 1.6-4 2.9-5.5c1.3-1.6 2.9-2.8 4.8-3.7s4.2-1.3 6.7-1.3c1.7 0 3.3.2 4.6.5s2.3.6 2.9.9l-.3 5.6c-.6-.3-1.5-.7-2.5-1.2s-2.3-.7-3.9-.7c-1.3 0-2.5.2-3.7.7-1.1.5-2.2 1.2-3 2.2-.9 1-1.6 2.3-2.1 3.8-.5 1.6-.8 3.4-.8 5.6s.3 4.1.8 5.6c.5 1.6 1.2 2.8 2.1 3.8s1.9 1.7 3 2.2 2.4.7 3.7.7c1.5 0 2.8-.2 3.8-.5s1.9-.7 2.6-1.3z"/><path d="m52.6001 140.6c0-3 .4-5.7 1.1-7.9s1.7-4 3-5.4c1.2-1.4 2.7-2.5 4.3-3.1 1.6-.7 3.3-1 5.1-1s3.4.3 5.1 1c1.6.7 3.1 1.7 4.3 3.1s2.2 3.2 3 5.4c.7 2.2 1.1 4.8 1.1 7.9 0 3-.4 5.7-1.1 7.9s-1.7 4-3 5.4c-1.2 1.4-2.7 2.5-4.3 3.1-1.6.7-3.3 1-5.1 1s-3.4-.3-5.1-1c-1.6-.7-3.1-1.7-4.3-3.1s-2.2-3.2-3-5.4c-.7-2.3-1.1-4.9-1.1-7.9zm6.4 0c0 2.3.2 4.3.6 5.9s.9 2.9 1.5 3.9 1.4 1.7 2.3 2.2 1.8.7 2.8.7 1.9-.2 2.8-.7 1.6-1.2 2.3-2.2c.6-1 1.1-2.3 1.5-3.9s.6-3.6.6-5.9-.2-4.3-.6-5.9-.9-2.9-1.5-3.9-1.4-1.7-2.3-2.2-1.8-.7-2.8-.7-1.9.2-2.8.7-1.6 1.2-2.3 2.2c-.6 1-1.1 2.3-1.5 3.9s-.6 3.5-.6 5.9z"/><path d="m80.3003 123.6h6.7l6.8 26.1h.1l6.9997-26.1h6.4l-10.2997 33.9h-6.6z"/><path d="m110.4 123.6h6.2v33.9h-6.2z"/><path d="m122.6 123.6h8.8c5.3 0 9.4 1.4 12.1 4.2s4.1 7.1 4.1 12.7c0 2.8-.4 5.3-1.2 7.5-.8 2.1-1.9 3.9-3.4 5.3-1.4 1.4-3.1 2.5-5.1 3.2s-4.1 1-6.5 1h-8.8zm6.2 29.2h2.1c1.7 0 3.3-.3 4.5-.9 1.3-.6 2.3-1.4 3.2-2.5s1.4-2.4 1.8-3.9.6-3.2.6-5-.2-3.5-.6-5-1-2.8-1.8-3.9-1.9-1.9-3.2-2.5-2.8-.8-4.5-.8h-2.1z"/><path d="m152 141.2h11.2v5h-11.2z"/><path d="m170.7 130.8-4.5 4.2-2.9-4.2 8.3-7.2h5.1v33.9h-6z"/><path d="m183.8 151.8c.6.3 1.3.6 2.2.9.9.4 2 .5 3.4.5 1.7 0 3-.4 4-1.2s1.8-1.8 2.3-2.9.9-2.4 1.1-3.7.3-2.5.4-3.5l-.1-.1c-.6.9-1.4 1.7-2.3 2.4-1 .7-2.3 1-3.9 1-1.2 0-2.3-.2-3.4-.7s-2-1.1-2.9-2.1-1.5-2.1-2-3.4c-.5-1.4-.8-3-.8-4.8 0-1.7.2-3.2.7-4.6.4-1.4 1.1-2.5 1.9-3.5s1.9-1.7 3.1-2.2 2.7-.8 4.3-.8c2.2 0 4 .4 5.4 1.2s2.5 2 3.4 3.4c.8 1.4 1.4 3.1 1.8 5.1.3 1.9.5 4 .5 6.1 0 2.5-.2 4.9-.6 7.2s-1.1 4.3-2.1 6.1c-1 1.7-2.3 3.1-4 4.2s-3.8 1.6-6.4 1.6c-1.6 0-2.8-.1-3.9-.4-1-.3-1.8-.5-2.4-.8zm4.1-17.7c0 1.8.3 3.4 1 4.6s1.8 1.8 3.4 1.8c1.5 0 2.5-.6 3.3-1.7.7-1.1 1.1-2.7 1.1-4.6 0-2-.3-3.6-1-4.7s-1.8-1.7-3.3-1.7c-1.6 0-2.7.6-3.4 1.7-.7 1-1.1 2.6-1.1 4.6z"/></g></svg>

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

@@ -7,8 +7,8 @@
     width: 50px;
     height: 45px;
     // sass-lint:disable no-duplicate-properties
-    background-image: image-url("govuk_publishing_components/action-link-arrow.png");
-    background-image: image-url("govuk_publishing_components/action-link-arrow.svg");
+    background: image-url("govuk_publishing_components/action-link-arrow.png");
+    background: image-url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent);
     // sass-lint:enable no-duplicate-properties
     background-repeat: no-repeat;
     background-position: 0 50%;
@@ -63,6 +63,20 @@
   }
 }
 
+.gem-c-action-link--mobile-subtext {
+  .gem-c-action-link__subtext-wrapper {
+    display: block;
+  }
+
+  .gem-c-action-link__subtext {
+    padding: 0;
+
+    &:before {
+      display: none;
+    }
+  }
+}
+
 .gem-c-action-link__subtext {
   @include govuk-font(19);
   display: block;
@@ -90,9 +104,10 @@
     width: 30px;
     height: 30px;
     // sass-lint:disable no-duplicate-properties
-    background-image: image-url("govuk_publishing_components/action-link-arrow--simple.png");
-    background-image: image-url("govuk_publishing_components/action-link-arrow--simple.svg");
+    background: image-url("govuk_publishing_components/action-link-arrow--simple.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--simple.svg"), linear-gradient(transparent, transparent);
     // sass-lint:enable no-duplicate-properties
+    background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;
   }
@@ -113,9 +128,10 @@
     width: 30px;
     height: 30px;
     // sass-lint:disable no-duplicate-properties
-    background-image: image-url("govuk_publishing_components/action-link-arrow--dark.png");
-    background-image: image-url("govuk_publishing_components/action-link-arrow--dark.svg");
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
     // sass-lint:enable no-duplicate-properties
+    background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;
   }
@@ -125,10 +141,25 @@
   }
 }
 
+.gem-c-action-link--nhs {
+  &:before {
+    width: 80px;
+    height: 70px;
+    // sass-lint:disable no-duplicate-properties
+    background: image-url("govuk_publishing_components/action-link--nhs.png");
+    background: image-url("govuk_publishing_components/action-link--nhs.svg"), linear-gradient(transparent, transparent);
+    // sass-lint:enable no-duplicate-properties
+    background-repeat: no-repeat;
+    background-size: 85% auto;
+    background-position: 0 50%;
+  }
+}
+
 .gem-c-action-link--light-text {
   color: govuk-colour("white");
 
-  .gem-c-action-link__link {
+  .gem-c-action-link__link,
+  .gem-c-action-link__subtext-link {
     text-decoration: underline;
 
     &:link,

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

@@ -1,39 +1 @@
 @import "govuk/components/back-link/back-link";
-
-.govuk-back-link {
-  &[href] {
-    text-decoration: underline;
-    border-bottom: 1px solid transparent;
-
-    &:focus {
-      text-decoration: none;
-    }
-  }
-
-  &:before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 1px;
-    left: 3px;
-    width: 7px;
-    height: 7px;
-    -webkit-transform: rotate(225deg);
-    -ms-transform: rotate(225deg);
-    transform: rotate(225deg);
-    border: solid;
-    border-width: 1px 1px 0 0;
-    clip-path: inherit;
-    -webkit-clip-path: inherit;
-  }
-}
-
-.govuk-back-link::after {
-  content: "";
-  position: absolute;
-  top: -14px;
-  right: 0;
-  left: 0;
-  bottom: -14px;
-}

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

@@ -31,22 +31,31 @@
   }
 }
 
+.gem-c-input__prefix,
 .gem-c-input__suffix {
   @include govuk-font($size: 19);
 
   background-color: govuk-colour("light-grey", $legacy: "grey-3");
   border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-  border-left: 0;
   box-sizing: border-box;
   cursor: default; // emphasise non-editable status of prefixes and suffixes
   display: inline-block;
-  flex: 0 0 0;
-  padding: govuk-spacing(1);
   white-space: nowrap;
   width: auto;
+  text-align: center;
   height: 40px;
+  padding: govuk-spacing(1);
+  min-width: 40px;
   @if $govuk-typography-use-rem {
-    height: govuk-px-to-rem(40px);
+    min-width: govuk-px-to-rem(40px);
   }
   margin-top: 0;
 }
+
+.gem-c-input__prefix {
+  border-right: 0;
+}
+
+.gem-c-input__suffix {
+  border-left: 0;
+}

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

@@ -10,7 +10,7 @@
     margin-left: 0;
     padding: .75em 0 .75em 2.5em;
 
-    @for $i from 1 through 14 {
+    @for $i from 1 through 30 {
       &:nth-child(#{$i}) {
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Ccircle cx='125' cy='125' r='100' fill='black' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' alignment-baseline='middle' font-family='sans-serif' font-size='100px' fill='white'%3E#{$i}%3C/text%3E%3C/svg%3E");
         background-repeat: no-repeat;

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

@@ -6,34 +6,54 @@
   nowrap_text ||= false
   href ||= false
   subtext ||= false
+  subtext_href ||= false
+  mobile_subtext ||= false
   light_text ||= false
   simple ||= false
   dark_icon ||= false
+  nhs_icon ||= false
   data ||= nil
   classes ||= nil
 
   css_classes = %w(gem-c-action-link)
   css_classes << "gem-c-action-link--light-text" if light_text
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
+  css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--with-subtext" if subtext
+  css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
   css_classes << (shared_helper.get_margin_bottom)
 
   link_classes = %w(govuk-link gem-c-action-link__link)
   link_classes << shared_helper.classes if classes
 %>
-<% if href.present? && text.present? %>
+<% if text.present? %>
   <div class="<%= css_classes.join(' ') %>">
     <% contents = capture do %>
       <span class="gem-c-action-link__link-wrapper">
-        <%= link_to  href, :class => link_classes, :data => data do %>
+        <% main_text = capture do %>
           <%= text %>
           <%= content_tag(:span, nowrap_text, class: "gem-c-action-link__nowrap-text") if nowrap_text %>
         <% end %>
+
+        <% if href.present? %>
+          <%= link_to href, class: link_classes, data: data do %>
+            <%= main_text %>
+          <% end %>
+        <% else %>
+          <%= main_text %>
+        <% end %>
       </span>
+
       <% if subtext %>
         <span class="gem-c-action-link__subtext-wrapper">
-          <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") %>
+          <% if subtext_href %>
+            <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") do %>
+              <%= link_to subtext, subtext_href, class: "gem-c-action-link__subtext-link govuk-link", data: data %>
+            <% end %>
+          <% else %>
+            <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") %>
+          <% end %>
         </span>
       <% end %>
     <% end %>

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

@@ -1,47 +1,16 @@
-<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request) %>
 <% prioritise_taxon_breadcrumbs ||= false %>
+<% breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.call(content_item, request, prioritise_taxon_breadcrumbs) %>
 <% inverse ||= false %>
 <% collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) %>
 
 <div class='gem-c-contextual-breadcrumbs'>
-
-  <% if navigation.priority_taxon %>
-    <%= render 'govuk_publishing_components/components/step_by_step_nav_header',
-      {
-        title: navigation.priority_taxon['title'],
-        path: navigation.priority_taxon['base_path']
-      }
-    %>
-  <% elsif navigation.content_tagged_to_current_step_by_step? %>
-    <%# Rendering step by step nav breadcrumbs because there's 1 step by step %>
+  <% if breadcrumb_selector[:step_by_step] %>
     <%= render 'govuk_publishing_components/components/step_by_step_nav_header',
-      navigation.step_nav_helper.header %>
-  <% elsif navigation.content_tagged_to_a_finder? %>
-    <%# Rendering finder breadcrumbs because the page is tagged to a finder %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.content_is_tagged_to_a_live_taxon? && prioritise_taxon_breadcrumbs %>
-    <%# Rendering taxonomy breadcrumbs because the page is tagged to live taxons
-          and we want to prioritise them over all other breadcrumbs %>
+               breadcrumb_selector[:breadcrumbs] %>
+  <% elsif breadcrumb_selector[:breadcrumbs] %>
     <%= render 'govuk_publishing_components/components/breadcrumbs',
-               breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
+               breadcrumbs: breadcrumb_selector[:breadcrumbs],
                inverse: inverse,
                collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
-    <%# Rendering parent-based breadcrumbs because the page is tagged to mainstream browse %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.content_has_curated_related_items? %>
-    <%# Rendering parent-based breadcrumbs because the page has curated related links %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.content_is_tagged_to_a_live_taxon? && !navigation.content_is_a_specialist_document? %>
-    <%# Rendering taxonomy breadcrumbs because the page is tagged to live taxons %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs',
-      breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
-      inverse: inverse,
-      collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.breadcrumbs.any? %>
-    <%# Rendering parent-based breadcrumbs because no browse, no related links, no live taxons %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
-  <% else %>
-    <%# Not rendering any breadcrumbs because there aren't any %>
   <% end %>
 </div>

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

@@ -22,6 +22,7 @@
   error_id = "error-#{SecureRandom.hex(4)}"
   search_icon ||= nil
   heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  prefix ||= nil
   suffix ||= nil
 
   css_classes = %w(gem-c-input govuk-input)
@@ -92,7 +93,17 @@
     }
   %>
 
-  <% if suffix %>
+  <% if prefix && suffix %>
+    <%= tag.div class: "gem-c-input__wrapper" do %>
+      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %>
+      <%= input_tag %>
+      <%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+    <% end %>
+  <% elsif prefix %>
+    <%= tag.div class: "gem-c-input__wrapper" do %>
+      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %>
+    <% end %>
+  <% elsif suffix %> 
     <%= tag.div class: "gem-c-input__wrapper" do %>
       <%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
     <% end %>

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

@@ -1,29 +1,49 @@
 <%
   title ||= false
   path ||= false
-  tracking_id ||= false
   breadcrumbs = [
     { title: "Home", url: "/" },
     { title: title, url: path }
   ]
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
+
+  tracking_id ||= false
+  tracking_category ||= "stepNavHeaderClicked"
+  tracking_action ||= "top"
+  tracking_label ||= path
+  tracking_dimension_enabled = tracking_dimension_enabled != false
+  tracking_dimension ||= title
+  tracking_dimension_index ||= 29
+
+  if tracking_id
+    tracking_options ||= ({ dimension96: tracking_id }).to_json
+  end
+
+  local_assigns[:margin_bottom] ||= 0
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = "gem-c-step-nav-header #{shared_helper.get_margin_bottom}"
 %>
 <% if title %>
   <script type="application/ld+json">
     <%= raw breadcrumb_presenter.structured_data.to_json %>
   </script>
 
-  <div class="gem-c-step-nav-header" data-module="track-click">
+  <div class="<%= classes %>" data-module="track-click">
     <span class="gem-c-step-nav-header__part-of">Part of</span>
     <% if path %>
       <a href="<%= path %>"
         class="gem-c-step-nav-header__title"
-        data-track-category="stepNavHeaderClicked"
-        data-track-action="top"
-        data-track-label="<%= path %>"
-        data-track-dimension="<%= title %>"
-        data-track-dimension-index="29"
-        data-track-options='{"dimension96" : "<%= tracking_id %>" }'>
+        data-track-category="<%= tracking_category %>"
+        data-track-action="<%= tracking_action %>"
+        data-track-label="<%= tracking_label %>"
+        <% if tracking_dimension_enabled %>
+          data-track-dimension="<%= tracking_dimension %>"
+          data-track-dimension-index="<%= tracking_dimension_index %>"
+        <% end %>
+        <% if tracking_id %>
+          data-track-options='<%= tracking_options %>'
+        <% end %>
+      >
         <%= title %>
       </a>
     <% else %>

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

@@ -6,56 +6,84 @@ examples:
   default:
     data:
       text: Go to NHS 111 online
-      href: '/my-test-page'
+      href: "/page"
   with_bottom_margin:
     data:
       text: Look at this margin
-      href: '/my-test-page'
+      href: "/page"
       margin_bottom: 9
   with_data_attributes:
     data:
       text: "Coronavirus (COVID-19)"
-      href: '/my-test-page'
+      href: "/page"
       data:
         attr_test: "hasDataAttribute"
   with_js_classes:
     description: Use `js-` prefixed classes only as interaction hooks – to query and operate on elements via JavaScript. Classes are added to the link itself.
     data:
       text: "Coronavirus (COVID-19)"
-      href: '/my-test-page'
+      href: "/page"
       classes: 'js-hook'
   with_no_wrapping_text:
     data:
       text: "Coronavirus (COVID-19):"
       nowrap_text: what you need to do
-      href: '/my-test-page'
+      href: "/page"
   with_light_text:
     data:
       text: "Coronavirus (COVID-19)"
-      href: '/my-test-page'
+      href: "/page"
       light_text: true
     context:
       dark_background: true
   with_subtext:
     data:
-      text: "Emergency something"
-      href: '/page'
-      subtext: "This is about the emergency"
+      text: Emergency something
+      href: "/page"
+      subtext: This is about the emergency
   with_subtext_on_a_dark_background:
     data:
-      text: "Emergency something"
-      href: '/page'
-      subtext: "This is about the emergency that is happening right now unfortunately so pay attention"
+      text: Emergency something
+      href: "/page"
+      subtext: This is about the emergency that is happening right now unfortunately so pay attention
+      light_text: true
+    context:
+      dark_background: true
+  mobile_subtext:
+    description: Lock the subtext beneath the main text, so the component with subtext always appears as it does on mobile.
+    data:
+      text: Try not to panic now
+      href: "/page"
+      subtext: "The thing that is happening is pretty scary but we'll get through it"
+      mobile_subtext: true
+  with_link_on_subtext:
+    description: The subtext can also be a link if required. The link on the main text is optional.
+    data:
+      text: Remain calm
+      subtext: Better things are ahead
+      subtext_href: "/page"
+  with_link_on_subtext_on_a_dark_background:
+    data:
+      text: Remain calm
+      subtext: Better things are ahead
+      subtext_href: "/page"
       light_text: true
     context:
       dark_background: true
   simple_arrow:
     data:
-      text: "Getting financial help and keeping your business safe"
+      text: Getting financial help and keeping your business safe
       href: "/financial-help"
       simple: true
   with_dark_icon:
     data:
-      text: "Coronavirus (COVID-19)"
-      href: '/my-test-page'
+      text: Coronavirus (COVID-19)
+      href: "/my-test-page"
       dark_icon: true
+  with_nhs_icon:
+    data:
+      text: Something about the NHS
+      subtext: Perhaps you'd like to click here
+      subtext_href: "/page"
+      mobile_subtext: true
+      nhs_icon: true