govuk_publishing_components 35.22.0 → 36.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss

@@ -0,0 +1,430 @@
+@import "govuk_publishing_components/individual_component_support";
+
+// start mixins and variables
+$govuk-header-link-underline-thickness: 3px;
+
+@mixin toggle-button-focus($default-text-colour) {
+  color: $default-text-colour;
+  // apply focus style on :focus for browsers which support :focus but not :focus-visible
+  &:focus {
+    @include govuk-focused-text;
+
+    // overwrite previous styles for browsers which support :focus-visible
+    &:not(:focus-visible) {
+      outline: none;
+      color: $default-text-colour;
+      background: none;
+      box-shadow: none;
+    }
+
+    // apply focus style on :focus-visible for browsers which support :focus-visible
+    &-visible {
+      @include govuk-focused-text;
+    }
+  }
+}
+
+@mixin nav-style($nav-open-class) {
+  display: block;
+  // if JS is unavailable, the nav links are expanded and the toggle button is hidden
+  .gem-c-cross-service-header.js-enabled & {
+    display: none;
+
+    &#{$nav-open-class} {
+      display: block;
+    }
+
+    @include govuk-media-query($from: tablet) {
+      display: block;
+    }
+  }
+
+  @include govuk-media-query($until: tablet) {
+    width: 100%;
+  }
+}
+// end mixins and variables
+
+.gem-c-cross-service-header__button {
+  display: none;
+
+  .gem-c-cross-service-header.js-enabled & {
+    display: inline;
+    display: flex;
+
+    @include govuk-media-query($from: tablet) {
+      display: none;
+    }
+  }
+
+  @include govuk-font($size: 19, $weight: bold);
+  position: relative;
+  align-items: center;
+  cursor: pointer;
+  min-width: 240px;
+  min-width: max-content;
+  border: 0;
+  margin: 0;
+  padding: govuk-spacing(2) 0 govuk-spacing(1) govuk-spacing(4);
+  background: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0.15rem;
+    top: 50%;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 0.6rem;
+    height: 0.6rem;
+    transform: translateY(-65%) rotate(135deg);
+    border-top: 0.15rem solid;
+    border-right: 0.15rem solid;
+  }
+
+  &.gem-c-cross-service-header__button--open {
+    &::before {
+      transform: translateY(-15%) rotate(-45deg);
+    }
+  }
+
+  &.gem-c-cross-service-header__button--service-header {
+    @include toggle-button-focus($govuk-link-colour);
+  }
+
+  &.gem-c-cross-service-header__button--one-login {
+    @include toggle-button-focus(govuk-colour("white"));
+  }
+}
+
+.gem-c-cross-service-header__button-icon {
+  margin-left: govuk-spacing(2);
+  font-size: 0;
+
+  &.gem-c-cross-service-header__button-icon--focus {
+    display: none;
+  }
+
+  // apply focus style on :focus for browsers which support :focus but not :focus-visible
+  .gem-c-cross-service-header__button:focus & {
+    &.gem-c-cross-service-header__button-icon--default {
+      display: none;
+    }
+
+    &.gem-c-cross-service-header__button-icon--focus {
+      display: inline;
+    }
+  }
+
+  // overwrite previous styles for browsers which support :focus-visible
+  .gem-c-cross-service-header__button:focus:not(:focus-visible) & {
+    &.gem-c-cross-service-header__button-icon--default {
+      display: inline;
+    }
+
+    &.gem-c-cross-service-header__button-icon--focus {
+      display: none;
+    }
+  }
+
+  // apply focus style on :focus-visible for browsers which support :focus-visible
+  .gem-c-cross-service-header__button:focus-visible & {
+    &.gem-c-cross-service-header__button-icon--default {
+      display: none;
+    }
+
+    &.gem-c-cross-service-header__button-icon--focus {
+      display: inline;
+    }
+  }
+}
+
+// start One Login header styles
+.gem-c-one-login-header {
+  @include govuk-font($size: 19);
+  color: govuk-colour("white");
+  background: govuk-colour("black");
+  border-bottom: govuk-spacing(2) solid $govuk-link-colour;
+  position: relative;
+}
+
+.gem-c-one-login-header__container {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.gem-c-one-login-header__logo {
+  min-width: max-content;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2);
+  max-width: 33.33%;
+  @include govuk-media-query($from: desktop) {
+    width: 33.33%;
+    padding-right: govuk-spacing(3);
+  }
+}
+
+.gem-c-one-login-header__link,
+.gem-c-one-login-header__nav__link {
+  &:link,
+  &:visited {
+    @include govuk-typography-common;
+    @include govuk-link-style-inverse;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-thickness: $govuk-header-link-underline-thickness;
+
+      @if $govuk-link-underline-offset {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+  }
+}
+
+.gem-c-one-login-header__logotype {
+  display: inline-block;
+
+  // Add a gap after the logo in case it's followed by a product name. This
+  // gets removed later if the logotype is a :last-child.
+  margin-right: govuk-spacing(1);
+
+  // Prevent readability backplate from obscuring underline in Windows High
+  // Contrast Mode
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    color: linktext;
+  }
+
+  // Remove the gap after the logo if there's no product name to keep hover
+  // and focus states neat
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.gem-c-one-login-header__logotype-crown {
+  position: relative;
+  top: -1px;
+  margin-right: 1px;
+  fill: currentcolor;
+  vertical-align: top;
+}
+
+.gem-c-one-login-header__logotype-crown-fallback-image {
+  width: 36px;
+  height: 32px;
+  border: 0;
+  vertical-align: bottom;
+}
+
+.gem-c-one-login-header__link--homepage {
+  // Font size needs to be set on the link so that the box sizing is correct
+  // in Firefox
+  @include govuk-font($size: false, $weight: bold);
+
+  display: inline-block;
+  margin-right: govuk-spacing(2);
+  font-size: 30px; // We don't have a mixin that produces 30px font size
+  line-height: 1;
+
+  @include govuk-media-query($from: tablet) {
+    display: inline;
+
+    &:focus {
+      // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
+      // This is to stop the logo getting cut off by the box shadow when focused on above a product name
+      box-shadow: 0 0 $govuk-focus-colour;
+    }
+  }
+
+  &:link,
+  &:visited {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:active {
+    // Negate the added border
+    margin-bottom: $govuk-header-link-underline-thickness * -1;
+    // Omitting colour will use default value of currentColor – if we
+    // specified currentColor explicitly IE8 would ignore this rule.
+    border-bottom: $govuk-header-link-underline-thickness solid;
+  }
+
+  // Remove any borders that show when focused and hovered.
+  &:focus {
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+}
+
+.gem-c-one-login-header__nav {
+  @include nav-style(".gem-c-one-login-header__nav--open");
+  @include govuk-media-query($from: tablet) {
+    max-width: 66%;
+  }
+}
+
+.gem-c-one-login-header__nav__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(2) 0;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.gem-c-one-login-header__nav__list-item {
+  display: inline-block;
+  padding: govuk-spacing(2) 0;
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
+    border-left: 1px solid $govuk-border-colour;
+    align-self: stretch;
+
+    &:not(:last-child) {
+      margin-right: govuk-spacing(4);
+    }
+  }
+
+  @include govuk-media-query($until: tablet) {
+    width: 100%;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+  }
+}
+
+.gem-c-one-login-header__nav__link {
+  font-weight: bold;
+
+  &.gem-c-one-login-header__nav__link--one-login {
+    @include govuk-media-query($from: tablet) {
+      display: flex;
+      justify-content: center;
+
+      // stylelint-disable max-nesting-depth
+      &:focus {
+        .gem-c-cross-service-header__button-icon {
+          display: none;
+        }
+
+        .gem-c-cross-service-header__button-icon--focus {
+          display: inline;
+        }
+      }
+    }
+
+    @include govuk-media-query($until: tablet) {
+      .gem-c-cross-service-header__button-icon {
+        display: none;
+      }
+    }
+  }
+}
+// end One Login header styles
+
+// start service navigation styles
+.gem-c-service-header {
+  background-color: govuk-colour("light-grey");
+  border-bottom: 1px solid govuk-colour("mid-grey");
+}
+
+.gem-c-service-header__container {
+  padding-top: govuk-spacing(1);
+
+  @include govuk-media-query ($until: tablet) {
+    margin-bottom: govuk-spacing(1);
+  }
+
+  @include govuk-media-query ($from: tablet) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.gem-c-service-header__heading {
+  @include govuk-font($size: 24, $weight: bold);
+  color: $govuk-text-colour;
+  padding: govuk-spacing(3) 0;
+  margin: 0;
+  flex-grow: 1;
+
+  @include govuk-media-query($until: tablet) {
+    padding: govuk-spacing(1) 0;
+  }
+}
+
+.gem-c-service-header__nav {
+  @include nav-style(".gem-c-service-header__nav--open");
+}
+
+.gem-c-service-header__nav-list {
+  @include govuk-font($size: 19, $weight: bold);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @include govuk-media-query($from: tablet) {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+}
+
+.gem-c-service-header__nav-list-item {
+  margin: govuk-spacing(3) 0 govuk-spacing(4);
+
+  &.gem-c-service-header__nav-list-item--active {
+    padding-left: govuk-spacing(3);
+    border-left: govuk-spacing(1) solid $govuk-link-colour;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+    margin: 0 govuk-spacing(6) 0 0;
+    border-bottom: govuk-spacing(1) solid transparent;
+
+    &:last-of-type {
+      margin: 0;
+    }
+
+    &.gem-c-service-header__nav-list-item--active {
+      border-left: 0;
+      padding-left: 0;
+      border-bottom: govuk-spacing(1) solid $govuk-link-colour;
+    }
+  }
+}
+
+.gem-c-service-header__nav-list-item-link {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+  @include govuk-link-style-no-visited-state;
+
+  &:not(:hover) {
+    text-decoration: none;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+    padding: govuk-spacing(3) 0 govuk-spacing(3);
+
+    &:focus {
+      box-shadow: 0 (-(govuk-spacing(1))) $govuk-focus-colour, 0 govuk-spacing(1) $govuk-focus-text-colour;
+    }
+  }
+}
+// end service navigation styles

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

@@ -11,32 +11,17 @@
   subtext_href ||= false
   mobile_subtext ||= false
   light_text ||= false
-  blue_arrow ||= false
-  white_arrow ||= false
   simple ||= false
   simple_light ||= false
   dark_icon ||= false
   dark_large_icon ||= false
   light_icon ||= false
-  small_icon ||= false
-  nhs_icon ||= false
-  brexit_icon ||= false
-  transparent_icon ||= false
-  data ||= nil
-  classes ||= nil
-  font_size ||= 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--dark-large-icon" if dark_large_icon
-  css_classes << "gem-c-action-link--small-icon" if small_icon
-  css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
   css_classes << "gem-c-action-link--light-icon" if light_icon
-  css_classes << "gem-c-action-link--nhs" if nhs_icon
-  css_classes << "gem-c-action-link--brexit" if brexit_icon
-  css_classes << "gem-c-action-link--blue-arrow" if blue_arrow
-  css_classes << "gem-c-action-link--white-arrow" if white_arrow
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--simple-light" if simple_light
   css_classes << "gem-c-action-link--with-subtext" if subtext
@@ -44,9 +29,7 @@
   css_classes << shared_helper.get_margin_bottom
 
   link_classes = %w(govuk-link gem-c-action-link__link)
-  link_classes << shared_helper.classes if classes
   link_classes << "govuk-link--inverse" if light_text
-  link_classes << shared_helper.get_heading_size(font_size, 'm') if font_size
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class(css_classes.join(" "))
@@ -61,7 +44,7 @@
         <% end %>
 
         <% if href.present? %>
-          <%= link_to href, class: link_classes, data: data do %>
+          <%= link_to href, class: link_classes do %>
             <%= main_text %>
           <% end %>
         <% else %>
@@ -73,7 +56,7 @@
         <span class="gem-c-action-link__subtext-wrapper">
           <% if subtext_href %>
             <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") do %>
-              <%= link_to subtext, subtext_href, class: link_classes, data: data %>
+              <%= link_to subtext, subtext_href, class: link_classes %>
             <% end %>
           <% else %>
             <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") %>

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

@@ -0,0 +1,19 @@
+<%
+  add_gem_component_stylesheet("cross-service-header")
+
+  product_name ||= nil
+  one_login_navigation_items ||= []
+  service_navigation_items ||= []
+  service_navigation_aria_label ||= "Service menu"
+%>
+
+<header class="gem-c-cross-service-header" role="banner" data-module="cross-service-header">
+  <%= render "govuk_publishing_components/components/cross_service_header/one_login_header", {
+    one_login_navigation_items: one_login_navigation_items,
+  } %>
+  <%= render "govuk_publishing_components/components/cross_service_header/service_header", {
+    service_navigation_aria_label: service_navigation_aria_label,
+    service_navigation_items: service_navigation_items,
+    product_name: product_name,
+  } %>
+</header>

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

@@ -11,12 +11,15 @@
   blue_bar_background_colour = layout_helper.blue_bar_background_colours.include?(blue_bar_background_colour) ? blue_bar_background_colour : nil
   logo_link ||= "/"
   navigation_items ||= []
+  one_login_navigation_items ||= {}
+  service_navigation_items ||= []
   omit_feedback_form ||= false
   omit_footer_navigation ||= false
   omit_footer_border ||= false
   omit_header ||= false
   product_name ||= nil
   show_explore_header ||= false
+  show_cross_service_header ||= false
   draft_watermark ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
   title ||= "GOV.UK - The best place to find government services and information"
@@ -113,6 +116,12 @@
             logo_link: logo_link,
           } %>
         <% end %>
+      <% elsif 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,
+          product_name: product_name,
+        } %>
       <% else %>
         <%= render "govuk_publishing_components/components/layout_header", {
           search: show_search,

data/app/views/govuk_publishing_components/components/cross_service_header/_one_login_header.html.erb

@@ -0,0 +1,97 @@
+  <% one_login_home = one_login_navigation_items[:one_login_home] %>
+  <% one_login_sign_out = one_login_navigation_items[:one_login_sign_out] %>
+  
+  <div class="gem-c-one-login-header" data-one-login-header-nav>
+    <div class="gem-c-one-login-header__container govuk-width-container">
+      <div class="gem-c-one-login-header__logo">
+        <a href="https://www.gov.uk/" class="gem-c-one-login-header__link gem-c-one-login-header__link--homepage">
+          <span class="gem-c-one-login-header__logotype">
+            <!--[if gt IE 8]><!-->
+            <svg aria-hidden="true" focusable="false" class="gem-c-one-login-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+              <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+            </svg>
+            <!--<![endif]-->
+            <span>
+              GOV.UK
+            </span>
+          </span>
+        </a>
+      </div>
+
+      <button type="button" 
+        aria-controls="one-login-header__nav" 
+        aria-label="Show GOV.UK One Login menu" 
+        data-open-class="gem-c-cross-service-header__button--open" 
+        data-label-for-show="Show GOV.UK One Login menu" 
+        data-label-for-hide="Hide GOV.UK One Login menu" 
+        aria-expanded="false" 
+        class="gem-c-cross-service-header__button gem-c-cross-service-header__button--one-login js-x-header-toggle">
+        <span class="gem-c-cross-service-header__button-content">One Login</span>
+
+        <!--[if gt IE 8]><!-->
+        <span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--default">
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+            <circle cx="11" cy="11" r="11" fill="white"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="#1D70B8"/>
+            <circle cx="11" cy="7.75" r="3.75" fill="#1D70B8"/>
+            <circle cx="11" cy="11" r="10" stroke="white" stroke-width="2"/>
+          </svg>
+        </span>
+        <!--<![endif]-->
+
+        <!--[if gt IE 8]><!-->
+        <span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--focus">
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+            <circle cx="11" cy="11" r="11" fill="black"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="white"/>
+            <circle cx="11" cy="7.75" r="3.75" fill="white"/>
+            <circle cx="11" cy="11" r="10" stroke="black" stroke-width="2"/>
+          </svg>
+        </span>
+        <!--<![endif]-->
+      </button>
+
+      <nav aria-label="GOV.UK One Login menu" class="gem-c-one-login-header__nav" data-open-class="gem-c-one-login-header__nav--open" id="one-login-header__nav">
+        <ul class="gem-c-one-login-header__nav__list">
+          <li class="gem-c-one-login-header__nav__list-item">
+            <%= link_to one_login_home[:href], class: "gem-c-one-login-header__nav__link gem-c-one-login-header__nav__link--one-login", data: one_login_home[:data] do %>
+              <span class="gem-c-one-login-header__nav__link-content">
+                GOV.UK One Login
+              </span>
+
+              <!--[if gt IE 8]><!-->
+              <span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--default">
+                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+                  <circle cx="11" cy="11" r="11" fill="white"/>
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="#1D70B8"/>
+                  <circle cx="11" cy="7.75" r="3.75" fill="#1D70B8"/>
+                  <circle cx="11" cy="11" r="10" stroke="white" stroke-width="2"/>
+                </svg>
+              </span>
+              <!--<![endif]-->
+
+              <!--[if gt IE 8]><!-->
+              <span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--focus">
+                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+                  <circle cx="11" cy="11" r="11" fill="black"/>
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="white"/>
+                  <circle cx="11" cy="7.75" r="3.75" fill="white"/>
+                  <circle cx="11" cy="11" r="10" stroke="black" stroke-width="2"/>
+                </svg>
+              </span>
+              <!--<![endif]-->
+            <% end %>
+          </li>
+          <li class="gem-c-one-login-header__nav__list-item">
+            <%= link_to(
+              one_login_sign_out[:text],
+              one_login_sign_out[:href],
+              class: 'gem-c-one-login-header__nav__link',
+              data: one_login_sign_out[:data],
+            ) %>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  

data/app/views/govuk_publishing_components/components/cross_service_header/_service_header.html.erb

@@ -0,0 +1,49 @@
+<% service_navigation_aria_label ||= "Service menu" %>
+
+<% if product_name %>
+<div class="gem-c-service-header" data-one-login-header-nav>
+  <div class="govuk-width-container">
+    <div class="gem-c-service-header__container">
+      <!-- The name of your service goes here -->
+      <h2 class="gem-c-service-header__heading"><%= product_name %></h2>
+      <% if service_navigation_items.any? %>
+        <div>
+          <button type="button" 
+            aria-controls="service-header__nav" 
+            data-open-class="gem-c-cross-service-header__button--open" 
+            aria-label="Show service navigation menu" 
+            data-label-for-show="Show service navigation menu" 
+            data-label-for-hide="Hide service navigation menu" 
+            data-text-for-show="Menu" 
+            data-text-for-hide="Close" 
+            aria-expanded="false" 
+            class="gem-c-cross-service-header__button gem-c-cross-service-header__button--gem-c-service-header js-x-header-toggle">
+            <span class="gem-c-service-header__button-content">Menu</span>
+          </button>
+          <!-- Important! Label your navigation appropriately! When there are multiple navigation landmarks on a page, additional labelling is required to provide support for screen reader users -->
+          <nav aria-label="<%= service_navigation_aria_label %>">
+            <ul class="gem-c-service-header__nav-list gem-c-service-header__nav" id="service-header__nav" data-open-class="gem-c-service-header__nav--open">
+              <% service_navigation_items.each_with_index do |item, index| %>
+                <%
+                  li_classes = %w(gem-c-service-header__nav-list-item)
+                  li_classes << "gem-c-service-header__nav-list-item--active" if item[:active]
+                  aria_current = item[:active] ? "page" : nil
+                %>
+                <%= tag.li class: li_classes do %>
+                  <%= link_to(
+                    item[:text],
+                    item[:href],
+                    class: 'gem-c-service-header__nav-list-item-link',
+                    data: item[:data],
+                    aria: { current: aria_current }
+                  ) %>
+                <% end %>
+              <% end %>
+            </ul>
+          </nav>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+<% end %>