openproject-primer_view_components 0.13.1 → 0.14.0

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -151,13 +151,15 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             }
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).call(this, event, item);
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, event, item);
-            // Pressing the space key on a button will cause the page to scroll unless preventDefault()
-            // is called. Unfortunately, calling preventDefault() will also skip form submission. The
-            // code below therefore only calls preventDefault() if the button submits a form and the
-            // button is being activated by the space key.
-            if (item.getAttribute('type') === 'submit' && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
+            // Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
+            // is called. While calling preventDefault() appears to have no effect on link navigation, it skips
+            // form submission. The code below therefore only calls preventDefault() if the button has been
+            // activated by the space key, and manually submits the form if the button is a submit button.
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
                 event.preventDefault();
-                (_b = item.closest('form')) === null || _b === void 0 ? void 0 : _b.submit();
+                if (item.getAttribute('type') === 'submit') {
+                    (_b = item.closest('form')) === null || _b === void 0 ? void 0 : _b.submit();
+                }
             }
             return;
         }

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -216,13 +216,16 @@ export class ActionMenuElement extends HTMLElement {
       this.#activateItem(event, item)
       this.#handleItemActivated(event, item)
 
-      // Pressing the space key on a button will cause the page to scroll unless preventDefault()
-      // is called. Unfortunately, calling preventDefault() will also skip form submission. The
-      // code below therefore only calls preventDefault() if the button submits a form and the
-      // button is being activated by the space key.
-      if (item.getAttribute('type') === 'submit' && this.#isKeyboardActivationViaSpace(event)) {
+      // Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
+      // is called. While calling preventDefault() appears to have no effect on link navigation, it skips
+      // form submission. The code below therefore only calls preventDefault() if the button has been
+      // activated by the space key, and manually submits the form if the button is a submit button.
+      if (this.#isKeyboardActivationViaSpace(event)) {
         event.preventDefault()
-        item.closest('form')?.submit()
+
+        if (item.getAttribute('type') === 'submit') {
+          item.closest('form')?.submit()
+        }
       }
 
       return

data/app/components/primer/alpha/overlay.css

@@ -1 +1 @@
-anchored-position[popover]{background:none;border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}anchored-position.not-anchored::-webkit-backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}
+anchored-position[popover]{background:none;border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position.not-anchored::-webkit-backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}

data/app/components/primer/alpha/overlay.css.json

@@ -3,7 +3,6 @@
   "selectors": [
     "anchored-position[popover]",
     ".Overlay",
-    "anchored-position[popover]:not(.\\:popover-open)",
     "anchored-position.not-anchored::-webkit-backdrop",
     "anchored-position.not-anchored::backdrop"
   ]

data/app/components/primer/alpha/overlay.css.map

@@ -1 +1 @@
-{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BAOE,eAAgB,CANhB,cAAe,CAIf,UAAW,CADX,eAAgB,CAEhB,gBAAiB,CAJjB,SAAU,CACV,iBAKF,CAEA,SACE,YACF,CAEA,gDACE,YACF,CAEA,iDACE,2EACF,CAFA,yCACE,2EACF,CAGA,kCACE,gDACE,cACF,CACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  inset: auto;\n  overflow: visible;\n  background: none;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position[popover]:not(.\\:popover-open) {\n  display: none;\n}\n\nanchored-position.not-anchored::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\n/* This reverts the declaration above for native popover, where `:popover-open` is supported */\n@supports selector(:popover-open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n    display: revert;\n  }\n}\n"]}
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BAME,eAAgB,CALhB,cAAe,CAGf,eAAgB,CAChB,gBAAiB,CAHjB,SAAU,CACV,iBAIF,CAEA,SACE,YACF,CAEA,iDACE,2EACF,CAFA,yCACE,2EACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  overflow: visible;\n  background: none;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position.not-anchored::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n"]}

data/app/components/primer/alpha/overlay.pcss

@@ -3,7 +3,6 @@ anchored-position[popover] {
   padding: 0;
   position: absolute;
   min-width: 192px;
-  inset: auto;
   overflow: visible;
   background: none;
 }
@@ -12,17 +11,6 @@ anchored-position[popover] {
   display: flex;
 }
 
-anchored-position[popover]:not(.\:popover-open) {
-  display: none;
-}
-
 anchored-position.not-anchored::backdrop {
   background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
 }
-
-/* This reverts the declaration above for native popover, where `:popover-open` is supported */
-@supports selector(:popover-open) {
-  anchored-position[popover]:not(.\:popover-open) {
-    display: revert;
-  }
-}

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:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.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);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}
+.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}

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

