openproject-primer_view_components 0.30.1 → 0.32.0

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

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader-contextBar{margin-bottom:var(--base-size-8)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium);font-weight:var(--base-text-weight-normal)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}
+.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--noBorder{border-bottom:none;padding-bottom:0}.PageHeader-contextBar{margin-bottom:var(--base-size-8)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium);font-weight:var(--base-text-weight-normal)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}.PageHeader-tabNav{margin-bottom:0;margin-top:var(--stack-gap-normal)}

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

@@ -2,6 +2,7 @@
   "name": "open_project/page_header",
   "selectors": [
     ".PageHeader",
+    ".PageHeader--noBorder",
     ".PageHeader-contextBar",
     ".PageHeader-titleBar",
     ".PageHeader-title",
@@ -10,6 +11,7 @@
     ".PageHeader-actions",
     ".PageHeader-breadcrumbs",
     ".PageHeader-leadingAction",
-    ".PageHeader-parentLink"
+    ".PageHeader-parentLink",
+    ".PageHeader-tabNav"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,uBAKE,gCACF,CAEA,4CAJE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAWF,CANA,qBAKE,iCACF,CAEA,kBAGE,aAAc,CAFd,uCAAwC,CACxC,0CAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,cAEF,CAEA,uBACE,aACF","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\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\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  margin-bottom: var(--space-xsmall);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\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.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\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}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,sBACE,kBAAmB,CACnB,gBACF,CAEA,uBAKE,gCACF,CAEA,4CAJE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAWF,CANA,qBAKE,iCACF,CAEA,kBAGE,aAAc,CAFd,uCAAwC,CACxC,0CAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,cAEF,CAEA,uBACE,aACF,CAEA,mBAEE,eAAgB,CADhB,kCAEF","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\n.PageHeader--noBorder {\n  border-bottom: none;\n  padding-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\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  margin-bottom: var(--space-xsmall);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\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.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\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}\n\n.PageHeader-tabNav {\n  margin-top: var(--stack-gap-normal);\n  margin-bottom: 0;\n}\n"]}

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

@@ -27,4 +27,5 @@
   </div>
 
   <%= description %>
+  <%= tab_nav %>
 <% end %>

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

@@ -8,6 +8,11 @@
   flex-flow: column;
 }
 
+.PageHeader--noBorder {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
 .PageHeader-contextBar {
   display: flex;
   flex-flow: row;
@@ -60,3 +65,8 @@
 .PageHeader-parentLink {
   flex: 1 1 auto;
 }
+
+.PageHeader-tabNav {
+  margin-top: var(--stack-gap-normal);
+  margin-bottom: 0;
+}

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

@@ -205,6 +205,19 @@ module Primer
         end
       }
 
+      # Optional tabs nav at the bottom of the page header
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :tab_nav, lambda { |**system_arguments, &block|
+        @system_arguments[:classes] = class_names(@system_arguments[:classes], "PageHeader--noBorder")
+
+        system_arguments = deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-tabNav")
+
+        Primer::Alpha::TabNav.new(**system_arguments, &block)
+      }
+
       # @param mobile_menu_label [String] The tooltip label of the mobile menu
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(mobile_menu_label: I18n.t("label_more"), **system_arguments)
@@ -237,7 +250,7 @@ module Primer
 
       private
 
-      def set_action_arguments(system_arguments, scheme: nil, button_action: false)
+      def set_action_arguments(system_arguments, scheme: nil)
         system_arguments[:ml] ||= 2
         system_arguments[:display] = [:none, :flex]
         system_arguments[:size] = :medium

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

@@ -0,0 +1 @@
+.SubHeader{align-items:center;display:grid;flex-wrap:wrap;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;row-gap:16px}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom;margin-bottom:16px}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}

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

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/sub_header",
+  "selectors": [
+    ".SubHeader",
+    ".SubHeader-rightPane",
+    ".SubHeader-middlePane",
+    ".SubHeader-bottomPane",
+    ".SubHeader-leftPane",
+    ".SubHeader-filterContainer"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAKI,kBAAmB,CAJnB,YAAa,CAOb,cAAe,CANf,8DAA+D,CAC/D,mCAAoC,CACpC,YAKJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBAAiB,CACjB,kBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAEJ,CAEA,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    row-gap: 16px;\n    align-items: center;\n\n    /* When the filter input is expanded in mobile, we switch to a flex layout */\n    flex-wrap: wrap;\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n    margin-bottom: 16px;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n}\n"]}

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

