openproject-primer_view_components 0.15.0 → 0.16.0

data/app/components/primer/open_project/page_header.css

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem)}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);width:100%}.PageHeader-backButton{margin-right:var(--base-size-4,.25rem);margin-top:2px}
+.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{display:flex;justify-content:flex-end;margin:0 0 0 var(--base-size-4,.25rem)}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);padding-bottom:var(--base-size-4,.25rem);width:100%}.PageHeader-backButton{margin-right:var(--base-size-4,.25rem);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto;margin-bottom:var(--base-size-4,.25rem)}.PageHeader-contextBarActions{margin:0 0 0 var(--base-size-4,.25rem)}

data/app/components/primer/open_project/page_header.css.json

@@ -2,6 +2,7 @@
   "name": "open_project/page_header",
   "selectors": [
     ".PageHeader",
+    ".PageHeader-contextBar",
     ".PageHeader-titleBar",
     ".PageHeader-title",
     ".PageHeader-title--large",
@@ -9,6 +10,8 @@
     ".PageHeader-actions",
     ".PageHeader-actions+.PageHeader-description",
     ".PageHeader-breadcrumbs",
-    ".PageHeader-backButton"
+    ".PageHeader-backButton",
+    ".PageHeader-parentLink",
+    ".PageHeader-contextBarActions"
   ]
 }

data/app/components/primer/open_project/page_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAQF,CAHE,4BAPF,YAQI,eAEJ,CADE,CAGF,qBAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAEF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAEF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAGF,CAGA,oBAEE,wBAAyB,CADzB,sFAMF,CAHE,4CACE,oCACF,CAGF,wBACE,aAAc,CAEd,sCAAiC,CADjC,UAEF,CAEA,uBAEE,sCAAgC,CADhC,cAEF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  justify-content: flex-end;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-backButton {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAQF,CAHE,4BAPF,YAQI,eAEJ,CADE,CAUF,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAEF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAEF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAGF,CAGA,oBAGE,YAAa,CADb,wBAAyB,CADzB,sCAOF,CAHE,4CACE,oCACF,CAGF,wBACE,aAAc,CAEd,sCAAiC,CACjC,wCAAkC,CAFlC,UAGF,CAEA,uBAEE,sCAAgC,CADhC,cAEF,CAEA,uBACE,aAAc,CACd,uCACF,CAEA,8BACE,sCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: 0 0 0 var(--base-size-4);\n  justify-content: flex-end;\n  display: flex;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n  margin-bottom: var(--base-size-8);\n  padding-bottom: var(--base-size-4);\n}\n\n.PageHeader-backButton {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n  margin-bottom: var(--base-size-4);\n}\n\n.PageHeader-contextBarActions {\n  margin: 0 0 0 var(--base-size-4);\n}"]}

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

@@ -1,9 +1,17 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= breadcrumbs %>
+  <% if parent_link || breadcrumbs || context_bar_actions %>
+    <div class="PageHeader-contextBar">
+      <%= parent_link %>
+      <%= breadcrumbs %>
+      <%= context_bar_actions %>
+    </div>
+  <% end %>
+
   <div class="PageHeader-titleBar">
     <%= back_button %>
     <%= title %>
     <%= actions %>
   </div>
+
   <%= description %>
 <% end %>

data/app/components/primer/open_project/page_header.pcss

@@ -12,6 +12,13 @@
   }
 }
 
