govuk_publishing_components 67.0.1 → 68.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss

@@ -1,6 +1,6 @@
 .gem-c-translation-nav {
   margin-bottom: govuk-spacing(6);
-  border-bottom: 1px solid $govuk-border-colour;
+  border-bottom: 1px solid govuk-functional-colour(border);
   @include govuk-text-colour;
   @include govuk-font(16);
 }
@@ -17,14 +17,14 @@
   padding-left: govuk-spacing(2);
   padding-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
-  border-right: 1px solid $govuk-border-colour;
+  border-right: 1px solid govuk-functional-colour(border);
   height: 16px;
 
   .direction-rtl & {
     direction: rtl;
     float: right;
     text-align: start;
-    border-left: 1px solid $govuk-border-colour;
+    border-left: 1px solid govuk-functional-colour(border);
     border-right: 0;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss

@@ -18,16 +18,16 @@
 }
 
 .gem-c-warning-text__text--highlight {
-  color: $govuk-error-colour;
+  color: govuk-functional-colour(error);
 }
 
 @include govuk-media-query($media-type: print) {
   .gem-c-warning-text * {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
   }
 
   .govuk-warning-text__icon {
     background: none;
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
   }
 }

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

@@ -39,14 +39,14 @@
         width: $thumbnail-width;
         height: 140px;
         background: govuk-colour("white");
