openproject-primer_view_components 0.30.1 → 0.32.0

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

@@ -429,6 +429,9 @@
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader--noBorder": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
@@ -447,6 +450,9 @@
   "PageHeader-parentLink": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-tabNav": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-title": [
     "Primer::OpenProject::PageHeader"
   ],
@@ -549,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"

data/static/info_arch.json

@@ -16692,6 +16692,18 @@
             "description": "{{link_to_system_arguments_docs}}"
           }
         ]
+      },
+      {
+        "name": "tab_nav",
+        "description": "Optional tabs nav at the bottom of the page header",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
       }
     ],
     "methods": [
@@ -16840,6 +16852,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -16926,6 +16951,177 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::SubHeader",
+    "description": "The SubHeader contains specific actions to modify the page content below, e.g a filter button or a create button\nIt should not be used stand alone, but in combination with a PageHeader, either as a direct sibling or as part of a tab content",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "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": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+      {
+        "name": "actions",
+        "description": "A button or custom content that will render on the right-hand side of the component.\n\nTo render a button, call the `with_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}.\n\nTo render custom content, call the `with_button_component` method and pass a block that returns HTML.",
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "filter_input",
+        "description": null,
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "filter_button",
+        "description": "A button or custom content that will render on the left-hand side of the component, next to the filter input.\n\nTo render a button, call the `with_filter_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}.\n\nTo render custom content, call the `with_filter_component` method and pass a block that returns HTML.",
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "text",
+        "description": null,
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "bottom_pane_component",
+        "description": "A slot for a generic component which will be shown in a second row below the rest, spanning the whole width",
+        "parameters": [
+
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/sub_header/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/default",
+        "name": "default",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/action_menu_buttons",
+        "name": "action_menu_buttons",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/dialog_buttons",
+        "name": "dialog_buttons",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/button_group",
+        "name": "button_group",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/custom_filter_button",
+        "name": "custom_filter_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/bottom_pane",
+        "name": "bottom_pane",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/text",
+        "name": "text",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::ZenModeButton",
     "description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",

data/static/previews.json

@@ -5390,6 +5390,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -6297,6 +6310,118 @@
       }
     ]
   },
+  {
+    "name": "sub_header",
+    "component": "OpenProject::SubHeader",
+    "status": "open_project",
+    "lookup_path": "primer/open_project/sub_header",
+    "examples": [
+      {
+        "preview_path": "primer/open_project/sub_header/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/default",
+        "name": "default",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/action_menu_buttons",
+        "name": "action_menu_buttons",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/dialog_buttons",
+        "name": "dialog_buttons",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/button_group",
+        "name": "button_group",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/custom_filter_button",
+        "name": "custom_filter_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/bottom_pane",
+        "name": "bottom_pane",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/text",
+        "name": "text",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "subhead",
     "component": "Subhead",

data/static/statuses.json

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.30.1
+  version: 0.32.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-15 00:00:00.000000000 Z
+date: 2024-05-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -103,6 +103,7 @@ files:
 - app/assets/javascripts/app/components/primer/dialog_helper.d.ts
 - app/assets/javascripts/app/components/primer/focus_group.d.ts
 - app/assets/javascripts/app/components/primer/open_project/page_header_element.d.ts
+- app/assets/javascripts/app/components/primer/open_project/sub_header_element.d.ts
 - app/assets/javascripts/app/components/primer/open_project/zen_mode_button.d.ts
 - app/assets/javascripts/app/components/primer/primer.d.ts
 - app/assets/javascripts/app/components/primer/scrollable_region.d.ts
@@ -499,6 +500,15 @@ files:
 - app/components/primer/open_project/page_header_element.d.ts
 - app/components/primer/open_project/page_header_element.js
 - app/components/primer/open_project/page_header_element.ts
+- app/components/primer/open_project/sub_header.css
+- app/components/primer/open_project/sub_header.css.json
+- app/components/primer/open_project/sub_header.css.map
+- app/components/primer/open_project/sub_header.html.erb
+- app/components/primer/open_project/sub_header.pcss
+- app/components/primer/open_project/sub_header.rb
+- app/components/primer/open_project/sub_header_element.d.ts
+- app/components/primer/open_project/sub_header_element.js
+- app/components/primer/open_project/sub_header_element.ts
 - app/components/primer/open_project/zen_mode_button.d.ts
 - app/components/primer/open_project/zen_mode_button.html.erb
 - app/components/primer/open_project/zen_mode_button.js
@@ -929,6 +939,12 @@ files:
 - 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/playground.html.erb
+- previews/primer/open_project/sub_header_preview.rb
+- previews/primer/open_project/sub_header_preview/action_menu_buttons.html.erb
+- previews/primer/open_project/sub_header_preview/bottom_pane.html.erb
+- previews/primer/open_project/sub_header_preview/button_group.html.erb
+- previews/primer/open_project/sub_header_preview/custom_filter_button.html.erb
+- previews/primer/open_project/sub_header_preview/dialog_buttons.html.erb
 - previews/primer/open_project/zen_mode_button_preview.rb
 - previews/primer/url_helpers.rb
 - static/arguments.json