feat[#51013]: Extend page header with parent link, context bar action…

…s and responsiveness - Relevant WP [OP#51013](https://community.openproject.org/wp/51013)
opf · Nov 15, 2023 · 261ce7b · 261ce7b
1 parent 0a7d560
commit 261ce7b
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 5 deletions.
diff --git a/.changeset/giant-carrots-explain.md b/.changeset/giant-carrots-explain.md
@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Extend page header with parent link, context bar actions and responsiveness
diff --git a/app/components/primer/open_project/page_header.html.erb b/app/components/primer/open_project/page_header.html.erb
@@ -1,9 +1,17 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= breadcrumbs %>
-  <div class="PageHeader-titleBar">
+  <% if parent_link || breadcrumbs || context_bar_actions %>
+    <div class="PageHeader-contextArea">
+      <%= parent_link %>
+      <%= breadcrumbs %>
+      <%= context_bar_actions %>
+    </div>
+  <% end %>
+
+  <div class="PageHeader-titleArea">
     <%= back_button %>
     <%= title %>
     <%= actions %>
   </div>
+
   <%= description %>
 <% end %>
diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
@@ -12,7 +12,15 @@
   }
 }
 
-.PageHeader-titleBar {
+.PageHeader-contextArea {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: var(--base-size-4);
+}
+
+.PageHeader-titleArea {
   display: flex;
   flex-flow: row;
   justify-content: flex-end;
@@ -49,7 +57,7 @@
 .PageHeader-breadcrumbs {
   display: block;
   width: 100%;
-  margin-bottom: var(--base-size-8);
+  margin-bottom: var(--base-size-4);
 }
 
 .PageHeader-backButton {

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
@@ -27,6 +27,10 @@ class PageHeader < Primer::Component
         "triangle-left"
       ].freeze
 
+      DEFAULT_BACK_BUTTON_DISPLAY = [:none, :flex].freeze
+      DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
+      DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
+
       status :open_project
 
       # The title of the page header
@@ -64,8 +68,20 @@ class PageHeader < Primer::Component
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      # Context Bar Actions
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :context_bar_actions, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-contextBarActions")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
       # Optional back button prepend the title
       #
+      # @param icon [String] text
       # @param size [Symbol] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_SIZE_OPTIONS) %>
       # @param icon [String] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_ICON_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -80,16 +96,33 @@ class PageHeader < Primer::Component
         system_arguments[:size] = fetch_or_fallback(BACK_BUTTON_SIZE_OPTIONS, size, DEFAULT_BACK_BUTTON_SIZE)
         system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-backButton")
+        system_arguments[:display] ||= DEFAULT_BACK_BUTTON_DISPLAY
 
         Primer::Beta::IconButton.new(**system_arguments)
       }
 
+      # Optional parent link in the context area
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :parent_link, lambda { |icon: DEFAULT_BACK_BUTTON_ICON, **system_arguments, &block|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-parentLink")
+        system_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
+
+        render(Primer::Beta::Link.new(scheme: :primary, muted: true, **system_arguments)) do
+          render(Primer::Beta::Octicon.new(icon: "arrow-left", "aria-label": "aria_label", mr: 2)) + content_tag(:span, &block)
+        end
+      }
+
       # Optional breadcrumbs above the title row
       #
       # @param items [Array<String, Hash>] Items is an array of strings, hash {href, text} or an anchor tag string
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :breadcrumbs, lambda { |items, **system_arguments|
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
+        system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
+
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
             item = anchor_string_to_object(item) if anchor_tag_string?(item)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
@@ -21,13 +21,15 @@ def default
       # @param with_back_button [Boolean]
       # @param back_button_size [Symbol] select [small, medium, large]
       # @param with_breadcrumbs [Boolean]
+      # @param parent_link [Boolean]
       def playground(
         variant: :medium,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
         with_back_button: false,
         back_button_size: :medium,
-        with_breadcrumbs: false
+        with_breadcrumbs: false,
+        parent_link: false
       )
         breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
 
@@ -36,6 +38,7 @@ def playground(
           header.with_description { description }
           header.with_back_button(href: "#", size: back_button_size, 'aria-label': "Back") if with_back_button
           header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs
+          header.with_parent_link(href: "#") { "Parent link" } if parent_link
         end
       end
 
@@ -75,6 +78,14 @@ def breadcrumbs
           header.with_breadcrumbs(breadcrumb_items)
         end
       end
+
+      # @label With parent link
+      def parent_link
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "A title" }
+          header.with_parent_link(href: "test") { "Parent link" }
+        end
+      end
     end
   end
 end
diff --git a/test/components/primer/open_project/page_header_test.rb b/test/components/primer/open_project/page_header_test.rb
@@ -82,4 +82,26 @@ def test_renders_breadcrumbs
     assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item a[href='/foo/bar']")
     assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item a[href='#']")
   end
+
+  def test_renders_parent_link
+    render_inline(Primer::OpenProject::PageHeader.new) do |header|
+      header.with_title { "Hello" }
+      header.with_parent_link(href: "test") { "Parent link" }
+    end
+
+    assert_text("Hello")
+    assert_selector(".PageHeader-title")
+    assert_selector(".PageHeader-parentLink")
+  end
+
+  def test_renders_context_bar_actions
+    render_inline(Primer::OpenProject::PageHeader.new) do |header|
+      header.with_title { "Hello" }
+      header.with_context_bar_actions { "An context bar action" }
+    end
+
+    assert_text("Hello")
+    assert_selector(".PageHeader-title")
+    assert_selector(".PageHeader-contextBarActions")
+  end
 end