@@ -0,0 +1,25 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <div class="SubHeader-leftPane">
+    <%= render @filter_container do %>
+      <%= filter_input %>
+      <%= render @mobile_filter_cancel do
+        I18n.t("button_cancel")
+      end if @mobile_filter_cancel.present? %>
+    <% end if @filter_container.present? %>
+    <%= render @mobile_filter_trigger if @mobile_filter_trigger.present? %>
+    <%= filter_button %>
+  </div>
+  <div class="SubHeader-middlePane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
+    <%= text %>
+  </div>
+  <div class="SubHeader-rightPane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
+    <% actions.each do |action| %>
+      <%= action %>
+    <% end %>
+  </div>
+  <% if bottom_pane_component.present? %>
+    <div class="SubHeader-bottomPane">
+      <%= bottom_pane_component %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,43 @@
+/* CSS for SubHeader  */
+
+.SubHeader {
+    display: grid;
+    grid-template-areas: "left middle right" "bottom bottom bottom";
+    grid-template-columns: auto 1fr auto;
+    row-gap: 16px;
+    align-items: center;
+
+    /* When the filter input is expanded in mobile, we switch to a flex layout */
+    flex-wrap: wrap;
+}
+
+.SubHeader-rightPane {
+    grid-area: right;
+    display: flex;
+    align-items: center;
+    column-gap: 12px;
+}
+
+.SubHeader-middlePane {
+    grid-area: middle;
+    text-align: center;
+}
+
+.SubHeader-bottomPane {
+    grid-area: bottom;
+    margin-bottom: 16px;
+}
+
+.SubHeader-leftPane {
+    grid-area: left;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 12px;
+}
+
+.SubHeader-filterContainer {
+    display: flex;
+    width: 100%;
+    gap: 8px;
+}

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

