govuk_publishing_components 34.0.0 → 34.5.0

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

@@ -1,12 +1,14 @@
 <%
   sizes ||= false
   brand ||= false
+
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
-  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
+  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns, brand_helper)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = "gem-c-image-card"
-  classes << " gem-c-image-card--large" if card_helper.large
-  classes << " gem-c-image-card--no-image" unless defined?(image_src)
+  classes = %w[gem-c-image-card]
+  classes << "gem-c-image-card--large" if card_helper.large
+  classes << "gem-c-image-card--no-image" unless (card_helper.image_src || card_helper.youtube_video_id)
+  classes << brand_helper.brand_class if brand_helper.brand_class
 
   font_size ||= card_helper.large ? 'm' : 's'
   heading_class = %w[gem-c-image-card__title]
@@ -23,11 +25,12 @@
   ]
   extra_link_classes << brand_helper.color_class
 
+  data_modules = %w[]
+  data_modules << "gem-track-click ga4-link-tracker" if card_helper.is_tracking?
+  data_modules << "image-card" if card_helper.youtube_video_id
 %>
 <% if card_helper.href || card_helper.extra_details.any? %>
-  <div class="<%= classes %> <%= brand_helper.brand_class %>"
-    <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
-    <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
+  <%= content_tag(:div, class: classes, "data-module": data_modules, lang: card_helper.lang) do %>
     <div class="gem-c-image-card__text-wrapper">
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>
@@ -65,6 +68,6 @@
         <p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
       <% end %>
     </div>
-    <%= card_helper.image %>
-  </div>
+    <%= card_helper.media %>
+  <% end %>
 <% end %>

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

@@ -31,6 +31,8 @@
   heading_level ||= nil
   prefix ||= nil
   suffix ||= nil
+  right_to_left ||= false
+  right_to_left_help = right_to_left_help.nil? ? right_to_left : right_to_left_help
 
   css_classes = %w(gem-c-input govuk-input)
   css_classes << "govuk-input--error" if has_error
@@ -70,7 +72,8 @@
     <% label_markup = capture do %>
       <%= render "govuk_publishing_components/components/label", {
         html_for: id,
-        heading_size: heading_size
+        heading_size: heading_size,
+        right_to_left: right_to_left_help
       }.merge(label.symbolize_keys) %>
     <% end %>
 
@@ -86,7 +89,8 @@
   <% if hint %>
     <%= render "govuk_publishing_components/components/hint", {
       id: hint_id,
-      text: hint
+      text: hint,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
@@ -95,6 +99,7 @@
       id: error_id,
       text: error_message,
       items: error_items,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
@@ -107,6 +112,7 @@
     autofocus: autofocus,
     class: css_classes,
     data: data,
+    dir: right_to_left ? "rtl" : nil,
     enterkeyhint: checked_enterkeyhint,
     id: id,
     inputmode: inputmode,

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

@@ -2,10 +2,12 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   hint_text ||= ""
+  id ||= nil
   is_radio_label ||= false
   bold ||= false
   heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   is_page_heading ||= false
+  right_to_left ||= false
 
   css_classes = %w[gem-c-label govuk-label]
   css_classes << "govuk-label--s" if bold
@@ -18,14 +20,14 @@
 
 <% if is_page_heading %>
   <%= tag.h1 text, class: "govuk-label-wrapper" do %>
-    <%= tag.label text, for: html_for, class: css_classes %>
+    <%= tag.label text, id: id, for: html_for, class: css_classes, dir: right_to_left ? "rtl" : nil %>
   <% end %>
 <% else %>
-  <%= tag.label text, for: html_for, class: css_classes %>
+  <%= tag.label text, id: id, for: html_for, class: css_classes, dir: right_to_left ? "rtl" : nil %>
 <% end %>
 
 <% if hint_text.present? %>
-  <%= tag.span id: hint_id, class: hint_text_css_classes do %>
+  <%= tag.div id: hint_id, class: hint_text_css_classes, dir: right_to_left ? "rtl" : nil do %>
     <%= hint_text %>
   <% end %>
 <% end %>

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

@@ -14,9 +14,9 @@
     <%= yield :head %>
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body">
-    <script>
+    <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-    </script>
+    <% end -%>
     <%= yield %>
     <%= javascript_include_tag "application" %>
   </body>

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

@@ -59,6 +59,10 @@
         }
       } %>
 