@@ -2,10 +2,13 @@
   "name": "open_project/page_header",
   "selectors": [
     ".PageHeader",
+    ".PageHeader-titleBar",
     ".PageHeader-title",
     ".PageHeader-title--large",
     ".PageHeader-description",
     ".PageHeader-actions",
-    ".PageHeader-actions+.PageHeader-description"
+    ".PageHeader-actions+.PageHeader-description",
+    ".PageHeader-breadcrumbs",
+    ".PageHeader-backButton"
   ]
 }

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,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDASF,CAHE,4BARF,YASI,eAEJ,CADE,CAGF,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","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: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\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  order: 2;\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  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\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,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"]}

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

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

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

@@ -5,19 +5,24 @@
   padding-bottom: var(--stack-padding-condensed);
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
-  flex-flow: row wrap;
-  justify-content: flex-end; /* Keep actions right aligned. */
+  flex-flow: column;
 
   @media (max-width: 767.98px) {
     border-bottom: 0;
   }
 }
 
+.PageHeader-titleBar {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-end;
+  align-items: center; /* Keep back button vertically aligned. */
+}
+
 .PageHeader-title {
   font-size: 24px;
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
-  order: 0;
 }
 
 .PageHeader-title--large {
@@ -29,17 +34,25 @@
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
   flex: 1 100%;
-  order: 2;
 }
 
 /* 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);
-  align-self: center;
   justify-content: flex-end;
-  order: 1;
 
   & + .PageHeader-description {
     margin-top: var(--base-size-4);
   }
 }
+
+.PageHeader-breadcrumbs {
+  display: block;
+  width: 100%;
+  margin-bottom: var(--base-size-8);
+}
+
+.PageHeader-backButton {
+  margin-top: 2px; /* to center align with label */
+  margin-right: var(--base-size-4);
+}

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

@@ -13,6 +13,20 @@ module Primer
         DEFAULT_HEADER_VARIANT
       ].freeze
 
+      DEFAULT_BACK_BUTTON_SIZE = :medium
+      BACK_BUTTON_SIZE_OPTIONS = [
+        :small,
+        DEFAULT_HEADER_VARIANT,
+        :large
+      ].freeze
+
+      DEFAULT_BACK_BUTTON_ICON = "arrow-left"
+      BACK_BUTTON_ICON_OPTIONS = [
+        DEFAULT_BACK_BUTTON_ICON,
+        "chevron-left",
+        "triangle-left"
+      ].freeze
+
       status :open_project
 
       # The title of the page header