-        box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4), 0 0 0 5px color.adjust(govuk-colour("black"), $alpha: -0.9);
+        box-shadow: 0 2px 2px govuk-colour("black", $variant: "tint-50"), 0 0 0 5px govuk-functional-colour("border");
 
         @include high-contrast-outline;
       }
 
       svg {
-        fill: govuk-colour("mid-grey");
-        stroke: govuk-colour("mid-grey");
+        fill: govuk-colour("black", $variant: "tint-50");
+        stroke: govuk-colour("black", $variant: "tint-50");
       }
 
       @include govuk-media-query($media-type: print) {
@@ -127,7 +127,7 @@
         a,
         a:link,
         a:link:visited {
-          color: $govuk-print-text-colour !important;
+          color: govuk-functional-colour(print-text) !important;
 
           &::after {
             display: block;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss

@@ -10,13 +10,13 @@
 .gem-c-govspeak {
   .call-to-action {
     margin: 0 0 govuk-spacing(4) 0;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
     padding: govuk-spacing(6);
     padding-bottom: govuk-spacing(2);
 
     @include govuk-media-query($media-type: print) {
       background: none;
-      border: 1pt solid $govuk-border-colour;
+      border: 1pt solid govuk-functional-colour(border);
       padding: govuk-spacing(3);
       margin: govuk-spacing(3) 0;
     }

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

@@ -12,7 +12,7 @@
   // .address is used by the `$A` markdown pattern
   .address,
   .contact {
-    border-left: 1px solid govuk-colour("mid-grey");
+    border-left: 1px solid govuk-functional-colour("border");
     padding-left: govuk-spacing(3);
     margin: 0 0 govuk-spacing(6) 0;
   }

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

@@ -8,7 +8,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .example {
-    border-left: 10px solid govuk-colour("mid-grey");
+    border-left: 10px solid govuk-functional-colour("border");
     padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
     margin: 0 0 govuk-spacing(4) 0;
 

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

@@ -14,7 +14,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .footnotes {
-    border-top: 1px solid govuk-colour("mid-grey");
+    border-top: 1px solid govuk-functional-colour("border");
     margin: 0 0 govuk-spacing(4) 0;
     padding-top: govuk-spacing(4);
     overflow-wrap: break-word;
@@ -28,12 +28,12 @@
     }
 
     li:target {
-      background: govuk-colour("light-grey");
-      border-bottom: solid 3px $govuk-border-colour;
+      background: govuk-colour("black", $variant: "tint-95");
+      border-bottom: solid 3px govuk-functional-colour(border);
     }
 
     @include govuk-media-query($media-type: print) {
-      border-top: 1px solid $govuk-text-colour;
+      border-top: 1px solid govuk-functional-colour(text);
 
       a[role="doc-backlink"] {
         display: none;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -48,7 +48,7 @@ $highlight-answer-color: govuk-colour("white");
 
       &,
       & * {
-        color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+        color: govuk-functional-colour(print-text) !important; // stylelint-disable-line declaration-no-important
       }
     }
   }

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

@@ -32,7 +32,7 @@
 
     figcaption p {
       margin: govuk-spacing(2) 0 0 0;
-      color: $govuk-secondary-text-colour;
+      color: govuk-functional-colour(secondary-text);
       @include govuk-font(19);
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss

@@ -9,7 +9,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .info-notice {
-    border-left: 10px solid govuk-colour("mid-grey");
+    border-left: 10px solid govuk-functional-colour("border");
     padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
     margin: 0 0 govuk-spacing(4) 0;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss

@@ -35,8 +35,8 @@
   position: relative;
   padding: govuk-spacing(6);
   padding-bottom: govuk-spacing(8);
-  background: govuk-colour("light-grey");
-  border: solid 2px $govuk-border-colour;
+  background: govuk-colour("black", $variant: "tint-95");
+  border: solid 2px govuk-functional-colour(border);
 }
 
 .gem-c-govspeak__youtube-placeholder-text {

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

@@ -3,7 +3,7 @@
 .gem-c-govspeak {
   .place {
     margin: 0 0 govuk-spacing(4) 0;
-    border-bottom: solid 1px govuk-colour("mid-grey");
+    border-bottom: solid 1px govuk-functional-colour("border");
     padding-bottom: 1.5em;
 
     .address {

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

@@ -25,7 +25,7 @@
     td {
       vertical-align: top;
       padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
-      border-bottom: 1px solid govuk-colour("mid-grey");
+      border-bottom: 1px solid govuk-functional-colour("border");
 
       &:last-child {
         padding: govuk-spacing(2) 0 govuk-spacing(2) 0;
@@ -34,7 +34,7 @@
 
     th {
       text-align: left;
-      color: $govuk-text-colour;
+      color: govuk-functional-colour(text);
       @include govuk-font($size: 19, $weight: bold);
     }
 

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

@@ -94,10 +94,10 @@
   }
 
   @include govuk-media-query($media-type: print) {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
 
     a:link {
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -34,7 +34,7 @@
 
       &::before {
         background-color: govuk-colour("white");
-        color: $govuk-print-text-colour;
+        color: govuk-functional-colour(print-text);
       }
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_colours.scss

@@ -1,14 +1,12 @@
-$gem-secondary-button-colour: #00823b;
-$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
+$gem-secondary-button-colour: govuk-colour("green", $variant: "shade-25");
+$gem-secondary-button-hover-colour: govuk-colour("green", $variant: "shade-50");
 $gem-secondary-button-background-colour: govuk-colour("white");
-$gem-secondary-button-hover-background-colour: govuk-colour("light-grey");
+$gem-secondary-button-hover-background-colour: govuk-colour("black", $variant: "tint-95");
 
-$gem-quiet-button-colour: govuk-colour("dark-grey");
-$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
+$gem-quiet-button-colour: govuk-functional-colour("secondary-text");
+$gem-quiet-button-hover-colour: govuk-colour("black");
+$gem-quiet-button-hover-background-colour: govuk-colour("black", $variant: "tint-80");
 
-// Brand refresh
-$govuk-blue-tint-95: govuk-tint($govuk-brand-colour, 95%);
-$govuk-blue-tint-80: govuk-tint(govuk-colour("blue"), 80%);
-$govuk-blue-tint-50: govuk-tint(govuk-colour("blue"), 50%);
-
-$govuk-rebrand-template-background-colour: $govuk-blue-tint-95;
+$govuk-blue-tint-95: govuk-colour("blue", $variant: "tint-95");
+$govuk-blue-tint-80: govuk-colour("blue", $variant: "tint-80");
+$govuk-blue-tint-50: govuk-colour("blue", $variant: "tint-50");

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -63,7 +63,7 @@
     }
 
     @include govuk-media-query($media-type: print) {
-      color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+      color: govuk-functional-colour(print-text) !important; // stylelint-disable-line declaration-no-important
     }
   }
 
@@ -115,12 +115,12 @@
   hr {
     margin-top: govuk-spacing(6) - 1px;
     margin-bottom: govuk-spacing(6);
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid govuk-functional-colour(border);
   }
 
   code {
     padding: 0 5px;
     color: #d13118;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/lib/_link.scss

@@ -2,16 +2,16 @@
   @include govuk-font(19);
 
   &:link {
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
   }
 
   &:visited,
   &:hover,
   &:active {
-    color: darken($govuk-error-colour, 5%);
+    color: govuk-colour("red", $variant: "shade-25");
   }
 
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss

@@ -57,7 +57,7 @@
     &,
     &:link,
     &:visited {
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
 
     &::after {
@@ -65,7 +65,7 @@
       margin: 1mm auto;
       font-size: 12pt;
       font-weight: normal;
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/settings/_custom-properties.scss

@@ -0,0 +1,9 @@
+// Default the `govuk-output-custom-properties` flag to false to prevent custom properties
+// being output multiple times.
+// Entry points such as `all-components.scss` and `specific-components` override this
+// value when they need to include custom properties (for example, the component guide
+// or application stylesheets where there is only a single stylesheet).
+// Direct imports of base (e.g. secondary stylesheets) keep the default value of `false`,
+// rather than using the GOV.UK Frontend default of `true`.
+
+$govuk-output-custom-properties: false !default;

data/app/assets/stylesheets/govuk_publishing_components/settings/_index.scss

@@ -1,4 +1,3 @@
 @import "app-font-url";
 @import "app-image-url";
-@import "colours";
-@import "typography";
+@import "custom-properties";

data/app/assets/stylesheets/govuk_publishing_components/specific-components.scss

@@ -1,3 +1,5 @@
+$govuk-output-custom-properties: true;
+
 @import "base";
 
 @import "govuk/core/index";

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

@@ -4,7 +4,7 @@
   service_navigation_items ||= []
 %>
 
-<header class="gem-c-cross-service-header gem-c-rebranded-cross-service-header" data-module="cross-service-header">
+<div class="gem-c-cross-service-header gem-c-rebranded-cross-service-header" data-module="cross-service-header">
   <%= render "govuk_publishing_components/components/cross_service_header/one_login_header", {
     one_login_navigation_items: one_login_navigation_items,
   } %>
@@ -12,4 +12,4 @@
     service_name: service_name,
     navigation_items: service_navigation_items,
   } %>
-</header>
+</div>

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

@@ -30,6 +30,6 @@
         <% end %>
     <% end %>
     </span>
-    <p class="gem-c-glance-metric__context govuk-body-xs"><%= context %></p>
+    <p class="gem-c-glance-metric__context govuk-body-s"><%= context %></p>
   <% end %>
 <% end %>

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

@@ -8,7 +8,7 @@
 %>
 
 <!DOCTYPE html>
-<html lang="en" class="govuk-template govuk-template--rebranded">
+<html lang="en" class="govuk-template">
   <head>
     <meta charset="utf-8">
     <title><%= browser_title %> - GOV.UK <%= product_name %></title>

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

@@ -32,7 +32,7 @@
   body_css_classes << body_classes if body_classes
 -%>
 <!DOCTYPE html>
-<html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>">
+<html class="govuk-template" lang="<%= html_lang %>">
   <head>
     <meta charset="utf-8">
     <%= tag.title title, lang: title_lang %>
@@ -81,27 +81,29 @@
       <% end %>
     <% end %>
     <% unless omit_header %>
-      <% if show_cross_service_header %>
-        <%= render "govuk_publishing_components/components/cross_service_header", {
-          one_login_navigation_items: one_login_navigation_items,
-          service_navigation_items: service_navigation_items,
-          service_name: service_name,
-        } %>
-      <% else %>
-        <% I18n.with_locale(:en) do %>
-          <%= render "govuk_publishing_components/components/layout_super_navigation_header", {
-            homepage:,
-            logo_link:,
-            phase_banner:,
+      <%= tag.header do %>
+        <% if show_cross_service_header %>
+          <%= render "govuk_publishing_components/components/cross_service_header", {
+            one_login_navigation_items: one_login_navigation_items,
+            service_navigation_items: service_navigation_items,
+            service_name: service_name,
           } %>
+        <% else %>
+          <% I18n.with_locale(:en) do %>
+            <%= render "govuk_publishing_components/components/layout_super_navigation_header", {
+              homepage:,
+              logo_link:,
+              phase_banner:,
+            } %>
+          <% end %>
         <% end %>
-      <% end %>
-    <% end %>
 
-    <%= raw(emergency_banner) %>
+        <%= raw(emergency_banner) %>
 
-    <% if global_banner.present? %>
-      <%= raw(global_banner) %>
+        <% if global_banner.present? %>
+          <%= raw(global_banner) %>
+        <% end %>
+      <% end %>
     <% end %>
 
     <% if show_account_layout %>

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

@@ -6,50 +6,28 @@
   navigation_items ||= []
   product_name ||= nil
   remove_bottom_border ||= false
-  deprecated_navigation ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
   logo_link ||= "/"
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-header govuk-header")
   component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border || navigation_items
-  component_helper.add_data_attribute({ module: "govuk-header" })
 %>
 
 <%= tag.header(**component_helper.all_attributes) do %>
-  <% if !deprecated_navigation %>
-    <div class="govuk-header__container <%= width_class %> gem-c-layout-header__logo">
-      <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-        environment:,
-        logo_link:,
-        product_name:,
-        signout_link:,
-      } %>
-    </div>
-    <% if navigation_items.any? %>
-      <%= render "govuk_publishing_components/components/service_navigation", {
-        navigation_items:,
-        navigation_aria_label:,
-        full_width:,
-      } %>
-    <% end %>
-  <% else %>
-    <div class="govuk-header__container <%= width_class %>">
-      <div class="govuk-grid-row">
-        <div class="gem-c-layout-header__logo govuk-grid-column-one-half">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-            environment:,
-            logo_link:,
-            product_name:,
-            deprecated_navigation: true,
-          } %>
-        </div>
-        <% if navigation_items.any? %>
-          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
-            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
-          </div>
-        <% end %>
-      </div>
-    </div>
+  <div class="govuk-header__container <%= width_class %> gem-c-layout-header__logo">
+    <%= render "govuk_publishing_components/components/layout_header/header_logo", {
+      environment:,
+      logo_link:,
+      product_name:,
+      signout_link:,
+    } %>
+  </div>
+  <% if navigation_items.any? %>
+    <%= render "govuk_publishing_components/components/service_navigation", {
+      navigation_items:,
+      navigation_aria_label:,
+      full_width:,
+    } %>
   <% end %>
 <% end %>

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

@@ -30,7 +30,7 @@
   header_logo_classes = %w(gem-c-layout-super-navigation-header__header-logo)
   header_logo_classes << "gem-c-layout-super-navigation-header__header-logo--homepage" if homepage
 
-  header_link_classes = %w(govuk-header__link govuk-header__link--homepage)
+  header_link_classes = %w(govuk-header__homepage-link)
 
   dropdown_menu_classes = %w(gem-c-layout-super-navigation-header__navigation-dropdown-menu)
 
@@ -38,7 +38,7 @@
   component_helper.add_class("gem-c-layout-super-navigation-header")
   component_helper.add_data_attribute({ module: "ga4-event-tracker ga4-link-tracker", ga4_expandable: "" })
 %>
-<%= tag.header(**component_helper.all_attributes) do %>
+<%= tag.div(**component_helper.all_attributes) do %>
 <div class="gem-c-layout-super-navigation-header__nav-wrapper">
   <div class="gem-c-layout-super-navigation-header__container govuk-width-container">
     <nav

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

@@ -8,7 +8,7 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-tag gem-c-tag")
 
-  colours = %w[grey green turquoise blue light-blue purple pink red orange yellow]
+  colours = %w[grey green teal blue purple magenta red orange yellow]
   colour ||= nil
   component_helper.add_class("govuk-tag--#{colour}") if colours.include?(colour)
 %>

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_external.html.erb

@@ -1,3 +1,3 @@
-<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--external" version="1.1" viewBox="0 0 99 140" aria-hidden="true">
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--external" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M21 59H12V68H21V59ZM30 86V77H69V86H30ZM87 104H30V95H87V104ZM78 122H30V113H78V122ZM21 86H12V77H21V86ZM21 122H12V113H21V122ZM21 104H12V95H21V104ZM87 68H30V59H87V68ZM87 39V12H12V39H87ZM77.9699 29.2919H77.9202L75.2756 17H71.2279L68.5088 29.2919H68.4591L66.1249 17H62.2014L66.1746 34.8047H70.5699L73.2145 22.0409L75.9088 34.8047H80.3289L84.3021 17H80.391L77.9699 29.2919ZM53.8195 29.2919H53.8692L56.2903 17H60.2014L56.2282 34.8047H51.8081L49.1138 22.0409L46.4692 34.8047H42.0739L38.1007 17H42.0242L44.3584 29.2919H44.4081L47.1272 17H51.1749L53.8195 29.2919ZM29.7684 29.2919H29.7188L27.0742 17H23.0265L20.3074 29.2919H20.2577L17.9235 17H14L17.9732 34.8047H22.3685L25.0131 22.0409L27.7074 34.8047H32.1275L36.1007 17H32.1896L29.7684 29.2919Z" />
 </svg>

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_pdf.html.erb

@@ -1,3 +1,3 @@
-<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--pdf" version="1.1" viewBox="0 0 99 140">
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--pdf" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
   <path d="M12,59h9v9h-9v-9ZM30,77v9h39v-9H30ZM30,104h57v-9H30v9ZM30,122h48v-9H30v9ZM12,86h9v-9h-9v9ZM12,122h9v-9h-9v9ZM12,104h9v-9h-9v9ZM30,68h57v-9H30v9ZM35.2,21c-.3-.2-.6-.4-1-.5s-.8-.2-1.3-.2h-2.6v5.5h2.6c.5,0,1,0,1.3-.2s.7-.3,1-.5c.3-.2.5-.5.7-.8s.2-.7.2-1.1h0c0-.5,0-.9-.2-1.2-.2-.3-.4-.6-.7-.8h0ZM52.4,21.9c-.4-.5-1-.9-1.6-1.1-.7-.3-1.5-.4-2.4-.4h-2.7v11.5h2.7c.9,0,1.7-.1,2.4-.4s1.2-.7,1.6-1.1c.4-.5.7-1.1.9-1.7.2-.7.3-1.4.3-2.1v-.7c0-.8,0-1.5-.3-2.1-.2-.6-.5-1.2-.9-1.7h0ZM87,12v27H12V12h75ZM39.8,23c0-.9-.1-1.6-.4-2.4-.3-.7-.7-1.4-1.2-1.9-.5-.5-1.2-1-1.9-1.2-.8-.3-1.6-.5-2.5-.5h-7.2v17.9h3.6v-6h3.2c.9,0,1.8-.1,2.6-.5.8-.3,1.4-.7,2-1.2.5-.5,1-1.2,1.3-1.9.3-.7.5-1.5.5-2.4h0ZM57.4,26c0-1.3-.2-2.6-.5-3.7s-.9-2-1.6-2.8c-.7-.8-1.6-1.4-2.7-1.8-1.1-.4-2.3-.6-3.8-.6h-6.6v17.9h6.6c1.5,0,2.7-.2,3.8-.6,1.1-.4,2-1,2.7-1.8.7-.8,1.3-1.7,1.6-2.8.4-1.1.5-2.3.5-3.7h0ZM72.4,17.1h-12.1v17.9h3.6v-7.5h7.8v-3.3h-7.8v-3.8h8.4s0-3.3,0-3.3Z" />
 </svg>

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

@@ -25,7 +25,6 @@ accessibility_criteria:
 govuk_frontend_components:
   - service-navigation
 accessibility_excluded_rules:
-  - landmark-banner-is-top-level
   - duplicate-id-aria
   - landmark-no-duplicate-banner
   - landmark-unique

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

@@ -12,6 +12,7 @@ accessibility_criteria: |
     * have a `lang` attribute
     * contain a [skip link](/component-guide/skip_link)
     * have a sensible page `<title>`
+    * contain a `<header>` element
 examples:
   default:
     data:
@@ -47,11 +48,11 @@ examples:
         href: "item-3"
         show_only_in_collapsed_menu: true
   with_global_banner:
-    description: This allows the HTML for the global banner to be added to the page. This is only the slot for the global banner - the markup for the banner needs to be passed in.
+    description: This allows the HTML for the global banner to be added to the page within the header element. This is only the slot for the global banner - the markup for the banner needs to be passed in.
     data:
       global_banner: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global banner slot</div>
   with_emergency_banner:
-    description: This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
+    description: This allows the HTML for the emergency banner to be added to the page within the header element. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
     data:
       emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
   with_phase_banner:
@@ -61,13 +62,33 @@ examples:
         phase: "beta"
         message: "This is a custom test message for the public layout phase banner."
   with_all_banners:
-    description: The phase banner, global banner and emergency banner should be usable together.
+    description: The phase banner, global banner and emergency banner should be usable together within the header element.
     data:
       phase_banner:
           phase: "beta"
           message: "This is the phase banner banner"
       emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
       global_banner: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global banner slot</div>
+  with_cross_service_header:
+    description: Passes the navigation through to the [cross service header](/component-guide/cross_service_header/).
+    data:
+      show_cross_service_header: true
+      service_name: "My Service Name"
+      one_login_navigation_items:
+        one_login_home:
+          href: "#"
+        one_login_sign_out:
+          href: "#"
+        navigation_items: []
+      service_navigation_items:
+        - text: Navigation item 1
+          href: "item-1"
+          active: true
+        - text: Navigation item 2
+          href: "item-2"
+        - text: Hidden on desktop
+          href: "item-3"
+          show_only_in_collapsed_menu: true
   with_account_layout_enabled:
     description: Adds account layout wrapper around the content passed in to the component
     data:

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

@@ -58,21 +58,6 @@ examples:
         href: "item-4"
       - text: Logout
         href: "item-5"
-  with_deprecated_navigation:
-    description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
-    data:
-      environment: production
-      deprecated_navigation: true
-      navigation_items:
-      - text: Mainstream browse
-        href: "item-1"
-        active: true
-      - text: Step by steps
-        href: "item-2"
-      - text: Jonathan Doe
-        href: "item-3"
-      - text: Logout
-        href: "item-4"
   with_product_name_and_navigation:
     data:
       product_name: Component Guide 999.9.9