+    <% # Used for Google Analytics 4 debugging. Must be placed before load-analytics script. %>
+    <meta name="govuk:components_gem_version" content="<%= GovukPublishingComponents::VERSION %>" />
+    <%= javascript_include_tag "govuk_publishing_components/load-analytics" %>
+
     <%= csrf_meta_tags %>
 
     <%= stylesheet_link_tag "application", media: "all" %>
@@ -81,9 +85,9 @@
     <%= yield :head %>
   </head>
   <%= tag.body class: body_css_classes do %>
-    <script>
+    <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-    </script>
+    <% end -%>
     <%= render "govuk_publishing_components/components/skip_link", {
       href: "#content"
     } %>

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

@@ -2,7 +2,7 @@
   logo_link ||= "https://www.gov.uk/"
   logo_link_title ||= t("components.layout_super_navigation_header.logo_link_title")
   logo_text = t("components.layout_super_navigation_header.logo_text")
-  navigation_links = t("components.layout_super_navigation_header.navigation_links")
+  navigation_links_columns = t("components.layout_super_navigation_header.navigation_links_columns")
   navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
   navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
   navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
@@ -14,8 +14,14 @@
   show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
   hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
   show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")
+
+  navigation_links_length = 1 # GOVUK Logo makes this start from 1
+  navigation_links_columns.each do | column |
+    navigation_links_length = navigation_links_length + column[:menu_contents].length
+  end
+  navigation_links_length = navigation_links_length + popular_links.length
 %>
-<header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click ga4-event-tracker" data-track-links-only data-ga4-expandable>
+<header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click ga4-event-tracker ga4-link-tracker" data-track-links-only data-ga4-expandable>
   <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
     <div class="gem-c-layout-super-navigation-header__header-logo">
       <a
@@ -28,6 +34,15 @@
         href="<%= logo_link %>"
         id="logo"
         title="<%= logo_link_title %>"
+        data-ga4-link="<%= {
+          "event_name": "navigation",
+          "type": "header menu bar",
+          "external": "false",
+          "text": "GOV.UK",
+          "section": "Logo",
+          "index": 0,
+          "index_total": navigation_links_length
+        }.to_json %>"
       >
         <span class="govuk-header__logotype">
           <!--[if gt IE 8]><!-->
@@ -65,160 +80,118 @@
       <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden">
         <%= navigation_menu_heading %>
       </h2>
-      <button
-        aria-controls="super-navigation-menu"
-        aria-expanded="true"
-        aria-label="<%= hide_navigation_menu_text %>"
-        class="gem-c-layout-super-navigation-header__navigation-top-toggle-button"
-        data-text-for-hide="<%= hide_navigation_menu_text %>"
-        data-text-for-show="<%= show_navigation_menu_text %>"
-        data-toggle-desktop-group="hidden"
-        data-toggle-mobile-group="top"
-        data-tracking-key="menu"
-        hidden
-        id="super-navigation-menu-toggle"
-        type="button"
-        data-ga4-event="<%= {
-          "event_name": "select_content",
-          "type": "header menu bar",
-          "text": "Menu",
-          "index": 1,
-          "index_total": navigation_links.length + 2,
-          "section": "Menu"
-        }.to_json %>"
-      >
-        <span class="gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner">
-          Menu
+
+      <%
+        link = t("components.layout_super_navigation_header.navigation_link")
+        unique_id = SecureRandom.hex(4)
+        show_menu_text = show_navigation_menu_text
+        hide_menu_text = hide_navigation_menu_text
+        tracking_label = link[:label].downcase.gsub(/\s+/, "")
+      %>
+
+      <%= link_to link[:href], {
+        class: "gem-c-layout-super-navigation-header__navigation-item-link",
+        data: {
+          track_action: "#{tracking_label}Link",
+          track_category: "headerClicked",
+          track_label: link[:href],
+          track_dimension: link[:label],
+          track_dimension_index: "29",
+        }
+      } do %>
+        <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
+          <%= link[:label] %>
         </span>