@@ -50,6 +64,45 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      # Optional back button prepend the title
+      #
+      # @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 %>
+      renders_one :back_button, lambda { |
+        size: DEFAULT_BACK_BUTTON_SIZE,
+        icon: DEFAULT_BACK_BUTTON_ICON,
+        **system_arguments
+      |
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :a
+        system_arguments[:scheme] = :invisible
+        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")
+
+        Primer::Beta::IconButton.new(**system_arguments)
+      }
+
+      # 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")
+        render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
+          items.each do |item|
+            item = anchor_string_to_object(item) if anchor_tag_string?(item)
+
+            if item.is_a?(String)
+              breadcrumbs.with_item(href: "#") { item }
+            else
+              breadcrumbs.with_item(href: item[:href]) { item[:text] }
+            end
+          end
+        end
+      }
+
       def initialize(**system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
 
@@ -64,6 +117,23 @@ module Primer
       def render?
         title?
       end
+
+      private
+
+      # transform anchor tag strings to {href, text} objects
+      # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
+      def anchor_string_to_object(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
+
+      # Check if the item is an anchor tag string e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
+      def anchor_tag_string?(item)
+        item.is_a?(String) && item.start_with?("\u003c")
+      end
     end
   end
 end

data/app/components/primer/primer.d.ts

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element';
-import '@oddbird/popover-polyfill';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.js

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element';
-import '@oddbird/popover-polyfill';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.pcss

@@ -1,5 +1,3 @@
-@import "@oddbird/popover-polyfill/dist/popover.css";
-
 /* CSS component styles here */
 
 /* alpha */

data/app/components/primer/primer.ts

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element'
-import '@oddbird/popover-polyfill'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'

data/lib/primer/static/generate_info_arch.rb

@@ -70,10 +70,15 @@ module Primer
                 render_erb_ignoring_markdown_code_fences(docs.base_docstring)
               end
 
+            accessibility_docs =
+              if (accessibility_tag_text = docs.tags(:accessibility)&.first&.text)
+                render_erb_ignoring_markdown_code_fences(accessibility_tag_text)
+              end
+
             memo[component] = {
               "fully_qualified_name" => component.name,
               "description" => description,
-              "accessibility_docs" => docs.tags(:accessibility)&.first&.text,
+              "accessibility_docs" => accessibility_docs,
               "is_form_component" => docs.manifest_entry.form_component?,
               "is_published" => docs.manifest_entry.published?,
               "requires_js" => docs.manifest_entry.requires_js?,

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 13
-      PATCH = 1
+      MINOR = 14
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/open_project/page_header_preview.rb

@@ -18,10 +18,24 @@ module Primer
       # @param variant [Symbol] select [medium, large]
       # @param title [String] text
       # @param description [String] text
-      def playground(variant: :medium, title: "Hello", description: "Last updated 5 minutes ago by XYZ.")
+      # @param with_back_button [Boolean]
+      # @param back_button_size [Symbol] select [small, medium, large]
+      # @param with_breadcrumbs [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
+      )
+        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
       end
 
@@ -37,6 +51,30 @@ module Primer
       def actions
         render_with_template(locals: {})
       end
+
+      # @label With back button
+      # @param href [String] text
+      # @param size [Symbol] select [small, medium, large]
+      # @param icon [String] select ["arrow-left", "chevron-left", "triangle-left"]
+      def back_button(href: "#", size: :medium, icon: "arrow-left")
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "Hello" }
+          header.with_back_button(href: href, size: size, icon: icon, 'aria-label': "Back")
+        end
+      end
+
+      # @label With breadcrumbs
+      def breadcrumbs
+        breadcrumb_items = [
+          { href: "/foo", text: "Foo" },
+          "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e",
+          "Baz"
+        ]
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "A title" }
+          header.with_breadcrumbs(breadcrumb_items)
+        end
+      end
     end
   end
 end

data/static/classes.json

@@ -435,6 +435,12 @@
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-backButton": [
+    "Primer::OpenProject::PageHeader"
+  ],
+  "PageHeader-breadcrumbs": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],
@@ -444,6 +450,9 @@
   "PageHeader-title--large": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-titleBar": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "Popover": [
     "Primer::Beta::Popover"
   ],

data/static/constants.json

