govuk_publishing_components 21.54.0 → 21.55.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f56d2e2736866df3cdbc9707a0add0da3bf84b188b3f4fdfeb1f1c7b522e5585
-  data.tar.gz: 6a03e5093606f297e742415fa87adad884d4529d15ad91296ba7651934415b1c
+  metadata.gz: 19ad2a3cf6f68efd7fe8140b3601107d25fff6dd67c3f05b8cde19a0a0cc74f9
+  data.tar.gz: 0bb67a7c588c7af08bfbb26159659f6801fece123836933755ba22fac236f3d6
 SHA512:
-  metadata.gz: 7c463802fc7d7cf753bcae4d7501547af06be56fe0b1104587399834b439102da473a8b484d48b2e9a6d4c7baeed71ecf168118e30076ec9cc26f24fa51251b9
-  data.tar.gz: ff4eaaa5ffd4e7b8e9fd071ac61b6aec2e0b316b17c3352372e44cba06fb58f740602bb6e0e56bbe031f6c21a80ff1db302ef0911abc130810904355d7698e0f
+  metadata.gz: d2ba559e148e74aec769f2fe1a4cdaa153703290c2c24da22b9607efe9930eba555fe31809f985d18fa481bb5213b24adbbb2bcda2d3b4baa754e7551c8e7e55
+  data.tar.gz: 8e84ad0c10264daf7b9a8898f513b9646db50ae1998b4ff3e723b1c45a2a122e135be33f1fbaa79e2dfae15def7fa939c6b162c1259c201b6603c868eefd4d22

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

@@ -1,8 +1,6 @@
 .gem-c-feedback {
   background: govuk-colour("white");
-  margin: govuk-spacing(6) auto 0 auto;
-  max-width: $govuk-page-width;
-  position: relative;
+  margin-top: govuk-spacing(6);
 
   @include govuk-media-query($from: tablet) {
     margin-top: govuk-spacing(9);
@@ -182,7 +180,6 @@
 }
 
 .gem-c-feedback__form {
-  margin: govuk-spacing(3) govuk-spacing(2) 0 govuk-spacing(2);
   padding: govuk-spacing(3) 0;
   border-top: govuk-spacing(2) solid govuk-colour("blue");
 

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -2,6 +2,8 @@ module GovukPublishingComponents
   class ComponentGuideController < GovukPublishingComponents::ApplicationController
     append_view_path File.join(Rails.root, "app", "views", GovukPublishingComponents::Config.component_directory_name)
 
+    MATCH_COMPONENTS = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/.freeze
+
     def index
       @application_path = Rails.root
       @component_gem_path = Gem.loaded_specs["govuk_publishing_components"].full_gem_path
@@ -47,16 +49,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 +59,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("_", "-"))
@@ -104,10 +88,43 @@ module GovukPublishingComponents
 
       files.each do |file|
         data = File.read(file)
-        matches << data.scan(/(govuk_publishing_components\/components\/[a-z_-]+)/)
+        matches << data.scan(MATCH_COMPONENTS)
       end
 
-      matches.flatten.uniq.map(&:to_s).sort.map { |m| m.gsub("govuk_publishing_components/components/", "") }
+      matches.flatten.uniq.map(&:to_s).sort
+    end
+
+    def find_all_partials_in(templates)
+      components = [templates]
+
+      templates.each do |template|
+        partials_found = true
+        components_to_search = [template]
+        components_found = []
+
+        while partials_found
+          extra_components = find_partials_in(components_to_search)
+
+          if extra_components.any?
+            components_found << extra_components
+            components_to_search = extra_components
+          else
+            partials_found = false
+            components << components_found.uniq.sort if components_found.any?
+          end
+        end
+      end
+
+      components.flatten.uniq.sort
+    end
+
+    def find_partials_in(components)
+      extra_components = []
+      components.each do |component|
+        extra_components << components_within_component(component)
+      end
+
+      extra_components.flatten.uniq.sort
     end
 
     def component_has_sass_file(component, print_styles)
@@ -120,9 +137,14 @@ 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_-]+)/)
-      match.flatten.uniq.map(&:to_s).sort.map { |m| m.gsub("govuk_publishing_components/components/", "") }
+      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'
+
+      return [] unless File.file?(filename)
+
+      data = File.read(filename)
+      match = data.scan(MATCH_COMPONENTS)
+      match.flatten.uniq.map(&:to_s).sort
     end
 
     def index_breadcrumb

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