Add new HeaderComponent to eventually replace Header

We retain the existing Header component for Publish while we design how the new header should work alongside the organisation switcher.

app/components/header.html.erb

@@ -1,14 +1,14 @@
 <%= govuk_header(
   homepage_url: publish_root_path,
-  classes: "govuk-!-display-none-print app-header--full-border app-header--wide-logo #{environment_header_class}",
+  classes: "govuk-!-display-none-print govuk-header--full-width-border app-header--wide-logo govuk-header--#{colour}",
   navigation_classes: "govuk-header__navigation--end"
 ) do |header| %>
 
   <% header.with_product_name(name: service_name) %>
 
   <% if current_user.present? %>
     <% if current_user.admin? %>
-      <% header.with_navigation_item(text: "Support console", href: support_path, active: false) %>
+      <% header.with_navigation_item(text: "Support console", href: support_root_path, active: false) %>
       <% header.with_navigation_item(text: "Sign out", href: sign_out_path) %>
     <% else %>
       <% if current_user.associated_with_accredited_provider? %>

app/components/header.rb

@@ -11,7 +11,14 @@ def initialize(service_name:, current_user: nil, classes: [], html_attributes: {
     @current_user = current_user
   end
 
-  def environment_header_class
-    "app-header--#{Settings.environment.name}"
+  def colour
+    {
+      development: 'grey',
+      production: 'blue',
+      review: 'purple',
+      sandbox: 'purple',
+      staging: 'red',
+      qa: 'orange'
+    }.fetch(Settings.environment.name.to_sym, 'grey')
   end
 end

app/components/header_component.html.erb

@@ -0,0 +1,28 @@
+<%= govuk_header homepage_url: "https://www.gov.uk", classes: ["app-header--wide-logo", "govuk-header--full-width-border", "govuk-header--#{colour}"] do |header| %>
+  <% if current_user %>
+    <% header.with_navigation_item(text: current_user.full_name, href: Settings.dfe_signin.profile) %>
+    <% header.with_navigation_item text: "Sign out", href: sign_out_path %>
+  <% end %>
+<% end %>
+
+<% if navigation_items %>
+  <%= govuk_service_navigation(service_name:, service_url:) do |service_navigation| %>
+    <% navigation_items.each do |navigation_item| %>
+      <%= service_navigation.with_navigation_item text: navigation_item.text, href: navigation_item.href %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<div class="govuk-width-container">
+  <div class="govuk-phase-banner">
+    <p class="govuk-phase-banner__content">
+      <%= govuk_tag(**phase_banner_tag, classes: ["govuk-phase-banner__content__tag"]) %>
+
+      <% if phase_banner_text? %>
+        <span class="govuk-phase-banner__text">
+          <%= sanitize phase_banner_text.to_s %>
+        </span>
+      <% end %>
+    </p>
+  </div>
+</div>

app/components/header_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+class HeaderComponent < ApplicationComponent
+  renders_many :navigation_items, 'NavigationItemComponent'
+
+  renders_one :phase_banner_text, ->(text) { text }
+
+  def initialize(service_name:, service_url: nil, current_user: nil, classes: [], html_attributes: {})
+    super(classes:, html_attributes:)
+
+    @service_name = service_name
+    @service_url = service_url
+    @current_user = current_user
+  end
+
+  private
+
+  attr_reader :service_name, :current_user
+
+  def service_url
+    @service_url || root_path
+  end
+
+  def phase_banner_tag
+    {
+      text: Settings.environment.label,
+      colour:
+    }
+  end
+
+  def colour
+    {
+      development: 'grey',
+      production: 'blue',
+      review: 'purple',
+      sandbox: 'purple',
+      staging: 'red',
+      qa: 'orange'
+    }.fetch(Settings.environment.name.to_sym, 'grey')
+  end
+
+  class NavigationItemComponent < ApplicationComponent
+    attr_reader :text, :href
+
+    def initialize(text, href, classes: [], html_attributes: {})
+      super(classes:, html_attributes:)
+
+      @text = text
+      @href = href
+    end
+  end
+end

app/components/secondary_navigation_component.rb

@@ -4,19 +4,26 @@ class SecondaryNavigationComponent < ViewComponent::Base
   renders_many :navigation_items, 'NavigationItemComponent'
 
   class NavigationItemComponent < ViewComponent::Base
-    attr_reader :name, :url
-
-    def initialize(name, url, classes: [], html_attributes: {})
+    def initialize(name, url, current: nil, classes: [], html_attributes: {})
       @name = name
       @url = url
+      @current = current
 
       super(classes:, html_attributes:)
     end
 
     def call
       content_tag(:li, class: 'app-secondary-navigation__item') do
-        link_to name, url, class: 'app-secondary-navigation__link', aria: { current: current_page?(url) && 'page' }
+        link_to name, url, class: 'app-secondary-navigation__link', aria: { current: current? && 'page' }
       end
     end
+
+    private
+
+    attr_reader :name, :url, :current
+
+    def current?
+      current || current_page?(url)
+    end
   end
 end

app/components/support_title_bar.html.erb

@@ -1,8 +1,7 @@
-<div class="govuk-grid-row">
-  <div class="govuk-grid-column-full">
-
-    <div class="title-bar" aria-label="Organisation switcher">
-      <% if rollover_active? && !support_index_page %>
+<% if rollover_active? && !support_index_page %>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-full">
+      <div class="title-bar" aria-label="Organisation switcher">
         <div class="title-bar__title">
           <%= title %>
         </div>
@@ -16,7 +15,7 @@
               </li>
             </ul>
         </div>
-      <% end %>
+      </div>
     </div>
   </div>
-</div>
+<% end %>

app/components/support_title_bar.rb

@@ -12,7 +12,7 @@ def title
   end
 
   def change_cycle_link
-    govuk_link_to t('page_titles.rollover.change_cycle'), support_path, class: 'title-bar__link govuk-link--no-visited-state'
+    govuk_link_to t('page_titles.rollover.change_cycle'), support_root_path, class: 'title-bar__link govuk-link--no-visited-state'
   end
 
   def change_items

config/settings/development.yml

@@ -10,8 +10,8 @@ log_level: debug
 gcp_api_key: please_change_me
 
 environment:
-  label: "development"
-  name: "development"
+  label: Development
+  name: development
 
 find_valid_referers:
   - http://localhost:3001

config/settings/production.yml

@@ -26,8 +26,8 @@ bg_jobs:
 skylight:
   enable: true
 environment:
-  label: "Beta"
-  name: "beta"
+  label: Beta
+  name: production
 render_json_errors: true
 
 features:

spec/components/previews/header_component_preview.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class HeaderComponentPreview < ViewComponent::Preview
+  def default
+    render HeaderComponent.new(service_name: 'Service Name')
+  end
+
+  def with_service_navigation
+    render HeaderComponent.new(service_name: 'Find and Publish support console') do |header|
+      header.with_navigation_item('Home', '/')
+      header.with_navigation_item('Home', '/')
+    end
+  end
+end