@@ -1360,6 +1360,18 @@
     ]
   },
   "Primer::OpenProject::PageHeader": {
+    "BACK_BUTTON_ICON_OPTIONS": [
+      "arrow-left",
+      "chevron-left",
+      "triangle-left"
+    ],
+    "BACK_BUTTON_SIZE_OPTIONS": [
+      "small",
+      "medium",
+      "large"
+    ],
+    "DEFAULT_BACK_BUTTON_ICON": "arrow-left",
+    "DEFAULT_BACK_BUTTON_SIZE": "medium",
     "DEFAULT_HEADER_VARIANT": "medium",
     "HEADER_VARIANT_OPTIONS": [
       "large",

data/static/info_arch.json

@@ -7062,7 +7062,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::TabNav",
     "description": "Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::TabPanels{{/link_to_component}} instead.",
-    "accessibility_docs": "- By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional\n  accessibility considerations.",
+    "accessibility_docs": "- By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}} for additional\n  accessibility considerations.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -8461,7 +8461,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::UnderlineNav",
     "description": "Use `UnderlineNav` to style navigation links with a minimal\nunderlined selected state, typically placed at the top\nof the page.\n\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::UnderlinePanels{{/link_to_component}} instead.",
-    "accessibility_docs": "- By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional\n  accessibility considerations.",
+    "accessibility_docs": "- By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}} for additional\n  accessibility considerations.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -10189,7 +10189,7 @@
       {
         "fully_qualified_name": "Primer::Beta::BorderBox::Header",
         "description": "`BorderBox::Header` is used inside `BorderBox` to render its header slot.",
-        "accessibility_docs": "When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>",
+        "accessibility_docs": "When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. [Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
         "is_form_component": false,
         "is_published": true,
         "requires_js": false,
@@ -11589,7 +11589,7 @@
   {
     "fully_qualified_name": "Primer::Beta::Heading",
     "description": "`Heading` should be used to communicate page organization and hierarchy.\n\n- Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.\n- Use `Heading` as the title of a section or sub section.\n- Do not use `Heading` for styling alone. For simply styling text, consider using {{#link_to_component}}Primer::Beta::Text{{/link_to_component}} with relevant {{link_to_typography_docs}}\n  such as `font_size` and `font_weight`.\n- Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.",
-    "accessibility_docs": "While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.\nWhen text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be\nconsistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)\n\nHeadings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.\n<%= link_to_heading_practices %>",
+    "accessibility_docs": "While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.\nWhen text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be\nconsistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)\n\nHeadings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -13751,7 +13751,7 @@
   {
     "fully_qualified_name": "Primer::Beta::Subhead",
     "description": "Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.\n\n- Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.\n- Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.\n- Use the actions slot to render a related action to the right of the heading. Use {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}.",
-    "accessibility_docs": "The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.\n<%= link_to_heading_practices %>",
+    "accessibility_docs": "The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -14288,7 +14288,7 @@
   {
     "fully_qualified_name": "Primer::BlankslateComponent",
     "description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
-    "accessibility_docs": "`Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.\n<%= link_to_heading_practices %>",
+    "accessibility_docs": "`Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -15472,10 +15472,65 @@
             "description": "{{link_to_system_arguments_docs}}"
           }
         ]
+      },
+      {
+        "name": "back_button",
+        "description": "Optional back button prepend the title",
+        "parameters": [
+          {
+            "name": "size",
+            "type": "Symbol",
+            "default": "N/A",
+            "description": "One of `:large`, `:medium`, or `:small`."
+          },
+          {
+            "name": "icon",
+            "type": "String",
+            "default": "N/A",
+            "description": "One of `arrow-left`, `chevron-left`, or `triangle-left`."
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "breadcrumbs",
+        "description": "Optional breadcrumbs above the title row",
+        "parameters": [
+          {
+            "name": "items",
+            "type": "Array<String, Hash>",
+            "default": "N/A",
+            "description": "Items is an array of strings, hash {href, text} or an anchor tag string"
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
       }
     ],
     "methods": [
+      {
+        "name": "anchor_string_to_object",
+        "description": "transform anchor tag strings to {href, text} objects\ne.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "anchor_tag_string?",
+        "description": "Check if the item is an anchor tag string e.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
+        "parameters": [
 
+        ]
+      }
     ],
     "previews": [
       {
@@ -15529,6 +15584,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/back_button",
+        "name": "back_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/breadcrumbs",
+        "name": "breadcrumbs",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

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