@@ -0,0 +1,141 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # The SubHeader contains specific actions to modify the page content below, e.g a filter button or a create button
+    # It should not be used stand alone, but in combination with a PageHeader, either as a direct sibling or as part of a tab content
+    class SubHeader < Primer::Component
+      status :open_project
+
+      HIDDEN_FILTER_TARGET_SELECTOR = "sub-header.hiddenItemsOnExpandedFilter"
+      SHOWN_FILTER_TARGET_SELECTOR = "sub-header.shownItemsOnExpandedFilter"
+
+      # A button or custom content that will render on the right-hand side of the component.
+      #
+      # To render a button, call the `with_button` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Button) %>.
+      #
+      # To render custom content, call the `with_button_component` method and pass a block that returns HTML.
+      renders_many :actions, types: {
+        button: {
+          renders: lambda { |icon: nil, **kwargs|
+            if icon
+              Primer::Beta::IconButton.new(icon: icon, **kwargs)
+            else
+              Primer::Beta::Button.new(**kwargs)
+            end
+          },
+        },
+        component: {
+          # A generic slot to render whatever component you like on the right side
+          renders: lambda { |**kwargs|
+            deny_tag_argument(**kwargs)
+            kwargs[:tag] = :div
+            Primer::BaseComponent.new(**kwargs)
+          },
+        }
+      }
+
+      renders_one :filter_input, lambda { |name:, label:, **system_arguments|
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "SubHeader-filterInput"
+        )
+        system_arguments[:placeholder] ||= I18n.t("button_filter")
+        system_arguments[:leading_visual] ||= { icon: :search }
+        system_arguments[:visually_hide_label] ||= true
+
+        system_arguments[:data] ||= {}
+        system_arguments[:data][:target]= "sub-header.filterInput"
+
+
+        @mobile_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
+                                                              display: [:inline_flex, :none],
+                                                              aria: {label: label },
+                                                              "data-action": "click:sub-header#expandFilterInput",
+                                                              "data-targets": HIDDEN_FILTER_TARGET_SELECTOR)
+
+        @mobile_filter_cancel = Primer::Beta::Button.new(scheme: :invisible,
+                                                         display: :none,
+                                                         data: {
+                                                           targets: SHOWN_FILTER_TARGET_SELECTOR,
+                                                           action: "click:sub-header#collapseFilterInput"})
+
+
+        Primer::Alpha::TextField.new(name: name, label: label, **system_arguments)
+      }
+
+
+      # A button or custom content that will render on the left-hand side of the component, next to the filter input.
+      #
+      # To render a button, call the `with_filter_button` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Button) %>.
+      #
+      # To render custom content, call the `with_filter_component` method and pass a block that returns HTML.
+      renders_one :filter_button, types: {
+        button: {
+          renders: lambda { |icon: nil, **kwargs|
+            kwargs[:classes] = class_names(
+              kwargs[:classes],
+              "SubHeader-filterButton"
+            )
+            kwargs[:data] ||= {}
+            kwargs[:data][:targets] ||= HIDDEN_FILTER_TARGET_SELECTOR
+
+            if icon
+              Primer::Beta::IconButton.new(icon: icon, **kwargs)
+            else
+              Primer::Beta::Button.new(**kwargs)
+            end
+          },
+
+          as: :filter_button
+        },
+        component: {
+          # A generic slot to render a custom filter component
+          renders: lambda { |**kwargs|
+            deny_tag_argument(**kwargs)
+            kwargs[:tag] = :div
+            kwargs[:data] ||= {}
+            kwargs[:data][:targets] ||= HIDDEN_FILTER_TARGET_SELECTOR
+
+            Primer::BaseComponent.new(**kwargs)
+          },
+
+          as: :filter_component
+        }
+      }
+
+      renders_one :text, lambda { |**system_arguments|
+        system_arguments[:font_weight] ||= :bold
+
+        Primer::Beta::Text.new(**system_arguments)
+
+      }
+
+      # A slot for a generic component which will be shown in a second row below the rest, spanning the whole width
+      renders_one :bottom_pane_component, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+
+        Primer::BaseComponent.new(**system_arguments)
+
+      }
+
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :"sub-header"
+
+        @filter_container = Primer::BaseComponent.new(tag: :div,
+                                                      classes: "SubHeader-filterContainer",
+                                                      display: [:none, :flex],
+                                                      data: { targets: SHOWN_FILTER_TARGET_SELECTOR })
+
+        @system_arguments[:classes] = class_names(
+          "SubHeader",
+          system_arguments[:classes]
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+declare class SubHeaderElement extends HTMLElement {
+    filterInput: HTMLElement;
+    hiddenItemsOnExpandedFilter: HTMLElement[];
+    shownItemsOnExpandedFilter: HTMLElement[];
+    expandFilterInput(): void;
+    collapseFilterInput(): void;
+}
+declare global {
+    interface Window {
+        SubHeaderElement: typeof SubHeaderElement;
+    }
+}
+export {};

data/app/components/primer/open_project/sub_header_element.js

@@ -0,0 +1,44 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target, targets } from '@github/catalyst';
+let SubHeaderElement = class SubHeaderElement extends HTMLElement {
+    expandFilterInput() {
+        for (const item of this.hiddenItemsOnExpandedFilter) {
+            item.classList.add('d-none');
+        }
+        for (const item of this.shownItemsOnExpandedFilter) {
+            item.classList.remove('d-none');
+        }
+        this.classList.add('d-flex');
+        this.filterInput.focus();
+    }
+    collapseFilterInput() {
+        for (const item of this.hiddenItemsOnExpandedFilter) {
+            item.classList.remove('d-none');
+        }
+        for (const item of this.shownItemsOnExpandedFilter) {
+            item.classList.add('d-none');
+        }
+        this.classList.remove('d-flex');
+    }
+};
+__decorate([
+    target
+], SubHeaderElement.prototype, "filterInput", void 0);
+__decorate([
+    targets
+], SubHeaderElement.prototype, "hiddenItemsOnExpandedFilter", void 0);
+__decorate([
+    targets
+], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
+SubHeaderElement = __decorate([
+    controller
+], SubHeaderElement);
+if (!window.customElements.get('sub-header')) {
+    window.SubHeaderElement = SubHeaderElement;
+    window.customElements.define('sub-header', SubHeaderElement);
+}

data/app/components/primer/open_project/sub_header_element.ts

@@ -0,0 +1,45 @@
+import {controller, target, targets} from '@github/catalyst'
+
+@controller
+class SubHeaderElement extends HTMLElement {
+  @target filterInput: HTMLElement
+  @targets hiddenItemsOnExpandedFilter: HTMLElement[]
+  @targets shownItemsOnExpandedFilter: HTMLElement[]
+
+  expandFilterInput() {
+    for (const item of this.hiddenItemsOnExpandedFilter) {
+      item.classList.add('d-none')
+    }
+
+    for (const item of this.shownItemsOnExpandedFilter) {
+      item.classList.remove('d-none')
+    }
+
+    this.classList.add('d-flex')
+
+    this.filterInput.focus()
+  }
+
+  collapseFilterInput() {
+    for (const item of this.hiddenItemsOnExpandedFilter) {
+      item.classList.remove('d-none')
+    }
+
+    for (const item of this.shownItemsOnExpandedFilter) {
+      item.classList.add('d-none')
+    }
+
+    this.classList.remove('d-flex')
+  }
+}
+
+declare global {
+  interface Window {
+    SubHeaderElement: typeof SubHeaderElement
+  }
+}
+
+if (!window.customElements.get('sub-header')) {
+  window.SubHeaderElement = SubHeaderElement
+  window.customElements.define('sub-header', SubHeaderElement)
+}

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

@@ -24,3 +24,4 @@ import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
+import './open_project/sub_header_element';

data/app/components/primer/primer.js

@@ -24,3 +24,4 @@ import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
+import './open_project/sub_header_element';

data/app/components/primer/primer.pcss

@@ -44,3 +44,4 @@
 @import "./open_project/drag_handle.pcss";
 @import "./open_project/border_grid.pcss";
 @import "./open_project/input_group.pcss";
+@import "./open_project/sub_header.pcss";

data/app/components/primer/primer.ts

@@ -24,3 +24,4 @@ import '../../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
 import './open_project/page_header_element'
 import './open_project/zen_mode_button'
+import './open_project/sub_header_element'

data/lib/primer/view_components/version.rb

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

data/previews/primer/open_project/page_header_preview/playground.html.erb

@@ -14,4 +14,11 @@
       <% end %>
     <% end %>
   <% end %>
+  <% if with_tab_nav %>
+    <% header.with_tab_nav(label: "label") do |nav|%>
+      <% nav.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      <% nav.with_tab(href: "#") { "Tab 2" } %>
+      <% nav.with_tab(href: "#") { "Tab 3" } %>
+    <% end %>
+  <% end %>
 <% end %>

data/previews/primer/open_project/page_header_preview.rb

@@ -23,12 +23,14 @@ module Primer
       # @param description [String] text
       # @param with_leading_action [Symbol] octicon
       # @param with_actions [Boolean]
+      # @param with_tab_nav [Boolean]
       def playground(
         variant: :medium,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
         with_leading_action: :"none",
-        with_actions: true
+        with_actions: true,
+        with_tab_nav: false
       )
         breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
 
@@ -37,7 +39,8 @@ module Primer
                                        description: description,
                                        with_leading_action: with_leading_action,
                                        with_actions: with_actions,
-                                       breadcrumb_items: breadcrumb_items })
+                                       breadcrumb_items: breadcrumb_items,
+                                       with_tab_nav: with_tab_nav})
       end
 
       # @label Large title
