Merge pull request #337 from opf/bug/63777-breadcrumb-index-creates-unnecessary-navigation-buttons-on-mobile-web

[63777] Add option to skip indiviual items from mobile breadcrumb behaviour

Author: HDinger

.changeset/purple-paths-look.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Add the option to skip breadcrumb items for mobile

app/components/primer/open_project/page_header.rb

@@ -186,11 +186,16 @@ class PageHeader < Primer::Component
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
         system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
 
+        parent_item = nil
+
         # show parent link if there is a parent for current page
-        if items.length > 1
-          link_arguments = {}
-          parent_item = items[items.length - 2]
+        items.reverse_each do |item|
+          parent_item = item if item.is_a?(Hash) && item[:skip_for_mobile] != true
+          break if parent_item.present?
+        end
 
+        if parent_item.present? && parent_item[:href].present?
+          link_arguments = {}
           link_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, DEFAULT_BACK_BUTTON_ICON)
           link_arguments[:href] = parent_item[:href]
           link_arguments[:target] = "_top"

previews/primer/open_project/page_header_preview.rb

@@ -256,6 +256,16 @@ def segmented_control_mobile_icons
           end
         end
       end
+
+      # @label With skipable breadcrumb items
+      def skip_breadcrumb_item
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Resize me to mobile screen size" }
+          component.with_breadcrumbs([{ href: "/foo", text: "Foo" },
+                                      { href: "/bar", text: "Bar", skip_for_mobile: true },
+                                       "Baz"])
+        end
+      end
     end
   end
 end

test/components/primer/open_project/page_header_test.rb

@@ -269,6 +269,27 @@ def test_renders_editable_title
     assert_selector(".FormField-input.Button--secondary")
   end
 
+  def test_skips_a_breadcrumb_item_for_mobile
+    render_inline(Primer::OpenProject::PageHeader.new) do |header|
+      header.with_title { "Hello" }
+      header.with_breadcrumbs([{ href: "/foo", text: "Foo" },
+                               { href: "/bar", text: "Bar", skip_for_mobile: true },
+                               "Baz"])
+    end
+
+    assert_text("Hello")
+    assert_selector(".PageHeader-title")
+    assert_selector(".PageHeader-breadcrumbs")
+
+    # The direct parent is skipped for the mobile back button..
+    assert_selector("a.PageHeader-parentLink[href='/foo']")
+
+    # .. but it is present in the normal desktop
+    assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item a[href='/foo']")
+    assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item a[href='/bar']")
+    assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item.text-bold a[href='#']")
+  end
+
   private
 
   def breadcrumb_elements