govuk_publishing_components 21.53.0 → 21.55.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b75297c083a34e5136622cab23b3e1b393318cf789a15ba9c5deca7d96a4115
-  data.tar.gz: 6cf830ee77d6f2126b007ed24a55e905d42884b80cac984d29bd900b1d1dbb3f
+  metadata.gz: 417ac5b68c2937c585f441854215684db548772993c21ca5fcd4cda7a34fdf0f
+  data.tar.gz: 206dc5df8e79d3d92c3a0bcc8e2823a41d6f61b5bfd1ecf6df1ce5dd01cd7004
 SHA512:
-  metadata.gz: 365054c463d00d090f45861e6ce505a99c97b39e477759d94e1595254024c68bebaa02c329ec50b2635712d8a4fb7e1de34b17439473ee2136a0993a51fcdf97
-  data.tar.gz: f4a3fc8fc08f9e3e10840bcb8ef0bde1c94da69ef388ee6b5cf2be405ce4424bd35315a300c3e640af310a76e3c666c6ad2213bcfe9eaa47a084c9a1e314f6bf
+  metadata.gz: 05bab4bb91aaf768e8998f8be4c3088600ee4c75e7bf8873d9023421e5e686937118d021efaa939f8bbc2e2020520369099dfcb1bda1c14dd5eb1883ffde045d
+  data.tar.gz: 266f2889088edc5bf591597d3d6608fe023171e1d8b53895c5cd887b4a845e85e2ed61d690e3f7c85bb0f6e62b05c8648b87639ff3c8f53c5f7702c7c6c1bcc5

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/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -109,6 +109,8 @@
             event.target.f.title = videoTitle + ' (video)'
           },
           onStateChange: function (event) {
+            var eventData = event.data
+            var eventTarget = event.target
             var states = {
               "-1": "VideoUnstarted",
               "0": "VideoEnded",
@@ -117,14 +119,13 @@
               "3": "VideoBuffering",
               "5": "VideoCued"
             }
-
-            if (states[event.data] && options.tracking && options.tracking.hasTracking
+            if (states[eventData] && options.tracking && options.tracking.hasTracking
                 && window.GOVUK.analytics && window.GOVUK.analytics.trackEvent)
             {
               var tracking = {
                 category: options.tracking.category,
-                action: states[event.data],
-                label: { transport: 'beacon', label: event.target.getVideoUrl() }
+                action: states[eventData],
+                label: { transport: 'beacon', label: eventTarget.getVideoData && eventTarget.getVideoData().title }
               }
 
               window.GOVUK.analytics.trackEvent(tracking.category, tracking.action, tracking.label)

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/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -47,16 +47,7 @@ module GovukPublishingComponents
       additional_files = "@import 'govuk_publishing_components/govuk_frontend_support';\n"
       additional_files << "@import 'govuk_publishing_components/component_support';\n" unless print_styles
 
-      components = components_in_use
-      extra_components = []
-
-      components.each do |component|
-        components_in_component = components_within_component(component)
-        extra_components << components_in_component
-      end
-
-      components << extra_components.compact
-      components = components.flatten.uniq.sort
+      components = find_all_partials_in(components_in_use)
 
       components.map { |component|
         "@import 'govuk_publishing_components/components/#{print_path}#{component.gsub('_', '-')}';" if component_has_sass_file(component.gsub("_", "-"), print_styles)
@@ -66,16 +57,7 @@ module GovukPublishingComponents
     def components_in_use_js
       additional_files = "//= require govuk_publishing_components/lib\n"
 
-      components = components_in_use
-      extra_components = []
-
-      components.each do |component|
-        components_in_component = components_within_component(component)
-        extra_components << components_in_component
-      end
-
-      components << extra_components.compact
-      components = components.flatten.uniq.sort
+      components = find_all_partials_in(components_in_use)
 
       components.map { |component|
         "//= require govuk_publishing_components/components/#{component.gsub('_', '-')}" if component_has_js_file(component.gsub("_", "-"))
@@ -110,6 +92,34 @@ module GovukPublishingComponents
       matches.flatten.uniq.map(&:to_s).sort.map { |m| m.gsub("govuk_publishing_components/components/", "") }
     end
 
+    def find_all_partials_in(components)
+      components_to_search = components
+      partials_found = true
+
+      while partials_found
+        extra_components = find_partials_in(components_to_search)
+
+        if extra_components.any?
+          components << extra_components
+          components_to_search = extra_components
+        else
+          partials_found = false
+        end
+      end
+
+      components.flatten.uniq.sort
+    end
+
+    def find_partials_in(components)
+      extra_components = []
+      components.each do |component|
+        components_in_component = components_within_component(component)
+        extra_components << components_in_component
+      end
+
+      extra_components.flatten.uniq.sort
+    end
+
     def component_has_sass_file(component, print_styles)
       print_path = "print/" if print_styles
       Pathname.new(@component_gem_path + "/app/assets/stylesheets/govuk_publishing_components/components/#{print_path}_#{component}.scss").exist?
@@ -120,8 +130,10 @@ module GovukPublishingComponents
     end
 
     def components_within_component(component)
-      data = File.read(@component_gem_path + "/app/views/govuk_publishing_components/components/_#{component}.html.erb")
-      match = data.scan(/(govuk_publishing_components\/components\/[a-z_-]+)/)
+      filename = @component_gem_path + "/app/views/govuk_publishing_components/components/#{component}.html.erb"
+      filename = filename.sub(/.*\K\//, "/_") # files begin with _ but the method may have been passed 'filename' or 'dir/partial'
+      data = File.read(filename)
+      match = data.scan(/(govuk_publishing_components\/components\/[\/a-z_-]+)/)
       match.flatten.uniq.map(&:to_s).sort.map { |m| m.gsub("govuk_publishing_components/components/", "") }
     end
 

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/_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