@@ -167,6 +170,23 @@ module Primer
           header.with_breadcrumbs(breadcrumb_items, selected_item_font_weight: :normal)
         end
       end
+
+      # @label With tab nav
+      #
+      def tab_nav
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "Hello" }
+          header.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
+          header.with_description { "Last updated 5 minutes ago by XYZ." }
+          header.with_tab_nav(label: "label") do |nav|
+            Array.new(3) do |i|
+              nav.with_tab(selected: i.zero? , href: "#") do |tab|
+                tab.with_text { "Tab #{i + 1}" }
+              end
+            end
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/open_project/sub_header_preview/action_menu_buttons.html.erb

@@ -0,0 +1,15 @@
+<%= render(Primer::OpenProject::SubHeader.new) do |component| %>
+  <% component.with_filter_input(name: "filter", label: "Filter") %>
+
+  <% component.with_action_component do %>
+    <%= render Primer::Alpha::ActionMenu.new(menu_id: "menu-1") do |menu|
+      menu.with_show_button(icon: :"op-kebab-vertical", "aria-label": "Menu")
+      menu.with_item(label: "Subitem 1") do |item|
+        item.with_leading_visual_icon(icon: :paste)
+      end
+      menu.with_item(label: "Subitem 2") do |item|
+        item.with_leading_visual_icon(icon: :log)
+      end
+    end  %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/sub_header_preview/bottom_pane.html.erb

