openproject-primer_view_components 0.31.0 → 0.32.0

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

@@ -250,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,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 31
+      MINOR = 32
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

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

data/previews/primer/open_project/sub_header_preview.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label SubHeader
+    class SubHeaderPreview < ViewComponent::Preview
+      # @label Playground
+      # @param show_filter_input toggle
+      # @param show_filter_button toggle
+      # @param show_action_button toggle
+      # @param text text
+      def playground(show_filter_input: true, show_filter_button: true, show_action_button: true, text: nil)
+        render(Primer::OpenProject::SubHeader.new) do |component|
+          component.with_filter_input(name: "filter", label: "Filter") if show_filter_input
+          component.with_filter_button do |button|
+            button.with_trailing_visual_counter(count: "15")
+            "Filter"
+          end if show_filter_button
+
+          component.with_text { text } unless text.nil?
+
+          component.with_action_button(scheme: :primary) do |button|
+              button.with_leading_visual_icon(icon: :plus)
+              "Create"
+          end if show_action_button
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::OpenProject::SubHeader.new) do |component|
+          component.with_filter_input(name: "filter", label: "Filter")
+          component.with_filter_button do |button|
+            button.with_trailing_visual_counter(count: "15")
+            "Filter"
+          end
+
+          component.with_action_button(scheme: :primary)  do |button|
+            button.with_leading_visual_icon(icon: :plus)
+            "Create"
+          end
+        end
+      end
+
+      # @label With ActionMenu
+      def action_menu_buttons
+        render_with_template(locals: {})
+      end
+
+      # @label With Dialog
+      def dialog_buttons
+        render_with_template(locals: {})
+      end
+
+      # @label With ButtonGroup
+      def button_group
+        render_with_template(locals: {})
+      end
+
+      # @label With custom filter button
+      def custom_filter_button
+        render_with_template(locals: {})
+      end
+
+      # @label With a custom area below
+      def bottom_pane
+        render_with_template(locals: {})
+      end
+
+      # @label With Text in the middle
+      def text
+        render(Primer::OpenProject::SubHeader.new) do |component|
+          component.with_filter_input(name: "filter", label: "Filter")
+
+          component.with_text { "Hello world!" }
+
+          component.with_action_button(scheme: :primary)  do |button|
+            button.with_leading_visual_icon(icon: :plus)
+            "Create"
+          end
+        end
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -5023,6 +5023,22 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::SubHeader",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectSubHeader",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::ZenModeButton",
     "status": "open_project",

data/static/audited_at.json

@@ -123,6 +123,7 @@
   "Primer::OpenProject::PageHeader": "",
   "Primer::OpenProject::PageHeader::Dialog": "",
   "Primer::OpenProject::PageHeader::Menu": "",
+  "Primer::OpenProject::SubHeader": "",
   "Primer::OpenProject::ZenModeButton": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""

data/static/classes.json

@@ -555,6 +555,24 @@
   "State--small": [
     "Primer::Beta::State"
   ],
+  "SubHeader": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-bottomPane": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-filterContainer": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-leftPane": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-middlePane": [
+    "Primer::OpenProject::SubHeader"
+  ],
+  "SubHeader-rightPane": [
+    "Primer::OpenProject::SubHeader"
+  ],
   "Subhead": [
     "Primer::Beta::Subhead"
   ],

data/static/constants.json

@@ -1473,6 +1473,10 @@
   },
   "Primer::OpenProject::PageHeader::Menu": {
   },
+  "Primer::OpenProject::SubHeader": {
+    "HIDDEN_FILTER_TARGET_SELECTOR": "sub-header.hiddenItemsOnExpandedFilter",
+    "SHOWN_FILTER_TARGET_SELECTOR": "sub-header.shownItemsOnExpandedFilter"
+  },
   "Primer::OpenProject::ZenModeButton": {
     "ZEN_MODE_BUTTON_ICON": "screen-full",
     "ZEN_MODE_BUTTON_LABEL": "Translation missing: en.label_zen_mode"