-      </button>
-      <ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__navigation-items">
-        <% navigation_links.each_with_index do | link, index | %>
-          <%
-            has_children = (link[:menu_contents].present? or link[:footer_links].present?)
-            li_classes = %w[gem-c-layout-super-navigation-header__navigation-item]
-            li_classes << "gem-c-layout-super-navigation-header__navigation-item--with-children" if has_children
-            unique_id = SecureRandom.hex(4)
-            show_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => link[:label])
-            hide_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => link[:label])
-            tracking_label = link[:label].downcase.gsub(/\s+/, "")
-          %>
-          <%= tag.li class: li_classes do %>
-            <div class="gem-c-layout-super-navigation-header__navigation-toggle-wrapper govuk-clearfix">
-              <%= link_to link[:href], {
-                class: "gem-c-layout-super-navigation-header__navigation-item-link",
-                data: {
-                  track_action: "#{tracking_label}Link",
-                  track_category: "headerClicked",
-                  track_label: link[:href],
-                  track_dimension: link[:label],
-                  track_dimension_index: "29",
-                }
-              } do %>
-                <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
-                  <%= link[:label] %>
-                </span>
-              <% end %>
-              <% if has_children %>
-                <%= content_tag(:button, {
-                  aria: {
-                    controls: "super-navigation-menu__section-#{unique_id}",
-                    expanded: false,
-                    label: show_menu_text,
-                  },
-                  class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
-                  data: {
-                    text_for_hide: hide_menu_text,
-                    text_for_show: show_menu_text,
-                    toggle_desktop_group: "top",
-                    toggle_mobile_group: "second",
-                    tracking_key: tracking_label,
-                    ga4: {
-                      event_name: "select_content",
-                      type: "header menu bar",
-                      text: link[:label],
-                      index: index + 2,
-                      index_total: navigation_links.length + 2,
-                      section: link[:label]
-                    }
-                  },
-                  hidden: true,
-                  id: "super-navigation-menu__section-#{unique_id}-toggle",
-                  type: "button",
-                }) do %>
-                  <%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner" %>
-                <% end %>
-              <% end %>
-            </div>
-            <% if has_children %>
-              <div
-                hidden
-                class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
-                id="super-navigation-menu__section-<%= unique_id %>"
-              >
-                <div class="govuk-width-container gem-c-layout-super-navigation-header__width-container">
-                  <div class="govuk-grid-row">
-                    <div class="govuk-grid-column-one-third-from-desktop">
-                      <% if link[:description].present? %>
-                        <h3 class="govuk-body-l gem-c-layout-super-navigation-header__menu-description">
-                          <%= link[:description] %>
-                        </h3>
-                      <% end %>
-                    </div>
-                    <div class="govuk-grid-column-two-thirds-from-desktop">
-                      <% if link[:menu_contents].present? %>
-                          <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
-                            <% link[:menu_contents].each do | item | %>
-                              <%
-                                has_description = item[:description].present?
-                                link_classes = %w[govuk-link gem-c-layout-super-navigation-header__navigation-second-item-link]
-                                link_classes << "gem-c-layout-super-navigation-header__navigation-second-item-link--with-description" if has_description
-                              %>
-                              <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
-                                <%= link_to item[:label], item[:href], {
-                                  class: link_classes,
-                                  data: {
-                                    track_action: "#{tracking_label}Link",
-                                    track_category: "headerClicked",
-                                    track_label: item[:href],
-                                    track_dimension: item[:label],
-                                    track_dimension_index: "29",
-                                  }
-                                } %>
-                                <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
-                              </li>
-                            <% end %>
-                          </ul>
-                      <% end %>
-                      <% if link[:footer_links].present? %>
-                        <hr class="gem-c-layout-super-navigation-header__navigation-second-footer-break govuk-section-break govuk-section-break--visible">
-                        <ul class="gem-c-layout-super-navigation-header__navigation-second-footer-list">
-                          <% link[:footer_links].each do | item | %>
-                            <li class="gem-c-layout-super-navigation-header__navigation-second-footer-item">
+      <% end %>
+
+      <%= content_tag(:button, {
+        aria: {
+          controls: "super-navigation-menu-#{unique_id}",
+          expanded: false,
+          label: show_menu_text,
+        },
+        class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button",
+        data: {
+          text_for_hide: hide_menu_text,
+          text_for_show: show_menu_text,
+          toggle_desktop_group: "top",
+          toggle_mobile_group: "top",
+          tracking_key: tracking_label,
+          ga4_event: {
+            event_name: "select_content",
+            type: "header menu bar",
+            text: link[:label],
+            index: 1,
+            index_total: 2,
+            section: link[:label]
+          }
+        },
+        hidden: true,
+        id: "super-navigation-menu-#{unique_id}-toggle",
+        type: "button",
+      }) do %>
+        <%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner" %>
+      <% end %>
+        <%= tag.div class: "gem-c-layout-super-navigation-header__navigation-items" do %>
+            <div
+              id="super-navigation-menu-<%= unique_id %>" hidden
+              class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
+            >
+              <div class="gem-c-layout-super-navigation-header__width-container">
+                <div class="govuk-grid-row">
+
+                  <% navigation_links_columns.each_with_index do | column, column_index | %>
+                    <%
+                      case column[:size]
+                      when 2
+                        width_class = "govuk-grid-column-two-thirds-from-desktop"
+                      when 3
+                        width_class = "govuk-grid-column-full-from-desktop"
+                      else
+                        width_class = "govuk-grid-column-one-third-from-desktop"
+                      end
+                    %>
+
+                    <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.sub(" ", "-") %>">
+                      <h3 class="govuk-heading-m gem-c-layout-super-navigation-header__column-header">
+                        <%= column[:label] %>
+                      </h3>
+                      <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.sub(" ", "-") %>">
+                        <% column[:menu_contents].each_with_index do | item, index | %>
+                            <%
+                              has_description = item[:description].present?
+                              link_classes = %w[govuk-link gem-c-layout-super-navigation-header__navigation-second-item-link]
+                              link_classes << "gem-c-layout-super-navigation-header__navigation-second-item-link--with-description" if has_description
+                              tracking_label = column[:label].downcase.gsub(/\s+/, "")
+                            %>
+                            <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
                               <%= link_to item[:label], item[:href], {
-                                class: [
-                                  "govuk-link",
-                                  "gem-c-layout-super-navigation-header__navigation-second-footer-link",
-                                ],
+                                class: link_classes,
                                 data: {
                                   track_action: "#{tracking_label}Link",
                                   track_category: "headerClicked",
                                   track_label: item[:href],
                                   track_dimension: item[:label],
                                   track_dimension_index: "29",
+                                  ga4_link: {
+                                      "event_name": "navigation",
+                                      "type": "header menu bar",
+                                      "index": "1.#{column_index + 1}.#{index + 1}",
+                                      "index_total": navigation_links_length,
+                                      "section": column[:label],
+                                    }
                                 }
                               } %>