+.PageHeader-contextBar {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 .PageHeader-titleBar {
   display: flex;
   flex-flow: row;
@@ -38,8 +45,9 @@
 
 /* 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;
+  display: flex;
 
   & + .PageHeader-description {
     margin-top: var(--base-size-4);
@@ -50,9 +58,19 @@
   display: block;
   width: 100%;
   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 {
+  flex: 1 1 auto;
+  margin-bottom: var(--base-size-4);
+}
+
+.PageHeader-contextBarActions {
+  margin: 0 0 0 var(--base-size-4);
+}

data/app/components/primer/open_project/page_header.rb

@@ -27,6 +27,11 @@ module Primer
         "triangle-left"
       ].freeze
 
+      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
 
       # The title of the page header
@@ -64,7 +69,21 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      # 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|
+        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)
+      }
+
       # 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) %>
@@ -80,16 +99,35 @@ module Primer
         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
+      # 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|
+        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
+      # 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 %>
       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)

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 15
+      MINOR = 16
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/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 %>
+

data/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 %>

data/previews/primer/open_project/page_header_preview.rb

@@ -21,22 +21,32 @@ module Primer
       # @param with_back_button [Boolean]
       # @param back_button_size [Symbol] select [small, medium, large]
       # @param with_breadcrumbs [Boolean]
+      # @param with_actions [Boolean]
+      # @param with_context_bar_actions [Boolean]
+      # @param with_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,
+        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
-        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
@@ -52,7 +62,11 @@ module Primer
         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"]
@@ -63,7 +77,11 @@ module Primer
         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" },
@@ -75,6 +93,27 @@ module Primer
           header.with_breadcrumbs(breadcrumb_items)
         end
       end
+
+      # @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

data/static/classes.json

@@ -441,9 +441,18 @@
   "PageHeader-breadcrumbs": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-contextBar": [
+    "Primer::OpenProject::PageHeader"
+  ],
+  "PageHeader-contextBarActions": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-parentLink": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-title": [
     "Primer::OpenProject::PageHeader"
   ],

data/static/constants.json

@@ -1370,9 +1370,25 @@
       "medium",
       "large"
     ],
+    "DEFAULT_BACK_BUTTON_DISPLAY": [
+      "none",
+      "flex"
+    ],
     "DEFAULT_BACK_BUTTON_ICON": "arrow-left",
     "DEFAULT_BACK_BUTTON_SIZE": "medium",
+    "DEFAULT_BREADCRUMBS_DISPLAY": [
+      "none",
+      "flex"
+    ],
+    "DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY": [
+      "block",
+      "none"
+    ],
     "DEFAULT_HEADER_VARIANT": "medium",
+    "DEFAULT_PARENT_LINK_DISPLAY": [
+      "block",
+      "none"
+    ],
     "HEADER_VARIANT_OPTIONS": [
       "large",
       "medium"

data/static/info_arch.json

@@ -15473,9 +15473,21 @@
           }
         ]
       },
+      {
+        "name": "context_bar_actions",
+        "description": "Context Bar Actions\nBy default shown on narrow screens. Can be overridden with system_argument: display",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
       {
         "name": "back_button",
-        "description": "Optional back button prepend the title",
+        "description": "Optional back button prepend the title\nBy default shown on wider screens. Can be overridden with system_argument: display",
         "parameters": [
           {
             "name": "size",
@@ -15497,9 +15509,21 @@
           }
         ]
       },
+      {
+        "name": "parent_link",
+        "description": "Optional parent link in the context area\nBy default shown on narrow screens. Can be overridden with system_argument: display",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
       {
         "name": "breadcrumbs",
-        "description": "Optional breadcrumbs above the title row",
+        "description": "Optional breadcrumbs above the title row\nBy default shown on wider screens. Can be overridden with system_argument: display",
         "parameters": [
           {
             "name": "items",
@@ -15610,6 +15634,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/parent_link",
+        "name": "parent_link",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/context_bar_actions",
+        "name": "context_bar_actions",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

@@ -4781,6 +4781,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/parent_link",
+        "name": "parent_link",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/context_bar_actions",
+        "name": "context_bar_actions",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.15.0
+  version: 0.16.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-11-16 00:00:00.000000000 Z
+date: 2023-11-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -852,6 +852,8 @@ files:
 - previews/primer/open_project/grid_layout_preview.rb
 - previews/primer/open_project/page_header_preview.rb
 - previews/primer/open_project/page_header_preview/actions.html.erb
+- previews/primer/open_project/page_header_preview/context_bar_actions.html.erb
+- previews/primer/open_project/page_header_preview/playground.html.erb
 - previews/primer/url_helpers.rb
 - static/arguments.json
 - static/assets/view-components.svg