From be7884dce8b62b1795dc9337be68e12355ec1119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 15 Nov 2023 09:31:55 +0300
Subject: [PATCH 1/9] feat[#51013]: Extend page header with parent link,
 context bar actions and responsiveness

- Relevant WP [OP#51013](https://community.openproject.org/wp/51013)
---
 .changeset/giant-carrots-explain.md           |  5 +++
 .../primer/open_project/page_header.html.erb  | 12 +++++--
 .../primer/open_project/page_header.pcss      | 12 +++++--
 .../primer/open_project/page_header.rb        | 32 +++++++++++++++++++
 .../open_project/page_header_preview.rb       | 13 +++++++-
 .../primer/open_project/page_header_test.rb   | 22 +++++++++++++
 6 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/giant-carrots-explain.md

diff --git a/.changeset/giant-carrots-explain.md b/.changeset/giant-carrots-explain.md
new file mode 100644
index 0000000000..1ce100f768
--- /dev/null
+++ 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
index bf35aae4d1..47b78af879 100644
--- 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
index df67b3fc02..488a4c6de6 100644
--- 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
index 4e99187d09..b73c363473 100644
--- 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,6 +68,17 @@ 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 size [Symbol] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_SIZE_OPTIONS) %>
@@ -80,16 +95,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
index bbf5dea68b..ce3f9c50f8 100644
--- 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
index c9fc6bfd0f..996ee1fbfd 100644
--- 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

From a86491269304d9af8231f026a8f8c7da2df25b35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 15 Nov 2023 17:38:06 +0300
Subject: [PATCH 2/9] chore[#51013]: Change margin strategy to avoid different
 heights

- Removes extra y-margin on action buttons to avoid higher title bar height when buttons are rendered
- Remove margin from contextArea to avoid space when context elements are defined but not rendered because of responsiveness.
- Gives more vertical space for breadcrumbs based on design
---
 app/components/primer/open_project/page_header.pcss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index 488a4c6de6..e0cb6fff27 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -17,7 +17,6 @@
   flex-flow: row;
   justify-content: flex-start;
   align-items: center;
-  margin-bottom: var(--base-size-4);
 }
 
 .PageHeader-titleArea {
@@ -46,7 +45,7 @@
 
 /* Add 1 or 2 buttons to the right of the heading */
 .PageHeader-actions {
-  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
+  margin: 0 0 0 var(--base-size-4);
   justify-content: flex-end;
 
   & + .PageHeader-description {
@@ -57,10 +56,15 @@
 .PageHeader-breadcrumbs {
   display: block;
   width: 100%;
-  margin-bottom: var(--base-size-4);
+  margin-bottom: var(--base-size-8);
+  padding-bottom: var(--base-size-4);
 }
 
 .PageHeader-backButton {
   margin-top: 2px; /* to center align with label */
   margin-right: var(--base-size-4);
 }
+
+.PageHeader-parentLink, .PageHeader-contextBarActions {
+  margin-bottom: var(--base-size-4);
+}

From 7a97caff5fc702a8c32acf48dbc61663b9f64921 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 15 Nov 2023 18:00:56 +0300
Subject: [PATCH 3/9] chore[#51013]: Rename containers to contextBar and
 PageHeader-titleBar

---
 app/components/primer/open_project/page_header.html.erb | 4 ++--
 app/components/primer/open_project/page_header.pcss     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/primer/open_project/page_header.html.erb b/app/components/primer/open_project/page_header.html.erb
index 47b78af879..53f3240b25 100644
--- a/app/components/primer/open_project/page_header.html.erb
+++ b/app/components/primer/open_project/page_header.html.erb
@@ -1,13 +1,13 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if parent_link || breadcrumbs || context_bar_actions %>
-    <div class="PageHeader-contextArea">
+    <div class="PageHeader-contextBar">
       <%= parent_link %>
       <%= breadcrumbs %>
       <%= context_bar_actions %>
     </div>
   <% end %>
 
-  <div class="PageHeader-titleArea">
+  <div class="PageHeader-titleBar">
     <%= back_button %>
     <%= title %>
     <%= actions %>
diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index e0cb6fff27..455a527e6b 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -12,14 +12,14 @@
   }
 }
 
-.PageHeader-contextArea {
+.PageHeader-contextBar {
   display: flex;
   flex-flow: row;
   justify-content: flex-start;
   align-items: center;
 }
 
-.PageHeader-titleArea {
+.PageHeader-titleBar {
   display: flex;
   flex-flow: row;
   justify-content: flex-end;

From c427d6fe764779b3ee246a3459c67e9d73b024f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 15 Nov 2023 18:59:42 +0300
Subject: [PATCH 4/9] fix[#51013]: Move context bar actions to the end for all
 combinations

---
 app/components/primer/open_project/page_header.pcss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index 455a527e6b..4539010093 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -15,7 +15,7 @@
 .PageHeader-contextBar {
   display: flex;
   flex-flow: row;
-  justify-content: flex-start;
+  justify-content: flex-end;
   align-items: center;
 }
 
@@ -47,6 +47,7 @@
 .PageHeader-actions {
   margin: 0 0 0 var(--base-size-4);
   justify-content: flex-end;
+  display: flex;
 
   & + .PageHeader-description {
     margin-top: var(--base-size-4);
@@ -65,6 +66,11 @@
   margin-right: var(--base-size-4);
 }
 
-.PageHeader-parentLink, .PageHeader-contextBarActions {
+.PageHeader-parentLink {
+  flex: 1 1 auto;
   margin-bottom: var(--base-size-4);
 }
+
+.PageHeader-contextBarActions {
+  margin: 0 0 0 var(--base-size-4);
+}
\ No newline at end of file

From 7701468bc38d53c3a309cead1d0d2ce193ee3460 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 15 Nov 2023 19:00:12 +0300
Subject: [PATCH 5/9] fix[#51013]: Add responsiveness for context bar actions

---
 app/components/primer/open_project/page_header.rb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index b73c363473..795f2df2b5 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -30,6 +30,7 @@ class PageHeader < Primer::Component
       DEFAULT_BACK_BUTTON_DISPLAY = [:none, :flex].freeze
       DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
       DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
+      DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY = [:block, :none].freeze
 
       status :open_project
 
@@ -75,6 +76,7 @@ class PageHeader < Primer::Component
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :div
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-contextBarActions")
+        system_arguments[:display] ||= DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY
 
         Primer::BaseComponent.new(**system_arguments)
       }

From b71a3e9f3a9d8143a0ad2bb98686c5530da355ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 15 Nov 2023 19:00:43 +0300
Subject: [PATCH 6/9] chore[#51013]: Add notes in previews and more descriptive
 labels

---
 .../open_project/page_header_preview.rb       | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index ce3f9c50f8..7e2e047a86 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -55,7 +55,11 @@ def actions
         render_with_template(locals: {})
       end
 
-      # @label With back button
+      # @label With back button (on wide)
+      # **Back button** is only shown on **wider than narrow screens** by default.
+      # If you want to override that behaviour please use the system_argument: **display**
+      # e.g. **component.with\_breadcrumbs(display: [:block, :block])**
+      #
       # @param href [String] text
       # @param size [Symbol] select [small, medium, large]
       # @param icon [String] select ["arrow-left", "chevron-left", "triangle-left"]
@@ -66,7 +70,11 @@ def back_button(href: "#", size: :medium, icon: "arrow-left")
         end
       end
 
-      # @label With breadcrumbs
+      # @label With breadcrumbs (on wide)
+      # **Breadcrumbs** are only shown on **wider than narrow screens** by default.
+      # If you want to override that behaviour please use the system_argument: **display**
+      # e.g. **component.with\_breadcrumbs(display: [:block, :block])**
+      #
       def breadcrumbs
         breadcrumb_items = [
           { href: "/foo", text: "Foo" },
@@ -79,13 +87,26 @@ def breadcrumbs
         end
       end
 
-      # @label With parent link
+      # @label With parent link (on narrow)
+      # **Parent link** is only shown on **narrow screens** by default.
+      # If you want to override that behaviour please use the system_argument: **display**
+      # e.g. **component.with\_parent\_link(display: [:block, :block])**
+      #
       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
+
+      # @label With context bar actions (on narrow)
+      # **Context bar actions** are only shown on **narrow screens** by default.
+      # If you want to override that behaviour please use the system_argument: **display**
+      # e.g. **component.with\_context\_bar\_actions(display: [:block, :block])**
+      #
+      def context_bar_actions
+        render_with_template(locals: {})
+      end
     end
   end
 end

From 12e478756b829357b1a98fa249cb27c07e594a4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 15 Nov 2023 19:01:19 +0300
Subject: [PATCH 7/9] chore[#51013]: Add context bar actions preview example

---
 .../context_bar_actions.html.erb              | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 previews/primer/open_project/page_header_preview/context_bar_actions.html.erb

diff --git a/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb b/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb
new file mode 100644
index 0000000000..b053c79025
--- /dev/null
+++ b/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb
@@ -0,0 +1,25 @@
+<%= render(Primer::OpenProject::PageHeader.new) do |component| %>
+  <% component.with_title(tag: :h1) do %>
+    A title
+  <% end %>
+  <% component.with_description do %>
+    A description with actions
+  <% end %>
+  <% component.with_parent_link(href: "#") do %>
+    Parent link
+  <% end %>
+  <% component.with_context_bar_actions do %>
+    <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
+      <% component.with_show_button { "Menu" } %>
+      <% component.with_item(label: "Item", tag: :button, value: "") %>
+      <% component.with_item(
+           label: "Show dialog",
+           tag: :button,
+           content_arguments: { "data-show-dialog-id": "my-dialog" },
+           value: "",
+           scheme: :danger
+         ) %>
+    <% end %>
+  <% end %>
+<% end %>
+

From ac78f514d0fefbe8cd69373b41fd54b231235510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 15 Nov 2023 19:04:01 +0300
Subject: [PATCH 8/9] chore[#51013]: Add responsive description on slots

---
 app/components/primer/open_project/page_header.rb | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 795f2df2b5..9dbbff1012 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -70,6 +70,7 @@ class PageHeader < Primer::Component
       }
 
       # Context Bar Actions
+      # By default shown on narrow screens. Can be overridden with system_argument: display
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :context_bar_actions, lambda { |**system_arguments|
@@ -82,6 +83,7 @@ class PageHeader < Primer::Component
       }
 
       # Optional back button prepend the title
+      # By default shown on wider screens. Can be overridden with system_argument: display
       #
       # @param size [Symbol] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_SIZE_OPTIONS) %>
       # @param icon [String] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_ICON_OPTIONS) %>
@@ -103,6 +105,7 @@ class PageHeader < Primer::Component
       }
 
       # Optional parent link in the context area
+      # By default shown on narrow screens. Can be overridden with system_argument: display
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :parent_link, lambda { |icon: DEFAULT_BACK_BUTTON_ICON, **system_arguments, &block|
@@ -117,6 +120,7 @@ class PageHeader < Primer::Component
       }
 
       # Optional breadcrumbs above the title row
+      # By default shown on wider screens. Can be overridden with system_argument: display
       #
       # @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 %>

From 841f4499a633f8b0f76743f8380096f213ae2ef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Thu, 16 Nov 2023 14:25:38 +0300
Subject: [PATCH 9/9] chore[#51013]: Add actions to playground and switch to
 template

---
 .../open_project/page_header_preview.rb       | 25 +++++++++------
 .../page_header_preview/playground.html.erb   | 32 +++++++++++++++++++
 2 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 previews/primer/open_project/page_header_preview/playground.html.erb

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index 7e2e047a86..258a17a872 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -21,7 +21,9 @@ def default
       # @param with_back_button [Boolean]
       # @param back_button_size [Symbol] select [small, medium, large]
       # @param with_breadcrumbs [Boolean]
-      # @param parent_link [Boolean]
+      # @param with_actions [Boolean]
+      # @param with_context_bar_actions [Boolean]
+      # @param with_parent_link [Boolean]
       def playground(
         variant: :medium,
         title: "Hello",
@@ -29,17 +31,22 @@ def playground(
         with_back_button: false,
         back_button_size: :medium,
         with_breadcrumbs: false,
-        parent_link: false
+        with_actions: false,
+        with_context_bar_actions: false,
+        with_parent_link: false
       )
         breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
 
-        render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title(variant: variant) { title }
-          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
+        render_with_template(locals: { variant: variant,
+                                       title: title,
+                                       description: description,
+                                       with_back_button: with_back_button,
+                                       back_button_size: back_button_size,
+                                       with_breadcrumbs: with_breadcrumbs,
+                                       with_parent_link: with_parent_link,
+                                       with_actions: with_actions,
+                                       with_context_bar_actions: with_context_bar_actions,
+                                       breadcrumb_items: breadcrumb_items })
       end
 
       # @label Large
diff --git a/previews/primer/open_project/page_header_preview/playground.html.erb b/previews/primer/open_project/page_header_preview/playground.html.erb
new file mode 100644
index 0000000000..e7d1a9c275
--- /dev/null
+++ b/previews/primer/open_project/page_header_preview/playground.html.erb
@@ -0,0 +1,32 @@
+<%= render Primer::OpenProject::PageHeader.new do |header| %>
+  <%= header.with_title(variant: variant) { title } %>
+  <%= 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 with_parent_link %>
+  <% if with_actions %>
+    <% header.with_actions do %>
+      <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
+        <% component.with_show_button { "Menu" } %>
+        <% component.with_item(label: "Item", tag: :button, value: "") %>
+        <% component.with_item(
+             label: "Show dialog",
+             tag: :button,
+             content_arguments: { "data-show-dialog-id": "my-dialog" },
+             value: "",
+             scheme: :danger
+           ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if with_context_bar_actions %>
+    <% header.with_context_bar_actions do %>
+      <%= render(Primer::Beta::IconButton.new(
+        scheme: :default,
+        size: :small,
+        icon: "pencil",
+        "aria-label": "aria_label"
+      )) %>
+    <% end %>
+  <% end %>
+<% end %>