feat[#50499]: Add back button and breadcrumbs to page header

.changeset/green-bananas-kneel.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Add back button and breadcrumbs support to PageHeader

app/components/primer/open_project/page_header.html.erb

@@ -1,4 +1,6 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= breadcrumbs %>
+  <%= back_button %>
   <%= title %>
   <%= description %>
   <%= actions %>

app/components/primer/open_project/page_header.pcss

@@ -43,3 +43,13 @@
     margin-top: var(--base-size-4);
   }
 }
+
+.PageHeader-breadcrumbs {
+  display: block;
+  width: 100%;
+  margin-bottom: var(--base-size-8);
+}
+
+.PageHeader-back_button {
+  margin-right: var(--base-size-4);
+}

app/components/primer/open_project/page_header.rb

@@ -50,6 +50,44 @@ class PageHeader < Primer::Component
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      # Optional backbutton prepend the title
+      renders_one :back_button, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :a
+        system_arguments[:icon] = "arrow-left"
+        system_arguments[:scheme] = :invisible
+        system_arguments[:size] = :medium
+        system_arguments[:aria] = { label: I18n.t("button_back") }
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-back_button")
+
+        Primer::Beta::IconButton.new(**system_arguments)
+      }
+
+      # Optional breadcrumbs above the title row
+      # Items can be an array of string, hash {href, text} or an anchor tag string
+      renders_one :breadcrumbs, lambda { |items, show_breadcrumb: true|
+        return if !show_breadcrumb
+
+        render(Primer::Beta::Breadcrumbs.new(classes: ["PageHeader-breadcrumbs"] )) do |breadcrumbs|
+          items.each do |item|
+
+            # transform anchor tag strings to {href, text} objects
+            # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
+            if (item.is_a?(String) && item.start_with?("\u003c"))
+              item = transformLinkHtmlStringToObject(item)
+            end
+
+            case item
+            when String
+              breadcrumbs.with_item(href: '#') { item }
+            when Hash
+              breadcrumbs.with_item(href: item[:href]) { item[:text] }
+            end
+          end
+        end
+      }
+
+
       def initialize(**system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
 
@@ -64,6 +102,16 @@ def initialize(**system_arguments)
       def render?
         title?
       end
+
+      private
+
+      def transformLinkHtmlStringToObject(html_string)
+        # Parse the HTML
+        doc = Nokogiri::HTML.fragment(html_string)
+        # Extract href and text
+        anchor = doc.at('a')
+        { href: anchor['href'], text: anchor.text }
+      end
     end
   end
 end

previews/primer/open_project/page_header_preview.rb

@@ -33,6 +33,42 @@ def large_title
         end
       end
 
+      # @label Back button
+      def back_button
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title() { "Hello" }
+          header.with_back_button(href: "#")
+        end
+      end
+
+      # @label Back button and breadcrumbs
+      def back_button_and_breadcrumbs
+        breadcrumb_items = [
+          {href: "/root", text: "Root"},
+          "\u003ca href=\"/root/sub\"\u003eSub\u003c/a\u003e" ,
+          "test"
+        ]
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title() { "Hello" }
+          header.with_back_button(href: "#")
+          header.with_breadcrumbs(breadcrumb_items)
+        end
+      end
+
+      # @label Breadcrumbs don't show breadcrumb
+      def back_button_and_no_breadcrumbs
+        breadcrumb_items = [
+          "test1",
+          "test2" ,
+          "test3"
+        ]
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title() { "Hello" }
+          header.with_back_button(href: "#")
+          header.with_breadcrumbs(breadcrumb_items, show_breadcrumb: false)
+        end
+      end
+
       # @label With actions
       def actions
         render_with_template(locals: {})

static/classes.json

@@ -435,6 +435,12 @@
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-back_button": [
+    "Primer::OpenProject::PageHeader"
+  ],
+  "PageHeader-breadcrumbs": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],