ER-1157 DfE Header update (#1248)

* Update mobile header to have chevron and links at top of header
* WIP: Chevron update for mobile menu
* Add Peter's changes and remove menu chevron file
* Navigation link update for mobile
* Update active class for navigation item and action link
* Fix failing spec
* Sitemap update

app/components/header_component.html.slim

@@ -5,11 +5,10 @@
         = image_tag 'dfe-logo.png', class: 'dfe-logo', alt: 'DfE homepage'
         = image_tag 'dfe-logo-alt.png', class: 'dfe-logo-hover', alt: 'DfE homepage'
     / - if action_links.any?
-    #content-header.dfe-header__content.dfe-header-f-dtonly.dfe-header-f-toplinks
-      .dfe-header-f-top-links
-        ul.dfe-header__action-links
-          - action_links.each do |item|
-            = item
+    #content-header.dfe-header__content
+      ul.dfe-header__action-links
+        - action_links.each do |item|
+          = item
       .dfe-header__menu
         button#toggle-menu.dfe-header__menu-toggle aria-controls='header-navigation' aria-expanded='false' data-action='click->reveal#toggle'
           | Menu

app/components/header_component.rb

@@ -1,5 +1,9 @@
 # frozen_string_literal: true
 
+#
+# Support for new DfE Frontend
+# @see https://design.education.gov.uk/design-system/dfe-frontend
+#
 class HeaderComponent < GovukComponent::HeaderComponent
   include Devise::Controllers::Helpers
 
@@ -18,26 +22,18 @@ def navigation_html_attributes
   end
 
   def container_html_attributes
-    { class: %w[dfe-header__container dfe-width-container] << custom_container_classes.compact }
-  end
-
-  def crown_fallback_image_attributes
-    {
-      class: 'dfe-header__logo-crown-fallback-image',
-      width: '36',
-      height: '32',
-    }
+    { class: %w[dfe-header__container dfe-width-container] }
   end
 
   class ActionLinkItem < GovukComponent::HeaderComponent::NavigationItem
     def active_class
-      ['dfe-header__action-item--current'] if active?
+      ['dfe-header__action-item--active'] if active?
     end
 
     def call
-      tag.li(**html_attributes) do
+      tag.li do
         if link?
-          govuk_link_to(text, href, class: 'dfe-header__action-link', **options)
+          govuk_link_to(text, href, **options)
         else
           text
         end
@@ -47,13 +43,15 @@ def call
 
   class NavigationItem < GovukComponent::HeaderComponent::NavigationItem
     def active_class
-      %w[dfe-header__navigation-item--current] if active?
+      ['dfe-header__navigation-item--active'] if active?
     end
 
     def call
       tag.li(**html_attributes) do
         if link?
-          link_to(text, href, class: 'dfe-header__navigation-link', **options)
+          link_to(href, class: 'dfe-header__navigation-link', **options) do
+            text.concat(chevron).html_safe
+          end
         else
           text
         end
@@ -62,6 +60,12 @@ def call
 
   private
 
+    def chevron
+      tag.svg class: 'dfe-icon dfe-icon__chevron-right', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: 34, height: 34, aria: { hidden: true } do
+        tag.path d: 'M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z'
+      end
+    end
+
     def default_attributes
       { class: %w[dfe-header__navigation-item] }
     end

app/helpers/application_helper.rb

@@ -7,15 +7,13 @@ module ApplicationHelper
 
   # @return [String]
   def navigation
-    render(HeaderComponent.new(service_name: service_name, classes: 'dfe-header noprint', container_classes: %w[dfe-header-f-header-flex], navigation_label: 'Primary navigation')) do |header|
+    render(HeaderComponent.new(service_name: service_name, classes: 'dfe-header noprint', navigation_label: 'Primary navigation')) do |header|
       header.with_navigation_item(text: 'Home', href: root_path, classes: %w[dfe-header__navigation-item])
       if user_signed_in?
         header.with_action_link(text: 'My Account', href: user_path, options: { inverse: true })
         header.with_action_link(text: 'Sign out', href: destroy_user_session_path, options: { id: 'sign-out-desktop', data: { turbo_method: :get }, inverse: true })
         header.with_navigation_item(text: 'My modules', href: my_modules_path, classes: %w[dfe-header__navigation-item])
         header.with_navigation_item(text: 'Learning log', href: user_notes_path, classes: %w[dfe-header__navigation-items]) if current_user.course_started?
-        header.with_navigation_item(text: 'My account', href: user_path, classes: %w[dfe-header__navigation-item dfe-header-f-mob])
-        header.with_navigation_item(text: 'Sign out', href: destroy_user_session_path, options: { data: { turbo_method: :get } }, classes: %w[dfe-header__navigation-item dfe-header-f-mob], html_attributes: { id: 'sign-out-f-mob' })
       else
         header.with_action_link(text: 'Sign in', href: new_user_session_path, options: { inverse: true })
         header.with_navigation_item(text: 'Sign in', href: new_user_session_path, classes: %w[dfe-header__navigation-item dfe-header-f-mob])

config/sitemap.rb

@@ -75,18 +75,20 @@
   add my_modules_path
   add user_notes_path
 
-  # Course common start page
-  mod = Training::Module.live.first
-  add training_module_page_path(mod.name, mod.pages.first.name)
+  if Training::Module.live.any?
+    # Course common start page
+    mod = Training::Module.live.first
+    add training_module_page_path(mod.name, mod.pages.first.name)
 
-  # Course content random module
-  Training::Module.live.sample.content.each do |page|
-    if page.is_question?
-      add training_module_question_path(page.parent.name, page.name)
-    elsif page.assessment_results?
-      add training_module_assessment_path(page.parent.name, page.name)
-    else
-      add training_module_page_path(page.parent.name, page.name)
+    # Course content random module
+    Training::Module.live.sample.content.each do |page|
+      if page.is_question?
+        add training_module_question_path(page.parent.name, page.name)
+      elsif page.assessment_results?
+        add training_module_assessment_path(page.parent.name, page.name)
+      else
+        add training_module_page_path(page.parent.name, page.name)
+      end
     end
   end
 end

spec/system/registered_user/changing_name_spec.rb

@@ -4,8 +4,7 @@
   include_context 'with user'
 
   before do
-    visit '/'
-    click_link 'My account'
+    visit '/my-account'
     click_link(id: 'edit_name_registration')
   end