+                              <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
                             </li>
-                          <% end %>
-                        </ul>
-                      <% end %>
+                        <% end %>
+                      </ul>
                     </div>
-                  </div>
+                  <% end %>
                 </div>
               </div>
-            <% end %>
-          <% end %>
+            </div>
         <% end %>
-      </ul>
 
       <button
         aria-controls="super-search-menu"
@@ -237,8 +210,8 @@
           "event_name": "select_content",
           "type": "header menu bar",
           "text": "Search",
-          "index": navigation_links.length + 2,
-          "index_total": navigation_links.length + 2,
+          "index": 2,
+          "index_total": 2,
           "section": "Search"
         }.to_json %>"
       >
@@ -265,7 +238,7 @@
         </h3>
         <div class="gem-c-layout-super-navigation-header__search-item">
           <a class="gem-c-layout-super-navigation-header__search-item-link" href="/search">
-            <span class="gem-c-layout-super-navigation-header__search-item-link-text">
+            <span class="govuk-visually-hidden">
               <%= search_text %>
             </span>
             <svg
@@ -328,7 +301,7 @@
             <div class="govuk-grid-column-full">
               <h3 class="govuk-heading-m"><%= popular_links_heading %></h3>
               <ul class="govuk-list">
-                <% popular_links.each do | popular_link | %>
+                <% popular_links.each_with_index do | popular_link, index | %>
                   <li class="gem-c-layout-super-navigation-header__popular-item">
                     <%= link_to popular_link[:label], popular_link[:href], {
                       class: [
@@ -341,6 +314,13 @@
                         track_label: popular_link[:href],
                         track_dimension: popular_link[:label],
                         track_dimension_index: "29",
+                        ga4_link: {
+                          "event_name": "navigation",
+                          "type": "header menu bar",
+                          "index": "2.2.#{index + 1}",
+                          "index_total": navigation_links_length,
+                          "section": popular_links_heading,
+                        }
                       }
                     } %>
                   </li>

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