@@ -0,0 +1,12 @@
+<%= render(Primer::OpenProject::SubHeader.new) do |component| %>
+  <% component.with_filter_input(name: "filter", label: "Filter") %>
+  <% component.with_filter_component do %>
+    <!-- Render any custom filter component that you want -->
+    <%= render(Primer::Beta::IconButton.new(icon: "filter", "aria-label": "Filter")) %>
+  <% end %>
+  <% component.with_bottom_pane_component do %>
+    <!-- Render any custom component that you want -->
+    <!-- The component will be shown in a second row below the rest, spanning the whole width -->
+    <%= render(Primer::BaseComponent.new(tag: :div, bg: :accent, p: 3)) { 'Render any custom content here (e.g a filter area)' } %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/sub_header_preview/button_group.html.erb

@@ -0,0 +1,11 @@
+<%= render(Primer::OpenProject::SubHeader.new) do |component| %>
+  <% component.with_filter_input(name: "filter", label: "Filter") %>
+
+  <% component.with_action_component do %>
+    <%= render(Primer::Beta::ButtonGroup.new) do |group|
+      group.with_button { "Button 1" }
+      group.with_button { "Button 2" }
+      group.with_button { "Button 3" }
+    end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/sub_header_preview/custom_filter_button.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::OpenProject::SubHeader.new) do |component| %>
+  <% component.with_filter_input(name: "filter", label: "Filter") %>
+  <% component.with_filter_component do %>
+    <!-- Render any custom filter component that you want -->
+    <!-- Note, that you can pass an ID for the bottom pane if you need to access that area for further filter actions-->
+    <%= render(Primer::Beta::IconButton.new(icon: "filter", "aria-label": "Filter")) %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/sub_header_preview/dialog_buttons.html.erb

@@ -0,0 +1,12 @@
+<%= render(Primer::OpenProject::SubHeader.new) do |component| %>
+  <% component.with_filter_input(name: "filter", label: "Filter") %>
+
+  <% component.with_action_component do %>
+    <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: "Dialog")) do |d| %>
+      <% d.with_show_button { "Show Dialog" } %>
+      <% d.with_body do %>
+        Hello world!
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>