@@ -1,10 +1,15 @@
-<% related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns) %>
-<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
+<%
+  related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  ga4_tracking ||= false
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
+%>
 
 <% if related_nav_helper.related_navigation? %>
   <% random = SecureRandom.hex(4) %>
-  <div class="gem-c-related-navigation">
-
+  <%= tag.div(class: "gem-c-related-navigation", data: data) do %>
     <% if local_assigns[:context] != :footer %>
       <h2 id="related-nav-related_items-<%= random %>"
           class="gem-c-related-navigation__main-heading"
@@ -33,7 +38,8 @@
         section_title: section_title,
         links: links,
         section_index: section_index,
-        random: random %>
+        random: random,
+        ga4_tracking: ga4_tracking %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

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

@@ -36,7 +36,7 @@
             </svg><%= sl_helper.email_signup_link_text %>
           <% end %>
           <%= link_to email_link_text, sl_helper.email_signup_link, {
-            class: "govuk-link govuk-link--no-underline gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
             data: sl_helper.email_signup_link_data_attributes,
             lang: email_signup_link_text_locale
           } %>

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

@@ -17,6 +17,8 @@
   hint_id = "hint-#{SecureRandom.hex(4)}"
   has_error ||= error_message || error_items.any?
   error_id = "error-#{SecureRandom.hex(4)}"
+  right_to_left ||= false
+  right_to_left_help = right_to_left_help.nil? ? right_to_left : right_to_left_help
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
@@ -39,13 +41,17 @@
 
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
-    <%= render "govuk_publishing_components/components/label", { html_for: id }.merge(label.symbolize_keys) %>
+    <%= render "govuk_publishing_components/components/label", {
+      html_for: id,
+      right_to_left: right_to_left_help
+    }.merge(label.symbolize_keys) %>
   <% end %>
 
   <% if hint %>
     <%= render "govuk_publishing_components/components/hint", {
       id: hint_id,
-      text: hint
+      text: hint,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
@@ -54,11 +60,13 @@
       id: error_id,
       text: error_message,
       items: error_items,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
   <%= tag.textarea name: name,
     class: css_classes,
+    dir: right_to_left ? "rtl" : nil,
     id: id,
     rows: rows,
     maxlength: maxlength,

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

@@ -69,3 +69,46 @@ examples:
           ordered_related_items:
             - title: "Find an apprenticeship"
               base_path: "/apply-apprenticeship"
+  with_ga4_tracking:
+    description: Adds Google Analytics 4 tracking to the Related Navigation component, if it is visible.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          topics:
+          - title: Apprenticeships, 14 to 19 education and training for work
+            base_path: /browse/education/find-course
+            document_type: topic
+          - title: Finding a job
+            base_path: /browse/working/finding-job
+            document_type: topic
+          - title: Apprenticeships
+            base_path: /topic/further-education-skills/apprenticeships
+            document_type: topic
+          topical_events:
+          - title: UK-China High-Level People to People Dialogue 2017
+            base_path: /government/topical-events/uk-china-high-level-people-to-people-dialogue-2017
+            document_type: topical_event
+          related:
+          - title: Pest Control
+            base_path: /pest-control
+            document_type: contact
+          related_statistical_data_sets:
+          - title: International road fuel prices
+            base_path: /government/statistical-data-sets/comparisons-of-industrial-and-domestic-energy-prices-monthly-figures
+            document_type: statistical_data_set
+          - title: Weekly road fuel prices
+            base_path: /government/statistical-data-sets/oil-and-petroleum-products-weekly-statistics
+            document_type: statistical_data_set
+          world_locations:
+          - title: South Sudan
+            base_path: /world/south-sudan/news
+          - title: USA
+            base_path: /world/usa/news
+        details:
+          external_related_links:
+          - url: "http://media.slc.co.uk/sfe/1718/ft/sfe_terms_and_conditions_guide_1718_d.pdf"
+            title: "Student loans: terms and conditions 2017 to 2018 (PDF, 136KB)"
+          - title: The Student Room repaying your student loan
+            url: https://www.thestudentroom.co.uk/content.php?r=5967-Repaying-your-student-loan